Faire une interpolation de mouvement et placer un bouton PLAY pour lancer l'animation.

Dans un 1er temps nous allons apprendre à déplacer une image dans une animation et à faire varier sa taille, puis, ensuite, à placer un bouton dans l'animation pour la lancer

L'objectif:

Le préalable

• Préparer 2 photos dans photoshop l'une sert de fond , l'autre en GIF est l'image qu'on déplace

. image 1

image 2

(J'en profite pour remercier Alain du forum I'Magie qui m'a fourni la photo originale

Les étapes successives nécessaires seront :

1. La création d'un nouveau document flash contenant nos deux images
2. La création de l'interpolation de mouvement pour faire glisser l'oie
3. La création du bouton qui permet de déclencher l'animation

Prêt? Allons-y!

Début du tuto

............Ouvrir FLASH.............;-)

1.Création du document qui contient les images

Donner à notre fichier les dimensions de la photo de fond

• Ces paramètres sont à fournir dans la partie "propriétes"
• l'enregistrer pour ne pas le perdre ;-)

(Ici une présentation succinte du tableau de bord du logiciel pour les "grands débutants")

.Insertion de notre image de fond

Pour cela se rendre dans le menu fichier/importer et parcourir l'ordi à la recherche de la photo de fond ( il est à noter qu'à la différence de la création de page WEB la photo n'a pas à être dans le même dossier que le fichier flash sur lequel vous travaillez , son emplacement n'a aucune importance)

on va l'aligner si cette fenetre n'est pas activée on l'active dans le menu fenetre /aligner ( ou son racourci crtl+K)

L'image de fond est en place on va la bloquer en cliquant sur le cadenas dans son calque , cela nous évitera de la déplacer par inadvertance ....ou maladresse

.Nous allons maintenant créer un calque supplémentaire qui accueillera notre gif d'oie

voir image"présentation tableau de bord" plus haut

et ci-contre

 

• On va maintenant importer notre gif dans la premiere image du calque 2

Cela crée une image clé pleine symbolisée par le rond noir

Remarque :

L'oie est au milieu , cela n'a pas d'importance à ce stade , on la laisse gentiment en place

2.Création de l'interpolation de mouvement

• Nous alons dupliquer chaque image clé des deux calques en se placant dessus dans le scénario et en faisant F6

  ou bien

  • Maintenant on a donc 4 images clés pleines (4 ronds noirs)

   

  • Pour créer l'interpolation de mouvemant on va se placer sur le calque de l'oie (le 2 donc) et, d'un clic droit, on va choisir dans le menu contextuel "créer une interpolation de mouvement". On le fait sur les 2 images.

  

  Cela a pour effet de "bleuir" les images clé (symbole de l'interpolation de mvt)

  Nous allons maintenant déplacer par un "cliquer/tirer" l'image n°2 de chaque calque pour la placer sur l'image 50

!!!!!!!!!!!!!!!! Assurez-vous que votre calque ciel est bien verouillé !!!!!!!!!!!!!

• On va se positionner sur le calque "oie " sur l'image 1 et à l'aide de l'outil flêche on va déplacer notre volatile voyageur à droite de l'image ("hors champ"), ce sera le point de départ de notre animation.
• Pour créer une illusion de perspective on va réduire la taille de l'oiseau afin de faire croire qu'il grossit en s'approchant :

grace à cet outil , et en tirant sur les poignées qui apparaissent

 

 

• On va se positionner sur le calque "oie " sur l'image 50 et à l'aide de l'outil flêche on va déplacer notre volatile voyageur à gauche de l'image ("hors champ"), ce sera le point d'arrivée de notre animation. On le redimensionne pour qu'il soit un peu plus gros.

L'animation proprement dite est faite ( si elle convient on verouille le calque "oie" ;-))si on la teste on obtient une animation qui tourne en boucle ce qui est crispant!

 

 

3.Création du bouton play

• On commence par se placer sur l'image 1 du ciel et "clic droit" choisir "action" : puis choisir l'action "stop" ce qui permet de ne pas jouer l'animation au démarrge.

 

• On va créer un nouveau calque qui accueillera ce bouton ( à noter que les calques se tirent les uns au-desuus des autres comme dans photoshop , que l'on peut les renommer, les masquer , les afficher , les vérouiller)

 

• Menu insertion /nouveau symbole /bouton



On nomme notre bouton , on atterrit sur un nouveau tableau de bord celui de la création de bouton

________

• Grace à l'outil texte ( un A) on écrit notre texte de bouton (pas obligatoirement un texte (une image, un dessin conviennent)); on l'aligne au centre . Nous venons de créer l'état haut de notre bouton (celui qui correspond à la souris en dehors du bouton )

________

• On se place sur l'image clé créée et on duplique cette image clé (F6) (1),puis on se place sur ce texte pour modifier son aspect(2) (ce sera l'état survol du bouton (quand la souris est dessus) Il est important de modifier son aspect pour faire comprendre la réactivité du bouton. On centre (3)On obtient donc un bouton plus gros (4)

• Notre bouton est prêt on peut si l'on veut ajouter un calque en dessous du texte et dessiner avec l'outil rectangle un fond (cela facilite le clic en augmentant la zone sensible)

On va maintenat le mettre en place dans notre animation

• Il faut auparavant retourner dans celle-ci en cliquant sur séquence 1

Nous sommes donc maintenant revenu sur le plan de travail principal

• Pour retrouver notre bouton, de façon à le déposer sur la scène, nous allons afficher la bibliothèque qui contient le matériel graphique ou sonore de l'animation , pour cela : touche F11 ou fenêtre /bibliothèque

• Une nouvelle fenêtre est apparue elle contient le bouton qu'on a créé précédemment , par glisser déposer vous allez le mettre sur la scène et le centrer quand il sera en place grâce à la fenêtre "aligner " utilisée pour le bouton .

• Le bouton est visible sur toute l'animation est si l'on souhaite qu'il disparaisse dès la deuxieme image on se rend sur son calque et à l'aide de la touche shift on va sélectionner toutes les images à supprimer , puis le faire d'un clic droit (supprimer les images)

  Il nous reste à créer l'action sur le bouton : fastoche!

• On se rend sur la scene on clique sur le bouton ; et d'un clic droit on choisit action /play

C'est prêt , on va le tester (menu contrôle /tester) et si ça convient on va finaliser le projet en enregistrant et en publiant (menu fichier/publier) ce qui créera le fichier .swf qui est le produit final capable d'être lu par les navigateurs

Le fichier .fla , lui , est celui qui est lu par flash et qu'il est possible de retravailler

A vous de jouer ....

Tuto réalisé avec les CSS grâce à Gérald du forum I'Magie

retour vers les autres tutos