Jump to content
Search Community

TimelineMax Array + Rotation with timer

ilanb test
Moderator Tag

Recommended Posts

Hi,

 

I would like to set a timer between each fiche01_mc.f01_mc, fiche01_mc.f02_mc, fiche01_mc.f03_mc, fiche01_mc.f04_mc, like 1'30" between fiche01_mc.f01_mc and fiche01_mc.f02_mc...

But dont how to begin and if it's possible ?

 

Second question I have found in club member the TransformAroundPointPlugin, Can I use with my exemple to set the point on f01_mc and not on fiche01_mc... ?

 

screenshot : http://screencast.com/t/PlmvswvKv

 

public function FicheLearningRecordView()
	{
		var fiches_arr = new Array(fiche01_mc.f01_mc, fiche01_mc.f02_mc, fiche01_mc.f03_mc, fiche01_mc.f04_mc);
		var timeline:TimelineMax = new TimelineMax();

		for(var key:String in fiches_arr){
			var mc:MovieClip = MovieClip(fiches_arr[key]);
			timeline.append(TweenMax.to(mc, .5, {y:180}));
			timeline.append(TweenMax.to(mc, .5, {scaleX:2, scaleY:2}));
			timeline.append(TweenMax.to(mc, 1, {rotation:180}));
			timeline.append(TweenMax.to(mc, .5, {y:0, alpha:0}));
		}
	}

 

Thanks

Link to comment
Share on other sites

I would like to set a timer between each fiche01_mc.f01_mc, fiche01_mc.f02_mc, fiche01_mc.f03_mc, fiche01_mc.f04_mc, like 1'30" between fiche01_mc.f01_mc and fiche01_mc.f02_mc...

But dont how to begin and if it's possible ?

 

Sure, just use the "offset" parameter of the append() method. So in your example, if you want to offset all but the first group of tweens, you could do this:

 

public function FicheLearningRecordView():void {
var fiches_arr = new Array(fiche01_mc.f01_mc, fiche01_mc.f02_mc, fiche01_mc.f03_mc, fiche01_mc.f04_mc);
var timeline:TimelineMax = new TimelineMax();
var offset:Number;

for(var i:int = 0; i 		var mc:MovieClip = fiches_arr[i];
	if (i == 0) {
		offset = 0;
	} else {
		offset = 1.5;
	}
	timeline.append(TweenMax.to(mc, .5, {y:180}), offset);
	timeline.append(TweenMax.to(mc, .5, {scaleX:2, scaleY:2}));
	timeline.append(TweenMax.to(mc, 1, {rotation:180}));
	timeline.append(TweenMax.to(mc, .5, {y:0, alpha:0}));
}
}

 

Don't forget to watch the video at http://www.greensock.com/timeline-basics/ because it can really help you understand how it works.

 

Second question I have found in club member the TransformAroundPointPlugin, Can I use with my exemple to set the point on f01_mc and not on fiche01_mc... ?

Sure, you can use transformAroundPoint to rotate/scale your object(s) around any Point.

Link to comment
Share on other sites

Hi,

 

Thanks for reply, Tried offset but in my exemple I need offset on f01_mc and not fiche01_mc

 

I'v make little example work fine but very not optimised: maybe you can point me to better direction.

 

package 
{
import com.greensock.*;
import com.greensock.easing.*;

import flash.display.MovieClip;
import flash.events.Event;

import tools.events.CustomEvent;
import tools.events.Dispatcher;

public class FicheLearningRecordView extends MovieClip
{

	//-----------------------------------------------------------------------------------
	// CONSTANTES
	//-----------------------------------------------------------------------------------

	// Angle de rotation des volets 
	private static const ROTATION_VOLET_CC = 90;
	private static const ROTATION_VOLET_CCW = -45;
	// Durée de rotation des volets
	private static const ROTATION_VOLET_TPS = 1;

	// Temps de lecture des volets en secondes
	// Fiche 1 les règles d'or
	private static const TPS_F1_V01 = 2;
	private static const TPS_F1_V02 = 3;
	private static const TPS_F1_V03 = 7;
	private static const TPS_F1_V04 = 2;
	// Fiche 2 les points principaux de la présentation
	private static const TPS_F2_V01 = 2;
	private static const TPS_F2_V02 = 5;
	// Fiche 3 l'uniforme de pénélope
	private static const TPS_F3_V01 = 2;
	private static const TPS_F3_V02 = 5;
	private static const TPS_F3_V03 = 2;
	// Fiche 4 votre maquillage
	private static const TPS_F4_V01 = 2;
	// Fiche 5 l'efficacité à l'accueil
	private static const TPS_F5_V01 = 2;
	// Fiche 6 les expressions
	private static const TPS_F6_V01 = 2;
	private static const TPS_F6_V02 = 5;
	private static const TPS_F6_V03 = 7;
	// Fiche 7 la banque d'accueil
	private static const TPS_F7_V01 = 4;
	private static const TPS_F7_V02 = 2;
	// Fiche 8 gérer les situations difficiles
	private static const TPS_F8_V01 = 2;
	private static const TPS_F8_V02 = 6;
	private static const TPS_F8_V03 = 2;
	private static const TPS_F8_V04 = 7;
	private static const TPS_F8_V05 = 2;
	private static const TPS_F8_V06 = 10;

	//-----------------------------------------------------------------------------------
	// VARIABLES
	//-----------------------------------------------------------------------------------

	// MovieClip des 8 fiches 
	public var fiche01_mc:MovieClip;
	public var fiche02_mc:MovieClip;
	public var fiche03_mc:MovieClip;
	public var fiche04_mc:MovieClip;
	public var fiche05_mc:MovieClip;
	public var fiche06_mc:MovieClip;
	public var fiche07_mc:MovieClip;
	public var fiche08_mc:MovieClip;

	//-----------------------------------------------------------------------------------
	// INIT
	//-----------------------------------------------------------------------------------

	public function FicheLearningRecordView():void {

		var fiche01:TimelineMax = new TimelineMax({onComplete:finishSheet});
		var fiche02:TimelineMax = new TimelineMax({onComplete:finishSheet});
		var fiche03:TimelineMax = new TimelineMax({onComplete:finishSheet});
		var fiche04:TimelineMax = new TimelineMax({onComplete:finishSheet});
		var fiche05:TimelineMax = new TimelineMax({onComplete:finishSheet});
		var fiche06:TimelineMax = new TimelineMax({onComplete:finishSheet});
		var fiche07:TimelineMax = new TimelineMax({onComplete:finishSheet});
		var fiche08:TimelineMax = new TimelineMax({onComplete:finishSheet});

		// Applique une rotation sur chaques volets de la fiche toutes les x secondes
		fiche01.append(new TweenMax(fiche01_mc.v01_mc, ROTATION_VOLET_TPS, {rotation:ROTATION_VOLET_CC}),TPS_F1_V01);
		fiche01.append(TweenMax.to(fiche01_mc.v02_mc, ROTATION_VOLET_TPS, {rotation:ROTATION_VOLET_CC}),TPS_F1_V02);
		fiche01.append(TweenMax.to(fiche01_mc.v03_mc, ROTATION_VOLET_TPS, {rotation:ROTATION_VOLET_CC}),TPS_F1_V03);
		fiche01.append(TweenMax.to(fiche01_mc.v04_mc, ROTATION_VOLET_TPS, {rotation:ROTATION_VOLET_CC}),TPS_F1_V04);
		// Replace les volets à leurs positions initiales
		fiche01.appendMultiple([new TweenMax(fiche01_mc.v01_mc, ROTATION_VOLET_TPS,{rotation:ROTATION_VOLET_CCW}),
								new TweenMax(fiche01_mc.v02_mc, ROTATION_VOLET_TPS,{rotation:ROTATION_VOLET_CCW}),
								new TweenMax(fiche01_mc.v03_mc, ROTATION_VOLET_TPS,{rotation:ROTATION_VOLET_CCW}),
								new TweenMax(fiche01_mc.v04_mc, ROTATION_VOLET_TPS,{rotation:ROTATION_VOLET_CCW})], 1, TweenAlign.START, 0.2);

		fiche02.append(new TweenMax(fiche02_mc.v01_mc, ROTATION_VOLET_TPS, {rotation:ROTATION_VOLET_CC}),TPS_F2_V01);
		fiche02.append(TweenMax.to(fiche02_mc.v02_mc, ROTATION_VOLET_TPS, {rotation:ROTATION_VOLET_CC}),TPS_F2_V02);
		fiche02.appendMultiple([new TweenMax(fiche02_mc.v01_mc, ROTATION_VOLET_TPS,{rotation:ROTATION_VOLET_CCW}),
								new TweenMax(fiche02_mc.v02_mc, ROTATION_VOLET_TPS,{rotation:ROTATION_VOLET_CCW})], 1, TweenAlign.START, 0.2);


		fiche03.append(new TweenMax(fiche03_mc.v01_mc, ROTATION_VOLET_TPS, {rotation:ROTATION_VOLET_CC}),TPS_F3_V01);
		fiche03.append(TweenMax.to(fiche03_mc.v02_mc, ROTATION_VOLET_TPS, {rotation:ROTATION_VOLET_CC}),TPS_F3_V02);
		fiche03.append(TweenMax.to(fiche03_mc.v03_mc, ROTATION_VOLET_TPS, {rotation:ROTATION_VOLET_CC}),TPS_F3_V03);
		fiche03.appendMultiple([new TweenMax(fiche03_mc.v01_mc, ROTATION_VOLET_TPS,{rotation:ROTATION_VOLET_CCW}),
								new TweenMax(fiche03_mc.v02_mc, ROTATION_VOLET_TPS,{rotation:ROTATION_VOLET_CCW}),
								new TweenMax(fiche03_mc.v03_mc, ROTATION_VOLET_TPS,{rotation:ROTATION_VOLET_CCW})], 1, TweenAlign.START, 0.2);

		fiche04.append(new TweenMax(fiche04_mc.v01_mc, ROTATION_VOLET_TPS, {rotation:ROTATION_VOLET_CC}),TPS_F4_V01);
		fiche04.appendMultiple([new TweenMax(fiche04_mc.v01_mc, ROTATION_VOLET_TPS,{rotation:ROTATION_VOLET_CCW})], 1, TweenAlign.START, 0.2);

		fiche05.append(new TweenMax(fiche05_mc.v01_mc, ROTATION_VOLET_TPS, {rotation:ROTATION_VOLET_CC}),TPS_F5_V01);
		fiche05.appendMultiple([new TweenMax(fiche05_mc.v01_mc, ROTATION_VOLET_TPS,{rotation:ROTATION_VOLET_CCW})], 1, TweenAlign.START, 0.2);

		fiche06.append(new TweenMax(fiche06_mc.v01_mc, ROTATION_VOLET_TPS, {rotation:ROTATION_VOLET_CC}),TPS_F6_V01);
		fiche06.append(TweenMax.to(fiche06_mc.v02_mc, ROTATION_VOLET_TPS, {rotation:ROTATION_VOLET_CC}),TPS_F6_V02);
		fiche06.append(TweenMax.to(fiche06_mc.v03_mc, ROTATION_VOLET_TPS, {rotation:ROTATION_VOLET_CC}),TPS_F6_V03);
		fiche06.appendMultiple([new TweenMax(fiche06_mc.v01_mc, ROTATION_VOLET_TPS,{rotation:ROTATION_VOLET_CCW}),
								new TweenMax(fiche06_mc.v02_mc, ROTATION_VOLET_TPS,{rotation:ROTATION_VOLET_CCW}),
								new TweenMax(fiche06_mc.v03_mc, ROTATION_VOLET_TPS,{rotation:ROTATION_VOLET_CCW})], 1, TweenAlign.START, 0.2);

		fiche07.append(new TweenMax(fiche07_mc.v01_mc, ROTATION_VOLET_TPS, {rotation:ROTATION_VOLET_CC}),TPS_F7_V01);
		fiche07.append(TweenMax.to(fiche07_mc.v02_mc, ROTATION_VOLET_TPS, {rotation:ROTATION_VOLET_CC}),TPS_F7_V02);
		fiche07.appendMultiple([new TweenMax(fiche07_mc.v01_mc, ROTATION_VOLET_TPS,{rotation:ROTATION_VOLET_CCW}),
								new TweenMax(fiche07_mc.v02_mc, ROTATION_VOLET_TPS,{rotation:ROTATION_VOLET_CCW})], 1, TweenAlign.START, 0.2);

		fiche08.append(new TweenMax(fiche08_mc.v01_mc, ROTATION_VOLET_TPS, {rotation:ROTATION_VOLET_CC}),TPS_F8_V01);
		fiche08.append(TweenMax.to(fiche08_mc.v02_mc, ROTATION_VOLET_TPS, {rotation:ROTATION_VOLET_CC}),TPS_F8_V02);
		fiche08.append(TweenMax.to(fiche08_mc.v03_mc, ROTATION_VOLET_TPS, {rotation:ROTATION_VOLET_CC}),TPS_F8_V03);
		fiche08.append(TweenMax.to(fiche08_mc.v04_mc, ROTATION_VOLET_TPS, {rotation:ROTATION_VOLET_CC}),TPS_F8_V04);
		fiche08.append(TweenMax.to(fiche08_mc.v05_mc, ROTATION_VOLET_TPS, {rotation:ROTATION_VOLET_CC}),TPS_F8_V05);
		fiche08.append(TweenMax.to(fiche08_mc.v06_mc, ROTATION_VOLET_TPS, {rotation:ROTATION_VOLET_CC}),TPS_F8_V06);
		fiche08.appendMultiple([new TweenMax(fiche08_mc.v01_mc, ROTATION_VOLET_TPS,{rotation:ROTATION_VOLET_CCW}),
								new TweenMax(fiche08_mc.v02_mc, ROTATION_VOLET_TPS,{rotation:ROTATION_VOLET_CCW}),
								new TweenMax(fiche08_mc.v03_mc, ROTATION_VOLET_TPS,{rotation:ROTATION_VOLET_CCW}),
								new TweenMax(fiche08_mc.v04_mc, ROTATION_VOLET_TPS,{rotation:ROTATION_VOLET_CCW}),
								new TweenMax(fiche08_mc.v05_mc, ROTATION_VOLET_TPS,{rotation:ROTATION_VOLET_CCW}),
								new TweenMax(fiche08_mc.v06_mc, ROTATION_VOLET_TPS,{rotation:ROTATION_VOLET_CCW})], 1, TweenAlign.START, 0.2);

	}

	private function finishSheet():void
	{
		trace("done!")
	}	
}
}

Link to comment
Share on other sites

Hi trying to optimise...

 

work fine but I don't understand how to use appenMultiple in function closeV

 

 

 

public function openV(idFiche:int):void
	{
		var fiche:TimelineMax = new TimelineMax({onComplete:endOpenV});
		var iterator:int = 1;

		for each( var j:int in this["OPEN_TPS_F"+idFiche])
		{	
			trace("fiche :"+idFiche+" volet :"+iterator+ " temps :"+j);
			if (iterator==1)
			{
				fiche.append(new TweenMax(this["fiche0"+idFiche+"_mc"]["v0"+iterator+"_mc"], ROTATION_VOLET_TPS, {rotation:ROTATION_VOLET_CC}),j);
			}

			else

				fiche.append(TweenMax.to(this["fiche0"+idFiche+"_mc"]["v0"+iterator+"_mc"], ROTATION_VOLET_TPS, {rotation:ROTATION_VOLET_CC}),j);

			iterator++;
		}			
	}

	public function endOpenV():void
	{
		trace("done!");
		dispatchEvent(new Event("eventOpenEnd"));
	}

	public function closeV(idFiche:int):void
	{
		var fiche:TimelineMax = new TimelineMax({onComplete:endCloseV});
		var iterator:int = 1;

		for each( var j:int in this["CLOSE_TPS_F"+idFiche])
		{	
			trace("fiche :"+idFiche+" volet :"+iterator+ " temps :"+j);
			if (iterator==1)
			{
				fiche.append(new TweenMax(this["fiche0"+idFiche+"_mc"]["v0"+iterator+"_mc"], ROTATION_VOLET_TPS, {rotation:ROTATION_VOLET_CCW}),j);
			}

			else

				fiche.append(TweenMax.to(this["fiche0"+idFiche+"_mc"]["v0"+iterator+"_mc"], ROTATION_VOLET_TPS, {rotation:ROTATION_VOLET_CCW}),j);

			iterator++;
		}			
	}

	public function endCloseV():void
	{
		trace("done!");
		dispatchEvent(new Event("eventCloseEnd"));
	}

Link to comment
Share on other sites

I'm not quite sure how you're structuring your data in your arrays (it seems a little convoluted), but appendMultiple() basically does EXACTLY the same thing as append() except that it allows you to pass in an array of tweens instead of just a single tween. Keep in mind that TweenMax.allTo() and TweenMax.allFrom() each return an array of tweens, so they work great with appendMultiple(). So, for example, if you had an array of Sprites or MovieClips that you wanted to all tween to an alpha of 0 and stagger their start times so that they're 0.1 second apart, creating all those tweens and inserting them into your "feche" TimelineMax would look like this:

 

feche.appendMultiple( TweenMax.allTo( myArrayOfObjects, 1, {alpha:0}, 0.1) ); 

Link to comment
Share on other sites

Thanks for tips, I'v tried to simplify but I don't find how to use SEQUENCE:

 

you can see effect here: http://screencast.com/t/d1KtuMx88

 

the 4 sheets back at same time and I would like make delay between sheet

 

fiche.insertMultiple([new TweenMax(this["fiche0"+idFiche+"_mc"]["v0"+(numVolet)+"_mc"], ROTATION_VOLET_TPS, {rotation:ROTATION_VOLET_CCW})], CLOSE_TPS, TweenAlign.SEQUENCE, 0.2);

 

 

to understand the array and variables:

 

//-----------------------------------------------------------------------------------
	// CONSTANTES
	//-----------------------------------------------------------------------------------
	// Angle de rotation des volets 
	private const ROTATION_VOLET_CC = 90;
	private const ROTATION_VOLET_CCW = -45;

	private const ROTATION_VOLET_TPS = 1;

	//-----------------------------------------------------------------------------------
	// VARIABLES
	//-----------------------------------------------------------------------------------

	// MovieClip des 8 fiches 
	public var fiche01_mc:MovieClip;
	public var fiche02_mc:MovieClip;
	public var fiche03_mc:MovieClip;
	public var fiche04_mc:MovieClip;
	public var fiche05_mc:MovieClip;
	public var fiche06_mc:MovieClip;
	public var fiche07_mc:MovieClip;
	public var fiche08_mc:MovieClip;

	// Temps de lecture des volets des fiches
	private var OPEN_TPS_F1:Array = [2,2,2,2];
	private var OPEN_TPS_F2:Array = [2,2];
	private var OPEN_TPS_F3:Array = [2,2,2];
	private var OPEN_TPS_F4:Array = [2];
	private var OPEN_TPS_F5:Array = [2];
	private var OPEN_TPS_F6:Array = [2,2,2];
	private var OPEN_TPS_F7:Array = [2,2];
	private var OPEN_TPS_F8:Array = [2,2,2,2,2,2];

	// Vitesse de fermeture des volets
	private var CLOSE_TPS:Number = 0.2;

 

thanks

Link to comment
Share on other sites

Ok sorry for my bad english I try to explain what I need.

 

I try to open and close an Array of sheets ("v0"+numVolet+"_mc")

 

The open function work fine but when I close the sheets with TweenAlign.SEQUENCE all the sheets close at same time. I would like close sheets like range, not at same time

 

you can see the problem on this screencast: http://screencast.com/t/W2RGTKqppheF

 

 

function to open sheet: Work Fine

 

public function openV(idFiche:int):void
	{
		// 
		var ficheAnimOpen:TimelineMax = new TimelineMax({onComplete:endOpenV});

		for(var numVolet:int = 1 ; numVolet <= this["OPEN_TPS_F"+idFiche].length; numVolet++)
		{	
			//trace("fiche :"+idFiche+" volet :"+numVolet+ " temps :"+this["OPEN_TPS_F"+idFiche][numVolet - 1]);
			ficheAnimOpen.append(new TweenMax(this["fiche0"+idFiche+"_mc"]["v0"+numVolet+"_mc"], 
				ROTATION_VOLET_TPS, 
				{transformAroundPoint:{point:new Point(POINT_ROTATION_X,POINT_ROTATION_Y), shortRotation:{rotation:ROTATION_VOLET_CC}}, 
					ease:Quart.easeInOut}),
				this["OPEN_TPS_F"+idFiche][numVolet - 1]);
		}			
	}

 

Function to close sheet: SEQUENCE don't work

 

public function closeV(idFiche:int):void
	{
		var ficheAnimClose:TimelineMax = new TimelineMax({onComplete:endCloseV});

		for(var numVolet:int = this["OPEN_TPS_F"+idFiche].length; numVolet >= 1; numVolet--)
		{	
			//trace("fiche :"+idFiche+" volet :"+(numVolet));
			ficheAnimClose.insertMultiple([new TweenMax(this["fiche0"+idFiche+"_mc"]["v0"+numVolet+"_mc"], 
				ROTATION_VOLET_TPS,
				{transformAroundPoint:{point:new Point(POINT_ROTATION_X,POINT_ROTATION_Y), rotation:ROTATION_VOLET_CCW}, 
					ease:Quart.easeInOut, 
					delay:0.1, 
					overwrite:true})],
				0, TweenAlign.SEQUENCE, -0.2);
		}			
	}

 

Thanks for time

Link to comment
Share on other sites

I assume you want something like this:

 

public function closeV(idFiche:int):void {
        var ficheAnimClose:TimelineMax = new TimelineMax({onComplete:endCloseV});

        for(var numVolet:int = this["OPEN_TPS_F"+idFiche].length; numVolet >= 1; numVolet--) {   
           ficheAnimClose.insert( new TweenMax(this["fiche0"+idFiche+"_mc"]["v0"+numVolet+"_mc"],
              ROTATION_VOLET_TPS,
              {transformAroundPoint:{point:new Point(POINT_ROTATION_X,POINT_ROTATION_Y), rotation:ROTATION_VOLET_CCW},
                 ease:Quart.easeInOut,
                 overwrite:true}), i * 0.2);
        }         
}

 

Your previous code was using insertMultiple() but you were only inserting one at a time, and you were inserting them at exactly the same spot in the TimelineMax - that's why they were playing at the same time.

Link to comment
Share on other sites

THANKS !!! :geek:

 

like this: Work perfectly !

 

{transformAroundPoint:{point:new Point(POINT_ROTATION_X,POINT_ROTATION_Y), rotation:ROTATION_VOLET_CCW}, 
					ease:Quart.easeInOut})],
				numVolet * CLOSE_TPS);

 

 

I'm happy to use and support your work ! happy codding :mrgreen::-)

 

Ilan

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...