Créer un menu d'accueil digne d'un DVD-vidéo

Imaginez : sur votre page d’accueil, une photo apparaît en fondu depuis le noir ; des boutons glissent au-dessus pour se positionner ; une musique de fond se joue automatiquement; une petite animation défile dans un angle, invitant à visiter votre vidéothèque personnelle… Tous ces effets sont réalisables à l’aide de la technologie d’animation interactive Flash, de Macromedia. Une technologie que vous pouvez mettre en ?”uvre avec Swish 2.01 (www.swishzone.com, 45 ? environ ; disponible en version d’évaluation totalement fonctionnelle pendant 15 jours). Sur la page d’accueil, cliquez sur le lien Français, puis suivez les étapes pour télécharger Swishzone 2.01. L’utilisation de ce logiciel, même dans sa version de démonstration, nécessite l’obtention d’un code d’activation délivré par l’éditeur via Internet. Il est donc nécessaire de bien suivre ses indications pour l’obtenir.

Bien préparer le scénario de son animation

Dans notre pas à pas, nous développons toutes les étapes nécessaires à la création d’une page d’accueil qui ressemblerait au menu interactif d’un DVD-vidéo. De plus, une petite animation donnera un aperçu de ce qui se cache derrière l’un des boutons du menu. Lorsque l’internaute cliquera sur les boutons, son navigateur ouvrira une nouvelle page Web. Nous vous expliquerons également comment faire en sorte qu’un clic sur un bouton du menu envoie l’internaute vers un sous-menu également animé avec Flash. Avant de commencer à utiliser Swish, prenez une feuille de papier et un stylo, et préparez le scénario de votre animation, à savoir : les différentes scènes présentées et la manière dont leurs éléments constitutifs fond de page, boutons, sons, etc. doivent apparaître et réagiraux actions de l’internaute. Dans le cas d’un menu interactif, une seule scène peut suffire. Cependant, vous pouvez construire plusieurs scènes qui s’enchaîneront à mesure des clics de l’internaute, comme autant de sous-menus. Préparez ensuite les sons, images et animations à intégrer dans votre menu interactif avec vos outils habituels.

Dessiner une page dynamique

1. Intégrez les éléments et programmez leur entrée en scène

A son lancement, Swish crée une animation vierge. Dans la fenêtre Film, à droite, activez l’onglet Film. Tapez, dans les champs Largeur et Hauteur, les dimensions prévues pour votre animation, 640 ?- 480 pixels dans notre exemple. Saisissez 25 (c’est le nombre d’images par seconde) dans le champ Vitesse de Frame pour avoir une animation fluide à l’écran.

2. Faites apparaître l’image de fond

Déroulez le menu Insérer, Image. Sélectionnez votre image de fond d’animation. Cliquez sur Ouvrir. Faites un clic droit sur l’image. Dans le menu contextuel qui apparaît, sélectionnez Effets, Apparaître Progressivement. Dans le champ Durée, tapez 50 pour faire apparaître votre image de fond en 50 images, soit en 2 secondes. Cliquez sur Ferme.

3. Ajoutez un titre

Déroulez le menu Insérer, Image. Sélectionnez l’image contenant le titre de votre animation, puis cliquez sur Ouvrir. Optez pour les commandes Voir, Montrer la grille. Aidez-vous de la grille pour placer, avec la souris, votre titre à l’endroit de votre choix. Placez le pointeur de la souris au-dessus de votre titre, faites un clic droit et, dans le menu qui s’affiche, sélectionnez Effet, Glisser vers l’intérieur, A partir de la gauche. La fenêtre Paramètres Glisser… s’ouvre. Dans le champ Durée, tapez 25 : votre titre viendra de l’extérieur gauche de l’animation pour se positionner là où vous l’avez défini. Cet effet durera 1 seconde. Cliquez sur Ferme. Reproduisez l’opération pour chacune des images que vous voulez ajouter à votre animation.

4. Intégrez un Gif animé

Déroulez le menu Insérer, Contenu. Dans la liste Fichiers de type, optez pour GIF Image (*.gif). Sélectionnez, par exemple, le fichier flyer.gif créé précédemment puis cliquez sur Ouvrir. Cliquez sur Sélectionner toutes les frames (A), puis cliquez sur Importer. Positionnez votre animation à la souris dans votre animation Flash. Si vous le souhaitez, redimensionnez-la en faisant glisser, à la souris, l’un des carrés placés dans les angles de l’image. Une succession d’images stockée dans une animation peut vous permettre d’illustrer efficacement un bouton (une image) de façon à montrer ce qui se passera quand vous cliquerez dessus. Dans la fenêtre Résumé, cliquez sur flyer.gif du bouton droit de la souris pour dérouler le menu local. Sélectionnez Effet, Blur. Cliquez sur Ferme. Votre animation sera accompagnée d’un effet de flou latéral durant sa lecture. Idéal pour renforcer un côté psychédélique! Faites à nouveau un clic droit sur Flyer.gif et sélectionnez Action, Précharger Contenu pour permettre le téléchargement complet de l’animation sur le PC de votre visiteur avant que sa lecture ne commence. Vous éviterez ainsi d’éventuelles saccades liées aux lenteurs de connexion.

5. Choisissez des effets spéciaux

Par défaut, Swish enchaîne les effets d’apparition les uns après les autres. Utilisez la fenêtre de chronologie (une sorte de partition placée en haut de l’écran) pour définir précisément le rythme des entrées en scène.

Avec la souris, déplacez simplement vers la gauche ou la droite les rectangles représentant les effets appliqués aux différents éléments de la page. Lorsqu’un effet est sélectionné à la souris, son nom est surligné dans la liste des éléments de la fenêtre Résumé. Dans notre exemple, le titre glisse de l’extérieur vers la gauche, après l’apparition de l’image de fond. Les boutons glissent à leur tour vers l’intérieur, au-dessus de l’image de fond, simultanément, pour que leur placement définitif soit synchronisé avec celui du titre (A). Sélectionnez l’objet Scène 1 dans la fenêtre chronologie. Placez le pointeur de la souris sur la colonne placée juste après la fin des différents effets. D’un clic droit de souris, déroulez le menu local et sélectionnez Stopper. Ainsi, la lecture de l’animation sera interrompue dès que tous les effets d’apparition se seront succédé. A défaut, ils seraient rejoués en boucle indéfiniment.

6. Faites jouer un son pendant l’affichage du menu

Dans la fenêtre Résumé, faites un clic droit sur l’objet Scène 1. Sélectionnez Evénement, A la Frame. Dans la fenêtre Actions, tapez, dans le champ A la Frame, le numéro de l’image au cours de laquelle vous souhaitez que le son commence à être joué. Cliquez sur Ajouter Action et sélectionnez Lire Son. Cliquez sur le bouton Importer et sélectionnez le fichier audio que vous avez prévu en bruit de fond pour votre page (ce doit être un fichier au format Wav ou MP3) et validez par OK. Sélectionnez ensuite le son que vous avez choisi dans le cadre Contenu de Film1 pour l’associer à l’action créée précédemment (A). Vous devez prévoir un bouton pour que vos visiteurs puissent stopper la musique… Sélectionnez le bouton en question (ce peut être une image quelconque). Dans la fenêtre de droite, activez l’onglet Actions. Cliquez sur Ajouter Evénement. Sélectionnez Lorsqu’on presse. Cliquez sur Ajouter Action. Optez pour Stopper Son. Dans la partie inférieure de la fenêtre, choisissez le son qui vous sert de bruit de fond.

7. Facilitez l’accès à une autre page Web

Donnez à une image, qui fera office de bouton, la faculté d’emmener votre internaute vers une autre page Web quand il clique dessus. Pour cela, sélectionnez le bouton concerné. Dans la fenêtre de droite, activez l’onglet Actions. Cliquez sur Ajouter Evénement. Sélectionnez Lorsqu’on relâche. Cliquez sur Ajouter Action. Sélectionnez Aller à l’URL (A). Dans le champ URL, tapez l’adresse de la page où vous souhaitez envoyer votre visiteur. Cliquez sur le triangle à droite du champ Cible. Optez pour _self afin que la navigation se poursuive dans la même page Web ; _blank pour ouvrir une nouvelle page ; _top pour que l’affichage ait lieu dans la fenêtre entière du navigateur dans le cas où votre animation est intégrée à un cadre (FRAME) ; ou _parent pour que la navigation s’effectue dans le cadre parent de celui qui contient l’animation actuelle.

8. Ouvrez un sous-menu

Dans la fenêtre Résumé, cliquez sur Insérer et sélectionnez Scène. Construisez cette nouvelle scène de la même manière que la première. Dans la première scène, sélectionnez le bouton que vous souhaitez utiliser pour diriger l’internaute vers votre sous-menu. Dans la fenêtre de droite, activez l’onglet Actions. Cliquez sur Ajouter Evénement, choisissez Lorsquon relâche, cliquez sur Ajouter Action et sélectionnez Aller à la Frame (B). Laissez 0 dans le champ Nombre du cadre Frame pour commencer la lecture de la seconde scène dès son début. Cliquez sur la liste à droite de Scène et sélectionnez Scène 2, la nouvelle scène que vous venez de créer (B).

9. Intégrez votre création à votre page HTML

Une fois votre menu prêt, déroulez le menu Fichier, Exporter. Sélectionnez SWF (A). Enregistrez votre animation sur le Bureau sous le nom Menu.swf. Intégrez les lignes du listing ci-contre (listing 3) à une page Web que vous nommerez Index.htm, juste après la ligne . Copiez ensuite les fichiers menu.swf et index.htm dans votre espace Web personnel, dans le même dossier que la page Index.htm. Et… savourez !

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

La rédaction