Making a Flash Website - Part #2

Ok heres part 2 of Making a Flash Wesbite. In this tutorial we'll go through the process of adding the actionscript to make the pages change. So continue on from Part 1.

Now that we have the buttons named lets go add the actionscript. Go to the content layer. Make sure your are on the 1st frame. In the properties panel, click on the small circle with an arrow in it (circled in the pic below).



The shortcut for this is F9. Once the actions panel comes up, click on the 1st frame of the content layer. Type in " stop(); " in the actionscript box. Go to frame 2 and 3 and add the stop command to them aswell.

Now go to the actions layer. Click on the 1st frame (keep the actions panel open). Add the following to the actions panel (only if you have named your buttons home_btn, about_btn and contact_btn in the 1st part of this tut, if not then change the names to the names of your buttons)-

stop();

home_btn.onRelease=function()
{
gotoAndStop(1)
}

stop();


about_btn.onRelease=function()
{
gotoAndStop(2)
}
stop();

contact_btn.onRelease=function()
{
gotoAndStop(3)
}


As you can see, the main part of the script that you need is -

stop();

home_btn.onRelease=function()
{
gotoAndStop(1)
}


Lets break down the code-
stop(); - This tells your computer not to keep on playing. The site will keep on repeating itself and your flash player in your web browser will take your site as a animtion. Try and preview your site with no stops in it (ctrl+enter or apple+enter on macs) you may be very surprised!!

home_btn.onRelease=function() - The first part of the line is the name of what ever you named your button. So basically this line is telling the button that you named home_btn to do something once it is released (onRelease). The function line is what lets the following lines happen.

The last three lines are telling your computer/browser/flash animtion to go to and stop on a certain frame. the frame number is in the brackets. Since my homepage was on the 1st frame I am telling the computer to go to frame one when the home button is released.

The same thing is happening to the other buttons and pages. For example -

about_btn.onRelease=function()
{
gotoAndStop(2)
}


Now if you take a look at the code above. Whats happening is that the about_btn is called upon and is told to go to frame 2 when it is released.So thats all there is to changing pages in flash. With the stuff you just learned you can go and apply it to whatever site you have made and it will make the pages change. Not that hard eh?

Publishing your site

To make your site viewable in a web browser you need to go to publish it. Flash can do this for you. Go to File>Publish Settings and tick in the box next to html. Then click publish. Flash will then publish your file in html format.... and there you go... youve just made a website in flash :O



Obviosly the one made in this tut may not look too good... but if you make a website layout in photoshop, you can bring it into flash and add links and stuff. Its a lot easier making a certain types of sites in flash than using html... I personally find that making buttons and linking pages is easier in flash.

Importing

If you want to bring in Images from photoshop to flash just save them in a png format. Then in flash go to File>Import>Import to stage Then the images will appear in your stage and you can drag them onto your stage when you need them. Make sure you convert them to "Graphic" symbols (F8).