Mouse Control using Flash
I have been looking into mouse controls and how they can be applied to a gallery and be used for interactivity in my project. I have put together this workshop to create a scrolling image bar that uses mouse controls.
Scrolling Image Bar Workshop
1. Open up a new document and change size properties to 600px height and 400px width. Also change the frame rate to 15 frames per second and you can also change the background colour if you wish to.
2. Add the ten thumbnails that are 100px by 100px into the library.
3. Drag all ten images from the library onto the stage.
4. As you can see they are all piled on top of each. Separate them by dragging them elsewhere on the stage.
5. Choose one of the images and set the x axis to 0. Select another image and set the x axis to 900.
6. Now we want to align all the images so they sit next to each other horizontally. We will do this by selecting all the images and bring up the align pallet. Then press the button align top edge and space evenly horizontally. You should see that all your images are now aligned.
7. The next step is to convert each thumbnail image into a button. Select the first image and press F8. This will bring up a window. In this window you need to change the name to bn_1 and select the option button, then press ok. Now repeat this step for each image but increasing the button number by one each time. So your second button will be bn_2.
8. Select all the buttons that you have created and convert them into a movieclip. This is done by pressing F8. Call them imgbar_1 and select the option movie clip.
9. Then select the movie clip and press F8 again as we need to create another movieclip. Call it imgbar and select movieclip option. Now we have a ten button that are within a movie clip which is also within a movieclip.
10. Go into imgbar by double clicking, and then into imgbar_1 by double clicking. Here we have our ten buttons. The next step is to change the over state for each button. Double click on the first button and create a key frame (F6) on the over state. Copy and paste in place the image from the up state into the over state and change its alpha properties to 50% in the over state.
11. Now repeat step 10 for each button. When you have finished test your movie by pressing ctrl + enter, to see if your rollovers work.
12. Come back onto your main stage and go into imgbar (the first movieclip).
13. Create a new layer and hold alt while dragging the key fame from the first layer into the second layer. This will duplicate the movieclip, select frame one in layer two and set the x axis of the movieclip on stage to 100. This will put them side by side. Now select both frames and drag them to frames100 while pressing down the alt key.
14. Select the frames at 100 on the timeline and select both moveclips on the stage and change the x axis to -100.
15. Select both layers on the timeline and right click and select create motion tween.
16. Now select the whole motion tween (both layers) and duplicate by holding down alt and make the last frame end on frame 200.
17. Now create a new layer and name it actions.
18. On frame one insert a keyframe and in the actions layer add the ActionScript below in the actions palette.
gotoAndPlay (101);
19. Now go to frame 200, add a new keyframe and put the same code on actions layer.
20. Go back to scene 1 and select the moveclip. Set the x axis to 0, the y axis to 300 and give it an instance name (bar).
21. Create a new layer called actions and open the actions palette.
22. Enter the following code:
root.onEnterFrame = function () {
if (_root. xmouse <50) {
bar.prevFrame();
bar.prevFrame();
}
if (_root. xmouse >550) {
bar.nextFrame();
bar.nextFrame();
}
}
This is giving the tween bar mouse controls. So if the mouse is less the 50 on the x axis then the bar will move to the previous frame and the opposite for the right side.
23. Now we are going to add to the code:
root.onEnterFrame = function () {
if (_root. ymouse<301){
var=false;
}
if (_root. ymouse>300){
var=true;
}
if (_root. xmouse <50 and var= =true) {
bar.prevFrame();
bar.prevFrame();
}
if (_root. xmouse >550 and var= =true) {
bar.nextFrame();
bar.nextFrame();
}
}
Here we have added variables to help with mouse controls on the y axis.
24. Now when the mouse is not over the image bar it stops moving. We don’t want this to happen so we are going to add this extra code:
root.onEnterFrame = function () {
if (_root. ymouse<301){
var=false;
}
if (_root. ymouse>300){
var=true;
}
if (_root. xmouse <50 and var= =true) {
bar.prevFrame();
bar.prevFrame();
} else {
bar.Play ();
}
if (_root. xmouse >550 and var= =true) {
bar.nextFrame();
bar.nextFrame();
} else {
bar.Play ();
}
}
25. Lastly we want the bar to stop scrolling when you rollover an image. Here is some more code we need to add to enable this to happen:
root.onEnterFrame = function () {
if (_root. ymouse<301){
var=false;
}
if (_root. ymouse>300){
var=true;
}
if (_root. xmouse <50 and var= =true) {
bar.prevFrame();
bar.prevFrame();
} else {
bar.Play ();
}
if (_root. xmouse >550 and var= =true) {
bar.nextFrame();
bar.nextFrame();
} else {
bar.Play ();
}
if (_root. xmouse >50 and _root. xmouse <550 and var = = true) {
bar.stop();
}
}
You should now have a scrolling image bar!
