Flash Mx 2004

Niveau I

tutorial 13/22

Port folio

Fichier source port_folio.fla

Pour configurer votre interface de travail vous devez ouvrir ces panneaux: "menu du haut > Fenêtres"

Les outils à utiliser

Outil	Symbole	Descriptif	Raccourci
Le cercle		Trace un cercle seul ou un contour seul ou les deux à la fois selon que les options de couleur ou de contour sont activées. On peut remplir un ton uni ou dégradé. L'options "Alt" : le tracé s'effectue à partir du centre L'option "Maj/Shift" : le tracé est contraint à un cercle parfait ou un carré parfait	O
La ligne		Trace des droites et se paramètre de la même manière que l'outil crayon (épaisseur du trait, pointillé, brouillon...	N
La transformation		Sur toute sélection, permet de modifier l'échelle, le biseau, la rotation, l'inclinaison. "Alt" permet de transformer symétriquement, "Ctrl" permet de déplacer les coins indépendamment	Q

Créer un nouveau fichier depuis "Flash" "menu du haut > fichier > nouveau" A.S.2

Un nouveau document se crée en allant dans le "menu du haut > fichier > nouveau" ou "Ctrl+N"

Choisir le format de document ici "Flash" A.S. 2.0" qui signifie Action Script 2.0, le langage de programmation de "Flash", ainsi que A.S. 3.0 dernière génération.

Paramétrage du document

Au bas de l'interface par défaut nous avons un onglet propriétés (que l'on ouvre par le "menu du haut > fenêtre" s'il n'est pas ouvert).

Cet onglet "propriété" configure notre document de travail, taille en largeur, en hauteur, couleur de fond, vitesse de lecture des images. Nous allons régler notre document en 800 x 600 pixels, fond blanc, cadence de 25 images (frames) secondes. Nous allons enregistrer ces paramètres comme les paramètres par défaut à l'ouverture de "Flash".

Nous avons donc ici un document de 800 X 600 pixels, fond banc, débit de 25 images (frames) par secondes.

Importer les images "port_folio01.jpg", "port_folio02.jpg", "port_folio03.jpg" et "port_folio04.jpg" dans flash ou "Ctrl + R"

I) Importer des images

Choisir la première image est valider, l'importation demandera s'il s'agit d'une suite animée, valider et flash placera une image par frame, c'est plus pratique.

Dans notre fichier de 800 x 600, les 4 images importées se placent dans la bibliothèque et ainsi que sur la scène, chacune au même endroit mais à des frames différentes. Elle sont placées au même endroit mais pas en même temps. Il faudra lancer l'animation et faire défiler la tête de lecture en appuyant sur la touche "Entrée" pour voir défiler nos images.

Frame 1 image clé "port_folio01.jpg", frame 2 image clé "port_folio02.jpg" etc...

D'ailleurs remarquons que si on lance une animation, les images défilent non stop.

En premier nous allons centrer toutes nos images en une manipulation.

Activer "modifier plusieurs images" puis sélectionner toutes les images avec l'outil de sélection qui encadre bien toutes les images, on peut aussi faire un "Ctrl + A" (sélectionner tout) pour être certain de ne pas oublier d'image.

A droite de l'interface se trouve la fenêtre "aligner" à côté de la fenêtre "info" et "transformer". Avant de cliquer sur les icones d'alignement "vertical" et "horizontal", veillons bien à cocher "sur la scène"

l

Notre disposition d'images est maintenant prête pour créer notre "port folio" animé.

II) Action d'images

Outre le fait qu'on puisse programmer des ligne de codes pour commander des objets (clips, boutons...) on peut aussi écrire du code dans les images clés de la piste de lecture (timeline). Par exemple, si au milieu de la piste, on écrivait le mot "Stop" dans une image clé, la lecture de l'animation s'arrêterait dès la lecture du "Stop" au milieu de la piste.

Dans notre cas c'est au début qu'il faut mettre un stop, autrement en lançant l'animation, les images défilent sans cesse. tant que la tête de lecture ne reçoit pas d'instruction d'arrêt, elle lit sans interruption et en boucle. C'est à dire qu'arrivée à la fin de l'animation, sans indication particulière, la tête de lecture revient au début et répète sa lecture sans fin.

Plaçons un "Stop" à l'étape 1 de notre scène.

"F9" pour ouvrir le panneau des actions ou "menu du haut > fenêtres > actions images"

Maintenant, on lance l'animation et la lecture s'arrête instantanément à la première image.

A nous de créer deux boutons sur un nouveau calque nommé "bouton" un bouton pour aller aux images suivantes, un pour aller aux images précédentes.

Double clic sur le bouton dans la scène ou dans la bibliothèque pour se rendre dans l'interface du bouton.

Plus d'infos sur la création des boutons, voir le tutorial "controler_temps.html".

III) Code "goto"

Notre bouton "précédent" est dans la bibliothèque, nous allons nous en servir pour faire le bouton "suivant" en le glissant depuis la bibliothèque sur la scène puis en effectuant une transformation en symétrie horizontale (effet miroir). Pourquoi se fatiguer à refaire exactement le même bouton inversé ?.

"Ctrl + Alt + B" pour tester les boutons

Placer le code correspondant à chacun des deux boutons:

Précédent :

on (release) {
prevFrame();
}

Suivant:

on (release) {
nextFrame();
}

"Ctrl + Alt + Entrée" pour une pré visualisation rapide.

Exporter l'animation

Menu du haut > Fichier > Exporter > Exporter l'animation ou "Ctrl + Maj/Shift + Alt + S