TimelineLite/Max and Flash timeline - combining

[berilac]

I realise this topic has been broached before.

However, I am still having trouble. Thus, perhaps I have misunderstood something in other examples.

 

I have a movie clip containing a graphic symbol (an arrow) and a layer mask, which is animated on flash timeline to reveal the arrow (as if being drawn). Pretty standard.

 

There is much yet to come (and I'm already stuck at this beginning stage, yey!) - but currently:

 

- I have TimelineLite and TweenLite set up to append and reveal my background image (have also tried with Timeline/TweenMax just in case)

- I have then appended my arrow movie clip and attempted to delay it start time

 

No matter what I have tried, when I run the file, the arrow always draws right away. I can't get any delay to work.

This will be essential for the website, as parts of it have to be IDE animated...though I'm trying to do as much as poss with TweenLite/Max...

 

Here is my current code:

stop();  'prevent reference layers from playing the IDE timeline...while converting animations to TweenLite/Max

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

var timeline:TimelineMax = new TimelineMax();

timeline.append(TweenMax.from(mcScene, 3, {alpha:0}), 1);
timeline.append(new TweenMax(mcHomeArrow, 3, {frame:48, ease:Linear.easeNone}));

 

note: My background, and my arrow are on two separate layers...though I guess this should not affect the issue (I did actually try briefly putting the arrow on same layer, but to no avail).

 

 

Any ideas?

Please ask questions if necessary. I have a tendency to ramble, but hope I have been clear

[berilac]

hmm, I am seeing at least part of the problem...

 

The code I am using is based on having the arrow animated within the IDE timeline, within the same movie clip as my background.

But I have the arrow animation within it's own movie clip.

 

Is this technique valid?

 

I am still very much learning how to structure everything within flash, as well as learn AS3, as well as learn TweenLite, etc... - Thus if you have any advice pertaining to website structure, that would also be wonderful.

[Carl]

welcome to the forum.

 

it is very difficult to visualize your file / problem based on your description.

 

when you say the arrow is drawing right away, do you mean it is animating? or just appearing?

you mentioned it was part of the clip that was fading in... so it makes sense that you will see it.

 

perhaps you could set the arrow's alpha to 0 initially and then fade it in before or while the frame:48 animation plays.

 

it is difficult learning a bunch of things at once. with flash these little troubles turn out to be the best learning experiences. keep at it.

 

Carl

[GreenSock]

I'm having a hard time understanding the description too, but it sounded like maybe you're trying to mix MovieClip timeline animation (tweens built with the Flash IDE) and ActionScript-driven tweens. Don't do that - once you change any property of an object with ActionScript, it essentially "unhooks" it from the MovieClip timeline. That has nothing to do with TweenLite/Max or TimelineLite/Max - it's just how Flash works. So you need to choose to tween an object with ActionScript or on the timeline, not both. Does that help at all?

 

If you're still having trouble, please post a sample FLA that demonstrates the issue and we can try to figure out what's going on.

[berilac]

thank you both for swift responses.

 

apologies for lack of clarity.

when I say "drawing", I refer to animating right away, not simply appearing.

 

Breakdown:

 

- Two movie clips on stage (well, actually within a movie clip)

- One containing background image

-- Which has TweenMax alpha fade-in

- Second containing a Flash IDE keyframed animation

-- One layer containing an single frame drawn 'arrow' png

-- A layer on top containing hand-keyframed mask to "reveal" the arrow frame-by-frame

 

- On Run

- The arrow animation plays immediately (it does not function as I would hope re the TimelineMax code)

-- My intention is to have the beginning of this movie clip to be delayed.

- The background image functions as I would expect (regarding the TimelineMax code)

 

 

Hope that is more clear. I will try to put together an example fla also...

 

If there is any suggestion for how this kind of masking can be achieved using AS, I would be more than happy to hear about it.

 

Thanks again.

[berilac]

attached test.fla

http://www.tempfiles.net/download/201101/139983/test.html

 

hope that helps clarify a little...

any questions, just ask

 

- I would like for the arrow animation to begin after, maybe, 3 seconds...

(I have not included any code for the arrow anim (it can be seen in my original post - and seems to me will be discarded...)

[berilac]

greensock: ok, I would like to say thanks again, but seems has been solved.

 

Your suggested code here http://forums.greensock.com/viewtopic.php?f=1&t=4007&p=15828&hilit=tweenlite+with+ide#p15837 works perfectly, as long as there is a "stop();" within the actions layer on the first frame of mcArrowDrawing (see test.fla)

 

Does that seem a clean enough solution?

 

damn, I am loving your code (just need to get my head round everything a little more ). Another thank you for the release!

 

 

edit:/

Out of interest, is there a way to achieve this kind of masking within tweenlite/max?

[GreenSock]

Out of interest, is there a way to achieve this kind of masking within tweenlite/max?

You can tween any numeric property of any object with TweenLite/Max. So that could be a mask's width/height/x/y or whatever. But no, there's not some magic plugin that will trace your artwork in the way you've got it in your file. Tweening the mask's width or position would come close, but it wouldn't have the custom arrow draw-on at the end.

 

Cheers!

[berilac]

greensock: appreciated... if you further agree that my solution above is as good as it gets in this scenario, I/you can mark this as SOLVED.