C’est un grand classique : offrir une belle enseigne à son site personnel. Elle comportera un nom, un dessin et, petit raffinement, quatre boutons dont chacun ouvrira une page Web différente lorsqu’on cliquera dessus. Ce premier contact avec Swish va nous permettre de passer en revue les différents effets sur les textes et les actions avec la souris. Bien entendu, à vous d’accommoder notre exemple selon vos goûts.Avant de commencer, créez un dossier sur votre disque dur pour y ranger différents éléments. Vous y enregistrerez les fichiers d’animation ainsi que les images, les sons et des pages Web dont vous aurez besoin pour suivre ce mode d’emploi. Et maintenant, démarrez Swish !
Etape 1 : définissez les paramètres de l’animation
Dans la partie droite de la fenêtre de Swish, cliquez sur l’onglet Film. Les cases figurant dans la boîte permettent de régler les paramètres généraux de l’animation. Tapez 680 dans la case Largeur, et 120 dans la case Hauteur. Décochez la case devant Répéter prévisualisation cela évitera les effets de répétition désagréables quand vous jouerez l’animation :Cliquez sur la case Couleur d’arr.Pl, puis sur la couleur blanche (ou tapez FF dans chacune des trois cases R, V et B) :
Etape 2 : créez et placez un objet
1 Déroulez le menu Insérer et cliquez sur l’option Texte. Aussitôt, un petit rectangle muni de poignées apparaît au centre de la bannière. Félicitations : vous venez de créer votre premier objet !2 Dans la partie droite de l’interface, remplacez le mot texte par Aquarium. Il s’affiche aussitôt dans l’animation. Choisissez une couleur bleu clair en cliquant sur le bouton de couleur. Pour l’agrandir, tirez avec la souris sur les poignées autour du mot. Remarquez que Swish a converti le nom de l’objet dans la partie gauche.3 Nous allons copier cet objet (le dupliquer) afin de créer un effet de relief. Cliquez avec le bouton droit sur le nom dans la liste de gauche, et choisissez Copier l’objet. Cliquez de nouveau avec le bouton droit, et choisissez cette fois Coller l’objet. Un deuxième nom, Aquarium, apparaît. Cliquez dessus pour le rendre actif. Dans la partie droite (celle des paramètres), choisissez un bleu foncé. Dans la partie centrale, cliquez sur le mot et déplacez-le légèrement vers le bas à droite afin de donner un effet de relief.
Etape 3 : ajoutez des effets d’animation
C’est la partie la plus étonnante de Swish, dans laquelle vous allez pouvoir donner libre cours à votre imagination. Ici, nous allons placer un effet d’apparition de haut en bas pour le premier objet Aquarium et un effet ‘ blur ‘ (flou) pour l’autre. Les manipulations de cette étape sont génériques : elles s’appliquent à d’autres effets.1 Cliquez avec le bouton droit sur le nom de l’objet Aquarium le plus haut dans la liste. Choisissez successivement les options Effet, Glisser vers l’intérieur et A partir du haut. Dans le panneau qui s’affiche, tapez 12 à la place de 10 :Pourquoi 12 ? Cette valeur permet de se caler sur le nombre d’images par seconde de l’animation. Ainsi, l’effet s’effectuera en 1 seconde.Cliquez ensuite sur le bouton Fermer, en haut à droite du panneau.2 Pour voir l’effet sans attendre la fin de la création de l’animation, déroulez le menu Contrôler et sélectionnez Lire scène. Le texte ‘ Aquarium ‘ en arrière-plan doit sembler tomber du haut de la bannière. Dans le menu Contrôler, cliquez sur Stopper.Remarque : Swish propose des barres de boutons dont les actions sont équivalentes aux options des menus, mais ici, pour simplifier la compréhension, nous choisissons les menus.3 Passons au second effet. Cliquez sur le nom du second objet ‘ Aquarium ‘. Répétez les manipulations du point 1 de cette étape mais, cette fois, choisissez Effet puis directement l’option Blur. Dans le panneau, changez la valeur inscrite par 12 (comme pour le premier effet). Cliquez sur Fermer et relancez l’animation, pour voir.Remarques et astuces : Quand vous avez créé un effet sur un objet, sa durée est représentée dans la ligne temporelle sous forme d’un rectangle contenant le nom de l’effet.Vous pouvez allonger la durée avec la souris en plaçant le pointeur sur le bord droit et en tirant. Vous pouvez aussi déplacer l’effet sur la ligne de temps, par exemple pour qu’il se déclenche plus tard dans l’animation. Enfin, un clic sur le bouton droit de la souris affiche un menu permettant de réaliser des actions telles que copier, supprimer et voir les propriétés de l’effet. Pensez à les utiliser !Enregistrez l’animation régulièrement, le mieux étant de faire une sauvegarde avant d’appliquer un nouvel effet. Cela évite les mauvaises surprises.
Etape 4 : dessinez un objet
Voilà encore une possibilité très intéressante de Swish : vous pouvez créer directement des objets vectoriels à l’aide d’outils semblables à ceux des logiciels de dessin. Dans notre exemple, nous allons tracer un poisson très simplifié.1 Dans les outils de la barre appelée Rendu, cliquez sur l’icône de l’outil Bezier (pour repérer les noms des outils, survolez les icônes avec le pointeur de la souris : les noms apparaissent).2 Dans la partie de la bannière à droite du mot Aquarium, tracez à la souris une forme de poisson en cliquant une fois pour définir chaque nouveau segment. Double-cliquez pour fermer la forme et arrêter le dessin.Remarque : si vous n’êtes vraiment pas doué pour le dessin, mieux vaut ne pas vous acharner. Il existe en effet un autre moyen de placer une image, que nous détaillerons un peu plus loin.3 Dans la fenêtre des paramètres appelée Forme, à droite de celle-ci, vous pouvez définir le style de dessin. Ici, nous avons choisi l’option Aucun dans la boîte de sélection Ligne, et Inclinaison radiale dans Remplir à vous d’essayer différentes variantes. Donnez enfin un nom à ce nouvel objet, par exemple poisson.
Etape 5 : créez des boutons de navigation
La partie inférieure de la bannière peut utilement accueillir plusieurs boutons à cliquer, chacun donnant accès à une page Web différente. Avec Swish, c’est très facile à réaliser. Pourquoi s’en priver ?1 Avant de continuer, enregistrez l’animation en cours et fermez (ou réduisez) la fenêtre de Swish. En effet, il vous faut créer une page Web pour que l’action de cliquer sur l’objet ne tombe pas dans le vide.Cliquez sur le menu Démarrer de Windows, puis sur Programmes, Accessoires et Bloc-notes. Dans la fenêtre qui apparaît, tapez une phrase quelconque par exemple La page des poissons. Cliquez sur Enregistrez-sous.Attention, dans la boîte Type, choisissez l’option Tous les fichiers et donnez le nom poissons.htm (le .htm est très important !).N’oubliez surtout pas de choisir comme emplacement d’enregistrement le dossier que vous avez créé à cet effet pour les animations, et cliquez sur le bouton Enregistrer.2 Revenez dans Swish et ouvrez votre animation. Vous devez maintenant refaire les manipulations décrites dans la partie ‘ Créez et placez un objet ‘, mais à cette différence près que le texte ‘ Poissons ‘ sera placé sous le titre ‘ Aquarium ‘, de façon à ressembler à un bouton de menu. Créez d’autres objets texte : ‘ Entretien ‘ et ‘ Conseils ‘. Dans la fenêtre des noms d’objets, cliquez sur l’objet poissons.Note : dans le menu Insérer de Swish, vous remarquerez la présence de l’option Bouton. Elle ne fonctionne pas correctement, c’est pourquoi il est préférable de passer par la création d’un objet Texte.3 Dans la fenêtre des paramètres, à droite, cliquez sur l’onglet Actions. C’est ici que nous allons pouvoir indiquer quelle action doit être réalisée lorsque l’internaute clique sur le mot Poissons. Cliquez sur le bouton Ajoutez Evéne… puis, parmi les options, choisissez Lorsqu’on Relâche… :Cliquez de nouveau sur le bouton Ajoutez Evéne… et, cette fois, choisissez Allez à l’URL. Il vous reste simplement à taper dans la zone URL le nom de la page Web, en l’occurrence la ‘ fausse ‘ page que nous avons créée, ‘ poissons.htm ‘, et à choisir _self dans la zone Cible.A ce stade, la création de notre bannière est achevée. Sachez que vous pouvez la modifier très facilement. Quelques secondes suffisent à lui donner un tout autre aspect en changeant les polices de caractères et l’emplacement des objets.
Etape 6 : affichez l’animation dans une page Web
Swish propose trois façons différentes d’enregistrer votre animation définitive.Tester l’animation immédiatement dans le navigateur (Swish crée une page Web temporaire contenant le film) : pour cela, déroulez le menu Fichier, choisissez les options Tester puis Dans le navigateur. En quelques secondes, la page s’affiche. Mais cette méthode n’est conseillée que pour se faire une idée du résultat et corriger l’animation.Créer un fichier d’animation : quand on utilise les commandes Enregistrer ou Enregistrer sous…, Swish sauvegarde l’animation dans son format SWI. Cela permet de rouvrir plus tard le fichier dans Swish pour le compléter ou le modifier. Mais une animation en SWI ne peut pas, en tant que telle, être ‘ jouée ‘ dans une page Web. Il est nécessaire d’exporter (c’est-à-dire convertir et enregistrer) le film en format SWF, qui est le vrai format de Flash. Pour cela, déroulez le menu Fichier, sélectionnez les options Exporter puis SWF…, ce qui fait apparaître la fenêtre habituelle d’enregistrement de Windows.Une fois le fichier enregistré, il reste à l’inclure dans une page Web. Cette opération dépend du logiciel d’édition que vous utilisez, mais, dans tous les cas, le fichier SWF peut être inséré comme un composant, éventuellement dans un cadre de la page Web. Bien entendu, il est possible d’inclure plusieurs animations dans la même page.Créer une page Web contenant l’animation : cette méthode ressemble en apparence aux deux précédentes. Pas tout à fait : elle crée et enregistre à la fois le fichier d’animation au format SWF et une page Web exploitable. Déroulez le menu Fichier, sélectionnez l’option Exporter puis HTML… et enregistrez la page sur le disque dur.
🔴 Pour ne manquer aucune actualité de 01net, suivez-nous sur Google Actualités et WhatsApp.
