Aller au menu - Aller au contenu

[Plan du site] Vous êtes ici --- > Le Site du Zéro > Les tutoriels > Non-Officiels > Graphisme > Flash > les mouvements > Lecture du tutoriel

les mouvements

Vous vous apprêtez à lire un tutoriel rédigé par un membre de ce site. Malgré tout le soin que ce membre a pu apporter au tutoriel, nous ne pouvons pas garantir que les informations contenues sur cette page sont exactes à 100%. Merci de garder cela en tête lorsque vous lirez cette page ;o)
Avatar
Auteur : cysboy
Note : 18 / 20 (14 votes)
Visualisations : 36 480

Plus d'informations Plus d'informations
Puisque sur le site du Zero on reprend tout à Z, nous allons voir comment faire bouger un simple rond, sous Flash MX, de différentes façon:
- Le mouvement image par image.
- Les interpolations de mouvement.
- Le guides.
Sommaire du tutoriel :
Icône du chapitre

1/ Faire bouger un rond image par image

Etape 1:
Tout d' abord ouvrez Flash MX et commencez un nouveau document flash. Ensuite dessiner un rond de couleur plein (noir par exemple)sur le coté gauche et au centre de votre feuille,ce qui a pour conséquence directe la création d' une "image clé" dans l' image 1 de votre sénario.



Image utilisateur

Etape 2:
Maintenant cliqué sur l' image 2 de votre sénario et appuyez sur F6 pour créer une image clé semblable à la précédente.
Donc vu que l' effet final souhaité est un effet de mouvement nous allons déplacer ce deuxième rond sur notre feuille pour le placer en bas au centre.

Normalement votre rond doit être déjà séléctionné, vous n' avez plus qu' à le déplacer avec votre curseur (pour les déplacement votre pointeur , une fois sur l' objet dois ressembler à un pad de console de jeu, une fléche à quatre direction)


A ce stade nous avons donc deux images avec le même élément mais à un endroit différent.

Et pour finir l' effet de mouvement répétez l' étape 2, en cliquant sur l' image 3 du senario, faites F6 et déplaçez votre rond à droite et au centre de votre feuille.

Même opération en mettant le rond en haut et au centre de votre feuille. Au final vous devriez avoir ceci:
- Image 1:Image utilisateur
- Image 2:Image utilisateur
- Image 3:Image utilisateur
- Image 4:Image utilisateur

Maintenant vous n' avez plus qu' à tester votre animation en faisant CTRL+ENTREE (sur PC).

Alors? vous trouvez ça comment? :-°

Ah! je vois! c 'est un peu trop saccadé pour vous! Bon très bien on passe tout de suite aux interpolations de mouvement.

Les interpolations de mouvement

Comment ça à mes souhaits? Ah je vois c' est l' expresion qui vous rebute! vous inquiètez pas! On y arrive et vous ne pourrez plus vous en passer...


C 'est vrai que notre rond de tout à l' heure avait un peu tendance à boité... je vous propose d' y remédier tout de suite.

Pour commencez faite comme d' habitude:
- Ouvrez flash MX.
- Nouveau document flash.

Pour cette partie le manipuilations sont quasi identique que pour le mouvement image par image mis à part une ou deux petite manips en plus!!


Etape 1:

Refaites moi un joli rond comme précédemment,à gauche et au centre de la feuille, bien entendu sur l' image 1 de votre sénario.

Là vous allez prendre l' outil de selection, situé en haut à gauche et symboliser par une flèche noir, pour selectionner ce rond cliquer en haut à gauche du rond et revenez en bas à droite de ce même rond, comme pour l' inclure dans un recrangle. Maintenant que tout votre rond est selectionné faites comme suit:
- Appuyez sur F8 et nommer votre rond "rond" en choisissant comme comportement "clip".
Vous venez, sans le savoir, de créer un symbole ayant comme nom "rond" et comme comportement "clip".
Pourquoi faire ceci? ¨Pour une raison toute simple: seul les symboles peuvent utiliser des interpolations de mouvement!! Si vous faites tout ce qui suit mais que vous oublier de transformer votre forme en symbole... votre interpolation de mouvement de fonctionnera pas! flash ce contentera de lire les images clé mais pas ce qu' il y a entre.


Pour vérifier que votre forme est devenu un jeune et beau symbole c' est facile: maintenant il doit être entourer d' un cadre bleu avec un rond blanc au milieu!

Etape 2:

Vous avez votre symbole, on va donc le mettre en mouvement et nous allons faire le même mouvement que précédemment.

Image 1 = OK!

Allez sur l' image 10, cliquez dessus et appuyez sur F6, pour inclure le même symbole, puis déplacez le en bas au centre de la feuille comme ceci:Image utilisateur

Répétez la manipulation à l' image 20 en disposant le rond à droite au centre de la feuille, à l' image 30 en le mettant cette fois en haut et au centre, et là, petite subtilité, allez sur l' image 1 de votre sénario puis faites clic droit/copier les images et ensuite rendez-vous à l' image 40 ou vous faies clic droit/coller les images.

Cette dernière manipulation à pour but de terminer le mouvement de notre symbole en le faisant revenir à son point de départ! plus tard, au moment de tester votre animation essayez sans cette image clé et vous verrez la différence...


Etape 3:

Tout est mis en place pour mettre notre rond en mouvement, il suffit juste de lui inclure une petite fonction qui est = l' interpolation de mouvement. Pour se faire il y a deux methodes, voyons la plus simple pour commencez:
- Allez à l' image un et selecionner tout notre clip comme suit:Image utilisateur

Puis placez vous disons sur l' image 15 et faites clic droit/créer une interpolation de mouvement. Ce qui nous donne au final quelque chose comme çà:
Image utilisateur

Voilà votre rond est en mouvement, pour voir le résultat faites CTRL+ENTREE.

-La deuxième methode est plus longue: placez vous sur l' image cinq comme ceci:
Image utilisateur

Et faites clic droit/créer une interpolation de mouvement puis répétez cette étape aux image 15, 25, 35, pour tester faites CTRL+ENTREE.

Alors? c 'est un bon début! :p
Mais je sais ce que vous allez dire... :colere: on fait comment pour lui faire suivre un chemin précis à notre symbole?
Je ne vais pas vous faire mijotter plus longtemps, on y va! allez! ZOU!

Les guides

</couleur>
Ce petit tutaux à pour base ce que vous avez vu précédemment donc ne m' en veuillez pas si j' utilise un peu de vocabulaire... :-°
prêt... allez tous à vos starting block!!


Etape 1:

toujours pareil:
- Ouvrez flash MX.
- Nouveau document flash.
- Créez votre rond.
- Tranformez le en symbole (F8).
- Créez une image clé (F6) à l'image 30.

Et là on rentre dans le vif du sujet!

Etape 2:création du guide

Ici vous allez faire Insertion/senario/calque et vous aurez un nouveau calque (calque 2) au dessus du calque 1 comme suit:
Image utilisateur

Cliquez sur l' image 1 du calque 2 et prenez l' outils de dessin (le crayon sur votre gauche) puis dessinez une forme quelquonque (rond, carré, zig-zag) sur cette image. Maintenant allez sur le nom calque 2 et faites clic droit/propriété puis actionnez la commande "guide".

Votre guide et maintenant prêt à l' emploi, occupons-nous de notre rond.

Le fait de créer en premier lieu un calque 1 contenant 30 images permet, quand on crée le guide de le créer avec le même nombre d' image que le premier calque!


Etape 3:

Cliquer sur l' image 1 de votre calque 1 (votre rond), le rond doit avoir son carré bleu autour de lui (eh! oui! c' est un symbole...) et vous voyez le petit rond blanc au milieu, c' est avec ce rond blanc que l' on va positionner le rond sur le guide.
Mettez votre curseur sur le petit rond blanc de votre symbole, et lorque vous voyez les flèches multidirectionnel, déplacer votre rond au début de votre guide.

Quand vous déplacez un symbole sur un guide vous pouvez remarquer que celui-ci est comme attiré par le guide, celà facilite grandement le positionnement.


Cliquez ensuite sur l' image 30, du calque contenant le rond, pour pouvoir positionner celui-ci à la fin de votre guide. Une fois cette opération faite mettez le curseur sur le nom "calque 1" dans votre sénario et là faites:
- Clic droit/propriété et activer l' option "guidé" comme dans la fenêtre ci-dessous:
Image utilisateur

Et enfin faites un clic droit sur l' image 15 de votre calque 1 puis cliquer sur "créer une interpolation de mouvement".

Au final vous devriez avoir ceci:
Image utilisateur

Bien entendu testez l' animation en faisant CTRL+ENTREE.

J' espère que celà vous a rendu service et que vous pourrez vous amusez avec flash!!

Bien se rappeler que seul les symboles peuvent avoir une interpolation de mouvement.
L' ordre des calques dans le senario est primordial pour les mouvements guidé (le calque guide est toujours au dessus du calque guidé.)
Il y a tout plein d' autre effet et option pour les mouvements, par exemple la modification de taille, d' orientation, les rotations... ce qui nous donne un potentiel énorme rien que pour faire bouger une simple lettre.
Retour en haut Retour en haut


Créé : le 07/12/2005 à 10:35:06
Modifié : le 22/08/2008 à 16:07:05
Avancement : 0%
Licence : Copie non autorisée

Changer de design | En savoir plus | Plan du site | Politique d'accessibilité | Règles | RSS tutoriels | RSS news | XHTML 1.0 | CSS 2.0
Édité par Simple IT SARL : Nous contacter | Revue de presse | Publicité

Y'a plus rien à lire, faut remonter maintenant !

Hébergement web - Correction de tutoriels - Créer un site
Vous souhaitez apparaître ici ? Contactez-nous.

Nombre de connectés 184 Zéros connectés | Requêtes SQL 8 requêtes | Temps de génération de la page : Total (SQL) 0.0344s (0.0185s)