How to Create a Basic Flash Interactive Web Page

Step-by-Step Guide

1. 1

   Step 1: Open your Macromedia Flash application

   #66CC00 should work nicely.,, #99FF66 is a good choice here., Where you click to fill will represent the center of your circle-type design.
   
   Placing the center of the circle at the top of the bar, about 3/4's of the way to the left end. ,,,,, Some of the fonts listed are custom-made fonts, and the brackets next to them contain the website to download them from.
   
   Scriptina (Abstract Fonts) WirWenzlaw (Abstract Fonts) Viner Hand ITC Sylfaen Monotype Corsiva HandScript Lucida Blackletter Papyrus ,, Leave enough room to paste an image.,,,,,,,,,,,,,,,,, Make sure all of your buttons are using the same font and size.,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, This will publish the flash website you created into a html file for you to wherever you have saved it to.
   
   If this did not work make sure you have saved then repeat this step.,
2. 2

   Step 2: and select "New Flash Document".

3. 3

   Step 3: On the "Properties" bar at the bottom of the screen (if you cannot see this

4. 4

   Step 4: go to Window -> Property -> click on Property

5. 5

   Step 5: click the button that says "Size" next to it.

6. 6

   Step 6: A window called "Document Properties" should pop up

7. 7

   Step 7: in the two blanks next to "Dimensions"

8. 8

   Step 8: fill in 625 for width and 750 for length.

9. 9

   Step 9: On the same "Properties" bar

10. 10

    Step 10: change the background color to a soft green

11. 11

    Step 11: #BAE29E (use the text box at the top of the color picker) is a good shade to use

12. 12

    Step 12: and click ok.

13. 13

    Step 13: Create a symbol by pressing CTRL + F8.

14. 14

    Step 14: Name it "banner_mc"

15. 15

    Step 15: and set its type to "Movie Clip" then click ok.

16. 16

    Step 16: Create a rectangle

17. 17

    Step 17: with no filling and a 2-pixel size border

18. 18

    Step 18: using the rectangle tool on the left.

19. 19

    Step 19: Select the rectangle using the selection tool (default - 'V) and set its width to 750

20. 20

    Step 20: and its Height to 172 using the property bar at the bottom of the screen.

21. 21

    Step 21: On the "Color Mixer" side-pane at the side of the screen (if you cannot see this go to Window -> Color Mixer

22. 22

    Step 22: select the Radial option from the drop-down box.

23. 23

    Step 23: On the far left of the radial color bar

24. 24

    Step 24: select a leaf color (by double clicking on the slider).

25. 25

    Step 25: 3/4's of the way along the bar

26. 26

    Step 26: place a solid white by just clicking and double-clicking on it and selecting white.

27. 27

    Step 27: All the way to the right side end of the bar

28. 28

    Step 28: place a tropical kiwi color.

29. 29

    Step 29: using the Paint Bucket tool (default - 'K')

30. 30

    Step 30: fill in your banner with the radial.

31. 31

    Step 31: Look up to your layers bar

32. 32

    Step 32: and call this layer "Base".

33. 33

    Step 33: Create a layer by using the New Layer button (at the bottom of the bar) - call this "Text".

34. 34

    Step 34: Select the text tool (Default - 'T') on the left

35. 35

    Step 35: and make sure the text is set to the "Static Text" option on the bottom of the property bar.

36. 36

    Step 36: Set the color of the text to black.

37. 37

    Step 37: Select a font to use.

38. 38

    Step 38: Type your name of your website into the textfield and find a proper size.

39. 39

    Step 39: Place the text to the left side.

40. 40

    Step 40: Go onto the internet

41. 41

    Step 41: to Google Images

42. 42

    Step 42: and type in "Palm tree".

43. 43

    Step 43: Select a photo of a palm tree.

44. 44

    Step 44: Save this photo

45. 45

    Step 45: and import it into your flash document using File -> Import.

46. 46

    Step 46: Name it in the Library as "palm tree_bmp"

47. 47

    Step 47: Create a symbol (Ctrl + F8)

48. 48

    Step 48: name it palm tree_gr

49. 49

    Step 49: and select the Graphic radio button.

50. 50

    Step 50: Resize it to your liking by using the Free Transform Tool (Default - Q) to the left of the screen and cut any part of it you don't like out.

51. 51

    Step 51: Go back to the banner

52. 52

    Step 52: and make a new layer.

53. 53

    Step 53: Call it "Picture".

54. 54

    Step 54: Put your palm tree_gr

55. 55

    Step 55: and scale it so it fits in the left hand corner.

56. 56

    Step 56: Now place your banner_mc on Scene 1.

57. 57

    Step 57: Create a new symbol (Ctrl + F8)

58. 58

    Step 58: call it navigation_mc

59. 59

    Step 59: and make it a movie clip.

60. 60

    Step 60: Create a thin

61. 61

    Step 61: long rectangle to house your links.

62. 62

    Step 62: Name the layer "Base"

63. 63

    Step 63: Make it have a 2-Pixel size boundary

64. 64

    Step 64: Fill the rectangle with #66CC00.

65. 65

    Step 65: Create a second (button) symbol (Ctrl + F8)

66. 66

    Step 66: call it "home_bt".

67. 67

    Step 67: Look back at the list of fonts I provided

68. 68

    Step 68: and choose a DIFFERENT font than your banner

69. 69

    Step 69: one that looks good with the other.

70. 70

    Step 70: Write "Home"

71. 71

    Step 71: Break it apart using CTRL + B.

72. 72

    Step 72: Copy Frame "Up"

73. 73

    Step 73: and paste it to the other frames.

74. 74

    Step 74: Name this layer "text".

75. 75

    Step 75: Create another layer

76. 76

    Step 76: call it "Hidden".

77. 77

    Step 77: Make a rectangle roughly covering your text.

78. 78

    Step 78: Give the rectangle no border

79. 79

    Step 79: and set its Alpha to 0%.

80. 80

    Step 80: Copy the rectangle frame and paste it onto the other frames of that layer.

81. 81

    Step 81: Go back to the navigation_mc and make a new layer.

82. 82

    Step 82: Call it "buttons".

83. 83

    Step 83: Put your button there.

84. 84

    Step 84: Repeat steps 43-54 for as many buttons you need.

85. 85

    Step 85: Put a 1-Pixel line between your buttons on navigation_mc

86. 86

    Step 86: on the "base" layer.

87. 87

    Step 87: Go back to scene 1 and name the layer with your banner "Banner".

88. 88

    Step 88: Create a second layer

89. 89

    Step 89: and call it Navigation.

90. 90

    Step 90: Place your navigation on this.

91. 91

    Step 91: Create as many frames as you have buttons on your menu.

92. 92

    Step 92: Make them all keyframes (by right clicking on the frame and selecting "Insert Key Frame"

93. 93

    Step 93: or press F6).

94. 94

    Step 94: Click onto your navigation_mc.

95. 95

    Step 95: Click your home button

96. 96

    Step 96: and open the actionscript by clicking the action panel at the bottom of the screen or the shortcut i use most often F9.

97. 97

    Step 97: Using "expert Mode" type in the following: on (release) { gotoAndStop(1); } This will make it so whenever the mouse is clicked and released it will go to the frame '1' and stop.

98. 98

    Step 98: On your next button

99. 99

    Step 99: do the same

100. 100

     Step 100: except in the "gotoAndStop" bracket

101. 101

     Step 101: write the next number (in sequence).

102. 102

     Step 102: Go back to scene 1.

103. 103

     Step 103: Open the actions for frame 1 (F9).

104. 104

     Step 104: Type in: stop();

105. 105

     Step 105: Make a new layer on Scene 1

106. 106

     Step 106: and call it "Text".

107. 107

     Step 107: Convert all frames on that layer to keyframes

108. 108

     Step 108: and make as many as you need to have a keyframes to match your other layers.

109. 109

     Step 109: Make a textfield by using the Text Tool (T)

110. 110

     Step 110: and write whatever you want on each page.

111. 111

     Step 111: Test the webpage

112. 112

     Step 112: and let whoever you want test it.

113. 113

     Step 113: Go to File -> Publish Settings

114. 114

     Step 114: make sure .html is selected and press publish.

115. 115

     Step 115: Double click on the file you published (.html) and you're done!

Detailed Guide

About the Author