NoShade.net est en vente — Contactez nous si vous êtes intéressé
Le siteTutoriauxInterviews
icone RSS NoShade.net

Accueil » Tutoriaux » Flash Mx » Créer une bannière de pub animée

Créer une bannière de pub animée


Flash est connu pour deux principales caractéristiques. D'une part c'est un logiciel puissant d'animation, d'autre part, une usine à gaz de script. Les deux cumulés permettent des choses absolument fabuleuses!
Voyons ensemble les bases de l'animation sous Flash.



Commencez par créer un nouveau document, dans les modèles proposés vous pouvez choisir "Publicité > 468x60 (Banner)".
Nous allons travailler sur fond bleu. Via le menu "Modification > Document...", cliquez sur la vignette "Couleur d'arrière plan" et choisissez un joli bleu.

Avez l'outil texte, écrivons une première phrase en blanc :


En maintenant la touche Alt, cliquez sur votre première image clé dans la zone du scénario (en haut de votre écran) et glissez la jusqu'à la frame 10 :


Dupliquez l'image clé de la frame 10 vers la frame 35, puis de la frame 35, vers la frame 45.

[imgimgs/tutoriaux/91_fla/03.jpg[/img]
Pourquoi ces chiffres?
Nous travaillons à 12 images/secondes. 1 seconde = 12 frames donc.
Ce que nous allons faire, c'est faire arriver la première phrase de notre animation en à peine moins d'une seconde (de la frame 0 à 10), puis l'afficher environ 2 secondes (2 secondes x 12 frames = 24 frames, que nous avons arrondi à 25 frames), puis la faire disparaître en l'espace de 10 frames.
Le tout va donc durer environ trois secondes.
Notre indicateur de position, en haut en rouge placé sur la frame 0, nous allons déplacer vers le haut notre texte, hors du champ visible de notre bannière :


Si vous déplacez l'indicateur de position de gauche à droite, vous le voyez, en frame 0, le texte est hors cadre, sur toutes les autres frames, il est au milieu.
Il nous faut maintenant créer une interpolation entre les deux emplacements, le point de départ (en dehors de la bannière) et l'arrivée, au milieu de la bannière.
Pour cela, faites un clic droit entre les deux frames puis choisissez "Créer une interpolation de mouvement" :


Vous le voyez, maintenant une flèche de gauche à droite, sur fond bleu, indique une interpolation entre les deux frames :


Pour mieux voir le mouvement, déplacez l'indicateur de statut de gauche à droite entre les frames 0 et 10, le texte descends doucement vers son emplacement maintenant!

Créez une autre interpolation entre les images clés des frames 35 et 45 pour faire "partir" le texte de la même manière qu'il est arrivé... soit en le faisant monter, soit descendre... Puis sur la frame 45, descendez le texte, l'interpolation se fera.

Pour vérifier que tout va bien, vous pouvez lire l'animation. Pour ça, appuyez sur la touche entrée de votre clavier.
Créer maintenant un nouveau calque :


En frame 45, nous allons écrire une nouvelle phrase comme ceci par exemple :


Dans notre scénario, placez une image clé pour "fixer" le texte ici sur cette frame en faisant un clic droit sur la frame puis "Insérer une image clé" :


Ajoutez également une image clé en frame 35 sur ce calque, notre scénario ressemble maintenant à ça :


Le but va être de "faire arriver" la 2ème phrase en même temps que la première phrase s'en va.
En frame 0 et 35 du calque de la 2ème phrase de texte, nous allons donc déplacer la phrase "Tutoriaux en graphisme / code" hors du champ visible :


Créez ensuite une interpolation de mouvement pour faire arriver progressivement (et non pas d'un coup) la 2ème phrase de texte.

Allez hop, on fait un troisième calque et allons faire une troisième phrase de texte :


Renommons un peu nos trois calques : Phrase 1, Phrase 2 et Phrase 3. Pour cela, double-cliquez sur le nom du calque en question.


Créez une image clé en frame 55 sur le calque "Phrase 3" de manière à "figer" votre texte sur cette frame.
Créez une autre image clé en frame 45, sur celle-ci, déplacez le texte de la 3ème phrase vers la droite. Déplacez-le également sur la droite sur la première image clé du calque, soit en frame 0.
Créez maintenant une interpolation entre les images clés des frames 45 et 55 du calque "Phrase 3". Nous en sommes là dans notre scénario :


Seulement, à partir de la frame 46, la phrase 2 n'est plus visible, ce qui n'est pas souhaité!
Prolongez donc l'affichage des calques "Phrase 2" et "Phrase 3 jusqu'à la frame 75, puis jusqu'à la frame 85, où nous ferons disparaître ces deux phrases d'un coup. Vous pouvez déjà créer l'interpolation entre les frames 75 et 85 sur les calques "Phrase 2" et "Phrase 3. Notre scénario ressembles à ça :


En frame 85, faites maintenant disparaître les deux phrases de texte en les poussant vers le haut, la droite, ou autre.

Exportée en GIF, voici ce que donnes notre animation! :)


Vous avez maintenant les bases de l'animation sous Flash! Cherchez un peu comment tout cela fonctionne, faites des essais, vous arriverez vite à faire des choses sympathiques pour agrémenter des parties de votre site Internet, ou comme ici, à créer des bannières de publicité assez rapidement.
Le 14/11/2008 par Legibe

Partager ce tutoriel : icone Scoopeo icone del.icio.us icone Digg icone Facebook icone Technorati icone TwitThis icone Google icone Live icone MySpace icone Wikio icone Mixx icone Reddit icone NewsVine

Vous avez aimé ce tutoriel ?

Faites un don pour nous encourager à en écrire d'autres! :-)

Commentaires :

cyn a écrit :

bonjour,
à quoi correspond l'action avec la touche ALT au début du tuto ?
J'aime bien savoir ce que je fais...sinon je ne vais pas plus loin.

Legibe a écrit :

@cyn : salut! l'action avec la touche Alt consiste à dupliquer ton image clef en frame 1 vers la frame 10
ainsi tu as sur la frame 1 et 10 ton objet qui est à la même position

Comval a écrit :

Sympa ton tutoriel, mais j'ai une question subsidiaire, comment fais-ton pour mettre le lien ??!!

Legibe a écrit :

@comval : honnêtement je sais pas car je débute sous flash mais un peu de google t'aidera.
mais ça peut faire l'objet d'un tutoriel comme question en tout cas! :)

didrissi a écrit :

Bonjour,
Sympa cette animation; claire et assez jolie et captivante.
Merci.

didrissi a écrit :

Pour mettre un lien web dans l'animation flash, voici ce que dit le site du fabricant:
" Cette méthode utilise l'action getURL pour créer une nouvelle fenêtre de navigateur en ciblant une nouvelle fenêtre vide. Cette méthode est simple, fonctionne sur tous les navigateurs et ne requiert aucun code JavaScript. Cependant, elle ne permet aucun contrôle sur l'emplacement, la taille, les barres de défilement et les barres d'outils de la fenêtre.
Pour ajouter l'action getURL dans Flash :

1. Attribuez une action getURL à un bouton ou à une image-clé, en saisissant l'URL devant s'ouvrir dans la nouvelle fenêtre.
2. Définissez la « Fenêtre » sur _blank, comme suit :

3. Publiez l'animation Flash et la page HTML à l'aide du modèle HTML « Flash uniquement (par défaut) »."
http://www.adobe.com/fr/support/flash/ts/documents/popup_windows.htm

manga a écrit :

Bonjour,
Je débute aussi. Je n'arrive à attribuer une action geturl à une image-clé.
Je clique sur une image clé, puis j'écris :
getURL("http://www.exemple.fr", "_blank");

J'exporte en .swf pour tester, mais c'est toujours pas cliquable.

agreph a écrit :

Bonjour,
Je reste bloquer sur le deuxième texte. Je n'arrive pas à le faire apparaitre progressivement. Il apparait brusquement et superposé sur le premier qui disparait progressivement à son tour. Pouvez vous m'aider? Je suis un grand débutant avec flash cs3
Merci de votre aide

Legibe a écrit :

@agreph : tu as bien fait tes "interpolations" pourtant?

Moustik a écrit :

Attention pour ceux qui utilisent Flash CS4.

Il faut choisir "interpolation classique" et non "interpolation de mouvement"

therodenne a écrit :

j'ai pas tout compris comment ajouté les autre time line ??? les une sur les autre

Legibe a écrit :

@therodenne : il y a une timeline par "calque" en fait :-)
il faut donc créer un "calque" pour chaque élément que tu veux animer

FDB a écrit :

Bonjour,
Etant complètement nul, en encodage, je souhaiteria savoir si quelqu'un serait interessé par le fait de me faire une petite bannière publiciataire...

RekiemArt a écrit :

J'ai conscience que ce tuto s'adresse aux débutants, mais pour d'aussi simple interpolations de mouvements, pourquoi ne pas se servir des TWEENS ? ça allégerait pas mal l'animation en plus, surtout que ce genre de bannière publicitaire doit être le plus léger possible pour que son apparition soit instantanée

Alex a écrit :

Merci pour le tuto.
Ca maarche ...

jb a écrit :

Merci pour ce tuto vraiment bien fait et accessible!
Bravo!!!

hmida39 a écrit :

bonjour
vrement c intéressent ce tutoriel
merci pr vous

franck a écrit :

En tous cas c'est sympas de ta parts. Si tu peux nous aider de novice comme nous autre ce vraiment cool . veuillez m'excuser
si je viens ici se P.C.Q je ne pas de moyens pour le moment a apprendre le cours. Cet avec le fond du coeur je te remercie qui sait si je gagne un jour au lotto je ferrais un don.

encore merci

Davy Rodrigue a écrit :

Bonjour,

Je suis débutant en flash mais en suivant ce tutoriel j'ai pu avoir pu avoir l'effet que je voulais.

Merci

accro22 a écrit :

Juste ce qu'il me fallait pour ajuster un site de book. C'est clair, propre. merci pour le tuto

otshudiakoy a écrit :

wow, j'ai trouvé ce que je cherchais depuis deux mois, congratulation

lolo a écrit :

Merci beaucoup pour ce tutoriel très clair, cela permet aux néophytes d'apprendre les joies de l'animation.

Ajouter un commentaire sur ce tutoriel

Adobe, Macromedia, Flash MX, Bases de l'animation, Animer, Animé, Bannière, Publicité, Skyscraper, Web, Texte qui défile
Si vous avez remarqué une erreur (une faute ou tout autre type de problème que nous puissions corriger), n'hésitez pas à nous écrire!
Soyez aussi précis que possible et n'oubliez pas de nous indiquer le tutoriel dans lequel l'erreur se trouve. Merci!! :)