Flash Timeline Effects

jasewhalen · Jul 17, 2009

Hi Guys,
New to flash and trying to play around with it right now. I have put together a simple flash site using each page as a frame. I have 5 pages as of right now so my frames go 1-5.

I wanted to used the blur effect from the Insert > Timeline effects > Blur. My question is if I wanted to set up the blur effect at 20 frames with a resolution of 0 and a scale of 0.25 how would i be able to insert it so that it would only work when clicked on a page button from my navigation bar?? I am basically just trying to use it as a page transition effect

Ride9650 · Jul 18, 2009

With the way you have things set up at the moment, you can't.

Split your "pages" up and give a few frames space between them. In that space, create the keyframes needed for your effect and apply it between the key frames. When you write your code, you have the movie jump to whatever frame the effect starts on prior to your destination page, have that play, then stop the movie on the destination page.

I'll try my best to illustrate this.

p = page
k = keyframe
--- = blank frames

starting page | effect starts here| effect ends here| destination
p ---------------------k------------------------k----------------------p

I don't know how good you are at Actionscript, but using that to handle transitions would be better in terms of keeping your timeline neat, as well as help to open up what can be done.

EDIT:
I apologize, I don't know what I was thinking, when I first wrote this, but you can simply set up your effects a few frames down like a #20, have the movie jump to that frame and play the effect, then jump back to the destination. I still think though, what I first wrote is still worthwhile in terms of keeping your timeline neat, as, unless you can tell which effect is which from vaguely worded frame labels, it may be hard to keep track of things by simply tossing all your effects off to the side.

so to try and clarify a little further:
1.page one would have code like this:
gotoAndPlay("effect1");

2. Find where the effect ends and add this to the timeline
gotoAndPlay("page2");

3. On your destination page(in this case, page 2)
stop();

repeat for all links.

I thought I should mention that from a design standpoint, the effect is not necessarily a good choice in my opinion, assuming you're doing the transition like i think you're doing.
People will notice the strange shift in elements as you jump from page to page. To really create something interesting and not something as noticeable, I think you would have to shift the blur close to around 100%. That way, your general audience is less likely to notice something is off, and I think, it will make for something much more interesting.

snickelfritz · Jul 20, 2009

Learn to use a good Tweening class, such as TweenMax.
You'll need to create a custom classes directory in the AS3 preferences.
Place the downloaded "gs" folder within this custom classes directory.

Start by organizing all of your page content within a Movieclip on the stage.
page1 is on frame1, page2 is on frame2, and so forth.
Give this movieclip an instance name of "pages".
Create a dynamic textfield on the stage, with fonts embedded.
Give this dynamic textfield an instance name of "btnLabel".
Select btnLabel, and press F8 to wrap it in a MovieClip.
This movieclip does not require an instance name.
Select the movieclip on the stage, and option-drag to create a new instance.
Repeat the option-drag until you have as many buttons as you need.
Select all of the button instances on the stage; press F8 to wrap them in a movieclip.
Give this movieclip an instance name of "buttons".

You should now have two (2) MovieClips on the stage on frame1 of the main timeline:
"buttons", which contains all of your buttons.
"pages" which contains all of your page content in a frame sequence.
Create a new layer on frame1 of the main timeline.
Name it "actions" and lock it.
Open the Actions panel and enter the following Actionscript 3.0 code:

PHP:

// import greensock tweening classes
import gs.*;
// stop the pages movieclip from looping.
pages.stop();

// this is a list of labels for the buttons
var btnLabels:Array = 
[
"button 1",
"button 2",
"button 3",
"button 4",
"button 5"
];
// references to the buttons will be pushed into this array
var buttonArray:Array = new Array();
// this variable will capture the number of buttons within the movieclip "buttons"
var n:int = buttons.numChildren;
// this variable will capture the id number of any button that is clicked
var targetID:int;
// calling the buildNav function
buildNav();
// this function uses a for..loop to assign properties and listeners to each of the buttons,
// then pushes them into the buttonArray.
function buildNav():void
{
	for (var i:int = 0; i < n; i++)
	{
		var _btn:MovieClip = MovieClip(buttons.getChildAt(i));
		_btn.buttonMode = true;
		_btn.mouseChildren = false;
		// the key to this navigation script: each button is assigned an id number
		_btn.id = i;
		// btnLabel is assigned a String from the btnLabels array.
		_btn.btnLabel.text = String(btnLabels[i]);
		_btn.addEventListener(MouseEvent.CLICK, onClick, false, 0, true);
		buttonArray.push(_btn);
	}
	// this Tweens the buttons in buttonArray in sequence from alpha 0;
	TweenGroup.allFrom(buttonArray, 1, {alpha:0, stagger:.2});
}

function onClick(e:MouseEvent):void
{
	// the targetID variable is assigned a value
	targetID = e.target.id;
	// pages movieclip is tweened to alpha 0 with a blur filter, on complete, the newPage fucntion is called.
	TweenMax.to(pages, .5, {alpha:0, blurFilter:{blurX:16, blurY:16}, onComplete:newPage});
}

function newPage():void
{
	// pages movieclip is sent to the frame number that matches targetID + 1;
	pages.gotoAndStop(targetID + 1);
	// pages is tweened in to alpha 1 and the blur filter is set to 0.
	TweenMax.to(pages, .5, {delay:.1, alpha:1, blurFilter:{blurX:0, blurY:0}});
}

jasewhalen · Jul 21, 2009

that is exactly what I was looking for. Thanks so much

One more question, I have multiple layers right now, music player broken up into individual layers, background, pages, actions, etc. If I am spreading out the frames can I just insert frames to the pages layer? Or do I have to to do it to every layer on the timeline? Sorry if that's a dumb question. I was thinking I would just need to do it to the layers that it only applies to.

snickelfritz · Jul 21, 2009

Generally speaking, the main timeline should only have one keyframe.
Spreading objects and code along the main timeline is an invitation for null reference errors.

jasewhalen · Jul 22, 2009

can you walk me through the process of creating a new custom classes directory? Im a little confused on this section of it.

lucidmedia · Jul 22, 2009

snickelfritz said:
Generally speaking, the main timeline should only have one keyframe.
Spreading objects and code along the main timeline is an invitation for null reference errors.

Agreed... and if one wants to learn to write "actionsscript only" SWFs, sooner or later they will dump the flash interface altogether and move to a text-editor like Flex or Eclipse.

Search

Search

Flash Timeline Effects

jasewhalen

macrumors newbie

Ride9650

macrumors 6502

snickelfritz

macrumors 65816

jasewhalen

macrumors newbie

snickelfritz

macrumors 65816

jasewhalen

macrumors newbie

lucidmedia

macrumors 6502a

Our Staff