Web
Article

Flash Script – Create a Dynamic Scroller in Flash

By Georgina Laidlaw


Download the sample files here.

1. Open a new movie, and assign it a width of 200 and a height of 150.

2. Create a rectangle with a width of 150 and height of 550.

3. Create a small rectangle for the scroller. Mine has a width of 16 and a height of 35.

4. Now convert the larger rectangle to a movie clip, and give it an instance name of "bar".

5. Convert the scroller to a button. Select the scroller, press f8, and convert it to a movieclip.

6. Give the scroller an instance name of "scroll".

7. Now, go into the timeline of the scroller movieclip. Right click the button, and select "actions". Insert the actions below:

on (press) 
{
//left=180 right=180 top=10 bottom=100
startDrag ("/scroll", false, 180, 10, 180, 100);
_root.flag = true;
}
on (release)  
{
stopDrag ();
}

8. Next, go back to the main timeline. Go to menu insert > new symbol > movieclip, and give it the name "code".

9. Drag the code movieclip from the library to the stage, and go into its timeline.

10. Create two blank key frames. In the first key frame, insert the following actions:

if(_root.flag) 
{
vtop = 12;
scroll_length = 110;
bar_length = getProperty("/bar", _height);
incr = bar_length/scroll_length;
scroll_y = vtop - getProperty("/scroll", _y);
y_pos = scroll_y * incr;
y_pos = y_pos + vtop;
setProperty ( "/bar", _y, y_pos );
}
if(!_root.flag)
{
setProperty ( "/bar", _y, 20);
}

11. In the second key frame, insert:
gotoAndPlay (1);

12. Now go back to the main timeline. Select the "bar" movieclip and go to its timeline.

13. Position the object so that the center point of the object is at the top. To do this, select the object, press shift, and use the down arrow.

That’s all it takes! Test the movie.

Free Guide:

7 Habits of Successful CTOs

"What makes a great CTO?" Engineering skills? Business savvy? An innate tendency to channel a mythical creature (ahem, unicorn)? All of the above? Discover the top traits of the most successful CTOs in this free guide.

No Reader comments

Recommended
Sponsors
Because We Like You
Free Ebooks!

Grab SitePoint's top 10 web dev and design ebooks, completely free!

Get the latest in Front-end, once a week, for free.