Tout en haut, à droite, à côté du cadre de saisie de texte, vous pouvez choisir l'interface de flash. Je travaille avec "designer".

Animation

Déplacement d'un objet (interpolation classique)

On va commencer par faire un carré qui se déplace de gauche à droite. Dessinez un carré dans l'espace blanc l'espace blanc en bas (votre feuille, appelé "stage").
Vous pouvez lancer l'anim flash avec ctrl+entrée pour le voir.

Tout en haut, dans la timeline, notez que vous étiez sur l'image 1. Cliquez sur l'image 30, et insérez une keyframe. C'est à dire qu'il se passe quelque chose dans cette image. Déplacez votre carré de l'autre côté de la feuille, à droite. Si vous lancez l'anim flash, vous verrez le carré à gauche... puis, au bout d'un certain temps d'attente, il apparaitra très rapidement à droite, une micro-seconde.

Il faut dire à flash de calculer des images intermédiaires. Entre les deux images clefs faites un clic droit, par exemple à l'image 15. Puis choisissez "Create classic tween" (tween=interpolation en français).

Voilà, si vous lisez votre animation, le carré noir se déplace de gauche à droite.

Animation image par image

Rien de plus simple. Dessinez, par exemple, un bonhomme.

Dans la timeline, ajoutez une "blank keyframe". Ca efface ce que vous avez dessiné avant, et affichera ce que vous dessinerez maintenant. A côté des boutons de lecture se trouve des boutons avec des carrés bleus les uns sur les autres, cela active "l'onion skins" vous permettant de voir les images précédentes et suivantes.

Action Script 3

Avec Flash CS5.5.

Bouton cliquable

On va faire un bouton sur lequel on peut cliquer, qui va lancer l'interpolation qu'on a fait juste au dessus.

Pour commencer, on voudrait que l'animation ne se lance pas toute seule. Faites un clic droit sur la première frame, choisissez "action" (ou appuyez sur F9). La fenêtre de code s'ouvre, écrivez "stop();".

Pour le bouton, dessinez donc un autre carré. Faites un clic droit dessus et changez le en symbole. A droite, dans les propriétés, vous voyez le nom de ce carré. Ce carré est une instance en anglais, occurrence en français. Il n'a pas encore de nom. Donnez lui un nom en modifiant le premier champ de texte, par exemple le nom "boutonLancement".

Retournez dans l'action de la première frame. On veut surveiller si le bouton de la souris a été enfoncé sur ce bouton, donc ;

boutonLancement.addEventListener(MouseEvent.MOUSE_DOWN,relancerTeteLecture);

S'il a été enfoncé, la fonction relancerTeteLecture est lancée. Ecrivons cette fonction :

function relancerTeteLecture(evt:MouseEvent) {
   play();
}

Pour le fun vous pouvez modifier des propriétés de boutonLancement. Par exemple, boutonLancement.scaleX = boutonLancement.scaleX+1; pour le faire changer de taille.

Texte

C'est toujours utile de pouvoir afficher du texte pour savoir le contenu des variables etc. Créez du texte sur votre page avec l'outil texte. Pour lui donner un nom d'instance, ne choisissez par "texte classique" mais l'autre, "tlf text".

Pour changer ce qu'il affiche : testtext.text="lol";

Il y a néanmoins un moyen beaucoup plus simple de savoir le contenu d'une variable, c'est d'utiliser "trace".

trace("Coucou"); Affichera "coucou" dans l'onglet "ouput", à côté de l'onglet de la timeline.

Trouver les propriétés/évènements/commandes

A gauche, vous avez une bibliothèque avec les propriétés/évènements/commandes etc. Tout en bas, vous avez un index (il est long à s'ouvrir la première fois, attention). Utile, par exemple, si vous connaissez une propriété pour un objet mais aimeriez en savoir d'autre. Clic droit⇒show original.

ScaleX, par exemple, se trouve dans flash.display⇒DisplayObject⇒properties. Vous voyez ainsi qu'il y a des commandes de rotation, de déplacement, de visibilité...

Vous pouvez cacher/afficher le panneau en cliquant sur la flèche sur le bord gauche du panneau, ou le dernier bouton de la barre d'outil en haut.

Variables globales

Définissez simplement votre variable en dehors d'une fonction pour qu'elle soit accessible partout.

Détecter l'image (frame) actuelle

On ajoute un listener qui va écouter la frame actuelle et lancer la fonction frameactuelle :

addEventListener(Event.ENTER_FRAME, frameactuelle);

function frameactuelle(evt:Event):void { 
	if(currentFrame==30){
		play();
		trace("Chargeur 2 prêt !");	
		chargeur.visible=false;
		chargeur2.visible=true;
	}
}

Généralités

* Le code est asynchrone. Si on demande le chargement de quelque chose à la frame 1, ligne 10, flash n'attendra pas la fin du chargement avant de passer à la ligne 11, puis à la frame 2, etc.

Exemple, un fichier avec frame 1 :

var chargeur:Loader = new Loader();
   var adresseImage:URLRequest = new URLRequest("http://www.cndp.fr/crdp-besancon/fileadmin/CD70/Fichiers_cd70/ressources_pedagogiques/bulletin_histoire/archives4_doc3B_schema.jpg");
   chargeur.load(adresseImage);
   addChild(chargeur);

Frame 2 : trace("nous sommes à la frame 2");

Frame 3 : stop();

* Ne pas commencer les variables avec un chiffre.
* La casse est prise en compte.
* Le script se déclenche avant que la frame soit affichée. Si à la frame 10 on fait un gotoAndPlay(1), on ne verra pas la frame 10, juste la 9 puis la 1.

Récupérer des paramètres html

Pour embed proprement :

<object  wmode="transparent"><param name="wmode" value="transparent" /><embed bgcolor="#f8f4e8" width="249" height="233" src="mon.swf" FlashVars="premierparam=test&deuxiemeparam=test2" wmode="transparent"/>

Les paramètres sont évidemment envoyés avec FlashVars="premierparam=test&deuxiemeparam=test2".

//la fonction loaderComplete se déclenche quand notre swf soit totalement chargé.
this.loaderInfo.addEventListener(Event.COMPLETE, loaderComplete);

function loaderComplete(myEvent:Event)
{
  var flashVars=this.root.loaderInfo.parameters;
  
  //les variables sont dans flashVars.premierparam;, on les affiche dans le output
  trace(flashVars.premierparam);
  trace(flashVars.deuxiemeparam);
}

Ref :
http://www.permadi.com/tutorial/flashVars/indexAs3.html

Faire un preloader

Avec une instance/occurence/un truc dessiné s'appelant "jauge", qui est une sorte de ligne qui traverse la page.

//pour éviter que l'anim avance sans qu'elle soit chargée
stop();

//on réduit jauge au max
jauge.scaleX=0;

//chargeur est un objet "loader", qui va charger des trucs
var chargeur:Loader = new Loader();

//on lui indique ce qu'il doit charger
var adresseImage:URLRequest = new URLRequest("votre image ou swf");
chargeur.load(adresseImage);

//on l'affiche sur le document flash
addChild(chargeur);

//on va écouter la progression du chargement. A chaque petite progression, appeler chargementEnCours.
chargeur.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS,chargementEnCours)

//Affiche "loading" en output et fait grandir la jauge selon le pourcentage restant.
function chargementEnCours (evt:ProgressEvent) {
	trace("loading");
	jauge.scaleX=evt.currentTarget.bytesLoaded/evt.currentTarget.bytesTotal;
}

//on va écouter, cette fois, sile chargement est terminé. Si oui, on va appeler la fonction chargementTermine
chargeur.contentLoaderInfo.addEventListener(Event.COMPLETE,chargementTermine)

//On affiche un message, on joue l'animation
function chargementTermine (evt:Event) {
	trace("Chargement terminé");
	play();	
}

Ref :
http://www.yazo.net/index.php/charger-une-image-ou-un-swf

Interface

Pour zoomer : Ctrl+shift.

Double clic sur un symbole permet de l'éditer, double cliquer à l'extérieur du symbole pour sortir de ce mode (ou CTRL+E). En fait, le document principal (stage) contient des images, une timeline, etc. qui peuvent eux-mêmes contenir des images, des timelines, etc.

Ctrl+espace pour l'autocompletion.

Docsjapon