Building SMOOTH Movies

[wikfx]

Hi I have been developing i flash for a while now mainly graphic not AS, anyway I see alot of flash stuff online all sooo smooth in play with a good deal of content. How do they do this? I am working on a project right now I dont have so much content yet and already playback is a little slugish? is it a tool I am using? what tools are best to keep filesize down? should I only use fills? or should I only use lines? should I keep all my stuff as sepeate symbols , I am so confused? can someone please give me some pointers???

Thanks Ahead of time
WiK

 

[PaulFynch]

Hi wikpod

couple tips here for you, from my own personal experience.

Smoothness is directly proportional to framerate...for the most part. in direct relation to video for example, web content video is generally 15 fps. the default for flash is 12. film video, dvd, etc is generally 24fps, which is smoother, and NTSC or progressive scan video (typically from cable or television systems, satellite, etc) is at 29.97 fps (30 fps)
the higher the framerate of your flash movie, the more "smooth" your animations and tweens will appear.
A little caution on this note. higher framerates in flash will demand more performance from the "user's" browser plug-in. a safe framerate is probably 20-25 fps, whereas i have developed movies in 40 and 50. determine your target market or the probability of capable machines when choosing your framerate.

as far as keeping file size down, learn to develop in ActionScript, as there are many tutorials out there and, with a little practice, the language and concepts are quite easy to understand, if you have any programming experience in any other languages. if not, the concepts for object oriented programming are well documented all over the web, and with a little practice, you'll be scripting entire movies in no time. the reason i mention this is, the more "tweening" and "occupied" frames you have in your movie, the larger the file size is going to be. for simple motion and even advanced motion, simple scripts can be written to accomplish scripted "tweening" or scripted motion as well as easing and such. this is very valuable when developing projects with button guided navigation; the re-use of the same script takes all the work out of setting up each of you motion tweens.

hope that is a start for you....if you could be a little more specific about your needs, im sure myself or the real experts here would gladly offer more tips.

cheers
paul


"If you build it....it won't work the first time.....or the second

 

[wikfx]

Thanks I will try to learn more AS as I know a little already. my problem is I like to see what I am doing while I do it and you cant do that with AS, anyway also I have another question how is the best way to use text? should I break it? keep it how it is? embed some of the fonts please help with this too??

Thanks WiK

 

[wangbar]

A real killer on performance is _alpha transparency - using fades makes the processor work very hard as it has to do calculations on every pixel in your image to get the right colour between foreground and background. If you have several images fading in or out simultaneously then the movie will start to chug.

To get around this you can time fades so that only one or two images are fading at a time.

If the images are fading over a solid coloured background, you can use a colour tween (in the 'advanced' palette in the colour menu). If you're fading in or out over black or white you can use the 'brightness' menu for the same effect. Both of these are much less processor intensive.

In general lines draw slower than fills so that can affect performance. Gradients draw slower than solid fills too.

For text it depends on what your movie is doing - I use embedded dynamic text if I'm pulling in content from a database or textfile etc and try to embed only the characters I need to keep filesize down.

For other things you might only need static text, which embeds the font outlines automatically, if you're using a tiny amount of static text it sometimes helps on filesize to break it apart, also it seems to give a timy performance advantage over the font version but that might be mu imagination ;-)

 

[wikfx]

thanks s much I always wondered if fills fare lighter than lines that helps, also I am working on something with a good deal of text, should I dynamically load it or use static text, what I am ding is turning a little book into a flash presentation so I will have a good amount of text.

Thanks Again
WiK

 

[wangbar]

If the text doesn't need to be updated often then you're probably okay with static text, dynamic text is most useful when you're going to be changing the content from a database or external file.

When you're using a lot of text then the fileszie for using dynamic versus static will be the pretty much the same as you're likely to use the whole font.

 

[imagenetics]

Remember that the higher fps of the movie is, the more powerful computer is required. Fps around 120 (that's the highest value you can set for flash movie) is good for local, offline presentations, but for the Internet you should not go beyond 32 fps.

According to fps you choose you need to be aware of the number of frames the animation consist of. Ofcourse it depends of how "dynamic" you want your final project to be. However, in most cases, for example setting something to move from one side of the stage to another at the speed of 100 fps and in 10 frames, it would be too fast.

Also it is important to know that it is in a bad taste to create oh-so-slow-and-boring animations when user waits hours for buttons to slide in. On the other hand it cannot (shouldn't) be so-goddamn-fast-i-can't-see-anything.

The optimal fps I use for all my projects is 26. This playback rate is a good balance between smooth animation and most computers' display capability. In this case is use 5 to 10 frames for movement, alpha fades, color transitions and so on.

You can check my latest website I've made, the playback rate is 26 fps and most of the animations are not longer than 10 frames:

http://www.dgs.com.pl

Hope that helps.

 

[imagenetics]

One more thing - try to apply easing to your animations, especially movement. You set it with a slider named "Ease" located in motion properties area. Don't know what Flash version you use, but in MX 2004 Pro it is between motion type combo and rotation parameters. Easing at positive value causes your animation to start fast and slow down before it stops/ends. The negative value is the other way round.

Example:
The easiest thing I can think of to show you how easing works is to make a bouncing ball. We'll use playback rate of 26 fps to explain my previous post.

Open new movie and draw a small circle. Align it to top left corner of the stage. Make a symbol of it (ofcourse you know that anything which is to be animated, unless it is a shape transition, must be a symbol). Now go to frame 20 and create a keyframe. Move the circle to the bottom of the stage. Go to frame 40, create a keyframe and move the circle back to top. Go to frame 1 and create motion tween, do the same in frame 20. Now click on layer 1 to select all the frames, right-click these frames and copy them. Make a new layer, select all blank frames from 1 to 40, right-click and paste frames. In keyframes 1, 20 and 40 of layer 2 align the circle to the right side of the stage. In the same layer, in keyframe 1 set easing to -100 and in keyframe 20 set it to +100. Test your movie. The left circle bounces without easing, the right one with easing applied. See the difference?

 

[PaulFynch]

kudos to wangbar, i didn't know about that little bit involving gradients and fills....
i like to use dynamic text in my movies just to retain the "aliased" look, but that is my preference. also when dealing with a large amount of text, i use a text file, or when possible, a database and load the text in just to make the initial swf smaller, even by a few kb

easing can also be achieved through scripting, which you may or may not have seen, wik

here's an example


/*essentially what this does it create a "user defined" or
"prototype" method (a specific way of performing an action)
that any movie clip can use. that's why it is a prototype

the first prototype actually does the moving, it takes the variable 'newposition' and the current _x value of the movie clip this method is called from, and every frame, cuts the value in half. this would be similar to an "ease out" tween in flash. at higher framerates, 15 or better, its a nice result, and cuts all the work out of the tweening. the if(math.abs.....) part just breaks the loop when the movie clip gets close, otherwise it would go on forever. you can change the value ".5" to find a nice scripted tween for your needs*/


MovieClip.prototype.doMove = function(){
var distance = this._x-this.newPosition;
this._x-=(distance)*.5
// close enough? then stop
if(Math.abs(distance) < 1) delete this.onEnterFrame;
}
/*this second part is the method that you would call from the movieclip on your stage. it essentially calls the above method .onEnterFrame which means "do this once per every framerate of the movie. now this isn't entirely accurate, but i wont get into that here. if your framerate is 25, it will practically do this 25 times a second.*/
MovieClip.prototype.slideTo = function(newPosition){
this.newPosition = newPosition;
this.onEnterFrame = this.doMove;
}


now to call this method, you can just place a line of code on your main timeline where you want the "tween" to start.

if its a ball or a square or something, give it an instance name and call it as such


_root.myBall.slideTo(50);


slideTo being the name of the bottom mc prototype, and 50 being the new position that you want the ball to be at

to me this little snippet is indespensible, and can help cut out "tweens" and thus lower the size of your main movie.

good luck in your scripting.....

cheers
paul

"If you build it....it won't work the first time.....or the second