Δευτέρα 13 Απριλίου 2009

Flash Tab Menu

Now with the knowledge that you have from the previous tutorials you can make (with a little more pain) the following tab menu. You will need about 3 hours (If I remember well 3 hours I had needed for that). It is more difficult than the other tutorials but you will learn much pretty and better Stuff to do with flash.








It’s the basic platform for a site (My first site was from that tutorial) and you will learn actions that you will use them a lot. So get the link and have fun….


Finally I have to thanks LUKA cause this tutorial was very usefull for me....

Κυριακή 12 Απριλίου 2009

Motion Guide

the last easy tutorial in flash....










First of all create a new document in AS 2.0 at 24 fps in 550x400, draw a rectangle at 30x30 pixels




and converted (F8) into a movie clip.


name it if you want in rectangle_mc

Go to time line on your layer1 press right click and select Add motion guide (in CS3) or Add classic motion guide in (CS4)


now in your Guide Layer

draw a line with the pencil tool (Y)
add frames until the frame 60 (f5) after that go to the layer 1 and add a key (f6) frame in frame 60.
go someware between the frames 1-60 press right click and choose create classic motion tween (CS4) or motion tween (CS3)

Go again to frame 1 and drag your rectangle mc to the beginning of your line



after that go to frame 60 and drag your rectangle at the end of the line



press CTRL+enter to see your movie...

You can download the source file from here (you can open the .fla only with flash CS4)

Τρίτη 7 Απριλίου 2009

Freshener Flash lesson (Before the tall order)


Before we start the Difficult Flash lessons I’ll give you an freshener flash movie. To make you more homey with Flash. The following notes are for your help to make it like this.







The main stage is 300*200 at 25FPS

Make a rectangle 25*25 in black color, every 10 frames put it in a different position and create a blue button with 100*20 (align it with Ctrl+K, to the stage like bellow):


And write the action to make it move…

 

Tomorrow I LL upload the fla files



 

Δευτέρα 6 Απριλίου 2009

Expand Banner tutorial



(this tutorial is not for my students, it is advanced but many people search how they can do it)

First of all you have to make your banner as you wish. I’ll make it in Flash with AS 2 and with roll over will be expanded. The design detail is up to u. So Open a new document in AS2 and set the below values of the properties panel:


Take the Rectangle tool (R), draw a rectangle and set it:


Converted to a movie Clip symbol by pressing F8 and name it Expanded_mc


Get into Expanded_mc by pressing double click on it:


Go  to Frame 2 press F6 to insert a key frame and draw a rectangle with the below values:


Create a new layer over the Layer 1 and name it Actions


Go in the first frame of layer Actions, open the action panel (F9) and write stop();


Now go back to Scene 1 by press on it and you have to see something like that:


Press once on your Expanded_mc to select it and open the action panel (F9) and write:

on (rollOver) {

gotoAndStop (2);

}

On (rollOut){

gotoAndStop(1);

}


Now press CTRL+ENTER to see your banner.

Go to File -> publish Settings


Go to HTML panel and select from Window mode -> transparent windowless



Press ok and go to File -> publish


Now Close the flash and open an Html file with the Dreamweaver or windows text editor:


And write the bellow code into the body:


So now you have embedded your swf into a div into your html:

So the code  divSTYLE="position:absolute" means that your flash  goes over  your other html for example if you write something into your html it will go under your swf and you will not see it. So if you put your text into your body, you have to put it into a div wich you will set it to go left about 250 pixels left so you will put that code to your text:


div class="rr"

dfhsdkfjasdhfasdlfasdjfklsdhfdlfhasdfjkldfjasdklfasdklfjdhfasjklefhasdlasdfjkldhdjhsdfhsdklfjsdhfsdlfhasdfjkdsfsdhljkfdf

div

That meandiv class="rr" your text will be set it with the values that you have give into your style.css and these are:


.rr {

                width: 600px;

                height: 43px;

                float: left;

                margin-top: 20px;

                margin-left: 252px;

}

 

So now you have put in the right position the text and you can move it from your style.css.

 

We come back to explane the other part of the code:

object width="400" height="250 this is mean that your flash is 400 250 if you gave deferent values in your flash you mast change and these values

 

param name="movie" value="ExpandMask.swf" this mean that you have uploaded a movie (flash) and the name is ExpandMask.swf if you have given deferent values you have to change it

 

embed src="ExpandMask.swf" width="400" height="250" wmode="transparent"

This means that your swf (src) is located in your same folder than that of your HTML also you can give a link or a different path. Depending with the where is your flash located. The ( wmode) means that your flash will be transparent (it will not have background)

 

And For last of the code:

link href="style.css" rel="stylesheet" type="text/css"

 

That means your style (style.css) is located to the same folder with your html.

 

The source files you could find them in here




Πέμπτη 2 Απριλίου 2009

on(press) Flash Tutorial

Take again the First movie that you made in tutorial of Motion tween and get make it Stop, and play from an other way.


 1. Go to your time line menu and insert a new layer

Name it Action


2.  Now press f9 or go to Window --> Actions


Go to 1st frame of your Action layer and write in Actions panel

stop();


If you press CTRL+ENTER to test your movie you will see that the clip it doesn’t move

3.     Let’s make a button 2 make the movie move again. Create a new layer above Actions and layer 1 and name it button. To take it in the middle you just drag it to the middle


4.    Now get the Rectangle tool (R) and make a rectangle on that position


5.        Select the new rectangle and press f8 to convert into a symbol and press button. Name it Button_bt

6. Now Select the button with the select tool (V) and open the Action Panel (f9) and write:


on (press) {

gotoAndPlay(2);

}

This is mean on (press) --> when you press your button

gotoAndPlay(2); --> go to frame 2 of your movie clip and play

You Can Download the fla file from Here