Help with flash click through presentation using TweenMax

[mattr]

Hi all

 

I have a project I need to complete with the aim of creating a flash presentation which interacts a lot like Prezi. I wanted to use TweenMax to take advantage of the forward and reverse functionality which is great. I have managed to get it into a basic working state but wondered if anyone had any tips to simplify my code or make it more efficient, I have included an fla of an early prototype.

 

I am using a Vcam which will be zooming in and out of a large canvas of images. I am creating a sequence of motion tweens, adding frame labels and tweening from each frame label with the use of right,left arrow keys and KeyboardEvent function. Although it works, I need to enter event listeners on each labelled key frame before moving onto the next sequence. I have around 100 camera animations I need so I am wondering if there is a more efficient way to control the left, right key event listeners on the whole timeline, regardless of what frame I am on. So, almost in effect it will just play to the next frame, or reverse to the previous frame when you press the keys regardless of what the frame label is.

 

Also, I am keen to use the motion tweens to control the easing and timing rather than TweenMax. If I use tweenmax, I need to define each tween on each labelled keyframe. Is there a way to set a default framerate to all tweens in TweenMax, as some motion tweens will need to be shorter than others in the finished presentation. So basically, if there is better ways to help me from having typing out the same code hundreds of times, I'd like to know!

 

I hope that makes sense, I haven't used flash/as3 for 3 years so very rusty!

 

any help much appreciated

 

thanks

 

Matt

[Carl]

can't open your file. you will have better chance at getting help if you save your file in a format that is available to a larger audience.

try a flash cs4 or cs5 fla (not that xfl stuff).

 

being that I couldn't open your file, I'm not really sure of what you are asking right now.

Tweens do not have individual framerates, they have durations. if you have a bunch of assets moving around varying distances and want them all to move at the same speed, you may be interested in my tutorial on creating tweens with constant speed

 

http://www.snorkl.tv/2010/11/tweenlite- ... -traveled/

 

i'll look at your updated file later and let you know if there is anything I can suggest. We have to keep our advice focussed on GreenSock related matters though.

 

Carl

[mattr]

Hi Carl

 

Thanks very much for the reply, that video is really helpful and pretty much answers the tween speed question. I've uploaded another FLA file which you can grab here : http://www.3dwarrior.co.uk/FlashClickThroughPresentation2.zip

 

So essentially, I'm trying to get a zoom in and out of a canvas effect with large images. I have frame labels for each transition point but I need to keep adding and removing listeners on each keyframe for each transition. Just wondering if I can create a separate class file to control the forward and reverse playback using the keyboard arrow keys. My action scripting knowledge is really lacking in this area.

 

Another thing which may be possibly unrelated is I'm noticing a choppy playback when zooming in and out. There will be a good 150 images on the stage once this is complete, are there better ways to keep the tweening smooth? I've tried smoothing the image in the properties and cranking up the framerate but not getting much luck.

 

thanks again for the help, much appreciated.

 

Matt

[Carl]

normally I wouldn't rewrite someone's project so extensively, but you had an interesting problem that could benefit from a cleaner solution. I may even be able to tutorialize this some day.

i haven't tested it extensively but it seems to work pretty well in that it allows you to:

 

have a relatively small amount of code in one place that will allow you to tween to the next or previous frameLabel in any timeline.

 

instead of having similar code on every frame with a label, you can just put this in the first frame:

import com.greensock.TimelineMax;
import com.greensock.TweenMax;
import com.greensock.easing.*;


//this creates an array of all the labels in your main timeline
var labels:Array = this.currentLabels;

//this keeps track of the index of the current frame
var currentFrameIndex = 0;

stage.addEventListener(KeyboardEvent.KEY_DOWN, nextTween);

function nextTween(evt:KeyboardEvent):void
{
var validKey:Boolean = false;

//go left
if (evt.keyCode == 37)
{

	if (currentFrameIndex - 1 >= 0)
	{

		validKey = true;
		currentFrameIndex--;


	}





}

//go right
else if (evt.keyCode == 39 || evt.keyCode == 32)
{

	if (currentFrameIndex 		{
		validKey = true;
		currentFrameIndex++;

	}


}

//only create a tween if one of the required keys was pressed AND there is somewhere to tween to.
if (validKey)
{

//get duration between currentFrame and frame you want to go to
	var duration:Number = getDuration(this.currentFrame,   labels[currentFrameIndex].frame);
	trace("duration: " + duration);
	TweenMax.to(this, duration, {frameLabel:labels[currentFrameIndex].name, ease:Linear.easeNone});
}
}


//generate duration of tween between 2 frames
function getDuration(f1, f2):Number
{
trace(f1 + " " + f2);
return Math.abs(f1 - f2) / stage.frameRate;
}



stop();

 

cs5 fla attached

[mattr]

Hi Carl

 

Thanks very much for taking the time to write up the code, much appreciated and it works great! Array's scare the hell out of me so this will really help in understanding them better.

A tutorial would be really helpful at some point, I scoured google trying to find examples of click through animated presentations in flash and I could find nothing!

 

Again, thanks very much.

 

Matt