type = 'application/x-shockwave-flash'
data = 'http://sitepointstatic.com/flash/menu.swf'
width = '400'
height = '400'
bgcolor = 'black'

This is a popular effect, and it’s easy to do! Here’s how…

1. Set the frame properties first. The size should be 420 X 90 pixels, and the frame rate should be 25 frames per second.

2. Import a background picture. I made the background picture in photoshop, and its size was 700 X 85 pixels.

3. Select the background picture and convert it to a movie clip. Name it bg_static.

4. Give this an instance name of "bg".


5. Create a movieclip that’s 1045 X 40 pixels. Give this an instance name of "menu".

6. Select the first frame and insert this action:

xm = 0; 
//function to set the xpos of the movieclip
function xpos(bar_length,mul)
hpos = 0;
scroll_length = 420;
incr = bar_length/scroll_length;
xm = _xmouse;
if(_xmouse <= 10){xm = 10;}
if(_xmouse >= 400){xm = 400;}
scroll_x = hpos - xm;
scroll_x = scroll_x * mul;
x_pos = scroll_x * incr;
x_pos = x_pos + hpos;
return x_pos;

_root.onEnterFrame = function ()
// call function xpos
x_pos = xpos(700,.20);
with (bg)
_x += (x_pos - _x)*.4;
// call function xpos
x_pos = xpos(950,.75);
with (menu)
_x += (x_pos - _x)*.4;

Now you’re finished! Test the movie.

Download the sample files here.

Georgina has more than fifteen years' experience writing and editing for web, print and voice. With a background in marketing and a passion for words, the time Georgina spent with companies like Sausage Software and sitepoint.com cemented her lasting interest in the media, persuasion, and communications culture.

Get your free chapter of Level Up Your Web Apps with Go

Get a free chapter of Level Up Your Web Apps with Go, plus updates and exclusive offers from SitePoint.

No Reader comments

Related books & courses
Available now on SitePoint Premium

Preview for $1