Laser eye menu

View menu at www.magicinnovations.com


To begin, adjust your settings to 900 x 600 a gray background (#CCCCCC) and add 25 as your frame rate. Then, List 8 layers in the timeline. Label each from top, Actions (enter a stop action in keyframe 1), Text, Thumbs, Container, Frame, Laser-eye, and Background.

You will need four photos with two different sizes each. Here I have the black and white thumbs at 100w X 100h. The size of the images to be displayed in full color are 340w X 380h. All of your pictures and swf should be saved in the same file.

The very top layer labeled Actions, insert a stop action. Now, you don't really need this but its best practice that anything made in Flash should have a actions layer on top.

The text layer is just for text that reads, "Rotation menu by flash3d.org."

Skip down to the laser-eye layer and insert any image similar to the blue & gray photo-eye pictured above. I made this one using the oval tool and gradient fills.

The next layer is just a display box for text. (this layer could be combined with the text layer if you like).

The final layer is the background. It's a simple gray color with a radial fill. White fill set at %78 (#FFFFFF) set the gray %100 (#666666). Use the gradient Transform Tool to set a good white glow to the lower left of the screen.

Click on the Insert tab. Click New Symbol (or click ctrl f8 for pc users). Click movie clip. Name this movie clip "Container" and click the Export for action script tab and keep the title name of Container. Also keep the export in first frame and then click OK. Go back to scene 1 leaving the container movie clip empty. We are going to load images into this container later.

It may help you to make 3 folders in the library labeled Btns, MC's, and Pics.

Insert your images into the pics folder.

Make each thumb nail into a movie clip. Click Insert, click on create new symbol, click movie clip, and name it b&w_clock make the registration point to the upper left corner. Do this again three times, once for every remaining thumbs. Name them b&w_crate, b&w_plug, and b&w_room.

Make another movie clip, name it box_1, and draw a gray (#CCCCCC) box W293 X H103. make its registration points middle and left.

Make a movie clip and name it Frame_2. Draw a box with a Gray #666666 stroke and a gray #CCCCCC fill.

Make a movie clip and call it laser_beam. Inside this movie clip draw a wavy line with the brush tool. The color I used is #999999.

Save your file.

Make another movie clip named White-glow-1. Draw a small white X using the brush tool.

Make a movie clip and name it White-1. Insert movie clip white-glow-1 Now click the filter tab then click the little blue "+" Click on blur and adjust the settings to 17 and medium strength. Now click on frame 5 and insert another keyframe (F6) press ctrl, shift, and 9 to rotate the image a quarter turn. Now click on keyframe 10, press F6 to insert another keyframe again press ctrl, shift, and 9. Do this again for frame 15 and again for frame 20 to get a single rotation. Now highlight the timeline by selecting keyframe one (click and drag) over to keyframe 20. now right click anywhere inside you highlighted area and select add motion tween. You should now have a blurry spinning X.

Make another movie clip and call it laser_beam2. Insert your laser_beam movie clip here with the bottom centered. Add two filters to this; one blur and one bevel. Set the blur (x&y) to 5 with 100% strength and quality of low. The shadow should be back and highlight white (defaults).Set one instance of the white-1 movie clip into layer 1 in the timeline. In layer 2 insert another instance of the same movie. In layer three (bottom) should be your laser mc. In layer two (middle) click out to frame 36 or so and enter a keyframe. Move the white-1 mc to the end (top) of the laser beam. Then right click anywhere in between them and click add motion tween. You won't see the star spin here until you test your movie later.

Save your file.

We need to convert your movie clips into buttons so start with b&w crate mc. In scene 1 click insert new symbol, click on the add symbol. Name it "Symbol 6" and make sure the setting is on button. In layer one of the button (symbol 6) layer insert movie clip symbol 10. Add a frame into the over state and lock this layer. Above this layer insert another layer called frame. Click the over state area and insert a keyframe. Draw a box with the rectangle tool over and a little larger than your movie clip. Make the stroke a thickness of 2 and gray (#999999) with no fill. This will give some indication that your mouse is over a clickable object.

Now we are going to get into some animating. Click insert, new symbol name it "Symbol 10." Make sure its set to movie clip and click OK.

You will only need to add two layers into the timeline. Label them b&w_crate and laser_beam2. Start with b&w crate. Drag out the button instance of it from the library (Symbol 6) and place it off center on the stage. Right click on the b&w_crate layer and click add motion guide. Draw a circle on the stage using the oval tool and size it to 397x 397. Center it on the stage. Use your eraser tool at the smallest setting to erase a tiny section at the far right.

Now place the b&w_crate button (symbol 6) with the registration point onto the circle where the split is (the lower section).

We need to add some very simple actions to this button now.

Click the symbol 6 button to highlight it and open up your actions window. Copy this code and paste it inside. Make sure you change the picture names to whatever your pictures are saved as.

on (rollOver) {
    stop();
}
on (rollOut) {
    play();
}
on (release) {
    loadMovie("crate_pic1.jpg", this._parent.container);
}

Every button has similar actions but will need to be changed to use individual pictures.

In the timeline scroll out to 225 and enter a keyframe. Move your button's registration to the upper cut-off section of the circle. Right click in the timeline between the keyframes and add a motion tween. The box travels around the large circle if you press enter.

The next part is tricky. In the laser_beam layer, insert a keyframe at 54 and press Ctrl,Shift 9 to rotate the image a quarter turn. It lines up with the crate. In line 110 enter another keyframe and press Ctrl,Shift 9 rotating another quarter turn. In line 168 enter another keyframe and press Ctrl,Shift 9 rotating another quarter turn. In line 225 enter another keyframe and press Ctrl,Shift 9 rotating the last quarter turn. Click and drag over the entire layer and right click to add a motion tween. Press enter key and watch the box and beam rotate. I added a delete layer for a red dot to represent the laser eye in the final movie. The goal is to get both mc's to rotate around this area. If you have made this circle delete it before you publish your movie leaving you with only 3 layers in the timeline.

Save your file.

Go back to scene 1 and click insert, click new symbol. Name it "Symbol 11." Your going to repeat the same steps as above using a different movie clip. In this case use the b&w_clock.

Convert each mc into a button as you did before with symbol 6:

b&w_clock = Symbol 5

b&w_room = Symbol 7

b&w_plug = Symbol 8

Follow the same steps as above only erase a different portion of the motion guide circle each time. You are going to do this to the b&w_room ("Symbol 12") and again for b&w_plug ("Symbol 13").

Go back to scene 1. click keyframe 1 in the "thumbs" layer. Drag out an instance of symbol 10, symbol 11, symbol 12, and symbol 13. Get the tail ends of the laser beams or each to touch over your laser eye pic. (see example top of tutorial). If you test your movie now (Ctrl,Enter) you will see the rotation and the star climb each beam. If you run your mouse over the thumbs they stop and if you click them the color picture loads into the large gray box.

Save your file.

That's it. This is my first tutorial so please be kind on the comments. Enjoy.

~AD