Forgot Password / Register
Site Statistics
Total Members: 509
Total Tutorials: 242
Newsest User: Lestop
Todays Unique Hits: 204
0 Users 1 Guests Online

Flash Layouts; Part 1

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

TutorialNinja Image

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

TutorialNinja Image

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.

TutorialNinja Image

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.

TutorialNinja Image

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.

TutorialNinja Image

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-

Code

stop();

this.onEnterFrame = function(){
if(rewind == true){
prevFrame();
}
}

this.onRollOver = function(){
rewind = false;
play();
}

this.onRollOut = function(){
rewind = true;
}


I suggest learning this, not just copying and pasting!

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

Code

stop();

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!

TutorialNinja Image

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

Code

stop();


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-

TutorialNinja Image

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-

Code

stop();


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

TutorialNinja Image

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;

TutorialNinja Image

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

Code

_root.home.onRelease = function(){
gotoAndStop(1);
}

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

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

Code

_root.tuts.onRelease = function(){
gotoAndStop(1);
}


and

Code

_root.info.onRelease = function(){
gotoAndStop(1);
}


Press CTRL Enter to test it, if it does not work, go back through all the steps and retry them.
Joshua
Author:
Views:
1466
Rating:
Posted on Friday 27th July 2007 at 07:00 PM
Joshua
Joshua
Part Two will consist of the following:

Adding Graphics to the background
Adding more text
Editing with PHP/HTML
User System interfaces [Being able to use a user system on it]


It will look like a tutorial layout, but in flash, you will get to see most of the tutorial here, but you will have to see me for the rest, it should be out in August, later August that is.
~Josh
Posted on Sunday 15th July 2007 at 08:38 PM
Joshua
Joshua
Images fixed, have fun:)
Posted on Sunday 15th July 2007 at 10:06 AM
Joshua
Joshua
Yes, will do, but I'll have to of course make new pix:P
Posted on Sunday 3rd June 2007 at 11:02 AM
MCP
MCP
Umm... There are no images Josh. Please fix it.
Posted on Sunday 11th February 2007 at 07:17 PM
Joshua
Joshua
I'm sorry:(

I'll work on making the images smaller.
Posted on Sunday 11th February 2007 at 04:48 PM
DanielXP
DanielXP
U messed up the layout!

TuT TuT
Posted on Sunday 11th February 2007 at 03:47 PM
ShadowMage
ShadowMage
looks good -ITS SO SHINY!- O.o