Unit 3B Applied Information Technology

Flash Tutorials


Learn how to Create a Flash Website

adapted from www.websitedesign.org


Learn how to build a unique flash website using this simple step by step guide. Learn how to create flash role over buttons, flash animation and build a perfect portfolio flash website.

 

Creating a Flash Website

 

1. Open Flash, click new Flash document. (ActionScript 2.0)

 

2. Open the page properties if it is not already opened which it should be Window/Properties/Properties.

 

3. Change the size of the canvas to 800, 600.


size_table

 

 

 

4. Click on the background button and change it to #333333.

 

5. After you have done this click the square tool.

 

square_tool

 

6. The colour of the square should be white so click on the paint bucket tool and choose the colour white. the stroke should also be off. This is what it looks like; the stroke tool is right on top of the paint bucket.

 

stroke

 

7. Drag and make a square any size, we will change that manually in a moment.

 

8. Now change the width, height, x, and y positioning: ( change the width to 650, the height to 470, the x positioning to 74.5, and the y positioning to 67.) to change this dimensions is all in the page properties. You have to click on the square and with it selected you can start making this changes.

 

dimmensions

 

whole_page

 

 

9. With the square still selected now make it into a symbol to do this press (F8) a screen will come up what will ask you to name it. Name it "Background Symbol". Make sure the movie clip button is clicked.

 

image6

 

10. Make a new layer to do is click on the insert layer button.

 

image7

 

11. Select the new layer and click on the square tool again and make another square with the stroke off and the colour instead of white, make it black. This time with the dimensions:
( width: 632.4, height: 450.4, x positioning: 81.6, and y positioning:73.3)

 

image_8

 

12. Make the new square into a symbol by pressing (F8) and name it masked symbol.

 

13. After you have made it into a symbol double click into the square this will take you inside the symbol and a new time line. this is just like the time line you were in but now you are inside of a symbol. Make a new layer just like you did it before by clicking on the insert layer button. All the art work is in the bottom layer as of right now you can tell because of the little black dot under and on the top layer there is a white dot. The white dot means there is no art work on this layer.

 

image_9

 

14. Now click and hold down on "Layer 1" and with it still clicked drag it in top of "Layer 2". Remember that all this is happening inside that symbol we made called "masked symbol".

 

image_10

 

15. The picture on top shows what it should look like.

 

16. Right click on "Layer 1" and then select "Mask"

 

image_11

 

17. When you do this both layers are going to be locked you can tell because now they have a little lock next to them. Click on the bottom lock to take it off.

 

image_12

 

18. Select "Layer 2" find an image you like and now we are going to place it in there. The way you do this is you go File/Import/Import to stage. Then a search window is going to come up and you find where your picture is and double click and it will be placed on the stage.

 

image_13

 

19. Now lock that layer back up by clicking where the lock was. And you should have something that looks kind of like this.


image14

 

20. Now go to the main time line. If you remember we were working inside a symbol so now get out of the symbol and go to the main timeline. A simple way to do this is to click where it says "Scene 1" under the timeline.

 

21. Now lets make some buttons. Start by making a new layer and drag it all the way down so it becomes the bottom layer.

 

22. Make a square with the square tool (background color #666666, width 130, height 50, positioning 71, y positioning 537).

 

23. Make this square into a Movie clip symbol and call it "buttons".

 

24. Select the square and copy and paste in the same place. To do this while with the square selected press (Ctrl + C) this will copy it and the press (Ctrl + Shift + V) and this will copy it in the same place now with it still select it change the x positioning ( x positioning 202,).

 

25. Follow step 24 three more times but each time with a different x positioning. (x positioning 333.5), (x positioning 465), (x positioning 595) it should look something like this.


image15

 

26. Add some text to the buttons click on the text tool. Is the one without the letter "A" right in top of the square tool. (on new versions of Flash, this is now a T)

 

image16

 

27. Change the text colour just like if you were changing the background colour on a square. After clicking on top of one of the buttons type "Home" , then click on top of the second button and type "Portfolio", on the third button type " About" on the fourth type "FAQ" and on the last button type "Contact".

 

image17

 

29. Make a new layer on top of the buttons layer. To do this select the buttons layer and then click insert layer and it will put a layer in top of it.

 

30. Here we are going to to create a hit area for the buttons so you can actually click on them. Click on the square tool again and create a square with the colour white. Make this square about the same size of the buttons.

 

image18

 

31. Make this square into a symbol but this time instead of making it a movie clip click on the button selection.

 

image19

 

32. Double click inside this symbol and it will look a little different than a movie clip symbol. It says "Up", "Over", "Down", and "Hit".

 

image20

 

33. There is a little black dot under the text "Up" right click it and don't leg go and just drag it to where is says hit and now the little black dot should be under the text that says "Hit".

 

image21

 

34. Go back to the main timeline. And the box should look blue.

 

35. Copy and paste it 4 times and drag each one under on button until all of them have one.

 

image22

 

36. Now create a new layer at the very top. Click on the square tool and take the stroke off and the background color black. Have these settings (width: 304.8, height: 429.1, x positioning: 401, and y positioning: 72).

 

37. Now select the square and do the following go to the top menu and click on Modify/Shape/Soften fill edges.

 

image23

 

 

 

38. A new screen is going come up which is going to ask you "distance" , and "number of steps in both of this put 20 and make sure expand is clicked.

 

image24

 

39. The next step is important so pay close attention. if you look where all the layers are to the right there are a bunch of numbers what you need to do is on the number 30 at the top click and drag down to select all the layers and the right click and click insert frame.

 

image25

 

 

 

40. Create two more layers at the very top.

On the very top on the ten time line where the number 5 is press it don't drag this time and press (F6) do that a the number 10,15, and 20.

 

image26

 

41. Now on the little circle on the number one frame select it and press (F9) this will bring up the actionscript window. here type the following "stop();".

 

image27

 

42. As you can tell now on top of that little circle there is a letter "a" this means that there is actionscript on that frame. Now do the same on layer 5,10,15, and 20.

 

43. Ok now press (F6) again on the layers5,10,15, and 20 but this time on the layer right under.

 

image28

 

44. We are going to do something a little different this time we are going to name the little circles instead of inserting actionscript. Do this click on the first frame on the circle with nothing on it and then go to the bottom left corner and there is something that says frame there enter the following "home".


image29

 

45. Now name all the other little circles this should be the names ( portfolio, about, faq, and contact).

 

46. Ok now on the layer under what you need to do is to Press (F6) also on frames 5,10,15,and 20. After this you will have a little black dot on each one of those.

 

image30

 

47. On the first frame where the black square was type whatever you want.

 

image31

 

48. Now type something different on frames 5,10,15 and 20.

 

49. after you have typed everything you wanted on the different squares now its time to make it all work. What you need to do is to click on the blue square on top of the "home button" don't double click it just select it. After you have it selected press (F9) this will bring up the actionscript window, then type the following.


on(press){

gotoAndStop("home");

}

 

This will make it that when you click on that button it will go to the frame that you named home. follow the same steps on every blue box but where the parentises are instead of having home type in the appropriate name. Such as( portfolio, about, faq, and contact.

 

50. Now you have finished this simple but very nice looking flash site. Save your work. and to see it at work press (Ctrl + Enter) to see the swf. Hope you enjoyed this tutorial.

 

 


Example pic