Making a Flash Website - Part #3

I hope youve done Part 1 and Part 2 of making a flash website since this tut will just continue on from them. It will show you how to make each of your pages animated so that when you change page, the animation will hapen. To see the completed site Click Here.There are a number of different ways to do this. The way I am going to show you is not too complicated and is fairly staightforward. So lets get to work.... open up your old fla from the site which you hopefully managed to make using the last 2 tuts. Setup your screen so that the only 2 extra panels open are the properties and library.



Ok... so basically to add animation what we are going to do is make the content pages animated movie clips . Go to Insert>New Symbol when the pop up comes up put the name as home (or whatever your page is going to be. Since I am making my home page I called my movie clip "home"). Set the behavior to movie clip. When you press ok you should notice that your stage changes to the home movie clip's stage.



If you need to return to your main stage then simply click on "Scence 1". You also should have noticed when you made your movie clip that a movie clip symbol should have appeared in your library.



^^ As you can see from the picture, my button symbol that I made in part 1 of making a flash site is still there. Now that your have your home movie clip setup... lets add the animtion :)

You can make the animation like whatever you want. I am going to use a shape tween. Heres what I am going to do -
1. Draw a small circle where the title plus sign is on the stage. Do this on the 1st frame.
2. Go to frame 5. Right click it and add a new keyframe.
3. On the 5th frame delete the circle and anything else that may be on your stage.
4. Draw your new content box. Make sure the center of the content box is aligned with the plus sign.
5. Click on any frame between frame one and five. Go to the properties box. Change the Tween to Shape.



You should also have noticed that the frames between 1 and five have turned green with an arrow going through them. Since I had a circle on the 1st frame and a rectangle on the 5th frame what will happen is that the circle will turn into a rectangle. To add a little extra to the animtion, I added a keyframe on frame 7 and 8 and deleted everything on frame 7. This will add a little flicker in the animation. then on frame nine I added a keyframe and then using the type tool I added the content that wanted my home page to have (on frame nine).



Now to make sure your animated page doesnt keep on repeating click on your last frame (in my case frame 9) and open up the actions panel (F9 or the little circle with an arrow in it which is found on the right side of the properties panel.... you should have used this in part 2 of making a flash site). Once the actions panel is open type in "stop();" into it. You can now close down the actions panel. The action command will stop the animation from repeating itself... so once the content/text shows up the animation will stop going. So now... you pretty much have your home page done.

Making your other pages is easier. In the library palette go to the movie clip that you just made. Right click it and go to duplicate. Rename it the name of your next page (in my case it was about). Duplicate the movie clip again (as many times as you need... each movie clip will make each animated page) and rename it the name of your next page (in my case it was contact). So you should now have 3 movie clips (or however many you needed to make your pages). To modify the content on each page just double click on the movie clip symbol in the library palette. Once the stage changes to that of the movie clip, just go to the frame with the content on it and change it to whatever your new page content is ment to be. Here are my symbols now -



Now... it's time to add the pages to your existing site. Go to your content layer and delete everything thats on them... dont panic!! You'll be adding the pages back in a second or two. Leave the stop actions on the frames though. Now go to your 1st frame. Drag your home page movie clip from your library onto your canvas/work area and position it where you feel it looks ok. Now click on frame 2 and while holding shift click on frame 3. They should now both be highlighted. Right click on them and choose remove frames. Click on frame three. Right click and choose insert keyframe. Add a keyframe to frame 2 aswell. Now you should have noticed that your home movie clip is on frame 2 and 3 aswell. To save time having to align your other movie clips with your home movie clip just simply right click on it and choose swap symbol (make sure you are on frame 2).



Swap it with the movie clip of your next page (in my case it was my about movie clip). Go to frame three and replace the movie clip with the next page's movie clip... and thats you FINISHED!!! Go and preview your site (ctrl+enter or apple+enter on macs).

You now have a simple animated website. your can apply these same techniques on more complex and better layouts. I hope you learnt something.