Bannière animée Vous devez vous préparer une bannière dans psp

Transcription

FlashArt
Page 1 sur 6
Bannière animée
Vous devez vous préparer une bannière dans psp ou photoshop et une fois
terminée, fusionner les calques visibles. Duppliquer votre bannière et avec le
pinceau éclaircissant (opacité à 10 ou 15) passez sur certaines zones de votre
image afin de lui donner un résultat de luminance...une fois qu'elle sera animée
dans flash. Je vous met ici les 2 bannières que j'ai fait...vous pourrez alors vous
pratiquer avec celle-ci.

Ouvrez un nouveau document dans Flash. Modification, Document et mettre la
largeur à 468px et la hauteur à 60px (la grandeur de la bannière). Fichier,
importer dans la bibliothèque vos 2 images. Prenez la bannière1 et faites un
glisser déposer sur la scène. Renommez votre calque1 pour "banniere".
CTRL+ALT+2 et CTRL+ALT+5 pour aligner le tout correctement. Avec la flèche de
sélection, cliquez sur votre bannière et faire F8, convertir en clip et laissez le nom
à Symbole1 puis cliquez sur ok. Double-cliquez sur votre bannière afin d'éditer le
movieclip ou encore faites un clic droit et choisir modifier.
Dans votre clip, faites F7 sur le frame2 pour ajouter une image clé vide :
Prenez votre bannière2 et faites un glisser déposer sur la scène du clip. Pour la
positionner correctement, cliquez sur le frame1 et sur votre bannière. Regardez la
position X et Y du panneau des propriétés. Cliquez sur le frame2 puis sur votre
bannière et mettre la position X et Y exactement pareil. Cliquez sur Sequence1
pour revenir à la scène principale.
Ajoutez un nouveau calque que vous nommerez bille et placez vous sur le frame1
| Avec Prizee, joue et repars avec une Peugeot 107 ! Joue et gagne chaque semaine de nouveaux
http://flashart.hbg.fr/ban/ban.htm
14/08/2009
FlashArt
Page 2 sur 6
de ce calque. Prenez l'outil pinceau, choisir une taille (voir encadré rouge) ainsi
qu'une couleur (j'ai pris blanc) et faites un point sur votre bannière :
Cliquez sur le frame1 du calque bille afin de sélectionner votre point de couleur et
faites un clic droit. Choisir Créer une interpolation de mouvement puis faites F6 au
frame 45.
Placez vous sur le frame 65 du calque bannière et faites F5 :
Placez vous sur le calque bille et ajoutez un guide de mouvement en cliquant sur
cet icone :
14/08/2009
FlashArt
Page 3 sur 6
Prenez l'outil crayon et choisir le mode désiré... ici j'ai pris Redresser pour avoir
des lignes droites
Tracez votre ligne :
Positionnez vous sur le frame1 du calque bille et prenez la flèche de sélection.
Sélectionnez votre bille et déplacez-la au début ou à la fin de votre ligne
dessinée :
14/08/2009
FlashArt
Page 4 sur 6
Positionnez vous ensuite sur le frame 45 du calque bille et toujours avec la flèche,
cliquez sur votre bille et déplacez à l'autre extrémité de la ligne dessinée :
Placez vous sur le calque Guide : bille et ajoutez un nouveau calque que vous
nommerez texte. Inscrire le texte désiré sur votre bannière (texte doit être
statique dans le panneau des propriétés). Si vous n'utilisez pas une police de
caractère de Windows, faites un break appart (CTRL+B) ou alors il faut inclure la
police dans votre bibliothèque comme vous l'avez vu dans un précédent tutoriel.
Ajoutez un nouveau calque que vous nommerez bouton, prendre l'outil rectangle.
Peu importe la couleur, enlevez toutefois la couleur de trait et tracez un rectangle
qui couvrira toute votre bannière :
14/08/2009
FlashArt
Page 5 sur 6
Avec la flèche de sélection, cliquez sur votre rectangle. Faites F8 et convertir en
graphique. Dans le panneau des propriétés, choisir couleur Alpha à 0% afin que
votre rectangle soit transparent. Faites F8 pour convertir en bouton et dans le
panneau des actions, ajoutez ce code :
on(release) {
getURL("http://monsite.com", "_blank");
}
Prenez soin de mettre l'url de votre site ;-) Voilà c'est terminé!

----------------------------------------
Cliquez ici pour téléchargez le tutoriel vidéo
(mot de passe=flashart)
Vous devrez décompresser le fichier et ouvrez ensuite le fichier "ban.html" afin de
visionner le tutoriel.
Le but de ce tutoriel est de vous familiariser avec les guides de mouvement et les
movie clip. Deux animations sur une même scène mais bien différentes...une qui
joue en continu et l'autre par intermittence. Gardez vos fichiers en réserve, nous
verrons prochainement l'animation sur le texte de cette bannière.
Voici le code pour mettre un lien sur votre bannière tel que vu dans le vidéo :
on(release) {
getURL("http://monsite.com", "_blank");
}
14/08/2009
FlashArt
Page 6 sur 6

14/08/2009