• Forums 2037
  • Forums Boite à Pixels 2077.net
  • Forums phpBB
  • Forums Nero
  • Flux
  
Se déconnecter [ ccBot [Crawler] ]
Dernière visite le 14 Mar 2010 3:03 Nous sommes le 14 Mar 2010 3:03




 [ 19 messages ]  Aller à la page 1, 2  Suivante
[Flash MX] Animation de base 
Auteur Message
Occasionnel(le)
Occasionnel(le)
Avatar de l’utilisateur

Inscription: 03 Nov 2005 18:28
Messages: 7
Localisation: Bastia
Message [Flash MX] Animation de base
Citation:
Bonjour à tous
Au sommaire de ce super tuto, l'animation pour les débutants, ou plutôt l'interpolation de mouvement !

Eh ouais, les bases avant tout !
Citation:
Qui veut gravir une montagne commence par le bas - Proverbe Chinois
:resp:
Après cette somptueuse partie théorique, on passe directement à la pratique !
:banane:

:arrow: On commence par ouvrir flash et créer un nouveau document, soit pas l'écran d'accueil, soit par le bien connu Fichier->Nouveau->Document Flash

:arrow: Ensuite, on choisit un outil au pif, perso je prends le pinceau. Peu importe de toute façon, c'est juste pour voir comment marche l'animation.
On fait un joli dessin... perso, ça donne ça:

Image

:arrow: Notre dessin terminé, on va le convertir en symbole, afin de pouvoir le faire gambader sur le document.
Pour cela, on va le sélectionner, avec l'outil de sélection (encadrez votre dessin pour que tous soit pris en compte; sur mon exemple, ça permettra de sélectionner le corps + les yeux + la bouche).
Une fois selectionné, aller dans Modification->Convertir en symbôle.
Dans la fenêtre qui s'ouvre, renommez votre symbôle, puis cochez Graphique (eh oui, c'est un dessin, donc un graphique :)), puis OK.

Image

Si tout s'est bien passé, votre dessin sera maintenant encadré de bleu:

Image

On va double cliquer sur une case de la ligne du temps.La ligne du temps, c'est quoi ? C'est ça:

Image

On va donc faire un clic droit sur la case 30, totalement au pif sachant qu'on est là pour apprendre et qu'on a pas besoin que l'animation ait une durée précise.
Libre à vous de prendre la case 10,12,56,12 000... mais bon 30 ça devrait être convenable hein :wink:

Une fois le clic droit effectué, on va selectionner, dans le menu qui vient de s'ouvrir, insérer une image clé, afin d'obtenir ceci:

Image

Si vous cliquez sur n'importe quelle case entre 1 et 30, vous verrez que notre dessin est présent. Flash sait que dans cette case, il doit y avoir le dessin, vu qu'il est dans la case 1 et que rien n'a changé entre la case 1 et la case 2,3,4...29
En revanche, si je déplace le dessin dans la case 1, le dessin dans les cases 2 à 29 sera au même endroit que dans la case 1.
Mais je vous conseille de rien déplacer pour l'instant, ça peut porter à confusion pour la suite.

Mais dans la case 30, le dessin reste à l'endroit où il se trouvait au moment où on a créée l'image clé.
Et il ne changera de place que si on le déplace dans la case 30 !
(Hésitez pas à répondre si vous avez pas tout compris, c'est peut être pas super clair :o:)

:arrow: On va maintenant déplacer notre dessin ,en ayant pris soin de s'assurer qu'on travaille bien sur la case 30 (elle doit être sélectionnée dans la ligne du temps). Ce sera sa position à la fin de l'animation.

Image

NB: Le trajet du dessin durant l'animation ne sera pas celui que vous avez effectué pour déplacer le dessin. Vous pouvez faire 50 tours, la seule position prise en compte sera celle où vous déposez votre dessin.

:arrow: Maintenant que notre dessin sait où il doit se rendre, il ne reste plus qu'à lui donner l'ordre d'y aller, sachant qu'il prendra le chemin le plus court (feignasse !) pour s'y rendre : la ligne droite.

Pour lui donner cet ordre, on faire un clic droit sur n'importe quelle case dans la ligne du temps entre 1 et 29.
Au pif, la case 20, clic droit, Créer une interpolation de mouvement

Image

Si tout s'est bien passé, une flèche s'affiche dans la ligne du temps, allant de la case 1 jusqu'à la case 30:

Image

:great: C'est gagnayyyyyyyyy !

Testons tout de suite notre magnifique animation (Contrôle->Tester l'animation)

Image

Ca marche, c'est parfait, vous avez créé votre 1ère animation Flash ! :banane:

Pour l'enregistrer en fichier shockwave, que vous pourrez envoyer à tous vos amis afin de leur montrer que le boss de l'animation, désormais, c'est vous (ou tout simplement pour la placer sur un site, après tout, laissez le monde entier profiter de cette victoire !)

... Fermez le test, allez dans Fichier->Exporter->Exporter l'animation.

Mission accomplie :)

Pour voir ce que ça donne chez moi, cliquez ici.
[lien alternatif pour télécharger l'animation]

Attention, le fichier .swf n'est pas modifiable, vous ne pourrez pas travailler dessus... Pensez à enregistrer votre fichier en .fla (modifiable), en utilisant le célèbre Fichier->Enregistrer sous.

Boîte à Pixels, tutorial, apprendre, Flash, animation, simple, débutant, base


03 Nov 2005 20:28
Adepte
Adepte
Avatar de l’utilisateur

Inscription: 29 Mai 2005 1:05
Messages: 783
Localisation: ...derrière toi !
Message 
Salut, alors j'ai regardé vite fait.
Les tuto flash c'est ce qui manqué ici, donc merci pour ceux qui en avait besoin, surtout qu'il a l'air pas mal. En plus il est assez long sa a du te prendre du temps quand même. :D

Je rajoute au passage qu'il existe 2 racourcis clavier bien pratiques en rapport avec ton tuto:
-> F8 pour convertir un symbole.
-> Ctrl + Entrée pour tester l'animation.

Voilà, et je pense que tu peux aller te présenter dans la section "Accueil et présentation." :)
Bienvenue à toi.

_________________
Image
Galerie DeviantArt


03 Nov 2005 20:33 Site Internet
Administratrice
Administratrice
Avatar de l’utilisateur

Inscription: 13 Nov 2004 10:47
Messages: 40633
Localisation: Rhône-Alpes
Message 
Un petit nouveau qui arrive avec un tuto Flash ? C'est super gentil, ça !
Bravo et merci pour tous ceux qui attendaient ça depuis longtemps !
:kiss:

_________________
Merci à Zarumbatus, auteur de mon avatar !
:ff:


03 Nov 2005 20:52
VIP
VIP
Avatar de l’utilisateur

Inscription: 27 Sep 2004 20:36
Messages: 2230
Message 
merci pour ton tuto l'ami :)

le temps de le lire en détail et je le rajoute dans la listing un peu plus tard ;)

au passage, la une bonne tête ton perso :p

_________________
Mon PortFolio : http://www.shadowkris.com | Blog : http://blog.shadowkris.com


04 Nov 2005 0:18 Site Internet
Régulier(ère)
Régulier(ère)
Avatar de l’utilisateur

Inscription: 03 Nov 2005 11:11
Messages: 162
Localisation: Genève
Message 
OUAAAAAAAAAAAAIS!!! :-)

Ma première animation flash...
héhé, j'suis the boss... :cool:

:oops:
!!MERCI!!

_________________
Stop BSL in Switzerland
www.sosrottweiler.com
www.molos.ch


27 Déc 2005 19:38
Occasionnel(le)
Occasionnel(le)

Inscription: 04 Oct 2003 12:54
Messages: 8
Localisation: finistere
Message 
tres bon tuto pour débutant !! bravo merci de ton travail

_________________
FaYa-FaYa


30 Jan 2006 12:53
Occasionnel(le)
Occasionnel(le)
Avatar de l’utilisateur

Inscription: 13 Mar 2006 12:59
Messages: 2
Message 
Bonjour,

Merci pour ce tutorial! J'ai cependant une question: comment faire en sorte que le petit bonhomme suive un autre trajet que cette ligne droite?

Merci! ;)


13 Mar 2006 13:46
Occasionnel(le)
Occasionnel(le)
Avatar de l’utilisateur

Inscription: 31 Oct 2005 16:56
Messages: 20
Localisation: France
Message 
hello à tous sa faisait longtemps que j'etait pas venu sur ce forum sa fait du bien bon pour repondre au message de LDR voila la technique pour faire suivre a son personnage une courbe personnaliser

LES GUIDES DE MOUVEMENTS :

pour ce tutorial nous repartons de la derniere etape du tutorial de "Miccagrassu" ci dessus.

1 > apres avoir crée l'interpolation de mouvement (la fleche sur le scenario) double cliquez sur l'icone ajouter un guide de mouvement se situant dans le coin inferieur gauche du scenario (dans le cadre rouge sur l'image). Le guide de mouvement ce place alors au dessu de votre calque (celui avec le bonhomme)

Image

2 > selectionnez la premiere image du calque de guide puis avec l'outil pinceau, crayon ou trait dessinez la trajectoire de votre bonhomme (ici representé par des vagues rouges sur l'image). Des à present vous remarquez que l'intégralité du calque de guide devient gris, ce qui veut dire que l'image c'est répartie sur l'intégralité du scénaio

Image

3 > Une fois effectué revenez sur le calque de votre bonhomme puis selectionner sur l'animation votre bonhomme en prenant soin de bien le selectionner au centre de sorte à faire aparaitre un petit rond blanc en son centre. deplacé ensuite la premiere image de l'interpolation au debut des vagues et la derniere à la fin (toujours en prenant soin de cliquer sur le centre pour les deplacer, une sorte de magnetisation les attirera vers les bouts de la courbe).

Image

une fois que tout ceci est effectué previsualiser votre animation en appuyant sur CTRl + Entrée

le guide de mouvement disparaitra lors de la previsualisation et de la publication de l'animation, celui ci reste aparant en mode création afin que vous puissiez le modifier quand bon vous semble

à la fin vous devriez obtenir quelque chose comme ça : Animation avec guide de mouvement

faite moi part de problemes eventuels ou autres et ej me ferai une joie de vous repondre

_________________
don't think!!! Design


16 Mar 2006 13:19 Site Internet
Occasionnel(le)
Occasionnel(le)
Avatar de l’utilisateur

Inscription: 13 Mar 2006 12:59
Messages: 2
Message 
Excellent! Merci beaucoup Maxence!

Le seul truc que j'avais pas saisi, c'est qu'il fallait le déplacer aux bouts du parcours...

Encore merci! :resp:


17 Mar 2006 8:33
Fidèle
Fidèle
Avatar de l’utilisateur

Inscription: 23 Avr 2004 13:13
Messages: 1890
Localisation: .../internet/2077.net
Message 
Vraiment super ce tuto! Bravo à vous deux

_________________
Arène //Créations
Photos //Commentaires créations


17 Mar 2006 16:47
Occasionnel(le)
Occasionnel(le)
Avatar de l’utilisateur

Inscription: 31 Oct 2005 16:56
Messages: 20
Localisation: France
Message 
Citation:
Excellent! Merci beaucoup Maxence!

Le seul truc que j'avais pas saisi, c'est qu'il fallait le déplacer aux bouts du parcours...

Encore merci!


oups sorry about that

_________________
don't think!!! Design


18 Mar 2006 11:26 Site Internet
Administratrice
Administratrice
Avatar de l’utilisateur

Inscription: 13 Nov 2004 10:47
Messages: 40633
Localisation: Rhône-Alpes
Message 
Maxence, pourquoi avoir supprimé les images ?

_________________
Merci à Zarumbatus, auteur de mon avatar !
:ff:


20 Mar 2006 8:12
Occasionnel(le)
Occasionnel(le)
Avatar de l’utilisateur

Inscription: 31 Oct 2005 16:56
Messages: 20
Localisation: France
Message 
oups désolé mon serveur etait en maintenance tout est rentré dans l'ordre maintenant

encore désolé pour le desagrement

_________________
don't think!!! Design


22 Mar 2006 10:46 Site Internet
Occasionnel(le)
Occasionnel(le)
Avatar de l’utilisateur

Inscription: 03 Nov 2005 18:28
Messages: 7
Localisation: Bastia
Message 
Ca faisait également un bon moment que je n'étais pas venu non plus...
Ravi de voir que ce tuto est utile, et ravi de voir qu'il a été continué.
Merci Maxence pour ce tuto sur les guides de mouvements, qui sont une suite logique à l'interpolation en ligne droite :)


10 Avr 2006 21:41
Occasionnel(le)
Occasionnel(le)
Avatar de l’utilisateur

Inscription: 21 Mai 2006 13:13
Messages: 4
Message 
oué merci
mais bon c quand même un tuto pour un gars qui viens d'ouvrir flash pour la première fois de sa vie et qui est pas au courant que l'aide sa existe :mad: .
Le deuxième tuto est déja plus intéressant car les guides de mouvement c pas vraiment évident au début.

Je dirais merci mais bon, c'était pas vraiment la peine.

_________________
voila...


21 Mai 2006 13:17 Site Internet
 [ 19 messages ]  Aller à la page 1, 2  Suivante


Vous ne pouvez pas poster de nouveaux sujets
Vous ne pouvez pas répondre aux sujets
Vous ne pouvez pas éditer vos messages
Vous ne pouvez pas supprimer vos messages
Vous ne pouvez pas joindre des fichiers

  
[ Association 2037.org, infrastructure & serveur model-fx ] :: [ Powered by phpBB © phpBB Group. ]
[ Thèmes © Boîte à Pixels 2037.Org ] :: [ Guntar Ze Smiley © ZeCorp. Created by Christophe Soudron ]
Traduction par: phpBB.biz