CS3 AS3 : scénario-programmation » La méthode addFrameScript

[zardoz]

La méthode « addFrameScript ( ) ; » est une méthode prédéfini de flash non documenté. Il serait donc inutile ici de rechercher une documentation issus de Adobe. De plus, une méthode prédéfini non documenté ne pourra pas bénificier de la colorisation syntaxique en zone de développement de script.

Documentation et colorisation syntaxique

Une méthode prédéfini et documenté se voit ainsi en zone d'écriture :
Exemple d'une méthode prédéfini documenté » monClip.startDrag( true, limiteRectangle ) ;

Tandis qu'une méthode prédéfini non documenté se voit ainsi :
Exemple d'une méthode prédéfini non documenté » monClip.addFrameScript ( 6, arrierePlan ) ;

J'ai donc choisi de vous placer en relation avec une des méthodes non documenté » addFrameScript ( ).
Voici sa signature » objetMovieClip.addFrameScript ( keyframe:Number, nomFonction:Function ) ;

Nous resterons donc en développement de scénario mixé à la programmation.

La méthode que nous allons utiliser est sans contre dit très intéressante. Nous allons écrire un script sur le premier keyframe du calque des scripts placer sur le scénario principale. Nous allons ensemble scripter un background étoilées de façon aléatoire. Celui-ci prendra la dimension même du stage, de la scène, bref, du player.

Ce qui est important de comprendre ici, c'est que la fonction arrierePlan ( ) sera exécuter dans un clip d'animation placer en bibliothèque, et ce sur un keyframe spécifié en paramètre de la méthode addFrameScript ( ). Ce clip évidemment sera placer sur un calque spécifique sur le scénario principale, par le fait même nous donnerons un nom d'occurence « ajoutTexture », à ce clip d'animation.

Je vous laisse un aperçu quelque peu technique du fonctionnement de la méthode » addFrameScript ( )
Veuillez prendre note que le projet que nous développerons ensemble aura le même script à exécuter, mais ne contiendera pas les éléments explicatifs textuels. Le fichier zip n'a de but que la compréhension du fonctionnement de la méthode non documenté, mais fonctionnelle.

addFrameScript_02.zip

Note : Ce fichier zip ne concerne que les développeurs en CS3 AS3.
-----> Les utilisateurs devront s'abstenir, car je ne fourni pas de fichier HTML

L'interface graphique de flash CS3

Le scénario principale

Vous avez ici une capture explicative : D'une scène principale.
Il s'agit d'une vue de ce qui vous attend lors de vos développements personnelles.

La partie haute : C'est le scénario.
Celui-ci se subdivise en deux parties : À gauche » les calques et à droite » la timeline.

La partie centrale : C'est la scène.
Certains graphiques pourront être visible sur la scène.
Ceux-ci devront obligatoirement être sélectionner pour activer les fenêtres de configurations.
Voir le rectangle bleu sur la partie centrale. Il s'agit ici d'un clip d'animation sélectionner.
Nous parlerons plus loin du clip d'animation. Celui-ci possède son propre scénario.

La partie basse : C'est les fenêtres des propriétés, de modification et de configuration.
Vous devrez sélectionner un élément graphique pour activer ces fenêtres de configurations.
C'est là que vous pourrez modifier les dimensions, l'alpha, les teintes et plus encore.
Plusieurs onglets sont disponible comme les filtres et les paramètres des composants.
C'est aussi à cette endroit que nous donnons des noms d'instances à nos clips « instances name ».
ainsi que des chaines de caractère à nos étiquettes « frame label ».

NOTE: Remarquez que la timeline du scénario principale n'a qu'un seul keyframe sur chacun des calques.
Le 3ième calque est sélectionner, celui-ci contient le clip d'animation. Ce clip contient pourtant 40 frames.
Vous pouvez le constater à la deuxième capture « scénario de clip d'animation ».



Comme vous pouvez le constater l'interface graphique de ce logicielle n'est pas très compliquer à
comprendre. Les trois parties ci-haut mentionner devrons toujours être présent lors de vos développement
de projets. Ce sont les outils de travail les plus utiliser lorsque nous développons en scénario.

Le scénario d'un clip d'animation

Le scénario d'un clip d'animation est le lieu où nous développons nos animations. En fait il devrais être le
lieu par excellence lors de nos développements. Le scénario principale devra toujours être réserver à la
planification global de nos projets. Les scénarios de clips, tant qu'à eux, servirons aux détails de pièces uniques.
Il est bien de réserver au scénario principale l'assemblage de toutes ses pièces développer en bibliothèque.

NOTE: Voici un exemple de scénario de clip d'animation. Que vous soyez sur la scène « scénario principale » ou
en scénario de clip, vous avez accès à tous les outils de base pour le design, la configuration, et les effets de
filtres. C'est ce clip d'animation qui est placer sur le 3ième calque du scénario principale, à la première capture.



Si vous le désirez passons au détail de l'interface graphique. Nous procéderons à la mise en place des calques
et de la timeline de chacun des scénarios. Nous lancerons notre logiciel et nous commencerons avec le scénario principale.

Lancement du logiciel flash CS3

Lancer votre logiciel et faite : Fichier » Nouveau Document et nommé le addFrameScript_01.fla



Comme vous pouvez le constater sur la capture du haut, nous avons deux calques identifier : « Scripts » et le
suivant « Le clip d'animation ajoutTexture ». Ce dernier est réserver pour accueillir le clip d'animation créer
en bibliothèque.

Nous n'avons pas besoin d'autres calques pour l'instant. Les deux calques principaux sont définis ici, un pour
les scripts et l'autre pour le clip d'animation. Quoique le clip d'animation soit en bibliothèque, celui-ci sera
descendu sur la scène « scénario principale » et placer sur le 2ième calque. Celui du bas.

La préparation des calques » Scénario principale

Si vous cliquez deux fois dans la zone des calques, vous ouvrez la boite de saisi de texte. Cette fonction est importante ici car elle permet une bonne lisibilité lorsque vous développer un projet. Choisissez toujours un
nom qui réflète son contenu. Pour le calque des scripts j'ai nommé le calque « Scripts ». Pour le clip d'animation, même si celui-ci n'est pas encore créer, j'ai nommé le calque « Le clip d'animation ajoutTexture ».

Retenez qu'il est important de créer ses calques au tout début. Si vous avez une idée précise de votre projet, celà ne devrais pas posé de problème particulier. Cependant c'est dans la pratique que nous saurons préparer nos calques avant même d'avoir le moindre graphique en scène ou en biblio.

NOTE : Nous sommes en scénario principale. C'est la valeur par défaut lorsque nous lancons le logiciel.
-------> La capture ne montre que le scénario avec la partie « calques » et la partie « timeline ».
-------> La timeline ne possède qu'un seul frame. Celui-ci est vide de tout objet visuel.



Préparer votre scénario comme le démontre la capture ici en haut. Deux calques.
L'un nommé « Scripts et l'autre nommé « ajoutTexture comme exemple.

Juste en bas des calques, à gauche sur la barre, vous avez 4 icônes. à quoi servent-ils ?.

De gauche à droite

Le premier » ajout d'un calque.
Le deuxième » ajout d'un calque guide.
Le troisième » ajout d'un répertoire.
Le quatrième » soustraire un item. C'est la corbeil

Sur la même barre à droite sous la timeline, vous avez d'autres icônes.
Je ne vous parlerai que des trois derniers, ce sont des chiffres : 1 » 35.0 fps/ips » et 0.0s.

Le premier » C'est la position de la tête de lecture sur le frame courrant : 1 ici
Le deuxième » C'est la cadence de lecture : 35.0 images par seconde
Le troisième » C'est le temps passé : 0.0s.

NOTE : Sous le scénario vous avez deux barres de controle et d'accès. Nous utiliserons fréquemment ces
-------> icônes de controle des calques et d'accès des scénarios. Si vous regardez la barre d'adresse ici
-------> en bas, nous savons que nous sommes en scénario de clip. Scène 1 » ajoutTexture.
-------> ajoutTexture est le clip d'animation. Nous le construirons sous peu.



Sur la barre du bas vous avez trois secteurs avec des icônes.

Le premier à gauche » Accès du scénario à la scène et vice versa
Le deuxième » La fLêche pointant à gauche nous ramène toujours au scénario principale.
----------------> Lorsque la flêche est bleuté, c'est que nous sommes en scénario de clip.
Le troisième » C'est la barre d'adresse. Celui-ci nous renseigne sur quel scénario nous sommes.
----------------> Mieux encore car cette adresse nous rappellent l'imbrication des clips dans d'autres clips.
----------------> Un exemple : scene1 » interface » zoneChargement » navigation.
----------------> Nous pouvons le traduire comme ci :
----------------------> navigation est imbriquer dans zoneChargement.
----------------------> zoneChargement est imbriquer dans interface «« interface est le clip de base.
----------------------> Le clip de base interface est placer sur un calque sur la scénario principale, scène 1.

Créer un clip d'animation » Scénario de clip

Lorsque vous créer un clip d'animation celui-ci se place en bibliothèque.
Voici les démarches à suivre pour créer un clip vide de tout graphique.

À partir de la scène principale faites : Insertion » Nouveau Symbole
Une fenêtre de configuration ouvre. Celui-ci n'est pas apparent dans la capture.
Remplissez le champ » Nom et nommé le ajoutTexture
Assurez vous que le bouton radio sois à MovieClip. C'est sa valeur par défaut.
Faite : OK

À partir de ce moment vous entrez en mode d'édition de clip. Bref vous accédez au scénario du clip.
Celui-ci ne possède qu'un seul calque. Par le fait même vous voyez votre clip dans la bibliothèque.

Voir la capture ici en bas pour plus de référence.



Vous pouvez très bien créer d'autres clips à partir d'un clip de base. Si donc vous êtes sur un scénario de clip
nommé clipParent, vous pouvez dessiner un rectangle en prenant soin de l'installer sur un calque. En sélectionnant ce rectangle vous faites : Insertion » Nouveau Symbole. Ce clipRectangle sera dès lors
imbriquer dans clipParent. L'avantage de cette technique sera que le clipRectangle aura lui aussi son
propre scénario. Attention toutefois avec ce genre de technique car une application peu devenir complexe et ce
très rapidement. Je vous suggère plutôt de développer l'animation d'un clip imbriquer à partir du clipParent.
Le clipParent est le clip conteneur. C'est celui-ci qui sera placer sur un calque du scénario principale.

La préparation des calques » Scénario de clip

La capture suivante suggère la façon de développer les calques et la timeline. Aussi surprenant que celà puisse paraître, ce scénario de clip est déjà fonctionnelle. Ce scénario ne contient aucun graphique. Pourtant nous
aurons un visuel sur ce clip dès le lancement de l'animation.

Vous avez trois calques nommé ainsi :

1 - NOTES : Il s'agit en fait d'un calque étiquettes « frame label ». Je m'en sert ici comme aide mémoire.
Celui-ci est sélectionner comme exemple, afin d'activé la fenêtre des propriétés. Dans le champ de texte j'ai
inscrit « 7ième frame : exécution de la fonction arrierePlan ( ) ». C'est à ce frame que sera exécuté
la fonction arrierePlan ( ), le 2ième param de la méthode « addFrameScript ( param1, param2 ) ;

2 - Scripts : C'est le calque des scripts. Celui-ci se réduit à une simple instruction « stop ( ) ; »
Cette instruction est placer au dernier keyframe numéroté « 40 ». Pour ce faire ?
Cliquez à droite sur le dernier keyframe « 40 » du calque des scripts.
Choisissez » Insertion Image Clé vide ». Insert blank keyframe, ou Insert keyframe.

3 - ajoutTexture : Aussi étonnant que celà puisse paraître, ce calque n'est qu'un prétexte. En effet celui-ci
n'est pas obligatoire. Nous n'avons besoin pour notre projet qu'un clip vide de tout graphique.
C'est l'exécution de la méthode addFrameScript ( param1, param2 ); qui fera le reste du travail. Celui-ci exécutera la fonction arrierePlan ( ) ; au 7ième keyframe du clip d'animation. Ce en quoi vous aurez un
visuel au player. Ce qu'il faut retenir ici, c'est que votre clip d'animation est vide de tout graphique.

Pour une meilleur compréhension du fonctionnement de l'application, je vous suggère de télécharger
le fichier .zip en top page. Celui-ci est développer techniquement de telle sorte que vous voyez la tête de
lecture se déplacer jusqu'au 7ième keyframe et, par le fait même, vous voyez le moment exacte de l'exécution
de la méthode. Cette méthode porte l'instruction : Exécute la fonction «arrierePlan» au 7ième keyframe du clip.

Dernière partie » Installation des 2 éléments

Scénario principale » calque Scripts

C'est sur le scénario principale et sur le premier keyframe du calque des scripts que vous placer ce code.
Pour ce faire vous sélectionner votre keyframe et vous faite F9 pour ouvrir le panel actionScript. Ceci
fait vous coller le script ici en bas.

Code: Tout sélectionner

// .
// .. Pour bien comprendre le fonctionnement
// .. de la méthode addFrameScript(param1:int, param2:fonction);
// .. nous scriptons la cadence à » 1 keyframe par seconde.
// .. Si vous désirez une exécution plus rapide augmenter la valeur « 28 »
// .
stage.frameRate = 1;
// .
// .. initialisation ..
// .
var nombre:Number;
var flou:BlurFilter;
var effet:Array = [];
var pointsTemp:MovieClip;
var i:int;
//.
// .. Conteneur ..
// .
var points:Sprite = new Sprite();
stage.addChild(points);
points.x = 0;
points.y = 0;
//.
//. Duplication .
//.
function nombrePoints($nombre:Number):void {
   nombre = $nombre;
   for (i = 0; i < nombre; i++) {
      pointsTemp = new MovieClip();
      pointsTemp.graphics.beginFill(0xD4D0C8);
      pointsTemp.graphics.drawCircle(0, 0, 4);
      pointsTemp.x = Math.random() * 600;
      pointsTemp.y = Math.random() * 400;
      pointsTemp.alpha = Math.random();
      pointsTemp.scaleX = Math.random();
      pointsTemp.scaleY = pointsTemp.scaleX;
      points.addChild(pointsTemp);
      //.
      flou = new BlurFilter();
      flou.blurX = 2;
      flou.blurY = 2;
      effet = [flou];
      pointsTemp.filters = effet;
   }
}
// .
// .. Cette fonction sera appeller à s'exécuter ..
// .
function arrierePlan()
{
   nombrePoints(600);
}
// .
// .. Appelle de la méthode prédéfini et non documenté
// .. C'est la raison pour laquelle sa syntaxe n'est pas colorisé.
// .. Sa signature » objetClip.addFrameScript(numeroFrame:int, fonction:Function); ..
// .
ajoutTexture.addFrameScript(6, arrierePlan);


Je ne parlerai pas du script ici. Celui-ci est largement commenté dans la zone de code.
Par contre voici quelques points essentielle à retenir.

L'instruction : stage.frameRate = 1; touche directement la cadence de l'animation et ce malgré sa valeur par
défaut « 12 » ou sa valeur configurer « 35 ». Vous pouvez augmenter la valeur si vous désirez accélérer la
vitesse d'exécution de l'animation.

La fonction nombrePoints ( ) ; ne possède qu'un seul élément design. C'est un MovieClip. Celui-ci est dupliquer
selon un nombre paramètrable. Vous pouvez changer ce nombre lors de l'appel de la fonction. L'appel de cette fonction est placer dans la fonction arrierePlan ( ); « function arrierePlan ( ) { nombrePoints( 600 ); } ».

Viens ensuite la méthode addFrameScript ( 6, arrierePlan ) ;. Cette méthode s'occupe d'exécuter la
fonction arrierePlan ( ) ; au keyframe paramétrer « 6 » ou 7ième keyframe du clip d'animation.

Scénario principale » calque du clip d'animation

Le fait que votre clip d'animation soit sans visuel, aucun graphique, vous ne verrez rien sur la scène lorsque
celui-ci sera placer sur son calque, sauf un cercle blanc. Vous placer un clip en sélectionnant son calque.
Vous ouvrez la biblio et vous sélectionnez le clip à descendre sur la scène. Ceci fait vous procédez par glissez-déposez vers la scène. Le calque étant sélectionné vous verrez à votre keyframe, un cercle noir,

En résumer : Vos deux scénario

Vos deux scénario devraient vous donnez cette représentation sur la capture suivante.Comprenez ici qu'aucun
des deux scénario ne possède de graphique, d'objet visuel. Le script sur le premier keyframe du scénario
principale s'occupera du visuel quelques secondes après le lancement de l'animation. Comprenez aussi que
n'importe quelle fonction peut être exécuté ici.



N'oubliez pas de télécharger l'exemple en top page. Celui-ci est spécialement conçu pour mieux saisir le sens
et l'intérêt de la méthode non documenté addFrameScript ( ) ;

Amicalement » zardoz ++