Cette page est la suite du cours exercices pour apprendre les bases actionscript de Flash (AS3) tutoriel 3
Voila ce que l’on veut obtenir :
Téléchargez les éléments graphiques pour pouvoir faire l’exercice
ETAPE 1 Les étincelles
A création d’un clip et animation
Création d’une interpolation de mouvement dans un clip (pas sur la scene) et stop à la
fin de l’animation liaison ou
stop()
exportation du clip pour pouvoir l’appeler par des scripts
bibliothèque >> exporter pour actionscript
B appel du clip sur la scène et parametrage de celui ci sur la
scene
Création d’un clip dynamique
var etincelle:MovieClip;
etincelle=new MovieClip();
addChild(etincelle);
Integration d’un movie clip de la bibliothèque dans un clip
etincelle.addChild(new pointnoir());
Positionnement du clip par rapport à la souris
etincelle.x=mouseX;
même chose pour y
Taille aléatoire du clip
var scale=Math.random();
etincelle.scaleX=scale;
même chose pour la hauteur
C multiplication du clip
Multiplication du clip gràce à une boucle for
for (var ii=0; ii<20; ii++) {… }
dans cette boucle à la fin et juste avant l’accolade, vous devez ajouter le script suivant
:
while ( numChildren > 500 ) {removeChildAt(6);}
Ce script permet de limiter le nombre de clip “etincelle” sur la scène
D Déclenchement du script au bougé de la souris
intégration de tous le script réalisé jsuque là dans une fonction
function creationdetincelles(evt:MouseEvent) { …. }
Appel de ma fonction par un écouteur d’événement
stage.addEventListener(……..,…….);
ETAPE 2 Le balon et l’éléphant
A création des clips balon et elephant soleil et lunette
- Création d’un clip “balon” sur la scène
à l’interieur du clip plusieurs interpolation de mouvement ou de forme reproduisant
l’éclatent du balon
un stop au début et un stop à la fin de l’animation
- Création d’un clip éléphant sur la scène :
- Création d’un clip soleil sur la scène :
- On cache les clips soleil et lunettes
Pour une question de lisibilité, vous pouvez mettre ces scripts en jsute apres les scripts
d’import de la classe tween
soleil.visible=false;
Lunettes.visible=false;
la propriété visible rend invisible si elle est égale à false, visible si elle est égales à true
B animations des clips
Import de la class TweenMax
TweenMax fonctionne et fait la même chose que tweenLite avec des petits extras en
plus
Pensez à mettre le dossier “com” et la ligne de script au tout début de votre page de
script
Animation du clip balon et du clip
TweenMax.to(balon, 4, {y:100, repeat:-1, yoyo:true ,ease:Quad.easeInOut});
TweenMax.to(elephant, 4, {y:180, repeat:-1, yoyo:true ,ease:Quad.easeInOut});
petite nouveauté (que TweenLite n’a pas)
repeat:-1, yoyo:true permet de créer une animation en boucle infinie
C Explosion du ballon et chute de l’éléphant au clic sur le balon
Création d’un fonction qui déclenche l’animation du clip balon
balon.play();
TweenLite.to(elephant, ………{……………., onComplete:showCowboy});
On ajoutera dans cette fonction les lignes qui annule les ecouteurs d’évenements
précedants
balon.removeEventListener(MouseEvent.MOUSE_DOWN,explosion);
stage.removeEventListener(MouseEvent.MOUSE_MOVE,mous);
Appel de ma fonction par un écouteur d’événement
balon.addEventListener(……,………);
le script onComplete:showCowboy appel une fonction (ici la fonction se nomme show-
Cowboy) à la fin de l’animation
Dans cette fonction showCowboy vous allez avancer la lecture du clip elephant d’une
frame
elephant.nextFrame();
Dans cette même fonction, rendez les clips soleil et lunettes visibles
soleil.alpha=1;
soleil.Bulle.text=”Faites glisser les lunettes sur l’éléphant “;
Lunettes.visible=true;
ETAPE 3 Drag des lunettes et tir du singe
A Faites un drag and drop des lunettes avec un hittest sur
l’éléphant
Créer un clip singe et mettez le sur la scène
Créez un clip d’arriere plan qui prend toute la surface de la scène et que vous positionner
en arriere plan.
Lunettes.addEventListener(…………., drag);
Lunettes.addEventListener(……………….., stopdrag);
Lunettes.buttonMode=…….;
function drag(evt:Event) {
Lunettes………..
}
function stopdrag(evt:Event) {
if (Lunettes.hitTestObject(…………….)) {
///aretez le drag
Lunettes…….
///rendez les lunettes invisibles
Lunettes…….=……..
////Rendez le clip d’arrière plan et le singe visible
Singe……..=……..
background……..=……..
///faites avancer d’une frame la lecture du clip éléphant
elephant……….();
///Affichez un nouveau text dans la bulle
soleil.Bulle.text=”Cliquez pour tirer “;
////Lancez un écouteur qui permet au singe de suivre la souris sur les abscisses
x
stage.addEventListener(…………,singeMov);
}
}
B Tir du singe
Créez un clip tirBoulet avec une animation à l’intérieur du clip qui reproduit
un tir utilisez pour cela une interpolation demouvement et un guide de trajectoire
///Création d’une fonction de tir
function Tir(evt:Event) {
var boulet:……;
………=new MovieClip();
addChild(……..);
……..addChild(new tirBoulet());
boulet.x=Singe.x;
boulet.y=Singe.y;
}
Appel de la fonction tir par un écouteur d’événement
ecouteur du singe au clic de la souris sur la scene à mettre dans la fonction stopDrag
……addEventListener(……..,Tir);
ETAPE 4
Elle est pour ceux qui sont très fort…