Jump to content
Search Community

Multiple Tweens and stagger

joakimhoegset test
Moderator Tag

Recommended Posts

Hi I have been trying to get my head around the multiple clip stacking.

I am trying to have five clips go from alpha 0 to 1 with a delay of 0.5sec.

After they are all finished they should be visible for 5sec before fading out again.

After fading out another set of five mc goes from alpha 0 to 1 with a delay of 0.5sec.

After they are all finished they should be visible for 5sec before fading out again.

and after this finishes it starts over again with the first five clips.

 

There is one more problem

I want to have a mouse over that increases all content in size with 0.2 or preferably increase z axel using a mask to contain within the size of the "stage". This of course on roll out goes back.

I get that this is a little unclear what I want but if all the clips were in one movie clip and increase the z they will make it feel like it is moving in space but if you just increase them one and one they will just feel like they are increasing in size.

 

Thanks,

Joakim

Link to comment
Share on other sites

A few tips:

 

1) Don't use a mask - dump your stuff into a container that has its scrollRect property set to the Rectangle you want to use as a mask. Same effect, but it's much easier on the processor (masks are very expensive).

 

2) Use TimelineMax for the sequencing you're after. And TweenMax.allTo() for the staggering. Like so:

var clips1:Array = [mc1, mc2, mc3, mc4, mc5];
var clips2:Array = [mc6, mc7, mc8, mc9, mc10];

//set them all to invisible and an alpha of 0 initially
TweenMax.allTo(clips1.concat(clips2), 0, {autoAlpha:0}); 

//create the timeline
var timeline:TimelineMax = new TimelineMax({repeat:-1});

//fade clips1 in
timeline.appendMultiple(TweenMax.allTo(clips1, 1, {autoAlpha:1}, 0.5));

//fade clips1 out
timeline.appendMultiple(TweenMax.allTo(clips1, 1, {autoAlpha:0}), 5);

//fade clips2 in
timeline.appendMultiple(TweenMax.allTo(clips2, 1, {autoAlpha:1}, 0.5));

//fade clips2 out
timeline.appendMultiple(TweenMax.allTo(clips2, 1, {autoAlpha:0}), 5);

 

Does that help?

Link to comment
Share on other sites

That is great thanks,

Only one thing.

 

Dump stuff into a container???

I am fairly new to as3 and don't know this. Found this on adobe:

import flash.geom.Rectangle;

var container:MovieClip = setUpContainer();

var window:Rectangle = new Rectangle(0, 0, 100, 40);

container.scrollRect = window;

 

function setUpContainer():MovieClip {

var mc:MovieClip = this.createEmptyMovieClip("container", this.getNextHighestDepth());

mc._x = 50;

mc._y = 50;

mc.opaqueBackground = 0xCCCCCC;

 

var content:MovieClip = mc.createEmptyMovieClip("content", mc.getNextHighestDepth());

var colors:Array = [0xFF0000, 0x0000FF];

var alphas:Array = [100, 100];

var ratios:Array = [0, 0xFF];

var matrix:Object = {a:150, b:0, c:0, d:0, e:150, f:0, g:150, h:150, i:1};

content.beginGradientFill("linear", colors, alphas, ratios, matrix);

content.lineTo(300, 0);

content.lineTo(300, 300);

content.lineTo(0, 300);

content.lineTo(0, 0);

content.endFill();

content._rotation = -90;

 

mc.onEnterFrame = function() {

this.content._y += 1;

}

 

return mc;

}

 

Does this have anything to do with it?

My rectangle is w:753 h:130

 

Thanks for all your help.

 

Joakim

Link to comment
Share on other sites

How do I get it to start over on clip1 after finishing clip2 fadeOut?

 

That's what the "repeat:-1" is for in the code I posted - it repeats forever. If you wanted to repeat only once, you'd set repeat to 1. 2 for twice, and -1 for infinity.

 

Dump stuff into a container???

 

When I said "container", I just meant a MovieClip (I see you're using AS2, right?). Then when you scale that MovieClip (which contains your sub-clips), everything scales from the registration point.

Link to comment
Share on other sites

Thanks I saw the repeat after posting it. Sorry for that.

No I am using AS3. Just found that on Adobe. didn't really look through it.

Putting it in a movieclip then I need to change the code to control the clip1 and 2 right?

Do I just put the name of the first movie clip before the clips or img?

 

movie.clips1

or

movie.img1, movie.img2 etc...

 

Joakim

Link to comment
Share on other sites

Thanks I will go through that.

Can I not do this though?

 

big_btn.addEventListener(MouseEvent.ROLL_OVER, onClips);
big_btn.addEventListener(MouseEvent.ROLL_OUT, offClips);

// Move the arrows
function onClips(e:MouseEvent):void {
TweenMax.to(clips1, 1, {z:93});
TweenMax.to(clips2, 1, {z:-46});
}

function offClips(e:MouseEvent):void {
TweenMax.to(clips1, 1, {z:171});
TweenMax.to(clips2, 1, {z:0});
}

 

Joakim

Link to comment
Share on other sites

Here is the whole code.

 

import com.greensock.*;
import fl.motion.easing.*;

var clips1:Array = [img1, img2, img3, img4, img5];
var clips2:Array = [img6, img7, img8, img9, img10];

//set them all to invisible and an alpha of 0 initially
TweenMax.allTo(clips1.concat(clips2), 0, {autoAlpha:0});

//create the timeline
var timeline:TimelineMax = new TimelineMax({repeat:-1});

//fade clips1 in
timeline.appendMultiple(TweenMax.allTo(clips1, 3, {autoAlpha:1}, 0.5));

//fade clips1 out
timeline.appendMultiple(TweenMax.allTo(clips1, 2, {autoAlpha:0}), 4);

//fade clips2 in
timeline.appendMultiple(TweenMax.allTo(clips2, 3, {autoAlpha:1}, 0.5));

//fade clips2 out
timeline.appendMultiple(TweenMax.allTo(clips2, 2, {autoAlpha:0}), 4);

big_btn.addEventListener(MouseEvent.ROLL_OVER, onClips);
big_btn.addEventListener(MouseEvent.ROLL_OUT, offClips);

// Move the arrows
function onClips(e:MouseEvent):void {
  TweenMax.to(clips1, 1, {z:93});
  TweenMax.to(clips2, 1, {z:-46});
}

function offClips(e:MouseEvent):void {
  TweenMax.to(clips1, 1, {z:171});
  TweenMax.to(clips2, 1, {z:0});
}

Link to comment
Share on other sites

  • 2 weeks later...

I couldn't get that to work. I will send you the fla.

What if I wanted to tween img1 and img2 together at the same time from y:100 to 1 in one second and img3 and img4 together at the same time from y:100 to 1 in one second with a 1 second delay from the first two clips and img5 and img6 together at the same time from y:100 to 1 in one second with 1 second delay from the second set of clips with no repeat?

 

Thx,

Joakim

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...