Creating a Full Flash Page ! - Step by Step Tutorial--tutorial.jcwcn.com

DOWNLOADS:
-

----------------------------------------------------------------------------------------------------------------------------------------

Keep in mind that I am not focusing on the design part in this tutorial so it may not look the best or fancy but it will help you understand the basics of a FULL FLASH PAGE. After you're done with this tutorial, you can start making your own web page and you can add as many graphics as you please.

STEP 2.

The things that we have done in "STEP 1." are the parts of the page that will not be modified from now on, so they won't bather us anymore. The interesting part begins only now. Select "Layer 1" on your stage, and right click it, select Properties ; after you clicked on properties, a little window will pop up ( it's called Layer Properties ), you'll find some interesting options here too but the only thing that we are going to do is to rename this layer to: Background. When this is done, simply hit OK and you'll be back on the stage, you can observe now that the layer is no longer called "layer 1", but "Background". So let's LOCK this layer because we won't use it for a while, you can lock a layer by pressing the little white circle under the little "lock icon".

*** NOTE : I will explain the steps but I will not repeat them everytime I do the step again, so even if you are a total noobie to Flash you will need to know some basic stuff regarding the tools and icons/buttons. It will simply take too much time to explain every step again and again whenever I lock a layer or create a new one.

After you locked the "Background" layer, create a new layer by clicking on the "Insert layer" button, you'll find this button under your layers, it has the same icon as a layer and a little blue "+" on it. After this is done, then rename the new layer to "Actions Layer" ( this will be the layer where we add our code ).

*** NOTE : It is indicated to put your code on a separate layer, like "Actions Layer" because that way you can always track your code really easily. The thing is that whenever you insert a new layer then always make sure that your "Actions Layer" is on the top of all the other layers, that way you'll always see where the code is.

After you are done with the "Actions Layer", insert a new layer and rename it to "Home" ( this si the layer where we'll add the first button, the "Home" button ). After this is done, then draw a grey rectange on the stage ( don't make it too large because it will be a button you know ) and after this is done with the TEXT TOOL write "Home" on the recrange you just created. After this is done then select both the rectangle and the text and go to: Modify>Convert to symbol... or simply press F8. A window will pop up, at the "type" option, select "movie clip" and press OK. Now if you select the button in the Properties Panel you'll observe that you just made a MOVIE CLIP symbol. Now double click the HOME movie clip, so you can edit it. After this si done, right click it and select Distribute to Layers ( this will distribute the text and the shape on 2 separate layers ). Now you'll get 3 layers, the middle layer is already renamed to "HOME", now rename the first layer to "Actions Layer" and the third layer to "Button Backgound", and lock the Actions Layer. Afther all this si done, insert a keyframe to frame 10 to all 3 layers ( it should look like in the following image ):

----------------------------------------------------------------------------------------------------------------------------------------

Ok, I presume everything is clear untill now. Do not forget that we are making a MOVIE CLIP button and not a simple "button symbol", so the next steps will be quite tricky. After you are done with those key frames, then select the 10th frame at your "Button Background" layer and change the color from grey to green. Select the first frame of the "Button Background" layer and from the Properties panel choose Tween: Shape ( it's a little drop down menu, next to "Tween" ). This is a simple animation in which the buttons background color will change from grey to green. Hope you done this right ( if you did then the first 9 frames of "Button Background" layer have a light green color and an arrow on it, that means you have a "shape tween" applied to those frame, so you have some sort of an animation ). Ok, not we must add some code, so that the Movie Clip will act as a button.

Select frame 1 of "Actions Layer" and press F9. A window will pop up again, this is the area where you write your code ( I like to call it Actions Panel ). I'll just place the code here and you can copy-paste it ( be sure you have FRAME 1 selected of Actions Layer when you hit F9 ):

----------------------------------------------------------------------------------------------------------------------------------------

stop();

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

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

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

-----------------------------------------------------------------------------------------------------------------------------------------

I will not waste too much time explaining every code, because I presume that you do have some programming knowledge and understand the code or atleast have an idea what it does. The code above "stops" the movie at the frame where the "stop();" action is placed at ( in our case frame 1 ) and the rest of the code is regarding to your mouse actions, meaning that it will rewind or play when you roll in or out of the button with your mouse pointer. If you wish to know more about movie clip buttons then you can take a look at this great video tutorial that explains the easy steps of making a movie clip button: http://www.kirupa.com/developer/flash8/video/creatingMCbuttons.htm ( great tutorial by LearnFlash.com, a great and simple way to create movie clip buttons ).

Creating a Full Flash Page ! - Step by Step Tutorial

relation tutorial

Category

New

Hot