Welcome To VertexTemplates.com Flash MX 2004 Tutorials Area - Color Flash Light For Flash MX

Ok.. To start off. Lets set up the Stage of the movie.

Set the Size of the stage to: width 400 by height 250.
Make the background color Black, and set the Frame rate to 22.

Next thing, Lets create the layers. Create 4 Layers and Name them as the following:

- Actions (Top Layer) - ActionScript layer.
- Light Mask(Second Layer) - Light Source. Actually will be set as a Mask later on in the tutorial.
- Text (Third Layer) - Text Layer (Color or B&W)
- Picture (Bottom Layer) - Picture Layer (Color or B&W)

So, Now that we have these things set up. Let's go on to create the light source. What we're gonna do here is create a circle, this will turn in to our masked layer which allow us to see the layers below. (If that didn't confuse you, let's move on.)

Lock all layer execpt your 'Light Mask' layer. Now Select the layer and create a circle on the stage. The Color of the circle doesn't matter because when you make a layer a mask it will lose its color properties. When you create the Circle hold Down SHIFT while making the circle, Holding down SHIFT will allow the circle to keep a true circle form.

Locking all Layers but 'Light Mask' layer

Creating a Circle

The Lines in the image above are just the Grid. I turned it on to show the size along with the stage.

Next thing to do is to make the Circle a 'Grahpic Symbol'. To do this, Go To 'Insert > Convert to Symbol' you can also do this by pressing 'F8' while the circle is still selected. A Dialog box then will pop up (seen below). Name the new symbol 'light'. and set the behavior to 'Movie Clip'. then click 'OK'.

After you have created the New MC (Movie Clip) you will need to give it an instance name. To do this Locate the properties window, located below the stage area. Where it says '<instance name>' type in 'light'. We will see why we did this later on in the tutorial.

Now, Unlock the 'Text' and 'Images' Layer and lock the 'Light Mask' layer. Now you can add the Text and images you wish onto the stage. Make sure when importing your graphic and placeing your text that they are on the correct layers (example: Text goes in the 'text' layer and images/graphics go in the 'images' layer). I'm not going to go into much more detail when adding text and images, I asume you know how to import you images/photos.

Now that you have your Photos, graphics and text where you want them we can create the mask part. Don't worry if you want to change or add Photos, graphics and text in the future to this you can, by just deleting, moving or adding your text and images to the correct layer. The screen shot below is (simular to) what you should have.

Let's lock all the layer so that we don't create something we dont want to in the layer.
Select the 'Light Mask' layer and right click on it, then select 'MASK'. This will make the layer that you have selected mask the layer below it. Next thing is to make the 'images' layer also masked by the 'Light Mask' layer. Select the 'images' layer and drag and drop it so it is above the 'text' layer, This sets the 'images' layer so that it is masked by the 'Light Mask' layer. Again, Drag and drop the 'images' layer so that it is below the 'text' layer. We do this so that any text can still be seen, and is not shown as if it would be under (or blocked by) any images.

    

     

Ok. So now we have created the mask layer. But, it still won't work. We need to add the Action Script. Lock all the Layers and Unlock the 'Actions' layer.

Select Frame 1 in the 'Actions' layer. To do this simply select the frame. Now we need to show the Action properties of this frame. Located at the bottom of the stage area, above the Properties is a bar Titled 'Actions'. click on the arrow to expand this window.

    

Now Under Actions. Click on the Actions tab thingy (seen above right). Then Click on Movie Clip Control then Double click on 'startDrag'. (Actions > Movie Clip Control > startdrag)

It will then place the following code in the Code Window: startDrag();

When you do this you should notice a small little dialog box (seen above) appear next to the code just place into it. This is a neat thing that macromedia added for Flash users (if you do other codeing i.e. C++, J++ (Java)) you understand what this is. This is called a "Code Hint". It helps the coder do the code correctly. so. Heres what its asking or hinting for you.

What you will see is: startDrag( target, lockcenter, l, t, r, b);

What these mean:

target - this is what will be moved, or affected. (In our case, this will be our light. (this is were the instance name comes into play)
lockcenter - lockcenter centers the MC or graphic to the mouse with its (the MC or graphic) center. This is done by entering either: true or false.
l = left: this is set to the left most of the stage the target can go.
t = top: this is set to the top most of the stage the target can go.
r = right: this is set to the right most of the stage the target can go.
b = bottom: this is set to the bottom most of the stage the target can go
Note: left and top are usually set to 0.

For our movie we will set it to the Size and height of the stage and lockcenter: true. So our code will look like:

startDrag(light, true, 0, 0, 400, 250);

The left and top are set at: 0.
Right is set at 400 (which is the width of our movie's stage).
Bottom is set at 250 (which is the height of our movie's stage).

So we now have the action script set. Are we done?
No, Not yet. two more things to do. But don't worry their easy to do.

Ok, Two more things. One, We need to add a second frame for all the layers. Second we'll add a 'GoToandPlay()' action to the second frame.

First, to add the Second frame for the layers. Click and Hold on the 2nd frame in the 'Actions' layer, and drag downward to the 'images' layer. Now Right click on the selection you have made, and Select 'Insert Frame'.

Then on the 'Actions' layer frame 2, Right click and Select 'Insert KeyFrame'.

Adding Frames

Adding KeyFrame

Now, with the 2 Frame of the 'Actions' layer selected Go to the Actions properties and Add a GoToandPlay() action.

Select 'Actions > Movie Controll > gotoAndPlay()

Again, you should see the 'Code Hint' box pop up. Where it says Frame, simply put a 1.
So the Code will look like: gotoAndPlay(1);

Well, we're done now. So, save it. and Test it.