Blog d’un développeur multimédia

admin mai 13th, 2007

Sur le site de betaruce, j’ai trouvé quatre petits tutoriaux de démarrage de Flash CS3.

Je me suis contenté de les traduire, en y ajoutant des copies d’écrans de la dernière version de Flash et non plus de la béta.

Si les 2 premiers sont relativements simples, les 2 derniers sont particulièrement intéressants

• 1 : Démarrage de Flash CS3 et d’ActionScript 3
• 2 : On affiche des choses sur la scène : Le graphisme
• 3 : Faisons les bouger et réagir : Les événements
• 4 : Révisions + importation de clip d’animation

Tutoriel 1 : Démarrage de Flash CS3 et d’ActionScript 3

Je vais essayer d’expliquer l’ActionScript 3 en utilisant des mots simples (plutôt que des termes techniques). Si vous avez déjà quelques expériences en AS, vous n’aurez pas beaucoup de mal à comprendre ces lignes. Si vous êtes complètement débutant, cela vous demandera un peu plus de travail. Si vous connaissez, un peu, la programmation Java, vous allez trouver cette syntaxe familière

Ce tutoriel a pour but de vous montrer, brièvement, la structure et la syntaxe d’AS 3. Nous allons voir, comment écrire un petit programme et le lancer.

Cliquez ici pour télécharger les fichiers de ce tutorial

1.1 – Que devez-vous préparer ?

Bien évidemment, avant toutes choses, il faut que vous ayez installé Flash CS3 ou une version de test. Vous pouvez, aussi, aller regarder la documentation de Flash CS3. Quelques notions sur la Programmation Orientée Objet OOP serait un vrai plus.

Vous pouvez aussi aller voir les liens suivants :
• présentation d’ActionScript 3 par Adobe
• Adobe – Design Center – Video workshop
• Adobe – Flash Design Center

1.2 – On démarre – helloWorld

1. Ouvrez Flash CS3 et démarrez un nouveau fichier Actionscript (File –> New… –> ActionScript File). Nommez-le helloWorld.as. Faites attention au fait qu’Actionscript différencie les minuscules et les majuscules. helloWorld.as est donc différent de helloworld.as

2. Entrez le code suivant.

Lignes	Description
1	package indique que tout ce qui suit est un package/ensemble de code/fonctions qui vont définir une classe. Vous devez toujours le mettre sur la première ligne.
3	On importe la classe MovieClip dans le programme pour l’utiliser, plus tard.
5	Définit la classe principale de ce fichier: helloWorld. Notons que le nom du fichier et le nom de la classe doivent être identiques. public signifie que la classe peut être appellée en dehors de cette dernière (nous reviendrons sur ce point). extends MovieClip signifie que votre classe sera construite/basée sur la classe MovieClip.
7-9	Définit la fonction principale de cette classe. Notons que le nom de de cette fonction est le même que le nom de la classe helloWorld. Cette fonction sera forcément appelée. Il faut ajouter ( ) derrière le nom de la fonction.
8	On affiche, une ligne de texte, sur la fenêtre de sortie de Flash CS3. Si vous ne savez pas ce qu’est la commande trace() vous pouvez regarder la documentation en ligne d’Adobe LiveDocs.

Tout simplement, ce petit code affiche juste quelques mots sur l’écran de sortie. Ne vous inquiétez pas, si vous ne comprenez pas complètement la syntaxe. Essayez juste de tapez les commandes et vous en saurez plus prochainement

1.3 – Comment lancer le programme

Comme il s’agit uniquement d’un fichier Actionscript .as et non pas un fichier Flash .fla, vous ne pouvez produire une animation Flash .swf
Pour lancer le programme, vous devez lui associer un fichier Flash .fla et produire à partir de celui-ci une animation Flash .swf

1. Ouvrez Flash CS3 et démarrez un nouveau fichier Actionscript (File –> New… –> Flash File (ActionScript 3.0)). Nommez-le tut_1.fla (appelez le, comme vous voulez). Sauvez-le dans le même dossier que helloWorld.as

2. Il y a un nouveau champ texte dans le panneau de propriétés : Document class. indiquez le nom de la classe helloWorld

Cela va lier au fichier tut_1.fla, la classe helloWorld.as. En d’autres mots, cela va associer votre classe avec le fla, et en produisant l’animation .swf, le code de votre classe sera exécutée.

3. Testez l’animation (Control -> Test Movie). Vérifiez bien que vous êtes en train de l’exporter en AS3 pour Flash 9. Vous devriez voir quelque chose comme cela :

L’écran du swf est blanc, car nous n’affichons rien dessus. Le mot « Hello! » est inscrit sur la fenêtre de sortie

Voilà qui met fin à ce premier tutoriel. Ne vous inquiétez pas si vous ne comprenez pas le code. Plus vous pratiquerez l’AS3, plus vous comprendrez.

Tutorial 2 : On affiche des choses sur la scène : Le graphisme

Ce tutoriel va vous montrer, comment créer des éléments graphiques dans des clips d’animations (MovieClip) en utilisant les méthodes de l’API de dessin et en les affichant sur la scène. Nous noterons que la programmation utilisée pour ces 2 tâches a de nombreuses différences par rapport à celle de l’ancien AS.

Cliquez ici pour télécharger les fichiers de ce tutoriel

1. Ouvrez Flash CS3 et créez un nouveau fichier Flash (File –> New… –> Flash File (ActionScript 3.0)). Nommez-le tut_2.fla. Dans le champ Document class du panneau de propriétés, indiquez le nom de la classe example (nous allons définir cette classe).

2. Créez un nouveau fichier Actionscript (File –> New… –> ActionScript File). Nommez-le example.as. Sauvez le dans le même dossier que le fichier tut_2.fla.

3. Entrez le code suivant.

Lignes	Description
5 et 10	Rappelez-vous : le nom de la classe et le nom de la fonction doivent être les mêmes que le nom du fichier. Dans ce cas example.
7-8	On définit 2 variables qui représentent les 2 instances de la classe MovieClip. La définition de ces 2 variables avant la définition des functions (c.a.d. avant le mot function), fait que ces variables seront accessibles par toutes les fonctions de cette classe. De plus, en les rendant public (publiques), on va les rendre, aussi, accessibles à des appels de code fait en dehors de cette classe. Notez la syntaxe pour définir une variable : var nom_variable : type_variable = valeur; mc1 et mc2 représentent respectivement 2 clips d’animations.
10-21	Définit la fonction principale de cette classe. Cette fonction sera exécutée, dès le lancement de la classe.
12-14	Dessine un cercle dans mc1 (avec un contour noir d’une épaisseur de 1 pixel et un remplissage en rouge). Les routines de dessin sont les mêmes que celle de la précédente version d’AS, mais il faut noter qu’elles sont maintenant sous la classe Graphics. La syntaxe devient donc : MovieClip.graphics.routine_API_de_dessin Si vous n’avez utilisé les routines API de dessin dans les précédentes version d’AS, Je vous conseille de lire la documentation.
15	L’animation du fichier tut_2.fla est devenue une instance de la classe example, dès lors this se réfère à l’animation de ce fichier. addChild est une nouvelle commande d’AS3. Les objets graphiques qui doivent être affichés, sont maintenant stockés dans une liste. addChild va ajouter des nouveaux objets à cette liste. Les objets qui seront ajoutés en premier, seront situés, à l’affichage, derrière tous les autres. Les commandes comme MovieClip.depth et MovieClip.swapDepths n’existent plus. Pour en apprendre plus, sur les DisplayObjectContainer (modèles de listes d’affichage) En résumé, vous pouvez considérer tut_2.fla comme le fichier d’animation racine (root movie clip) et maintenant, vous êtes en train d’ajouter mc1 (le cercle) à la liste d’affichage de ce fichier d’animation.
17-20	On dessine dans mc2 un rectangle (avec une bordure noire d’un pixel d’épaisseur et un remplissage jaune) et on le met dans la liste d’affichage. Il sera affiché au dessus du cercle de mc1

4. Cela termine la création de notre classe. Regardez à nouveau le fichier tut_2.fla et testez l’animation. Vous devriez voir quelque chose comme cela :

Voilà qui met fin à notre second tutoriel. Vous avez appris la nouvelle syntaxe pour dessiner à l’écran et la commande addChild pour afficher les objets graphiques.

Tutorial 3 : Faisons les bouger et réagir : Les événements

Nous allons utiliser à nouveau l’exemple des classes. Cependant, cette fois-ci, nous allons définir des événements pour ces 2 clips d’animations, afin qu’ils puissent bouger et interagir avec l’utilisateur.

La définition d’événements en AS3, est totalement différente de ce qui se faisait au préalable. Il n’y a a plus de onEnterFrame, onMouseDown, …. A la place, vous devez utilisez la commande addEventListener pour rendre cet objet capable de répondre à un événement, et, ensuite, écrire une fonction à exécuter lorsque cet événement aura lieu.

Cliquez ici pour télécharger les fichiers de ce tutoriel

1. Ouvrez Flash CS3 et créez un nouveau fichier Flash (File –> New… –> Flash File (ActionScript 3.0)). Nommez-le tut_3.fla. Dans le champ Document class du panneau de propriétés, indiquez le nom de la classe example.

2. Nous allons utiliser la même classe example, que nous avons créé dans le tutorial 2. Recopiez la, dans le même dossier et ouvrez la dans Flash.

3. Entrez le code suivant.

Lignes	Description
2-3	On importe 2 paquets (packages) de classes: affichage (display) et événements (events). Notez qu’au lieu d’importer chaque classe individuellement, on a choisit d’importer tout le package, pour cela, on utilise * au lieu du nom de la classe. C’est plus pratique quand nous devons importer beaucoup de classes d’un même paquet.
15	La syntaxe de base de la commande addEventListener est la suivante : addEventListener(type:String, listener:Function) Le premier paramètre, type défini le type de l’événement. Pour mc1, le type de l’événement est enterFrame. type est actuellement une chaîne de caractères (string) et la chaîne de caractères pour cet événement est « enterFrame ». Dans notre code, cependant, j’ai choisi d’utiliser Event.ENTER_FRAME. C’est actuellement une constante de la classe Event (événement) qui vaut « enterFrame », soit une chaîne de caractères. En d’autres mots, les 2 lignes suivantes sont identiques : addEventListener(Event.ENTER_FRAME, function) addEventListener(« enterFrame », function) Vous pouvez visiter la documentation en ligne pour plus d’information. Rappelez-vous toujours qu’AS3 est sensible à la casse (majuscule/minuscule). Faites attention aux lettres capitales. Le deuxième paramètre est le nom de la fonction (enterFrame_handler()) qui sera exécutée, si l’événement a eu lieu. Nous allons la définir plus tard. Il faut noter qu’il n’y a pas de () derrière derrière le nom de la fonction quand on choisit de l’utiliser. Event.ENTER_FRAME et MouseEvent.CLICK sont les 2 plus importants paramètres de addEventListener. Il y en a beaucoup plus, mais nous n’en parlerons pas ici. Je vous invite à regarder la documentation.
21	Pour mc2, on va le faire réagir au clic de la souris, c’est à dire quand l’utilisateur va cliquer dessus. La syntaxe est identique au précédent, mais cette fois-ci, nous allons utiliser la classe MouseEvent. Comme vu plus haut, MouseEvent.CLICK est une constante qui a pour valeur « click » qui est, elle-même une chaîne de caractères. Les 2 lignes suivantes sont identiques : addEventListener(MouseEvent.CLICK, function) addEventListener(« click », function) La fonction mouseClick_handler() sera appelé quand on cliquera à la souris. Vous pouvez choisir d’aller voir la documentation sur MouseEvent.
25-27	Définit la fonction enterFrame_handler. Cette fonction sera appelé quand l’événement enterFrame de mc1 sera déclenché. Il aura pour résultat de modifier la valeur x de mc1. Il va en résulter un déplacement, une animation, de mc1 qui va se déplacer vers la droite. Plusieurs points à remarquer : - Cette fonction est défini comme private, c.a.d. que du code en dehors du package ne pourra pas appeler cette fonction. - Cette fonction doit avoir un paramètre de type classe d’événement. Nous pouvons connaître, de part ce paramètre, beaucoup d’informations, par exemple, l’objet obtenant cet événement, le type d’événement, … - :void veut dire que cette fonction ne retourne aucun paramètre. On peut l’omettre dans notre code. - Dans les précédentes versions d’AS, la coordonnée en X d’un objet était représentée par la propriétée _x, mais maintenant, elle est représentée par x (c.a.d. sans le _).
28-30	Définit la fonction mouseClick_handler. Cette fonction sera appelée quand on cliquera sur mc2 et un message sera envoyé sur la fenêtre de sortie.

4. Revenez au fichier tut_3.fla et générez le fichier .swf. Voilà ce que vous devriez voir

La balle rouge bouge vers la droite. Quand le rectangle jaune est cliqué, un message apparaît dans la fenêtre de sortie.

Voilà qui met fin à ce tutoriel. Nous avons franchi les différentes étapes pour rendre les objets réactifs à des événements et comment définir les différentes actions qui seront exécutées. La définition d’événements est très différente des précédentes versions d’AS et j’espère que ce court tutoriel va vous le rendre plus simple à comprendre.

Tutorial 4 : Révisions + importation de clip d’animation

Comme indiqué dans le titre, je vais utiliser tous les concepts des cours passés dans un petit exemple, et j’en profiterai pour vous en présenter quelques nouveaux. Je crois que cela sera un excellent exercice pour vous.

4.1 – Qu’allons-nous faire ?

Nous allons mettre une petite voiture sur la gauche de la scène. La voiture sera importée dans Flash. Quand l’utilisateur double-cliquera dessus, elle va bouger vers la droite. Quand il cliquera dessus, elle s’arrêtera.

Nous allons parler de :
- comment importer une image en AS3 (quand la commande attachMovie n’existe plus)
- comment double-cliquer sur un objet
- comment enlever un événement

Cliquez ici pour télécharger les fichiers de ce tutoriel

4.2 – Allons-y

1. Ouvrez Flash CS3 et créez un nouveau fichier Flash (File –> New… –> Flash File (ActionScript 3.0)). Nommez-le tut_4.fla. Dans le champ Document class du panneau de propriétés, indiquez le nom de la classe Car. C’est la classe qui va être associée avec l’animation principale et que nous allons définir plus tard.

2. Choisissez une image de voiture, importez-la dans Flash et placez la sur la scène (File -> Import -> Import to Stage). Transformez-la en clip d’animation (Modify –> Convert to Symbol… –> Movie clip) et nommez-la FunnyCar. Effacez l’image de la scène.

3. Ouvrez la librairie(Window –> Library), faite un clic-droit sur le clip d’animation FunnyCar et choisissez Linkage. Validez Export for Actionscript et nommez cette classe FunnyCar.
Vous devriez avoir quelque chose comme cela :

La classe peut être considérée comme une représentation abstraite d’un objet. Ici, la classe FunnyCar représentera notre clip d’animation dans le code que nous taperons plus tard.

4. Cliquez sur OK quand vous en aurez fini avec le fichier Flash.

4.3 – Notre classe principale

1. Démarrez un nouveau fichier Actionscript (File –> New… –> ActionScript File). Nommez-le Car.as. Sauvez-le dans le même dossier que le fichier tut_4.fla.

2. Entrez le code suivant.

Lignes	Description
10-17	On définit les principaux éléments de notre classe Car.
11	Comme mentionné précédemment, FunnyCar est la classe qui représente notre clip d’animation de la voiture. En d’autres mots, mc représente, ici, une copie de ce clip d’animation. Il est important de noter qu’il n’y a plus de commandes comme attachMovie, createEmptyMovieClip, …
12	On ajoute le clip d’animation mc à la liste d’affichage de notre clip d’animation « root » courant, c.a.d. à la fenêtre d’animation de tut_4.fla (car notre classe Car est en association avec celui-ci, ou, en d’autres mots, est une instance de notre classe Car)
13	Par défaut, la coordonnée de mc est (0, 0). Je vais maintenant le repositionner en fonction de la hauteur de l’écran. Note: Dans notre exemple, la hauteur de la scène est de 400 pixels, et la hauteur de notre clip d’animation est de 185 pixels. Pour obtenir la hauteur de la scène, il suffit d’utiliser stage.stageHeight dans le code. Attention, il ne faut pas le confondre avec stage.height, qui va retourner la hauteur de l’affichage de notre objet sur la scène, c.a.d. la hauteur de notre clip d’animation soit 185 pixels (à la condition qu’il est déjà été posé sur la scène).
14	Afin de valider l’événement du double-clic, il faut mettre la variable doubleClickEnabled à true. On peut regarder la documentation ici.
15-16	On va permettre à mc de répondre à 2 types d’événements souris: doubleClick et click. Vous pouvez lire la documentation ici Note: « doubleClick » = MouseEvent.DOUBLE_CLICK « click » = MouseEvent.CLICK
19-21	On définit la fonction qui va être lancée après le double click. Event.Target contient la référence à l’objet qui va être la cible de l’événement, c.a.d. l’objet qui va répondre à cet événement, et dans notre exemple, c’est le clip d’animation de notre voiture. (vous pouvez voir la documentation ici) Après avoir utilisé le double-clic sur l’image de la voiture, il va commencer à bouger vers la droite grâce à l’événement EnterFrame
22-24	On définit la fonction qui sera exécutée au moment de l’événement EnterFrame. On le fait se déplacer vers la droite.
25-27	On définit la fonction qui sera exécutée quand on cliquera sur mc. On veut juste qu’il s’arrête après que l’on ait cliqué dessus, et la meilleure façon de la faire est d’arrêter l’événement EnterFrame. On peut le faire avec la commande removeEventListener (vous pouvez voir la documentation ici). Les paramètres sont identiques à ceux de la commande addEventListener.

3. On arrive à la fin. Retournez au fichier tut_4.fla et générer le fichier d’animation .swf. Quand vous double-cliquez sur la voiture, il se déplace vers la droite. Quand vous faîtes un clic simple, la voiture s’arrête

Rappelez-vous :
• comment utiliser une image importée en AS3. Il suffit de lui assigner une classe et, dans le code, cet objet sera représenté par cette classe
• La différence entre stage.stageHeight et stage.height
• Avant d’utiliser le double-clic, il faut mettre la valeur de doubleClickEnabled à true
• Comment enlever un événement avec removeEventListener

• Non classé
• Comments(22)