You may have come across flash menus where you drag a selector over a row of small images which slides a larger row of the same images into view. This code example is a basic solution to that problem.
Method
1. First produce all your images. You need a large version and a thumbnail version of each. Then import them into Flash.
2. Place your thumbnail images in a row on the stage. Make sure the centres of the images are equally spaced. Then select them all, and press F8 to convert them into a MovieClip.
3. Place your larger image in a row on the stage above the thumbnails, in the same sequence as the thumbnails. Make sure the centres of the images are equally spaced. Then select them all, and press F8 to convert them into a MovieClip. Give the MovieClip the instance name items_mc.
4. Create a draggable selector. Mine has a transparent fill so that I can click on it anywhere, but still see through it. Convert it into a MovieClip called slider_mc. Place it over the centre of the first thumbnail in the row.
5. Find out the distance in pixels between the centre of the first large image and the centre of the last large image. This will be used for the variable itemwidth in the ActionScript.
6. Find out the coordinate of the centre of the first thumbnail. This will be used for the variable sliderleft in the ActionScript.
7. Find out the coordinate of the centre of the last thumbnail. This will be used for the variable sliderright in the ActionScript.
And that is all your preparation done.
The Code
Insert the following code in the first keyframe of your movie. Then replace the values of the itemwidth, sliderleft and sliderright variables with the values you worked out in steps 5-7 above.
/*This whole mechanism assumes that the CENTRES of all items are equally spaced.*/
/*starting x coordinate of the CENTRE of the first item in the row*/
var itemstart = _root.items_mc._x;
/*Item width is the distance between the CENTRE of the first item in the row and the CENTRE of the last item in the row*/
var itemwidth = 1920;
/*this time I use the difference between coordinates of the CENTRE of the first and last items to determine the width*/
var sliderleft = 40;
var sliderright = 520;
var sliderwidth = sliderright-sliderleft;
/*slider*/
/*Allows us to drag the slider in a straight line between 2 fixed coordinates when the mouse button is clicked on it*/
_root.slider_mc.onPress = function () {
this.startDrag(false, sliderleft, 340, sliderright, 340);
}
/*stop drag when we let go*/
_root.slider_mc.onRelease = function () {
stopDrag();
}
/*stop drag when we let go if we happen to be outside the boundaries of the flash movie*/
_root.slider_mc.onReleaseOutside = function () {
stopDrag();
}
/*repositions the items_mc depending on how far we have dragged the slider is based on a ratio of how far the slider has been dragged along the available length. 0 means the slider is at the start, 1 means it is at the end, 0.5 would mean it is in the middle*/
onEnterFrame = function () {
sliderratio = (_root.slider_mc._x - sliderleft)/sliderwidth;
_root.items_mc._x = itemstart - (itemwidth*sliderratio);
}When you are done, press CTRL+ENTER to test. You should be able to bring any of the larger images into view by dragging the slider over the thumbnail version of the same image.
And that's a wrap.
Posts
