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