Jump inside tween and play it from moment i want?

[smeagol16]

Hi

I am huge fan of GreenSock but i'm also a huge beginner.

 

I have a component called "flash" in my website, that contains 5 jpg files, one inside fla and the other 4 loaded by LoaderMax.

I've created an animation that switches pictures and some text jpg over and over.

 

Here's the code:

import com.greensock.TimelineLite;
import com.greensock.*;
import com.greensock.easing.*;

//kuchnia_tresc_mc.alpha=0;
sypialnia_tresc_mc.alpha=0;
salon_tresc_mc.alpha=0;
lazienka_tresc_mc.alpha=0;
komercyjne_tresc_mc.alpha=0;

//kuchnia_mc.alpha=0;
sypialnia_mc.alpha=0;
salon_mc.alpha=0;
lazienka_mc.alpha=0;
komercyjne_mc.alpha=0;

var timeline:TimelineMax = new TimelineMax({repeat:-1, yoyo:false});

timeline.append(TweenMax.to(kuchnia_mc, 0.4, {delay:-1, alpha:1}));
timeline.append(TweenMax.to(kuchnia_tresc_mc, 1, {delay:0, alpha:1}));
       timeline.append(TweenMax.to(kuchnia_mc, 0.4, {delay:7, alpha:0}));
timeline.append(TweenMax.to(kuchnia_tresc_mc, 1, {delay:-1, alpha:0}));

timeline.append(TweenMax.to(sypialnia_mc, 0.4, {delay:-1, alpha:1}));
timeline.append(TweenMax.to(sypialnia_tresc_mc, 1, {delay:0, alpha:1}));
       timeline.append(TweenMax.to(sypialnia_mc, 0.4, {delay:7, alpha:0}));
timeline.append(TweenMax.to(sypialnia_tresc_mc, 1, {delay:-1, alpha:0}));

timeline.append(TweenMax.to(salon_mc, 0.4, {delay:-1, alpha:1}));
timeline.append(TweenMax.to(salon_tresc_mc, 1, {delay:0, alpha:1}));
       timeline.append(TweenMax.to(salon_mc, 0.4, {delay:7, alpha:0}));
timeline.append(TweenMax.to(salon_tresc_mc, 1, {delay:-1, alpha:0}));

timeline.append(TweenMax.to(lazienka_mc, 0.4, {delay:-1, alpha:1}));
timeline.append(TweenMax.to(lazienka_tresc_mc, 1, {delay:0, alpha:1}));
       timeline.append(TweenMax.to(lazienka_mc, 0.4, {delay:7, alpha:0}));
timeline.append(TweenMax.to(lazienka_tresc_mc, 1, {delay:-1, alpha:0}));

timeline.append(TweenMax.to(komercyjne_mc, 0.4, {delay:-1, alpha:1}));
timeline.append(TweenMax.to(komercyjne_tresc_mc, 1, {delay:0, alpha:1}));
       timeline.append(TweenMax.to(komercyjne_mc, 0.4, {delay:7, alpha:0}));
timeline.append(TweenMax.to(komercyjne_tresc_mc, 1, {delay:-1, alpha:0}));

 

I also have 5 MovieClips that are my buttons to switch one of the jpg that i want, but i don't know how to interact them with that tween.

With that code in button the .jpg are changing but the tween gets broken.

 

import flash.events.MouseEvent;
import flash.display.MovieClip;
import com.greensock.TimelineLite;
import com.greensock.*;
import com.greensock.easing.*;

this.buttonMode = true;
this.useHandCursor = true;

stop();

var p:MovieClip = new MovieClip();
p = MovieClip(parent);

function onClick(e:MouseEvent):void {
TweenLite.to(p.kuchnia_mc, 1, {alpha:1, ease:Strong.easeOut} );
TweenLite.to(p.sypialnia_mc, 2, {alpha:0, ease:Strong.easeOut} );
TweenLite.to(p.salon_mc, 2, {alpha:0, ease:Strong.easeOut} );
TweenLite.to(p.lazienka_mc, 2, {alpha:0, ease:Strong.easeOut} );
TweenLite.to(p.komercyjne_mc, 2, {alpha:0, ease:Strong.easeOut} );
}

function onOver(e:MouseEvent):void {
TweenLite.to(kuchnia_mini_mc, 1, {alpha:1, x:0, y:25, ease:Strong.easeOut} );
}

function onOut(e:MouseEvent):void {
TweenLite.to(kuchnia_mini_mc, 0.5, {alpha:0, x:0, y:-61, ease:Strong.easeIn} );
}


this.addEventListener(MouseEvent.CLICK, onClick);
this.addEventListener(MouseEvent.MOUSE_OVER, onOver);
this.addEventListener(MouseEvent.MOUSE_OUT, onOut);

 

Any idea how to make it right?

Here's fla in cs4 (sorry for non-english text in fla)

 

https://rapidshare.com/files/1354915073/test.rar

[Carl]

first, very nice work you have done so far. looks really nice.

 

From what I gather your problem is that you have a TimlineMax dictating the sequence in which certain elements should tween in and out, but you also have buttons that are telling elements that are controlled by the TimlineMax to be tweened by new TweenLites.

 

Your file is quite complicated and I don't have the time to fix it, but I have a whole series of tutorials for navigating a TimelineMax.

Basically you add labels to your timeline before each "section" animates in. You then have your buttons tell the TImelineMax to tweenTo("whateverlabelyouwant") or gotoAndStop("whateverlabelyouwant");

 

I believe a lot of the concepts discussed in the tutorial will apply to your project.

 

start here:

http://www.snorkl.tv/2011/03/bullet-pro ... o-section/

[smeagol16]

Thank You for your reply.

Your suggestions help me alot, now i understand Tween's more and i i can easly end my project:)

That helped me also in understand other things related with Tweening.

 

p.s snorkl.tv next to greensock.com is a cool website, i was learning basics about Loadermax from it.

 

Thanks again

[Carl]

Great to hear. I'm glad the tutorials helped with your project. Thanks for the update.

[smeagol16]

Hi again.

 

I make changes in my project, now my code in "flash" container looks like this:

 

import com.greensock.TimelineLite;
import com.greensock.*;
import com.greensock.easing.*;

var targetSection:String;
var currentSection:String = "kuchnia";

kuchnia_tresc_mc.alpha=0;
sypialnia_tresc_mc.alpha=0;
salon_tresc_mc.alpha=0;
lazienka_tresc_mc.alpha=0;
komercyjne_tresc_mc.alpha=0;

//kuchnia_mc.alpha=0;
sypialnia_mc.alpha=0;
salon_mc.alpha=0;
lazienka_mc.alpha=0;
komercyjne_mc.alpha=0;

var timeline:TimelineMax = new TimelineMax({repeat:-1, yoyo:false});

timeline.addLabel("kuchnia_in", timeline.duration);
timeline.append(TweenMax.to(kuchnia_mc, 1, {delay:-1, alpha:1}));
timeline.append(TweenMax.to(kuchnia_tresc_mc, 2, {delay:-1, alpha:1}));
timeline.addLabel("kuchnia_complete", timeline.duration);
   timeline.append(TweenMax.to(kuchnia_mc, 0.4, {delay:5, alpha:0}));
timeline.append(TweenMax.to(kuchnia_tresc_mc, 1, {delay:-1, alpha:0}));

timeline.addLabel("sypialnia_in", timeline.duration);
timeline.append(TweenMax.to(sypialnia_mc, 1, {delay:-1, alpha:1}));
timeline.append(TweenMax.to(sypialnia_tresc_mc, 2, {delay:0, alpha:1}));
timeline.addLabel("sypialnia_complete", timeline.duration);
   timeline.append(TweenMax.to(sypialnia_mc, 0.4, {delay:5, alpha:0}));
timeline.append(TweenMax.to(sypialnia_tresc_mc, 1, {delay:-1, alpha:0}));

timeline.addLabel("salon_in", timeline.duration);
timeline.append(TweenMax.to(salon_mc, 1, {delay:-1, alpha:1}));
timeline.append(TweenMax.to(salon_tresc_mc, 2, {delay:0, alpha:1}));
timeline.addLabel("salon_complete", timeline.duration);
   timeline.append(TweenMax.to(salon_mc, 0.4, {delay:5, alpha:0}));
timeline.append(TweenMax.to(salon_tresc_mc, 1, {delay:-1, alpha:0}));

timeline.addLabel("lazienka_in", timeline.duration);
timeline.append(TweenMax.to(lazienka_mc, 1, {delay:-1, alpha:1}));
timeline.append(TweenMax.to(lazienka_tresc_mc, 2, {delay:0, alpha:1}));
timeline.addLabel("lazienka_complete", timeline.duration);
   timeline.append(TweenMax.to(lazienka_mc, 0.4, {delay:5, alpha:0}));
timeline.append(TweenMax.to(lazienka_tresc_mc, 1, {delay:-1, alpha:0}));

timeline.addLabel("komercyjne_in", timeline.duration);
timeline.append(TweenMax.to(komercyjne_mc, 1, {delay:-1, alpha:1}));
timeline.append(TweenMax.to(komercyjne_tresc_mc, 2, {delay:0, alpha:1}));
timeline.addLabel("komercyjne_complete", timeline.duration);
   timeline.append(TweenMax.to(komercyjne_mc, 0.4, {delay:5, alpha:0}));
timeline.append(TweenMax.to(komercyjne_tresc_mc, 1, {delay:-1, alpha:0}));



//***************navi

nav_mc.addEventListener(MouseEvent.CLICK, onClick);

nav_mc.buttonMode = true;
nav_mc.useHandCursor = true;

nav_mc.kuchnia_btn_mc.ID = "kuchnia";
nav_mc.sypialnia_btn_mc.ID = "sypialnia";
nav_mc.salon_btn_mc.ID = "salon";
nav_mc.lazienka_btn_mc.ID = "lazienka";
nav_mc.komercyjne_btn_mc.ID = "komercyjne";

function onClick(e:MouseEvent):void
{
trace(e.target.ID);
targetSection = e.target.ID;
if (targetSection != currentSection)
{
	timeline.gotoAndPlay(targetSection + "_in");
	currentSection = targetSection;


}else{
	trace("you are already at " + currentSection);
	}

}

 

When i try to jump into tween i got message in output that looks like:

 

undefined
Error: TimelineLite error: the null_in label was not found.
at com.greensock::TimelineLite/parseTimeOrLabel()
at com.greensock::TimelineLite/gotoAndPlay()
at resizeStage_fla::flash_3/onClick()

 

This is code in main scene:

import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.display.MovieClip;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.display.Loader;
import flash.display.Sprite;
import flash.net.URLRequest;
import flash.events.Event;
import flash.events.MouseEvent;
import com.greensock.TimelineLite;
import com.greensock.*;
import com.greensock.easing.*;


if (stage)
{
  init(null);
}
else
{
  addEventListener(Event.ADDED_TO_STAGE, init);
}

function init(e:Event):void{

  stage.scaleMode = StageScaleMode.NO_SCALE;
  stage.align = StageAlign.TOP_LEFT;
  stage.addEventListener(Event.RESIZE, onResize);
  onResize(null);
  stage.addEventListener(MouseEvent.MOUSE_MOVE, onMove);
}


function onResize(e:Event):void
{

bg_mc.x = stage.stageWidth / 2;
//	bg_mc.y = 0;

logo_mc.x = 30;
logo_mc.y = 30;

skype_btn.x = stage.stageWidth - 140;
skype_btn.y = stage.stageHeight - 50;

skype_bg.x = stage.stageWidth - skype_bg.width;
skype_bg.y = stage.stageHeight - skype_bg.height;

flash_mc.x = stage.stageWidth / 2;
flash_mc.y = 110;

menu_mc.x = stage.stageWidth - menu_mc.width - 30;
menu_mc.y = 50;





}

function onMove(e:MouseEvent):void

{

bg_mc.rotationX = e.stageX / 200;
bg_mc.rotationY = e.stageY / 200;

}

 

Any idea why timeline is looking for null_in instead of kuchnia_in, salon_in etc. ?

 

Thanks for any help!

[Carl]

your code looks very good and I didn't see anything jump out that would cause the problem.

 

before the Error fires, notice that you are getting "undefined" when trying to trace out

 

e.target.ID

 

that means the object that you clicked on does not have an ID property.

 

so what you need to do is figure out what e.target is.

 

try adding

 

trace("the target is an " + e.target)
trace("the name of the target is " + e.target.name)

 

to the beginning of your onClick function.

 

Most likely the problem is that inside your buttons you have other Textfields, MovieClips or Sprites that are the actual target of the CLICK event and they do not have an ID property.

 

-----------------

 

to fix this add the following:

 

nav_mc.kuchnia_btn_mc.mouseChildren = false;
nav_mc.sypialnia_btn_mc.mouseChildren = false;
nav_mc.salon_btn_mc.mouseChildren = false;
nav_mc.lazienka_btn_mc.mouseChildren = false;
nav_mc.komercyjne_btn_mc.mouseChildren = false;

 

right after you assign all the IDs

[smeagol16]

Thank you again,

 

When i traced it the targets of the click's was (instance 28, instance 33 etc.) so it was clicking object inside buttons:)

 

mouseChildern = False; resolved it

 

High five!

[Carl]

excellent.