Bonjour à tous, aujourd'hui je souhaitais vous parler d'une Classe plutôt sympa, puisqu'elle permet de créer des transitions plutôt complexes avec très peu de code, il faut savoir qu'il est tout à fait possible de créer des transitions sur des clips contenant par exemple des images, imaginez alors les possibilités, pour vous démonter la puissance de cette classe, voici deux exemples. Le premier utilise les dix types de transition possible et le second nous montre une transition sur une image:
Exemple1: (passez sur les cubes)
Exemple2:
Le code (exemple1):
Le code (exemple2):
Le tutoriel:
Exemple1: (passez sur les cubes)
Exemple2:
Le code (exemple1):
- Code:
import fl.transitions.*;
import fl.transitions.easing.*;
var transitions:Array = new Array();
//ecoute de chacun des cubes au rollOver
cube1.addEventListener (MouseEvent.MOUSE_OVER, overCube);
cube2.addEventListener (MouseEvent.MOUSE_OVER, overCube);
cube3.addEventListener (MouseEvent.MOUSE_OVER, overCube);
cube4.addEventListener (MouseEvent.MOUSE_OVER, overCube);
cube5.addEventListener (MouseEvent.MOUSE_OVER, overCube);
cube6.addEventListener (MouseEvent.MOUSE_OVER, overCube);
cube7.addEventListener (MouseEvent.MOUSE_OVER, overCube);
cube8.addEventListener (MouseEvent.MOUSE_OVER, overCube);
cube9.addEventListener (MouseEvent.MOUSE_OVER, overCube);
cube10.addEventListener (MouseEvent.MOUSE_OVER, overCube);
//Assignation des transitions pour chacun des cubes
cube1.transition = Blinds;
cube2.transition = Fade;
cube3.transition = Fly;
cube4.transition = Iris;
cube5.transition = Photo;
cube6.transition = Rotate;
cube7.transition = Squeeze;
cube8.transition = Wipe;
cube9.transition = PixelDissolve;
cube10.transition = Zoom;
//fonction lié à l'enssemble des cubes au rollOver
function overCube (e:Event):void {
var cubeSelectionne:MovieClip = MovieClip(e.target);
cubeSelectionne.removeEventListener (MouseEvent.MOUSE_OVER, overCube);
var maTransitionManager:TransitionManager = new TransitionManager(cubeSelectionne);
maTransitionManager.startTransition ({type:cubeSelectionne.transition,
direction:Transition.IN, duration:1.5, easing:Regular.easeOut, shape:Iris.SQUARE});
//ajout des transition dans un tableau
transitions.push(maTransitionManager);
//création d'un écouteur pour lmiter la relecture pendant la Transition
maTransitionManager.addEventListener ("allTransitionsInDone", animationComplete);
}
//fonction uniquement joué si la transition du cube est terminé
function animationComplete (e:Event):void {
//Remise en place de la fonction over pour l'objet avec transition terminé
e.target.content.addEventListener (MouseEvent.MOUSE_OVER, overCube);
}
Le code (exemple2):
- Code:
import fl.transitions.*
import fl.transitions.easing.*;
/*-----------------------------TransitionManager:: Type--------------------------------
Blinds >> Rotate
Fade >> Squeeze
Fly >> Wipe
Iris >> PixelDissolve
Photo >> Zoom
--------------------------------------------------------------------------------------*/
img.addEventListener("mouseOver", over);
function over (e:MouseEvent):void{
img.removeEventListener("mouseOver", over);
var maTransitionManager:TransitionManager = new TransitionManager (img);
maTransitionManager.startTransition({type:PixelDissolve, direction:Transition.IN,
duration:2, ease:Regular.easeIn,shap:Iris.SQUARE});
maTransitionManager.addEventListener("allTransitionsInDone",transitionComplete);
}
function transitionComplete (e:Event):void{
img.addEventListener("mouseOver", over);
}
Le tutoriel:
Dernière édition par artkabis le Lun 25 Mai - 10:01, édité 1 fois