c-art

1/ Ouvrez Flash, et crÈez un nouveau document de 600 pixels par 350 pixels de large, 25 images par seconde et un fond blanc.

2/ Nommez le premier calque†: ´†Fond†ª et importez directement sur la scËne l’image†: ´†fond_hellohikimori.jpg†ª.

3/ InsÈrez un nouveau calque et nommez-le ´†images†ª.

4/ SÈlectionnez ce nouveau calque et importez directement dans la scËne l’image ´†image1_jpg.jpg†ª, convertissez cette image en MovieClip (F8) et nommez ce MovieClip†: ´†animation 1†ª.

5/ Double-cliquez sur le MovieClip ´†animation 1†ª pour Èditer ce dernier. Nommez le premier calque ´†image†ª.

6/ InsÈrez un nouveau calque et nommez-le ´†Masque†ª. Sur ce calque, dessinez avec l’outil rectangle une forme qui couvre totalement l’image qui se trouve sur le calque infÈrieur. SÈlectionnez votre forme et convertissez-la en graphique et nommez ce dernier ´†Graphique Masque†ª.

7/ InsÈrez une image clÈ (F6) sur la frame 15 de ce calque et faites sortir la forme ‡ droite de la scËne, elle ne doit plus Ítre visible ‡ cette frame. InsÈrez une nouvelle image clÈ ‡ la frame 25 et dÈplacez de nouveau votre forme pour qu’elle recouvre de nouveau l’image.

8/ SÈlectionnez la premiËre image clÈ du calque ´†Masque†ª et ‡ partir de la fenÍtre PropriÈtÈs, demandez ‡ Flash de crÈer une interpolation de mouvement.

9/ InsÈrez une image clÈ de remplissage (F5) sur la frame 25 du calque ´†image†ª.

10/ InsÈrez un nouveau calque et nommez-le ´†Actions†ª. Sur la frame 25 de celui-ci insÈrez une image clÈ et Ècrivez ce script†: stop();

11/ Revenez sur la scËne principale, depuis l’onglet se trouvant en haut ‡ gauche de la fenÍtre ScÈnario.

12/ InsÈrez une nouvelle image clÈ sur la frame 2 du calque ´†images†ª. Supprimez sur la scËne le MovieClip qui s’y trouve et importez directement sur la scËne, l’image ´†image2_jpg.jpg†ª. Convertissez cette image en MovieClip (F8) et nommez ce MovieClip†: ´†animation 2†ª. Puis rÈpÈtez les Ètapes 5 ‡ 11.

13/ InsÈrez une nouvelle image clÈ sur la frame 3 du calque ´†images†ª. Supprimez sur la scËne le MovieClip qui s’y trouve et importez directement sur la scËne, l’image ´†image3_jpg.jpg†ª. Convertissez cette image en MovieClip (F8) et nommez ce MovieClip†: ´†animation 3†ª. Puis rÈpÈtez les Ètapes 5 ‡ 11.

14/ Faites de mÍme pour les images ´†image4_jpg.jpg†ª et ´†image5_jpg.jpg†ª.

15/ InsÈrez une image clÈ de remplissage (F5) sur le calque ´†Fond†ª sur la frame 5 de ce calque.

16/ Placez une rËgle horizontale ‡ 320, puis tracez une forme rectangulaire prenant un tiers de la largeur de votre scËne, tracez ensuite une forme rectangulaire noire prenant le reste de la largeur de votre scËne. SÈlectionnez les deux formes et convertissez-les en MovieClip dont le nom est†: ´†animation barre†ª. Dans la fenÍtre PropriÈtÈ, donnez ‡ ce MovieClip le nom d’instance, d’occurrence†: ´†barre†ª.

17/ Double-cliquez sur votre MovieClip ´†barre†ª pour l’Èditer. InsÈrez un nouveau calque que vous nommez ´†Masque†ª, puis tracez une forme rectangulaire recouvrant totalement la partie noire du calque se trouvant en dessous.

18/ Convertissez (F8) la forme se trouvant sur le calque ´†Masque†ª en graphique et nommez-le ´†barre_Masque†ª.

19/ InsÈrez une image clÈ sur la frame 10 du calque ´†Masque†ª puis une nouvelle image clÈ ‡ la frame 25.

20/ Depuis la fenÍtre PropriÈtÈ, demandez ‡ Flash de crÈer une interpolation de mouvement. Sur la frame 10 de ce calque, dÈplacez votre graphique pour qu’il sorte ‡ droite de la ScÈne.

21/ InsÈrez une image clÈ de remplissage (F5) sur la frame 25 du calque 1.

22/ SÈlectionnez votre calque ´†Masque†ª et insÈrez un nouveau calque que vous nommez†: ´†Actions†ª. InsÈrez une image clÈ (F6) sur la premiËre frame de calque et Ècrivez ce script†:
stop();

23/ Revenez sur la ScËne principale gr‚ce ‡ l‘onglet se trouvant dans le coin supÈrieur gauche de la fenÍtre ScÈnario.

24/ InsÈrez en haut de la pile un nouveau calque et nommez-le ´†Barre_Haut†ª. Faites glisser une rËgle jusqu’‡ la valeur 20 de la scËne. Puis, tracez un rectangle couvrant la scËne de hauteur de votre rËgle.

25/ InsÈrez un nouveau calque et nommez-le ´†légendes†ª. Puis, gr‚ce ‡ l’Outil Texte, Ècrivez la première légende de l’image qui apparaÓt. InsÈrez une image clÈ et changez le texte de la lÈgende. Faites ainsi jusqu’à la cinquième frame.

26/ insérez un nouveau calque que vous nommez†: ´†boutons†ª. …écrivez à droite sur votre bandeau se trouvant sur la scène le mot ´à précédent à . Puis convertissez ce texte en bouton (F8) et nommez votre bouton ´btn_prev . Dans la fenêtre propriété, nommez votre bouton ´†Précédent†ª dans la zone de saisie nom d’occurrence. Double-cliquez sur votre bouton pour l’Èditer puis insérez 3 images clés pour remplir les 3 zones restantes de votre bouton. Attention, sur la partie ´†Cliquable†ª de votre bouton, tracez un rectangle recouvrant votre texte, la couleur du rectangle n’a pas d’importance, l’utilisateur ne la voit pas.

27/ Revenez sur la scène principale et via la fenêtre propriété, ouvrez la fenêtre Actions en cliquant sur la petite flèche ‡ droite de cette fenêtre. Dans la fenêtre Action, écrivez ce script†:
on (press, keyPress "") {
if (_root._currentframe>1) {
miseajour(-1);
_root.barre.gotoAndPlay(1);
_root.Suivant.gotoAndStop(1);

}
}


28/ Sur le mÍme calque, Ècrivez ´†Suivant†ª, puis convertissez (F8) votre texte en MovieClip et nommez-le†: ´†Clip_Suivant†ª. Dans la fenÍtre PropriÈtÈ, donnez comme nom d’occurrence ‡ votre clip le nom†: ´†Suivant†ª.

29/ Double-cliquez sur votre MovieClip ´†Clip_Suivant†ª pour l’Èditer. SÈlectionnez votre texte ´†Suivant†ª puis convertissez-le (F8) en bouton et nommez-le ´†btn_Suivant†ª. Double-cliquez sur votre bouton pour remplir les 4 cases du bouton gr‚ce ‡ l’ajout d’images clÈs (F6). Sur la zone ´†Cliquable†ª, tracez un rectangle sur votre texte.

30/ Revenez sur votre clip en cliquant sur l’onglet ´†Clip_Suivant†ª en haut ‡ gauche de la fenêtre scénario. insérez un nouveau calque et nommez-le ´†Actions†ª, sur la première frame de ce calque, écrivez le script suivant†: stop()†;.
sélectionnez votre bouton puis ouvrez la fenÍtre Action et enfin écrivez ce script†:
on (press, keyPress "") {
if (_root._currentframe == _root._totalframes) {
_root.barre.gotoAndStop(1);
_root.Suivant.gotoAndStop(2);
}
else {
_root.miseajour(1);
_root.barre.gotoAndPlay(1);
}
}

31/ insérez une image clé sur les deux calques. Supprimez votre bouton sur la frame 2 et remplacez-le par un texte†: ´†Fin†ª.

32/ Revenez sur la scène principale et insérez un nouveau calque que vous nommez†: ´†Actions†ª. Sur la première frame, Écrivez ce script†:
stop();
function miseajour (img) {
// passage d'une image ‡ l'autre
nav = _root._currentframe + img;
_root.gotoAndStop(nav);

}

Télécharger le fichier