First time here? First time here? Newsletter Signup Newsletter
Search tutorials
Author: koritis@hotmail.com | Website: http://

Simple animation slider

Learn how to create a slider to navigate through the frames of your movie. Like this:


As you can see below, I've used 4 elements for this movie:

1. The "framecount" clip, which is a clip with a textfield inside it. I placed it on the stage and I named it "framecounter".
The textfield inside it has the name "theframe". It is just a counter that counts the current frame of the movie.
It exists only to make the progress of the movie obvious.
2. The "toglestoplay" clip (the red one), which is a clip with 2 frames
The first with a stop symbol and frame label: "stopit" and the second with a play symbol and a frame label: "playit".
I placed it on the stage and named it "stopbut". It is stoped in the first frame. It starts and stops the movie.

The above 2 elements are not essential to the functionality of the slider. The next one is used as the bar for our slider.

3. The "bar" clip. It's just a gray rectangle.
Make sure that the shape inside the clip is placed at coordinates 0,0 according to the reference point of the clip.
It doesn't matter where you'll place it. The actionscript will place it in its place according to the slider and it will adjust its width according to your desire!
I named its instance on the stage "lineclip".

Let's get on to the star of this tutorial:

4. The "slider". It's the green rectangle. Make sure again that the shape inside the clip is placed at coordinates 0,0 according to the reference point of the clip.
Place it wherever you like, just make sure that its X coordinate is a round number (not something like 45.8) . It will save you from much trouble.
The slider will move according to the main timeline and when you drag it, it will take the timeline to the frame you want.
I named its instance on the stage "slide".

So we have framecounter, stopbut, lineclip and slide to work with. Place them in separate layers and let's move to the script.

» Level Intermediate

Added: 2005-07-06
Rating: 6.71 Votes: 31
» Author
» Download
Download the files used in this tutorial.
» Forums
More help? Search our boards for quick answers!
Featured Flash FLA
» Author: Inocreato
» Title: RaiseTheBlocks
» Description: Raise all the blocks to win the game
Featured Sound Loops
Image for equalize

Audio Player

» Author: TomCat Carty
» Title: The Wood
» Description: Just a little game ending or it can maybe be looped. Recorders with music box and percussion to give the feel of well, I don't know, the woods? Free to use, just credit me. thank you
Latest Font
» Author: Fábio FAFERS
» Description: I created this font for free use. Everyone can apply it in personal or business texts. Its free, but I want to be communicated in case of business use. Donations are accepted to keep the project of free fonts alive! Thank you all
Featured Sound Fx
Image for equalize

Audio Player

» Author: Davisigner
» Description: Hmm... what to say about this one? It's reminiscent of the closing notes of the opening music from the Three Stooges done in a church organ style with a closing cymbal crash. I'll give this one away gratis, but feel free to check out my free loops and potential upcoming license-mandated ones over in the respective part of Flashkit.