[CS3/AS3] Développement » scénario-programmation
C'est grâce au topic de boulledogue que je fais suite au développement de projet flash directement en scénario. Avec cependant une petite différence. Il y a aussi de la programmation.
TUTO DE BOULLEDOGUE : creer-une-animation-gore-t3023.html
Par contre contrairement aux tutos que j'ai fait jusqu'à maintenant, la programmation est directement écrite en scénario, et ce directement sur le scénario du clip d'animation. Il ne s'agit pas d'une programmation de classe ici, mais d'une simple écriture à comprendre, à étudier.
En fait la programmation en scénario, même si elle est intégrer au clip d'animation, celle-ci ne touche en rien le clip en lui-même. Elle ne surveille que le chargement des données, et elle ne contribut qu'à un controle de lancement de l'animation à partir d'un bouton. Je vous garanti ici que j'ai écrit simplement les scripts. Dailleurs c'est scripts sont si facultatif pour ce simple projet que vous pourrez les enlever. L'animation sera quand même effectif.
Mon but, en premier lieu, est de vous parler de l'intérêt que nous devrions avoir avoir concernant les développements de projets en scénario, et l'intérêt que nous devrions avoir à rester simple.
TUTO DE BOULLEDOGUE : creer-une-animation-gore-t3023.htmlPar contre contrairement aux tutos que j'ai fait jusqu'à maintenant, la programmation est directement écrite en scénario, et ce directement sur le scénario du clip d'animation. Il ne s'agit pas d'une programmation de classe ici, mais d'une simple écriture à comprendre, à étudier.
En fait la programmation en scénario, même si elle est intégrer au clip d'animation, celle-ci ne touche en rien le clip en lui-même. Elle ne surveille que le chargement des données, et elle ne contribut qu'à un controle de lancement de l'animation à partir d'un bouton. Je vous garanti ici que j'ai écrit simplement les scripts. Dailleurs c'est scripts sont si facultatif pour ce simple projet que vous pourrez les enlever. L'animation sera quand même effectif.
Mon but, en premier lieu, est de vous parler de l'intérêt que nous devrions avoir avoir concernant les développements de projets en scénario, et l'intérêt que nous devrions avoir à rester simple.
Les préparatifs » Une manière logique de développement
Planifier son scénario
Le développement en scénario est au départ aussi exgigant que le développement par programme. Il faut tirer le maximum d'expérience avant de prétendre développer de façon logique. Au départ lorsque nous sommes débutants nous choisissons le scénario car nous croyons que c'est plus facile et par le fait même nous nous soustrayons devant la tâche de programmation et les rudes exercices et études soumises. Mais rien n'est vraiment facile dans notre apprentissage. Certaine erreur de développement pourra aisément augmenter le temps passer à modifier ou à réparer. Par contre avec un peu d'expérience et une certain logique ont en arrive, par obligation, à trouver des techniques de bases. Une des plus connu est le clip d'animation.
Le clip d'animation
Le clip d'animation connu sous le nom de « MovieClip » a pour objectif principale de centraliser les objets visuels à un seul endroit. Il possède aussi un scénario, mais celui-ci n'entretiens aucun rapport avec le scénario principal. Il est parfaitement autonome. Ce n'est qu'à la toute fin de son développement que nous le placerons sur le root « le scénario principal ». Son but premier est donc la centralisation des objets visuels et par le fait même il est considérer comme un puissant conteneur. Celui-ci ayant son propre scénario personnel, il pourra profiter de tous les genres d'animations en mouvement. Lorsque vous déplacer un clip/conteneur d'animations tout son contenu se déplace avec le contenant.
À propos des captures » Quelques explications
En premier lieu voici le fichier animationTexte_01.zip »
Installez le et voyons ensemblent quelques points importants de projets en scénario.
En deuxième lieu je vous donnent les résultats exécuter du projet »
Ici l'animation est terminer dans son exécution.
Il s'agit ici des résultats de l'animation une fois terminer mais pas de l'ensemble du player car j'ai placer un bouton dont le but est de rejouer l'animation. L'animation est de courte durée mais nous pouvons rejouer celui-ci à volonter.
Le clip est placer en scénario principale après son développement »
Remarquer ici que rien n'a été développer dans le scénario principal. Il ne s'agit en fait que la descente du clip d'animation de la bibliothèque vers la scène. Vous n'avez donc sur la capture du haut qu'un seul « calque », ayant le clip d'animation développer en bibliothèque.
Le clip a une timeline « scénario » de 40 images « frames ». Cependant il en a 50 dans son propre scénario.
Remarquez aussi que la scène est configurer à 35 fps/ips. Cependant le clip d'animation lui est scripter à 90 ips. On abordera le sujet un peu plus loin sur le topic.
Le scénario personnel d'un clip d'animation
L'organisation des calques
Sur la capture du bas il y a une représentation d'un scénario de clip. Comme vous pouvez le voir celui-ci est propre. Vous avez deux calques qui ne sont pas contenu dans des répertoires. Il s'agit des calques nommé étiquettes et scripts. Ceux-ci resteront visibles car ils sont important. Dû moins dans le développement en démonstration.
Vous avez aussi deux répertoires qui eux contiennent les objets graphiques et le plus important le développement de l'animation. Cette animation est un clip placer en bibliothèque, celui-ci se nomme « clip d'animation de texte ». Si vous cliquez deux fois dans la zone visuelle de ce clip vous accédez au scénario du clip.
Si vous placer logiquement en répertoire vos clips d'animation vous aurez une meilleur vue de votre projet et de même utiliserez moins souvent le scrollbar du scénario. C'est donc une bonne habitude à prendre que de planifier des répertoires d'objets et de les différenciés des autres objets. Prenez note aussi que les répertoires en scénario flash existe depuis la version MX 6.
Exemple d'un scénario dont les répertoires sont fermer » Les points à retenir ici seront les deux calques principaux.
Ceux-ci sont à l'extérieur des répertoires.
» étiquettes
» scripts
Vous avez aussi les deux répertoires pouvant être ouvert ou fermer pour un meilleur confort.
» objets : On pourrais le nommer objets d'animation.
» boutons
Remarquez de même que toute l'animation est effectif dans la zone « étiquettes/lecture » sur le calque « objets ».
La zone étiquettes/initialisation ne comprend qu'une partie de scripts sur le calque « scripts ».
Aucune animation ou objet visuel ne s'applique dans la zone « initialisation ». Celà est facultatif évidemment mais vous pourriez utiliser cette zone pour un graphique de « bienvenu ou page d'accueil », comme exemple. Cette zone est réserver pour la surveillance des chargement des données. Cette zone est donc tout désigné pour un préchargeur. C'est à la deuxième capture de scénario que vous pourrez mieux le voir, car celui-ci, les répertoires sont ouvert. La partie « bleuté » de la timeline représente l'animation. Il s'agit d'interpolation de formes.
Comme je vous le disais il s'agit d'un clip ayant son propre scénario. En vérité c'est qu'un clip n'a rien à envier du scénario principal. Son but est justement d'alerger le scénario principal. Le scénario principal joue un rôle d'accueil de différent projets, tout comme une page HTML étant un conteneur de lecteurs de toute sortes.
Votre scénario principal accueillera n'importe quel projets, peut importe la source d'origine et de destination. C'est son rôle et vous devriez le considérer comme tel. Celà vous simplifira la tâche de développement en scénario-programmation comme en scénario tout court. Ici les répertoires sont ouvert. Il s'agit du même scénario qu'à la capture ci-haut mentionné.
Parlons des deux premiers calques du scénario de clip
Le calques étiquettes
Les étiquettes ont un but précis que vous devriez toujours utiliser. Ceux-ci ont pour but de placer une « String » au lieu d'un « nombre » lorsque vous programmer. Exemple » gotoAndStop('lecture');.
Ce point est d'une grande importance. Vous allez sauver énormément de travail si une modification au niveau de la timeline vous est demander uniquement parce que vous utilisez une « String » plutôt qu'un « nombre ».
Si donc vous déplacer un frame cibler par un nombre, gotoAndStop(12);, à « 18 » par exemple, vous allez être dans le pétrin. Vous allez devoir retrouver tout les programmes contenant la ligne de code gotoAndStop(12); afin de les modifier à gotoAndStop(18);.
Il n'en sera pas de même si vous choisissez une « String », sa valeur sera toujours constante, même si vous la déplacer en timeline. Considérer ce point car il est d'une grande importance en développement de scénario.
Il en est de même du calque « scripts ». Celui-ci doit toujours être à proximité du calque « étiquettes ». Il doit aussi être visible, en dehors des répertoires. Nous parlerons des scripts un peu plus bas sur le topics. En principe il est possible, donc préférable, d'écrire tous les scripts sur la première « image clé » du scénario du calque des scripts.
Le calque scripts
J'ai déjà parler des calque scripts. Allons y un peu plus profondément »
D'abord j'aimerais dire que vous ne pourrez pas vous départir du calque « scripts ». Ceci est dû au fait que vous aurez toujours besoin au minimum de la fonction « stop( ); ». C'est pourquoi ceux et celles qui voudront éviter la programmation pour quelques raisons que ce soit, vous devrez quand même structurer un calque pour les scripts.
Si votre application est interactive ces principes de bases vous seront familier. Alors n'essayez pas d'éviter ne serais-ce que le minimum permis et obligatoire. Sans quoi votre animation sera lu en continu. C'est la valeur par défaut du player flash.
À quelque part une animation se doit d'être interactive ou doit tout simplement faire une pause. Soit par une action utilisateur ou par un programme d'automatisation basé sur le temps. N'oublions pas que toute animation, si petite sois telle utilise une ressource machine.
Les fonctions « stop( ) et play( ) » est le minimum requis. Remarquons quand même qu'une animation répétive, comme on en vois souvent sur le web, dans les bannières publicitaire par exemple requiert le minimum requis en programmation. Cependant il est aussi intéressant de faire des animations simple en scénario et sans aucune programmation.
Entrons au coeur du calque des scripts
- Code: Tout sélectionner
stage.frameRate = 90;
// ...
/* Le but de cette fonction est de prévoir
* la possibilité d'un préchargeur si vous
* avez une application de forte taille et
* surtout placer sur un serveur à distance.
*/
// ...
function chargement():void
{
if(framesLoaded >= totalFrames)
{
// .
// .. Si oui, si le chargement des frames est completer,
// .. ce qui est le cas ici, Vous passer à l'étiquette nommer » lecture.
// .
gotoAndPlay('lecture');
// .. Traçons au » Output Panel.
trace('Images clés charger :', framesLoaded, '\nMaximum d\'images clés à charger :', totalFrames);
}
else
{
// .
// .. Si non, la fonction stop();, agira sur cette image clé.
// .. Vous resterez sur l'étiquette nommer » initialisation,
// .. et ce, pendant toute la durée de chargement des frames.
// .. Lorsque le chargement est completer nous changons d'étiquette.
// .
stop();
trace('Images clés charger :', framesLoaded, '\nMaximum d\'images clés à charger :', totalFrames);
}
}
// .. Appelle de la fonction
chargement();
Vous pourriez très l'écrire comme ceci » D'ailleurs je le recommande pour les débutants en programmation.
Sur le deuxème script si vous enlever la fonction « chargement() », ainsi que l'appelle de la fonction « chargement( ) », vous bloquez l'animation à la première clé de la zone « étiquettes/initialisation ».
Il n' y a aucun graphique à cette zone. Car nous disons « stop( ) » dès la première ligne de code. Ce qui prouve le bon fonctionnement du script de la fonction « chargement( ); ». La vitesse d'exécution provient de la deuxième ligne de code « stage.frameRate = 90; ». En effet car nous pouvons programmer l'ips en dehors de sa valeur par défaut « 12 ».
- Code: Tout sélectionner
stop();
stage.frameRate = 90;
function chargement():void
{
if(framesLoaded >= totalFrames)
{
// .
// .. Si oui, si le chargement des frames est completer,
// .. ce qui est le cas ici, Vous passer à l'étiquette nommer » lecture.
// .
gotoAndPlay('lecture');
// .. Traçons au » Output Panel.
trace('Images clés charger :', framesLoaded, '\nMaximum d\'images clés à charger :', totalFrames);
}
else
{
// rien
}
}
// .. Appelle de la fonction
chargement();
Malgré qu'un « stop( ); » soit défini dans les scripts, le lancement de l'animation nous ramène toujours à « étiquettes/lecture ». Celà est dû au fait que l'animation n'a pas de poid majeur à charger, et qu'il roule en local.
Dans ce script il y a une condition « if », qui détermine le moment où nous passons de la zone « initialisation » à la zone « lecture ».
if ( framesLoaded >= totalFrames ) { gotoAndStop( ' lecture ' ); }.
En pseudo-code nous dirions « Si le nombre de frames charger est plus grand ou égale au nombre à charger , gotoAndPlay( ' lecture ' ); ».
De cette façon le premier keyframe est important et c'est la raison pour lequelle il est nommé « initialisation », en effet puisque la plupart des variables de controles ou d'init, ainsi que les fonctions se retrouverons sur cette partie.
En vérité c'est que tous vos programmes controlant votre application peuvent se placer à ce keyframe. Le conseil que je vous donnent ici c'est de réfléchir la façon dont vous allez disposer vos programmes sur votre timeline.
En développement scénario-programmation vous aurez deux développements très distincte l'une de l'autre. Le scénario d'une part et sa programmation d'autre part. Opter pour la logique en matière de développement et vous en serez témoin.
Passons au deuxième script
Celui-ci se retrouve au dernier keyframe du calque « scripts », donc dans la zone étiquettes nommé « lecture ».
Remarquez ici que j'ai conserver le « nombre » plutôt qu'une « String », en ce qui concerne les deux scripts du bouton. C'est normal puisque qu'il s'agit d'un clip d'animation en lui même, parfaitement autonome aussi, et ne possèdant que deux keyframes placer côte à côte. Ce clip ne risque pas de changer.
Celui-ci est placer dans le clip « clip d'animation de texte ». C'est là l'importance des clips, ceux-ci peuvent être imbriquer l'un dans l'autre. Le clip « clip d'animation de texte » est le clip d'acceuil de tous les autres clips figurant dans l'animation finale.
Cependant chacun des clips figurant ont un scénario propre et parfaitement autonome. Si donc vous déplacer en « y » le clip « clip d'animation de texte », du root, c'est la scène principale, tous les autres seront aussi déplacer car ils sont tous imbriquer l'un dans l'autre.
- Code: Tout sélectionner
stop();
btnRelecture.addEventListener(MouseEvent.CLICK, relecture);
btnRelecture.addEventListener(MouseEvent.MOUSE_OVER, couleurOverBouton);
btnRelecture.addEventListener(MouseEvent.MOUSE_OUT, couleurOutBouton);
buttonMode = true;
function couleurOutBouton(e:MouseEvent):void
{
btnRelecture.gotoAndStop(1);
}
// ..
function couleurOverBouton(e:MouseEvent):void
{
btnRelecture.gotoAndStop(2);
}
function relecture(e:Event):void
{
gotoAndPlay('lecture');
}
Ce script n'a qu'un seul but, relancer à volonté l'animation. Évidemment c'est dans un contexte tutoriel que le bouton a été placer et scripter. Dans un contexte commerciale je l'aurais développer autrement, c'est à dire sans contrôle utilisateur. J'aurais plutôt utiliser un objet « Timer ». Un contrôle automatique basé sur le temps.
Par contre le keyframe « No 50 » du calque script resterais en place puisque nous avons encore besoin de l'instruction « stop( ); ». Celui-ci restera essentielle. Par contre l'animation ne jouerais qu'une seule fois. Il faudrais relancer l'animation au 10/s, avec l'objet « Timer ».
Le mouvement des formes en scénario
L'interpolation
Dans ce projet vous avez le répertoire « objets ». Celui-ci s'exécute dès le lancement de l'animation. Il s'agit de quelques interpolations. Ceux-ci ont pour but de créer le mouvement d'un projet. Cette animation n'est gérer par aucun programme.
Vous comprenez comme moi que le mouvement est un art en soi. Celui-ci doit être communicatif soit d'un message, d'une émotion ou d'une beauté quelquonque. Le mouvement des objets ne doit pas être pris à la légère. Plus vous vous lancerez vers de gros projets, plus vous devrez vous assurez de la qualité des mouvements.
Souvent dans un clip d'animation, vous vous retrouvez avec plusieurs autres clips imbriquer les un dans les autres chacun ayant son propre scénario. Chaque scénario pouvant être développer de façon autonome, chacun des objets visuels ayant son propre mouvement.
C'est pourquoi nous sommes appeler à réfléchir le mouvement des objets en rapport avec son environnement immédiat. De là , évidemment, le besoin de développer scénario et programmation sur la timeline du clip d'accueil, du clip de base. Ce clip de base est le clip qui sera placer sur la timeline du scénario principal, le root.
Prenez note tout simplement que le mouvement des objets de votre animation demandera un temps de recherche et de réflexion. Vous serez appeler à faire des choix.
amicalement ++
NOTE : Certaines indications intéressantes m'ont été suggérer. Je vous promets donc un prochain tuto axé vers la connaissance de l'interface graphique de Flash, avec des captures explicatifs axé sur des techniques de base offert par ce merveilleux logiciel.
C'est souvent difficile d'exprimer qqch de complexe pour que même un novice (comme moi) le comprenne.
