First time here? First time here? Newsletter Signup Newsletter
Search tutorials
Author: Bali Khan
Hi everyone.
This is my first tutorial to flash kit and the reason it is here is because of a person who asked me to do it. The tutorial is for the file that I published to Flash kit <"Sliding Title (Scripted)">. Since I didn’t add comments to the file ... I guess some did not understand the code completely. I hope this tutorial will help them a lot. OK... lots of talking lets get to work.

Create a new Flash document and follow the steps below.

- Create some static text.
- Break it apart (ctrl+b) 2 times so that you convert it into free form artwork.
- With your mouse pointer, break the text into 5 parts... horizontal parts and convert each of the part into a separate movie clip.
- Create a dynamic text field and name it in the variable field (i.e. num)
- Create a button that will trigger the movement when the user clicks it after he has typed in the value of the clips' _x property.

Now Here is all the info of the movie

num_x // the variable that holds the _x value of the movie clip.
num // the variable assigned to the text field (this value will later be transferred to the num_x variable which will later change the position.
mover // the name of the function that makes the thing happen.

Create a new layer and assign these actions to the first frame.
num_x = 100;
function mover(name,no) {
    this_x = getProperty(name,_x);
    new_x = _root.num_x;
    movement = new_x-this_x;
    setProperty(name, _x, this_x+(movement/no));
Now let me explain this script to you.

-The first equation assigns the default value of 100 to the movie clip
-The second line invokes a function named “mover” that has the parameters name and no (variables that will be used in the function to substitute values.
-This is the place where the confusing part starts. Let me explain in detail.

First of all we crank out the current value of the clip’s _x property.

The we get the value of the _x property that the user supplies.

Then we create a new variable that is equal to the difference between the two values or simply the distance between the two points.

In the last statement we set the _x properties of the movie clips in a special way. We add the difference in the points (divided by some number) to the current _x position of the movie clip. This allows us to create an easing effect.

Here’s how it goes.

Imagine the user entered a value of 90 (current position of clip is 0). Now according to function, the difference is equal to 90. Now in the next step, we add this value (divided by a number e.g. 3) to the current x position of the clip (0+30=30). This moves the clip 30 pixels. When the function is executed again, it reads the current value of the clip as 30 and calculates the difference to 60 and when divided by 3, returns 20 and the movie clip is moved another 20 pixels. When it is executed again, it reads the clips current x position to (30+20=50) and calculates the difference to 40 and when divided by 3, gives a value of 13.3 and the movie clip again moves. When the process happens again and again, the value gets smaller and smaller and the clip moves slower and slower until the value get 0 or number that cannot be completely divided.

This creates an amazing easing effect.

I guess that should do it.

Now assign these actions to the button. This script simply transfers the value supplied by the user to the variable used in the function.

Now on each of the movie clips, call the function within the event handler of the movie clip:
onClipEvent (enterFrame) {
The EnterFrame event handler makes sure the code is executed repeatedly. When the function is called, The parameters are passes for name & no(number). The name identifies the object and the no identifies the number by which the difference in the function would be divided (NOTE: the greater the number, the slower the clip moves). To achieve the desired affect pass smaller numbers to the movie clips in the middle and larger numbers to the ones on the outside. This makes the middle ones go faster than the ones on the outside.

Now I guess I’ve done my job. Test your movie, and if it works, congratulate yourself. You did it partner!

©2004 Bali Khan Arts.
» Level Intermediate

Added: 2004-02-02
Rating: 4.78 Votes: 36
» Author
Bali Khan 14 yrs Flash Rookie
» 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.