Flash Web Banner Changer

4 posts Page 1 of 1
Contributors
User avatar
hungryhounduk
VIP - Site Partner
VIP - Site Partner
Posts: 2870
Joined: Mon Jul 27, 2009 11:58 am

Flash Web Banner Changer
hungryhounduk
Image

Hi All
Yes another wicked tutorial cooll;

This time its the Web Banner Changer

** The Pic above is a Banner Changer i have created for the Codenstuff Website***

And what it does is if you click a button on the banner itself ( you cant see the button because it dissapears as you activate the Banner Changer, and then reappears when you click the banner you want to change ) the loader will come in from the right hand side with all the different Codenstuff Banners ( as little pictures ) and each of the Pictures is a Button which when your mouse hovers over them they change and if you click one it will then load the next banner cooll; :) The Little green square that you see on the Loader is a button which turns off the banner loader so that you can have whatever banner you like visible... I have also coded the banner Changer so that everytime you refresh the Page or visit the site it will change to a random Banner :)
I did this a couple of weeks back, but Codenstuff has been having trouble getting it too work , It works fine my end ;)

Anyways i am going to teach you how to make it, as its a Wicked addition to any site wahooo; also as with most Flash Projects it can be adapted to suit any purpose and you can really get it to relay any message or video clip or picture or whatever your Imagination can think of.

*** In this tutorial we will create 1 banner creator, when you have finished this tutorial and you have created it, You duplicate the Flash file ( by FILE/SAVE AS ) 12 times ( thats if you are following this word for word ) if not then just Duplicate the Flash file how ever many times to the Number of banners you want to display***

I have named my Banner creators like this... FIRST.Swf/2nd.Swf/3rd.Swf/4th.Swf and so on..............

Right lets get Banner Making :)

I have used the Codenstuff Banner size of 890 x 130 , So start Flash and set the document to the size of the Banner you want to use.

If you are going to copy mine, Ideally you will need to create 12 Upstate Images, 12 Overstate Images and 12 Down state images ( these are the Up Button state, roll over State and the Button Down State and they need to all be IMPORTED in the Library) and you will need to create 12 Buttons individually and add these Up/Over/Down state images to each button ( see I told you it was Fiddly ;) )


Next Import a Image into the Library ( that you want as your main banner Image )

Create a New MOVIE CLIP and drag the Image from the Library into the Movie clip stage and center it Horizontally and Vertically.

Click the Scene1 Tab to take you to the main Flash Timeline

Drag your movie clip you just made ( with the Banner in ) onto the Blank stage and center it Horizontally and Vertically.

Create a new Layer above the Image Layer and name it "Loader"

Then Create another Layer above that called "Buttons"

and another Layer above that called "Actions"

**Its always best to name your LAYERS as then its easier to see what you are doing and you wont mess up**

** It wont be the same as the pic above as i have added extra bits**

So you now should have 4 layers Visible in your main Flash Timeline (Scene1) ie: the bottom layer for the Banner movie clip, the next layer up called ;Loader, the next layer above that called Buttons, and the top layer called Actions..

Ok lets now create the LOADER (which is the fiddly bit ) but is the hardest part, but again is really easy ;) to do.

Create a New Movie clip ( call it what ever you like ) but make sure its a MOVIE CLIP

You can see by my Loader that all it really is is a Dark Grey Rounded Rectangle with 12 Buttons on it, So create a rectangle in the NEW MOVIE CLIP and add a layer above the rectangle called Buttons.

Create a Button Symbol and then in the blank button Symbol stage that appears Drag a Button Up state Image onto the stage, then center it horizontally and vertically, Click in the Over state and then right click and choose ADD BLANK KEYFRAME from the list, then Drag your OVER STATE IMAGE onto the stage and again center it like before, then click on the DOWN STATE and again right click and choose ADD BLANK KEYFRAME then drag your DOWN STATE IMAGE onto the stage and center it as before....

Now click the scene1 tab to return to the main Flash timeline with your Image,Loader,Button and Action Layers.

In the Library will be the button you just created, RIGHT CLICK on the Button in the Library and choose DUPLICATE from the list, give it a name and click ok, This just DUPLICATES the button you just created, ( I find its easier to do this 10 more times so that you have 12 Buttons all the same in the Library but with different names )

So then all you have to do is DOUBLE CLICK EACH BUTTON IN THE LIBRARY and delete the Main Up State image and put another in its place REPRESENTING the next banner image.

Ok once you have added all the pictures to the different Buttons, Then double click on the LOADER MOVIE CLIP that you made earlier in the Library.

Click the Button layer( in the Loader Movie clip ) that you added earlier and then drag the 12 buttons out from the Library and place then on top of the Rectangle ( but make sure they are all on the Button Layer) and place them where you want. When you have done that then that part is finished for now. ( take a break and have a Cuppa ;) )

Click on the Scene1 Tab to go back to the main Flash Timeline with your Image,Loader,Buttons and Actions Layer
then click on the Image Layer and then click on Frame (10) and Press F5 ( which will add frames up to frame 10 )

Next Click the first frame of the LOADER Layer and then Drag your Loader ( Movie Clip ) from the Library and position it at the Right Hand side of your Banner (so that it sits off the stage ) but not visible on the Image

Next click on Frame (10) on the Loader Layer and Press F5, and with Frame (10) still selected Press F6( This will create a Keyframe at frame 10, Now if you double click on the First Frame on the Loader Layer then the 10 frames should turn Black ( which means they are all selected) then right click on the selected frames and choose CREATE MOTION TWEEN from the list, You should now see an arrow that goes from frame 1 to frame 10 on the Loader Layer.

Click on frame (10) on the LOADER Layer and move the Loader Movie Clip to a Position so that its completely Visible on the Banner Image ( like in my image above ) this is the Stop position of the Loader.

Next on the ACTIONS Layer Click on the First Frame and Press F9 ( to open the ACTIONSCRIPT Window ) and type or paste in the code below
Code: Select all
Stop();
Next click on Frame (10) in the Actions Layer and right click and choose add KEYFRAME from the list, Then with Frame 10 still selected Press F9 to open the ActionScript window and add another Stop Action.
Code: Select all
Stop();
Ok Now we are going to add the Code to the Little Buttons on the LOADER

Double click the Loader Movie Clip in the Library

Click on your 2nd Button and Press F9 ( to open the ActionScript Window )

Copy and Paste or type the code Below into the Actionscript window of the 2nd Button
Code: Select all
on (release) {
	unloadMovieNum(0);
	loadMovieNum("2ND.swf", 0);
}
As you can see by the code above, when the Button is Released it will UNLOAD the Banner already present ( which is Banner 1 ) and then it will Load Banner 2 ( 2nd.Swf ).

You need to Copy and Paste or type the code Above into the Actionscript window of each Button on the Loader, like we have done above ( BUT CHANGE THE LoadMovieNum to the relevent Banner .swf file).

When you have done that for each Button, Create a New Button Symbol give it a name a click ok, In the Button timeline that appears draw a small Square with the Rectangle tool and Center it, then Click on the HIT STATE and Press F5 ( this just fills in the Up/Over/Down states with the same square you created )

Click the Scene1 Tab to go back to your main timeline with your Image,Loader,Button and Actions Layers

Next click on the First Frame in the Button Layer and Drag the Small Button you just created onto the Banner and place it where you like.

Then click the button and then press F9 to open the ActionScript window for the button, and copy or paste the code below into the ActioScript Window.
Code: Select all
on (release) {
	play();
}
This tells flash that on Release of the Button to Play the Timeline up to frame 10 ( as if you remember we put a STOP ACTION on our first Frame in the ACTIONS LAYER ) and when it plays it will slide our Loader from off the Stage on the Right to the Position we put it on the Banner.

Once you have finished Press Ctrl +Enter to View and TEST your Banner Creator, if you are happy with it then save it, and then Resave your banner creator again with a new name, do this how ever many times for the number of banners you are going to have, then GO INTO EACH Flash file and change your Main Banner, and adjust the code on all the Buttons on each Banner LOADER, once you have done that Press Ctrl +Enter ( to Generate your SWF Files for each one ) put all the swf's in a Folder and then your Done cooll;

Right i think that's it, I know its long winded but its really easy to do and the Reward of creating this far outweighs the time to create it...Once you have done it a few times you like me will be able to create these type of Cool things in your sleep 8-)

** also notice how small the file sizes are as this is the beauty of Flash and these load really quick on the web***

Hope you have enjoyed this as much as i have :)

I have included 2 SWF Files below to show you how it works, If you Double click the First SWF when you download it and when it loads Click on the Banner changer Button on the Banner and when it slides in Click Second image/Button on the Top layer of Buttons ( 2nd button from the Left on the top row ) the other banner will load into the first.

***The other Buttons wont work as i have not included all 12 files**

Enjoy

Chris
You do not have the required permissions to view the files attached to this post.
Last edited by hungryhounduk on Thu Feb 11, 2010 7:49 am, edited 4 times in total.
Image
User avatar
tvs praveen
Top Poster
Top Poster
Posts: 205
Joined: Tue Dec 08, 2009 6:20 am

Re: Flash Web Banner Changer
tvs praveen
Superb, I love it :D wahooo;
User avatar
hungryhounduk
VIP - Site Partner
VIP - Site Partner
Posts: 2870
Joined: Mon Jul 27, 2009 11:58 am

Re: Flash Web Banner Changer
hungryhounduk
Thanks Tvs :)
Image
User avatar
zachman61
VIP - Donator
VIP - Donator
Posts: 1891
Joined: Wed Dec 16, 2009 9:56 pm

Re: Flash Web Banner Changer
zachman61
ooh this is nice hungryhound
too bad my flash cs4 was lost :(
Nailing my feet to the floor is easier than using my own muscles to balance, but you don't see me doing that :)
4 posts Page 1 of 1
Return to “Tutorials”