Forums Développement Multimédia

Aller au contenu

Transition entre 2 tweens

CODE Actionscript

5 réponses à ce sujet

#1 nathamis

    Ceinture Blanche

  • Members
  • Pip
  • 8 messages

Posté 26 August 2013 - 08:22 AM

Bonjour,
et oui me revoilà avec encore une question :)

Je suis entrain d'esseyer de faire une animation (ok jusqu'ici c'est normal),
en faite j'ai une petite bille qui va de gauche à droite grace à un tween, quand je clique sur la bille le tween qui vas de gauche à droite s'arrete pour laisse place à un tween que vas de haut en bas (ca j'ai reussi comme une grande).

Voilà ma question :
Comment je pourrais faire pour qu'il y ai une petit transition entre les deux tween? je m'explique :
Pour passer de l'alimation horizontal à l'animation vertical la bille fasse un petit arc de cercle. Ok ok je vais mettre un dessin :) (pj : transition.png)

Et j'en profite puisque je suis là, j'ai une deuxième petite question :)
Sur un tween, je voudrai faire un test du genre :
if(mabille == position){

trace("message");
}

Comment je trouve la position ?

Voilà voilà, merci d'avance pour votre aide :)
Ps : j'ai mit mon fichier fash dans les pieces jointes

Miniature(s) jointe(s)

  • Image attachée: transition.png

Fichier(s) joint(s)



#2 Benzouye

  • Members
  • PipPipPipPipPipPipPipPip
  • 583 messages

Posté 27 August 2013 - 08:09 AM

Bonjour Nathamis,

Pour ta deuxième question, je pense que tu pourrais simplement faire un test comme ceci :
if ( maBille.x == valeurSouhaitX && maBille.y == valeurSouhaitY ) trace ( "message" );
Mais j'ai peut-être mal compris ton besoin.

Pour ta première question, c'est de définir le tracé en arc de cercle qui te pose problème, ou l'enchaînement des tweens pour y arriver ?

Modifié par Benzouye, 27 August 2013 - 08:12 AM.

Benzouye
Travaille avec FlashDevelop 4 + Flex SDK 4.6 open source

#3 nathamis

    Ceinture Blanche

  • Members
  • Pip
  • 8 messages

Posté 27 August 2013 - 08:16 AM

Pour ma premiere question c'est de definir le tracé en arc de cercle qui me pose problème.
Pour l'enchainement des tweens, j'avais pensait faire un stop sur le tween horrizontal pour commencer ensuite le tween vertical.

Pour pour la réponse à la deuxième question, je vais essayer ça :)

#4 Benzouye

  • Members
  • PipPipPipPipPipPipPipPip
  • 583 messages

Posté 27 August 2013 - 10:57 AM

Pour l'arc de cercle, un bon moyen est d'utiliser les coordonnées polaires (une distance + un angle), cela fait faire un peu de géométrie, mais rien d'insurmontable à mes yeux ...
Pour les tweens, j'aime à utiliser TweenMax, mais libre à toi ...
Ce code (un peu vite fait) fonctionne, tu cliques sur la bille pour lancer l'animation, elle fait des aller/retour tant qu'elle n'est pas recliquée, ensuite elle fait un arc de cercle et tombe :

package
{
        import flash.display.Sprite;
        import flash.events.*;
        import com.greensock.TweenMax;
        import com.greensock.easing.*;
        import flash.geom.Point;
       
        public class Main extends Sprite
        {
                // Propriétés
                private var maBille:Sprite;
                private var oldX:Number = 0;
                private var oldY:Number = 0;
                private var toLeft:Boolean;
               
                // Variable arc de cercle
                private var rayonTransition:int = 50;
                private var increment:int = 5;
                private var angleCible:int;
                private var angleActuel:int;
                private var pointCible:Point;

                // Constructeur
                public function Main():void
                {
                        // Création de la bille
                        maBille = new Sprite();
                        maBille.graphics.beginFill ( 0xFF0000 , 1 );
                        maBille.graphics.drawCircle ( 0 , 0 , 50 );
                        maBille.buttonMode = true;
                        addChild ( maBille );
                        maBille.x = 0;
                        maBille.y = stage.stageHeight / 2;
                       
                        // Ecoute du clic sur la scène
                        addEventListener ( MouseEvent.CLICK , startBille );
                }
               
                // Lance le déplacement horizontal de la bille
                private function startBille( me:MouseEvent ):void
                {
                        removeEventListener ( MouseEvent.CLICK , startBille );
                        addEventListener ( Event.ENTER_FRAME , checkSide );
                       
                        // Déplace la bille de gauche à droite indéfiniment
                        TweenMax.to ( maBille , 5 , { x: stage.stageWidth , ease:Linear.easeNone , repeat: -1 , yoyo: true } );
                        maBille.addEventListener ( MouseEvent.CLICK , transition );
                }
               
                // Contrôle le sens de déplacement
                private function checkSide( e:Event ):void
                {
                        // Si x a augmenté alors sens = vers la gauche
                        toLeft = ( maBille.x > oldX ) ? true : false;
                        oldX = maBille.x;
                }
               
                // Lance la transition circulaire de la bille
                private function transition( me:MouseEvent ):void
                {
                        removeEventListener ( Event.ENTER_FRAME , checkSide );
                        maBille.removeEventListener ( MouseEvent.CLICK , transition );
                        // Arrête tous les tweens en cours
                        TweenMax.killAll();
                       
                        // Calcul de l'angle initial et final selon droite ou gauche
                        angleActuel = 270;
                        increment *= toLeft ? 1 : -1;
                        angleCible = toLeft ? 360 : 180;

                        // Mémorisation de la position de la bille pour repère polaire
                        oldX = maBille.x;
                        oldY = maBille.y;
                       
                        // Lance l'arc de cercle
                        addEventListener ( Event.ENTER_FRAME , arcDeCercle );
                }
               
                // Effectue un arc de cercle avec coordonnées polaire
                private function arcDeCercle( e:Event ):void
                {
                        angleActuel += increment;
                        if ( angleCible != angleActuel )
                        {
                                // Calcul du point en coordonnées polaires (et en radians)
                                var radians:Number = angleActuel * Math.PI / 180;
                                pointCible = Point.polar ( rayonTransition , radians );

                                // Bouge la bille en focntion
                                maBille.x = oldX + pointCible.x;
                                maBille.y = oldY + pointCible.y + rayonTransition;
                        }
                        else
                        {
                                removeEventListener ( Event.ENTER_FRAME , arcDeCercle );
                                TweenMax.to ( maBille , 2 , { y: stage.stageHeight , ease:Linear.easeNone } );
                        }
                }
        }
}

Fichier(s) joint(s)


Benzouye
Travaille avec FlashDevelop 4 + Flex SDK 4.6 open source

#5 nathamis

    Ceinture Blanche

  • Members
  • Pip
  • 8 messages

Posté 27 August 2013 - 11:00 AM

Super merci beaucoup ! Je vais essayer ca sur mon code :)

#6 Benzouye

  • Members
  • PipPipPipPipPipPipPipPip
  • 583 messages

Posté 28 August 2013 - 15:10 PM

J'ai oublié de préciser qu'avec TweenMax, tu avais une gestion des courbes de Bézier sur les tweens, ainsi tu peux préciser un parcours proche de l'arc de cercle et cela simplifie le code et supprime l'aspect polaire un peu "matheux".
Je reprend le code avec ces considérations :
package
{
        import flash.display.Sprite;
        import flash.events.*;
        import com.greensock.TweenMax;
        import com.greensock.easing.*;
       
        public class Main extends Sprite
        {
                private var maBille:Sprite;
                private var rBille:int = 50;
                private var rTrans:int = 100;
                private var tpsTrav:Number = 2;
                private var tpsTrans:Number;
                private var tpsChut:Number;
                private var toLeft:Boolean;
               
                public function Main():void
                {
                        tpsChut = tpsTrav / stage.stageWidth * ( ( stage.stageHeight / 2 ) - rTrans );
                        tpsTrans = tpsTrav / stage.stageWidth * ( 2 * Math.PI * rTrans / 4 );
                       
                        maBille = new Sprite();
                        maBille.graphics.beginFill( 0x0000FF );
                        maBille.graphics.drawCircle ( 0 , 0 , rBille );
                        maBille.buttonMode = true;
                        addChild ( maBille );
                       
                        init( null );
                }
               
                private function init ( me:MouseEvent ):void
                {
                        if ( maBille.hasEventListener ( MouseEvent.CLICK ) ) maBille.removeEventListener ( MouseEvent.CLICK , init );
                        maBille.x = 0;
                        maBille.y = stage.stageHeight / 2;
                        addEventListener ( MouseEvent.CLICK , startBille );
                }
               
                private function startBille( me:MouseEvent ):void
                {
                        removeEventListener ( MouseEvent.CLICK , startBille );
                        toLeft = true;
                        TweenMax.to ( maBille , tpsTrav , { x: stage.stageWidth , ease: Linear.easeNone , repeat: -1 , yoyo: true , onRepeat: checkSide } );
                        maBille.addEventListener ( MouseEvent.CLICK , transition );
                }
               
                private function checkSide():void { toLeft = !toLeft; }
               
                private function transition( me:MouseEvent ):void
                {
                        maBille.removeEventListener ( MouseEvent.CLICK , transition );
                        TweenMax.killAll();
                        var bezX:Number = maBille.x + ( toLeft ? 2/3*rTrans : -2/3*rTrans );
                        var bezY:Number = maBille.y + (1/3*rTrans);
                        var destX:Number = maBille.x + ( toLeft ? rTrans : -rTrans );
                        var destY:Number = maBille.y + rTrans;
                       
                        TweenMax.to ( maBille, tpsTrans, { bezierThrough: [ { x: bezX , y: bezY } , { x: destX , y: destY } ], ease:Linear.easeNone , onComplete: finBille } );
                }
               
                private function finBille():void
                {
                        maBille.addEventListener ( MouseEvent.CLICK , init );
                        TweenMax.to ( maBille , tpsChut , { y: stage.stageHeight , ease:Linear.easeNone } );
                }
        }
}

Modifié par Benzouye, 28 August 2013 - 15:59 PM.

Benzouye
Travaille avec FlashDevelop 4 + Flex SDK 4.6 open source



1 utilisateur(s) li(sen)t ce sujet

0 membre(s), 1 invité(s), 0 utilisateur(s) anonyme(s)