Fade out Current frame to Targeted Frame

[richtea]

Just started using Greensock AS3 for flash and finding it quite helpfull.

 

The next thing I wish to do is fade out my current frame and fade into the frame which is wanted by the user. I have a simple navigation menu atm which just basicly goes to the frame and stops.

 

homeButton.addEventListener( MouseEvent.CLICK, home );
function home( evt:MouseEvent ) {
gotoAndStop(2);
}

galleryButton.addEventListener( MouseEvent.CLICK, gallery );
function gallery( evt:MouseEvent ) {
gotoAndStop(3);
}

 

How would I achieve this?

[X10]

Hi richtea,

Welcome to the Greensock Tweening Platform

 

I think the Frame Plugin will help with this query, check out the Plugin Explorer, there will also be some example code you can use:

 

http://www.greensock.com/tweenlite/#plugins

 

You may need to combine this with TweenMax's FromTo method depending on how you want to acheive the result:

 

http://www.greensock.com/as/docs/tween/

 

You may also wish to check out Carl Schooof's excellent tutorial Bulletproof TimelineMax page transitions, it's in 3 parts, but this link will take you to the overview:

 

http://www.snorkl.tv/2011/03/teaser-bul ... ansitions/

 

X10

[jamiejefferson]

If I'm stuck working on a project that uses stage frames as 'pages', I usually do something like the following:

 

*Use a bitmapdata to capture the current frame.

*Add to the stage.

*Go to the desired frame.

*Fade out the capture.

 

Something like this should work

var bitmapData = new BitmapData(stage.stageWidth, stage.stageHeight);;
var drawRect:Rectangle = new Rectangle(0, 0, stage.stageWidth, stage.stageHeight);
bitmapData.draw(stage, null, null, null, drawRect, false);
var fade:Bitmap = new Bitmap(bitmapData);
addChild(fade);
gotoAndStop(frameNumber);
TweenMax.to(fade, 1, { alpha:0, onComplete:removeChild, onCompleteParams:[fade] } );

This is soooo much easier to do when using movieclips instead of frames for pages, as you can just add/remove/fadein/fadeout the movieclips at will.

[Carl]

Yeah, the problem is that you can't fade out the main timeline.

 

Jamie's bitmap capture is very cool, but if you have any say in the matter it might be less complicated (for a beginner) to just restructure your file before you get too far.

Once you start doing more with as3 you will find its better to have only 1 frame in your main timeline. I would suggest:

 

1: converting each frame to its own movie clip and then you can fade each movieclip when needed (as jamie also suggested).

the difficulty for a beginner may be that you have to keep track of which clip is showing, so that you can fade it out. Although more difficult you could do a cross-fade where one clip is fading out WHILE the other clip is fading in.

 

 

2: paste all your main timeline frames into a movie clip. with this method you just need to tell one clip to fade and one clip which frame to go to. (note doing a true cross-fade would be impossible).

 

import com.greensock.*;
import flash.events.MouseEvent;

black.addEventListener(MouseEvent.CLICK, blackHandler);

function blackHandler(e:MouseEvent):void{
//fade out the container, when fade is done call fadeIn(1);
TweenLite.to(container_mc, .5, {alpha:0, onComplete:fadeIn, onCompleteParams:[1]});
}

blue.addEventListener(MouseEvent.CLICK, blueHandler);

function blueHandler(e:MouseEvent):void{
//fade out the container, when fade is done call fadeIn(5);
TweenLite.to(container_mc, .5, {alpha:0, onComplete:fadeIn, onCompleteParams:[5]});
}	

green.addEventListener(MouseEvent.CLICK, greenHandler);	

function greenHandler(e:MouseEvent):void{
//fade out the container, when fade is done call fadeIn(10);
TweenLite.to(container_mc, .5, {alpha:0, onComplete:fadeIn, onCompleteParams:[10]});
}		


function fadeIn(frame){
container_mc.gotoAndStop(frame);
TweenLite.to(container_mc, .5, {alpha:1});
}	

 

**container_mc is a movieclip that has keyframes on 1, 5, 15 denoting sections black, blue, green respectively.

 

 

attached is a sample of #2.

[jamiejefferson]

Aha, I didn't have time to write any useful instructions for getting pages off the stage this morning, but I had a hunch Carl would save the day. Go team!

 

Also, the screen capture method can be most useful when dealing with old and imported content that uses frames:

I once made an ebook reader, using a 200 page 'ebook' swf exported from InDesign with one frame per page. Rather than manually convert the frames to mc's, or run a massive script to convert it at runtime, captures saved the day. Unfortunately, the performance hit when animating a bitmap's alpha is massive when the bitmap is large. Only do this on a relatively small stage (no fullscreen! )

[Carl]

Jamie,

 

As long as you keep answering the difficult questions, I think things are going to go really smoothly in here;)

 

Carl