[tuto] Reverse de la tête de lecture

Voici un petit tuto qui vous apprendra à changer le sens dans lequel lis la tête de lecture sur la timeline.

Raccourcis utilisés dans ce tuto (PC) :
Ctrl+N > Ouverture d'un nouveau document,
Ctrl+F3 > Ouverture du panneau des propriétés,
Ctrl+J > Modification des propriétés du document,
Ctrl+L > Ouverture du panneau Bibliothèque,
Ctrl+F8 > Création d'un nouveau Clip,
Ctrl+E > Revenir à la scène principale,
F5 > Ajouter une image,
Ctrl+T > Ouverture du panneau Transformation,
F9 > Ouverture du panneau Actions,
F7 > Transforme l’image en image clé,
Ctrl+Entrée > Crée un aperçu du .swf.

Raccourcis ActionScript 2 :
Echap+st > Crée un stop : stop(),
Echap+fn > Crée une fonction : function (){}.

Tout d'abord qu'est ce qu'une tête de lecture ??
Et qu'est ce qu'une time line ??

Voici une image qui vous permettra de mieux comprendre ces deux mots :


////////////////////////////// Première étape : La scène principale

Nous allons commencer par créer la scène principale :

a)

Ouvrez Flash,
Allez dans le menu,
Sélectionnez Fichier,
Nouveau...,
Une fenêtre s'ouvre, (Raccourci : Ctrl+N)
Sélectionnez Fichier Flash (AS 2.0).

b)

Ouvrez le panneau des Propriétés, (Raccourci : Ctrl+F3)
Puis cliquez sur le bouton "Taille :", (Raccourci : Ctrl+J)
Modifiez les dimensions en 400*200,
Modifiez aussi la cadence en 35 images par secondes,
Validez : Ok.

////////////////////////////// Deuxième étape : Création des clips

a)

Ouvrez la bibliothèque, (Raccourci Ctrl+L)
Cliquez sur le bouton en bas a gauche du panneau bibliothèque nommé : Créer un symbole, (Raccourci Ctrl+F8)
Nommez le Flèche,
Cochez à nouveau Clip,
Puis laissez toutes les autres options normales...

b)

Créez un autre symbole,
Nommez le Carré,
Cochez à nouveau Clip,
Puis laissez toutes les autres options normales...

////////////////////////////// Troisième étape : Remplissage des clips

a)

Ouvrez le clip Flèche,
Créez une sorte de flèche (ce n'est pas très important),
Placez la au milieu de votre clip.


b)

Ouvrez le clip Carré,
Créez un carré (40*40),
Placez le au milieu de votre clip.


////////////////////////////// Quatrième étape : Création des calques

a)

Nous allons créer trois nouveaux calques :
Allez sur la scène principale (si vous êtes encore dans les clips Raccourci Ctrl+E),
Puis cliquez sur "Insérer un claque" dans le panneau de contrôle du scénario,
Insérez trois calques,

b)

Puis renommez les en double cliquant sur leur nom dans l'ordre suivant :
- Calque 3 deviens Actions (celui ci contiendra toutes les actions du document),
- Calque 2 deviens Flèches,
- Claque 1 deviens Carré.

c)

Ajoutez 30 images à chaque clip en sélectionnant les images comme ceci :

Puis une fois ceci sélectionné, cliquez sur F5 ce qui ajoutera 29 images vides.

////////////////////////////// Cinquième étape : Remplissage des claques

a)

Sélectionnez le claque Flèche,
Glissez y 2 fois le clip Flèche,
Ouvrez le panneau Transformation (Raccourci : Ctrl+T)
Sélectionnez l'un des deux clips nommé Flèche,
Faites le pivote de 180°,
Placez le à peux près de cette façon.


b)

Sélectionnez le claque Carré,
Glissez y le clip Carré,
Placez le à peux près de cette façon.


c)

Nous allons nommer les occurrences des deux flèches en cliquant sur l'une d'elle puis en ouvrant le panneau des propriétés (Raccourci : Ctrl+F3) ensuite écrivez tel que l’image le montre :



- Sélectionnez la flèche la plus à droite et nommez son occurrence "flècheDroite_mc"
- Sélectionnez la flèche la plus à gauche et nommez son occurrence "flècheGauche_mc"
- Sélectionnez le carré et nommez son occurrence "carré_mc"

////////////////////////////// Sixième étape : Les actions

a)

Sélectionnez le calque Actions puis cliquez sur l’image 1 ouvrez le panneau Actions (Raccourci : F9)
Créez un stop (Raccourci : Echap+st)

b)

Puis assignez une action à la flèche gauche :

(Raccourci : Echap+fn pour créer une fonction)

Code:

//    Actions sur la flèche de gauche :
_root.flècheGauche_mc.onPress = function () {
// Sur la scène principale, le clip flècheGauche_mc lorsquon l'appuie,
// Exécuter la fonction :
   _root.prevFrame ();
   // Sur la scène principale, revenir d'une image en arrière.
};

c)

Assignez aussi une action à la flèche droite :

Code:

//    Actions sur la flèche de droite :
_root.flècheDroite_mc.onPress = function () {
// Sur la scène principale, le clip flècheDroite_mc lorsqu’on l'appuie,
// Exécuter la fonction :
   _root.nextFrame ();
   // Sur la scène principale, avancer d'une image.
};

Récapitulatif des codes :

Code:

//    Stop :
stop ();

//    Actions sur la flèche de gauche :
_root.flècheGauche_mc.onPress = function () {
// Sur la scène principale, le clip flècheGauche_mc lorsqu’on l'appuie,
// Exécuter la fonction :
   _root.prevFrame ();
   // Sur la scène principale, revenir d'une image en arrière.
};

//    Actions sur la flèche de droite :
_root.flècheDroite_mc.onPress = function () {
// Sur la scène principale, le clip flècheDroite_mc lorsqu’on l'appuie,
// Exécuter la fonction :
   _root.nextFrame ();
   // Sur la scène principale, avancer d'une image.
};

////////////////////////////// Septième étape : L'animation

Nous allons maintenant animer un peux tout sa :
Sélectionnez le calque Carré puis cliquez sur la 30^ième image transformez la en image clé (Raccourci : F7)
Ensuite faites clic droit sur l’une des images qui se situe entre la 1^ière et la 30^ième puis sélectionnez : Créer une interpolation de mouvement
Puis rendez vous à la 30^ième image et agrandissez le clip Carré.

Maintenant tout doit normalement fonctionner, testez l’animation (Raccourci : Ctrl+Entrée)

Voici le .fla si vous en avez besoin : ICI

Voici le tuto que j'ai fait sur mon propre forum je me suis permis de la poster ici aussi