Passer au contenu

Animez vos pages … sans Flash !

Une fois les pages créées, il faut les égayer un peu. Voici de quoi mettre un peu de mouvement sur votre site.

Envie de boutons interactifs et d’animations faciles à réaliser ? Un petit logiciel français et gratuit, E-Anim, vous permettra de créer facilement les vôtres et de les intégrer rapidement à votre site.

Installez E-Anim

Dans votre navigateur Internet, rendez-vous sur la page officielle d’E-Anim :
www.phildes.comDans la colonne de gauche, cliquez sur le lien Télécharger et enregistrez le fichier setup-e-anim.exe dans un dossier de votre disque dur puis double-cliquez sur cette icône pour démarrer
l’installation.Dans le dossier où vous avez installé E-Anim, vous trouverez un dossier intitulé !a_copier_sur_votre site. Affichez-en le contenu et, à l’aide de votre logiciel de transfert de fichiers habituel, placez le fichier
Readanim.jar qui s’y trouve sur le serveur de votre hébergeur, au même niveau que votre fichier intitulé index.html.

Créez votre première animation

E-anim renferme un didacticiel très complet qui explique tout son fonctionnement. Mais nous allons réaliser ensemble une animation très simple, composée d’une image mouvante qui déclenchera automatiquement l’envoi d’un courriel
à un destinataire prédéfini.Lancez E-Anim en cliquant, dans le menu Démarrer de Windows, sur e-anim503 puis sur Editeur e-anim.Notre animation va consister en un déplacement horizontal d’une image d’extraterrestre de 70 x 90 pixels que vous pouvez récupérer à l’adresse :
http://gif.eurogif.com/download.php?Fichier=alien01.gifDans le menu Projet, sélectionnez Dimensions… et entrez 300 pour la largeur et 90 pour la hauteur.Profitez-en pour renommer le projet de façon plus explicite. Cliquez ensuite sur le bouton Image de la barre d’outils (le neuvième en partant de la gauche) et sélectionnez l’image alien01.gifL’alien apparaît tout à gauche de la fenêtre principale. Dans la barre de temps, l’image étant toujours sélectionnée, cliquez au niveau de la valeur 15.Saisissez l’image en cliquant dessus avec le bouton gauche de la souris, et tout en maintenant le bouton enfoncé, déplacez-la pour l’amener à l’extrémité droite.Cliquez ensuite au niveau de la valeur 30 dans la barre de temps et replacez l’image à sa position initiale, tout à gauche.La barre de temps placée sur 0 et l’image de l’alien sélectionnée, cliquez sur le bouton Ajouter une action programmée (le second en partant de la droite). Dans la nouvelle fenêtre qui s’ouvre, cliquez
sur le bouton lien vers la page HTMLDans la zone de texte qui apparaît alors, tapez : mailto:votre_email@votre_ adresse.com.Désormais, cliquer sur l’image de l’alien lancera automatiquement l’ouverture de votre logiciel de messagerie pour l’envoi d’un courriel.

Finalisez l’animation

E-anim propose de nombreuses options pour personnaliser votre animation. Vous pouvez par exemple passer le fond en noir avec l’option Couleur de fond du menu Projet. Quand vous êtes satisfait,
enregistrez votre animation via le menu Projet.

Insérez l’animation dans vos pages

Ouvrez avec NVU le fichier HTML, ici index.html, où vous souhaitez situer l’animation. Placez à l’endroit voulu le texte [e-anim:alienmail] et enregistrez le fichier HTML.Dans E-Anim, cliquez sur le bouton Créer/modifier un fichier HTML (le quatrième bouton de la barre d’outils). Sélectionnez le fichier index.html que vous venez de modifier et cliquez sur
Enregistrer. La page HTMLa été modifiée et intègre désormais le code qui permettra d’afficher l’animation.Il vous suffit maintenant de mettre à jour le fichier HTML chez votre hébergeur et d’ajouter sur le site limage utilisée, alien01.gif.

🔴 Pour ne manquer aucune actualité de 01net, suivez-nous sur Google Actualités et WhatsApp.


Stéphane Viossat