Petite astuce copier une animation de la timeline dans une classe

Dans ce didacticiel, nous allons utiliser une animation de scénario pour créer une classe personnalisée. Nous utiliserons ensuite la classe sur deux MovieClips différents et distincts, en dupliquant efficacement l'animation sous ces symboles..

Bref aperçu

Une des nouvelles fonctionnalités de Flash CS3, avec ActionScript 3, était la possibilité de copier une animation de scénario en tant que code AS3. Dans ce didacticiel, nous allons créer une classe personnalisée pouvant être utilisée sur n’importe quel clip choisi. La classe résultante est principalement basée sur XML et n'est pas quelque chose que vous voudriez écrire à la main - ainsi, pas à moins que vous ne soyez prêt pour beaucoup de travail et de frustration!

Dans l'exemple de fichier SWF ci-dessus, nous ne faisons que agrandir et atténuer les MovieClips, mais une animation très complexe pourrait également être copiée vers ActionScript. La meilleure chose à propos de la copie d'une animation de scénario dans une classe est la réutilisabilité. Vous pouvez voir que les deux symboles suivent exactement le même schéma d'animation.

Étape 1: Configuration du document

Ouvrir un nouveau document Flash et définir les propriétés suivantes

Taille du document: 400x200px
Couleur de fond: #FFFFFF

Étape 2: Configuration du MovieClip

Dans le panneau Outils, sélectionnez l'outil Ovale et tracez un cercle vert sur la scène. Vous pouvez maintenir la touche Maj enfoncée pendant que vous faites glisser le cercle pour que sa forme soit conforme à celle d'un cercle et non à une ellipse étendue..

Dans le panneau Propriétés, donnez au cercle les dimensions suivantes

W: 27.00
H: 27.00

Cliquez avec le bouton droit sur le cercle que vous venez de créer et choisissez "Convertir en symbole". Entrer cercle comme nom et assurez-vous que le type est défini sur Clip du film.

Étape 3: Ajout de l'animation au MovieClip

Sur la timeline, cliquez avec le bouton droit de la souris sur l’image 60 et choisissez «Insérer un cadre clé»..

Assurez-vous que vous êtes toujours sur l'image 60 et que, dans le panneau Outils, utilisez l'outil Transformation libre pour faire glisser le cercle d'environ deux fois sa taille d'origine..

Assurez-vous que vous êtes toujours sur l'image 60 du cercle MovieClip. Dans le panneau Propriétés, choisissez "Effet de couleur". Dans le menu déroulant Style, choisissez "Alpha" et réglez-le sur 0%.

Cliquez sur le calque sur lequel se trouve le cercle pour vous assurer que toutes les images sont en surbrillance. Vous pouvez également cliquer sur le premier cadre, puis sur Maj.-Clic sur le dernier cadre pour vous assurer que tous les cadres sont en surbrillance. Puis faites un clic droit n'importe où entre les cadres en surbrillance et choisissez "Créer un tween classique".

Vous pouvez maintenant tester votre animation en allant sur Menu> Contrôle> Jouer. Vous devriez avoir un MovieClip en croissance et en décoloration.

Étape 4: Copier l'animation

Nous sommes maintenant prêts à copier notre animation de chronologie et à coder notre classe..

Assurez-vous que tous les cadres sont mis en évidence en utilisant la technique ci-dessus. Cliquez ensuite avec le bouton droit de la souris sur l'interpolation dans la ligne de scénario et choisissez "Copier le mouvement en tant que ActionScript 3.0". Dans l'invite qui apparaît, attribuez-lui le nom d'instance "GrowFade".

Copiez le code qui apparaît dans votre presse-papiers.

Étape 5: Codage de la classe

Créez un nouveau fichier ActionScript en allant à Menu> Fichier> Nouveau puis en choisissant Fichier ActionScript.

Ajoutez le code suivant au nouveau fichier AS:

 package import flash.display.MovieClip; importer fl.motion.Animator; Classe publique GrowFade étend MovieClip var GrowFade_animator: Animator; fonction publique GrowFade () // code constructeur fonction publique growAndFade (): void

Ici, nous ouvrons notre paquet et faisons quelques importations. La classe Animator est ce qui est utilisé pour faire l'animation dans notre classe. La fonction growAndFade () est l'endroit où nous allons coller le code ActionScript copié à partir de l'étape ci-dessus. Nous faisons cela ensuite.

À l'intérieur de growAndFade () fonction coller le code ActionScript. Si vous devez le copier à nouveau, suivez simplement les étapes ci-dessus et assurez-vous de lui donner le nom d'instance "GrowFade"..

le GrowAndFade la fonction devrait maintenant ressembler à quelque chose comme ça

 package fonction publique growAndFade (): void import fl.motion.Animator; var GrowFade_xml: XML =                         ; var GrowFade_animator: Animator = nouvel Animator (GrowFade_xml, GrowFade); GrowFade_animator.play ();

Nous devons effectuer des travaux de nettoyage sur ce.

Nous devons d’abord supprimer l’instruction d’importation car nous l’avons déjà fait au début de la classe..

Ensuite, nous voudrons déclarer le GrowFade_animator en tant que variable locale de la classe, nous allons donc déplacer cela vers le haut et instancier dans le GrowAndFade fonctionne comme ceci: GrowFade_animator = nouvel animateur (GrowFade_xml, this)

Vous avez peut-être remarqué que nous avons également changé le deuxième paramètre en ce. La raison pour laquelle nous avons fait cela est que nous pouvons utiliser cette classe sur n'importe quel MovieClip; si nous ne l'avions pas changé pour ce alors seules les classes portant le nom d'instance "GrowFade" pourront utiliser cette classe.

Voici la classe complète avec les nouvelles modifications et un petit ajout. Nous discuterons de cet ajout prochain.

 package import flash.display.MovieClip; importer fl.motion.Animator; classe publique GrowFade étend MovieClip var GrowFade_animator: Animator fonction publique GrowFade () // code constructeur fonction publique growAndFade (): void import fl.motion.Animator; var GrowFade_xml: XML =                         ; GrowFade_animator = nouvel animateur (GrowFade_xml, this); GrowFade_animator.play (); // Combien de fois répète l'animation 0 = pour toujours GrowFade_animator.repeatCount = 0;

Vous remarquerez que nous avons ajouté le repeatCount propriété. Ce paramètre spécifie combien de fois l'animation doit être répétée. Le mettre à zéro signifie qu'il se répètera pour toujours.

Étape 6: Configuration des MovieClips

De retour dans la FLA, supprimez le cercle de la scène et supprimez toutes les images de la timeline.

Dans la bibliothèque, cliquez avec le bouton droit de la souris sur cercle clip et choisissez "Propriétés".

Donnez au cercle le nom de classe "Cercle" et définissez la classe de base sur "GrowFade"; Comme la classe GrowFade étend MovieClip, nous pouvons l’utiliser comme classe de base du cercle. Nous n'avons pas créé de classe Circle, mais comme nous avons défini GrowFade en tant que classe de base, Flash crée automatiquement une classe pour le cercle qui étend GrowFade, lorsque le fichier SWF est créé. C’est ainsi que nous pouvons utiliser autant de clips que nous le souhaitons, partageant tous la classe GrowFade..

Ensuite, dessinez un rectangle bleu sur la scène.

Dans le panneau Propriétés, attribuez à ce rectangle les propriétés suivantes:

W: 83.00
H: 30:00

Faites un clic droit sur le rectangle et choisissez "Convertir en symbole"; donne le nom carré.

Supprimer le rectangle de la scène. Dans la bibliothèque, cliquez avec le bouton droit sur le carré MovieClip. Choisissez "Propriétés" et donnez-lui le nom de classe "Carré" et réglez la classe de base sur "GrowFade" comme nous l'avons fait avec le cercle ci-dessus..

Étape 6: Application de la classe aux clips vidéo

Créez un nouveau fichier ActionScript et ajoutez-y le code suivant:

 package import flash.display.MovieClip; classe publique Main étend MovieClip var circle: Circle; var square: carré; fonction publique Main () circle = new Circle (); cercle.x = 50 cercle.y = 50; addChild (cercle); circle.growAndFade (); square = new Square; square.x = 200; square.y = 50; addChild (carré); square.growAndFade ();

Comme nous définissons la classe de base du cercle et du carré sur GrowFade, nous pouvons appeler growAndFade () méthode sur eux.

Définissez la classe de document du film sur Main et testez le film. Vous devez avoir deux clips distincts utilisant la même animation GrowAndFade.

Conclusion

Etre capable de copier une animation de chronologie est un excellent ajout à Flash. Quelle que soit la complexité de votre animation, Flash peut la gérer à votre place. Pouvoir partager la même animation avec plusieurs clips différents représente un gain de temps considérable..

J'espère que vous avez apprécié ce tutoriel, merci d'avoir lu!

Code