ActionScript 3.0, l'essentiel sous la main Adobe Flash Accueil
Fiches
Boutique
Contact
Créer un effet de ficelle élastique
Nous alons réaliser ici un objet suspendu à deux ficelles élastiques. Nous allons utiliser la package d'animation dynamique TweenLite, et le traçage de ligne dynamique. Sur ma scène, j'ai un clip 'pastille' contenant une zone bouton. Sur une image clé vide :

//Imports Flash
import flash.events.Event;
import flash.events.MouseEvent;
import flash.display.MovieClip;
import flash.geom.Point;

//Imports TweenLite (by GreenSock)
import com.greensock.*;
import com.greensock.easing.*;

//Retour automatique de la pastille à sa place initiale
var myTween:TweenLite = new TweenLite(pastille, 1, {x:275,y:150,ease:Elastic.easeOut});
function replacement():void
{
myTween = new TweenLite(pastille, 1, {x:275,y:150,ease:Elastic.easeOut});
}

//Gestion de l'interaction de la pastille avec la souris (DRAG&DROP)
function dragOn(e:MouseEvent):void
{
myTween.pause(); //Stop l'animation en cours si on l'intérompe
pastille.startDrag(); //Début du déplacement à la souris
}
function dragOff(e:MouseEvent):void
{
pastille.stopDrag(); //Fin du déplacement à la souris
replacement(); //Replacement de la pastille
}
pastille.addEventListener(MouseEvent.MOUSE_DOWN, dragOn);
pastille.addEventListener(MouseEvent.MOUSE_UP, dragOff);
stage.addEventListener(MouseEvent.MOUSE_UP, dragOff);

//Création de la ficelle A
var ligneA:MovieClip = new MovieClip();
addChild(ligneA);

//Gestion de la ficelle A
function ficelleA(e:Event):void
{
removeChild(ligneA); //Supprimer l'ancienne droite

var A:Point = new Point(275-25,0); //Point de départ
var B:Point = new Point(pastille.x-25,pastille.y); //Point d'arrivée
var C:Point = new Point(275-25,50); //Point de fuite (direction de la courbure)

ligneA = new MovieClip();
ligneA.graphics.lineStyle(2, 0x666666, 100); //Paramètres de la ligne (épaisseur, couleur, alpha)
ligneA.graphics.moveTo(A.x,A.y); //Point de départ
ligneA.graphics.curveTo(C.x,C.y,B.x,B.y); //Point d'arrivée et courbure

addChild(ligneA); //Ajout de la droite sur la scène
addChild(pastille); //Remet la pastille au premier plan
}
addEventListener(Event.ENTER_FRAME, ficelleA); //Actualisation continu de la ficelle A

//Création de la ficelle B
var ligneB:MovieClip = new MovieClip();
addChild(ligneB);

//Gestion de la ficelle B
function ficelleB(e:Event):void
{
removeChild(ligneB); //Supprimer l'ancienne droite

var A:Point = new Point(275+25,0); //Point de départ
var B:Point = new Point(pastille.x+25,pastille.y); //Point d'arrivée
var C:Point = new Point(275+25,50); //Point de fuite (direction de la courbure)

ligneB = new MovieClip();
ligneB.graphics.lineStyle(2, 0x666666, 100); //Paramètres de la ligne (épaisseur, couleur, alpha)
ligneB.graphics.moveTo(A.x,A.y); //Point de départ
ligneB.graphics.curveTo(C.x,C.y,B.x,B.y); //Point d'arrivée et courbure

addChild(ligneB); //Ajout de la droite sur la scène
addChild(pastille); //remet la pastille au premier plan
}
addEventListener(Event.ENTER_FRAME, ficelleB); //Actualisation continu de la ficelle B

Aperçus & Sources : (Flash CS4)
Commentaire(s)
Aucun.