Flash Layouts; Part 1

Now, let's start off by opening up Flash and creating a new flash document.



Now, rename Layer 1 to background and draw something or write something and then lock it, like so



Now create a new layer and name it Actions Layer.
Make sure the Actions Layer the first layer!

Insert another layer and name it home.

Now when you are finished with the home layer, draw a rectangle (you choose the color), I'll go with gray. And when you have added the rectangle, add Home on it with the Text tool.



Click F8 and make it a Movie Clip, I'm going to name it "Home MC".

Double click when you have made it and right click and Distribute to Layers.

Name the top layer Actions Layer and the bottom layer Button Background.



Now, click the 10th frame of the button background and change the color to what ever you want, now, click on any frame between the 1st and last on the button background and add a Shape Tween. This is in the Properties panel
Should look similar to this.



Now go click the 10th frame of each layer and right click to Insert new keyframe(s)

Select frame 1 of the Actions Layer (still in the Home MC) and click F9 and write this code in it-



I suggest learning this, not just copying and pasting!

Now, goto the 10th frame of the Actions layer and add this code-


Don't copy this code, if you do, you are just lazy!

Click CTRL Enter to test it out, roll over your button to see if it changes colors or not.
If it doesn't, go back to step 1 and retry.
If it does, continue with the next step.

Now, if it worked, go back to the first part and click to make how ever many layers you are going to be making the buttons for.

I made two, 1- Home, 2- Tuts, 3- Info.
Remember to put them under the Actions Layer one.


Make the buttons and make them Movie clips, do the same thing you did with the Home button!



Now, before this next step, just click the first frame of the actions layer and click f9 and add this code-



Create 4 new layers and place them under Actions Layer, name the layers to: home_text, and what ever other layers you put, make sure it has the first name of the layer before _text.

Click the fifth frame of all the layers and click insert keyframe.

Now, since I only used 3 buttons and movie clips, you should make yours look like this-



Now, click the first layer of home_text and add text.
Now, click the text and make it a movie clip, i'll name it HomeText_MC.
Do it again, this time I'll make it HomeText_MC2.
Double click once and look at the Properties Panel.


Now, make a new layer and name it Actions layer and add 9 new frames to each layer.

Create a motion tween for the Text layer.

In the 10th frame of the actions layer, add this code to the actions panel-



In the Color drop down menu in the properties panel, click Alpha and change the percentage to 0%.



Do that for all of the text.

Select your HOME button ( by clicking it ONCE ) becasue we are going to give it a "name/label".

I'll refere to this method again in a later STEP, but first we have to make it for our buttons.

So after you selected your HOME button, take a look at your Properties Panel at the bottom of the "window/stage" and see that under Movie Clip, you have a little input area, called <Instance Name>.

This area will help us give our Movie Clip a name so that Flash will recognize it after it's name when it searches for it.

( you can give whatewer name you want ). In this tutorial simply name it "home", just click the area where you see <Instance Name> written and write home.

If you done this right then it should now look like this;



Now, click the first frame of the actions layer and click F9 and add this code- (In the Home button)


Remember, do not copy and past that, it's easy to learn!

Now, add that code for all of them, like the following-



and



Press CTRL Enter to test it, if it does not work, go back through all the steps and retry them.