Using Macromedia FLASH

Flash Editor

Flash for Windows and Macintosh, 1999

Flash Timeline

Flash for Windows and Macintosh, 1999

Flash Toolbar

 
Flash for Windows and Macintosh, 1999

Sample Flash Project

1. Open Macromedia Flash 4.0.

2. Click on Movie under the Modify menu.

3. Enter the desired Frame Rate (12 fps), Dimensions (550 px X 400 px), Grid Spacing (25 px), Grid (gray) and Background (white) colors, and the Ruler Units (pixels).   Click OK.

4. Click on Save As under the File menu, enter USA.fla for the File name, then click OK.   Note:  It is recommended that you save your Flash movie after creating each new layer.

5. Double click on Layer 1.  Name the layer flag.

6. Click on Import under the File menu.  Locate and double click on USA_1.bmp.

7. Click on the Arrow tool and position the flag image in the center of the Stage.

8. Click on Convert to Symbol under the Insert menu.

9. Enter flag for the symbol Name, select Graphic for Behavior, then click OK.

10. Right click on the flag image and click on Properties.

11. Click on the Color Effect tab.

12. Click on Alpha in the Color Effect dropdown menu.

13. Set Alpha to 50% by either entering the value or dragging the slider.  Click OK.

14. Click in Frame 120.  Click on Keyframe under the Insert menu.

15. Click on Layer under the Insert menu.

16. Double click on Layer 2.  Name the layer U.

17. Click in Frame 2.

18. Change the Zoom Control to 400%.

19. Click on the Line tool.

20. Set the Line Color to Yellow.

21. Set the Line Thickness to 2.0.

22. Set the Line Style to Solid.

23. Turn off Snap to grid.

24. Use the Line tool to trace around one of the stars in the upper left corner of the flag.

25. Change the Zoom Control to 100%.

26. Click in Frame 15.

27. Click on Blank Keyframe under the Insert menu.

28. Click on the Pencil tool.

29. Set the Pencil Mode to Straighten.

30. Set the Line Color to Yellow.

31. Set the Line Thickness to 4.0.

32. Set the Line Style to Solid.

33. Turn on Snap to grid.

34. Use the Pencil tool to draw a U immediately to the right of the stars.

35. Double click on the U layer.

36. Click on the Tweening Tab.

37. Select Shape from the Tweening Dropdown menu.  Click OK.

38. Click on Rewind under the Control menu.

39. Click on Play under the Control menu.

40. Click on Layer under the Insert menu.

41. Double click on Layer 3.  Name the layer S.

42. Click in Frame 15.

43. Click on Keyframe under the Insert menu.

44. Change the Zoom Control to 400%.

45. Click on the Line tool.

46. Set the Line Color to Yellow.

47. Set the Line Thickness to 2.0.

48. Set the Line Style to Solid.

49. Turn off Snap to grid.

50. Use the Line tool to trace around one of the stars in the center of the flag.

51. Change the Zoom Control to 100%.

52. Click in Frame 30.

53. Click on Blank Keyframe under the Insert menu.

54. Click on the Pencil tool.

55. Set the Pencil Mode to Straighten.

56. Set the Line Color to Yellow.

57. Set the Line Thickness to 4.0.

58. Set the Line Style to Solid.

59. Turn on Snap to grid.

60. Use the Pencil tool to draw a S immediately to the right of the U.

61. Double click on the S layer.

62. Click on the Tweening Tab.

63. Select Shape from the Tweening Dropdown menu.  Click OK.

64. Click on Rewind under the Control menu.

65. Click on Play under the Control menu.

66. Click on Layer under the Insert menu.

67. Double click on Layer 4.  Name the layer A.

68. Click in Frame 30.

69. Click on Keyframe under the Insert menu.

70. Change the Zoom Control to 400%.

71. Click on the Line tool.

72. Set the Line Color to Yellow.

73. Set the Line Thickness to 2.0.

74. Set the Line Style to Solid.

75. Turn off Snap to grid.

76. Use the Line tool to trace around one of the stars in the center of the flag.

77. Change the Zoom Control to 100%.

78. Click in Frame 45.

79. Click on Blank Keyframe under the Insert menu.

80. Click on the Pencil tool.

81. Set the Pencil Mode to Straighten.

82. Set the Line Color to Yellow.

83. Set the Line Thickness to 4.0.

84. Set the Line Style to Solid.

85. Turn on Snap to grid.

86. Use the Pencil tool to draw a A immediately to the right of the S.

87. Double click on the A layer.

88. Click on the Tweening Tab.

89. Select Shape from the Tweening Dropdown menu.  Click OK.

90. Click on Rewind under the Control menu.

91. Click on Play under the Control menu.

92. Click on Layer under the Insert menu.

93. Double click on Layer 5.  Name the layer sound.

94. Click in Frame 1.

95. Click on Import under the File menu.

96. Locate and double click on stars_and_stripes.wav.

97. Press Ctrl-L to open the Project Library.

98. Click and drag stars_and_stripes.wav onto the Stage.

99. Double click on the sound layer to open the Properties window.

100.   Click on the Sound tab.

101.   Click on the Frames button to number the timeline in frames.

102.   Adjust the Start and Stop times to match the number of frames (120), or set the Sync option to Stream (limits the sound track to the length of the movie).

103.   Add Fade in and Fade out effects, if desired.

104.   Set the Loops to 0.

105.   Click OK.

106.   Click on Rewind under the Control menu.

107.   Click on Play under the Control menu.

108.   Click on Layer under the Insert menu.

109.   Double click on Layer 6.  Name the layer cannon.

110.   Click in Frame 45.

111.   Click on Keyframe under the Insert menu.

112.   Click on Import under the File menu.

113.   Locate and double click on cannon.gif.

114.   Click on the Arrow tool.

115.   Click and drag the cannon off the bottom left corner of the Stage.

116.   Click on Create Motion Tween under the Insert menu.

117.   Click in Frame 60.

118.   Click on Keyframe under the Insert menu.

119.   Click and drag the cannon onto the Stage.  Note:   Holding the Ctrl key while dragging the image will move it horizontally across the Stage.

120.   Click on Rewind under the Control menu.

121.   Click on Play under the Control menu.

122.   Click on Layer under the Insert menu.

123.   Double click on Layer 7.  Name the layer cannonball.

124.   Click in Frame 60.

125.   Click on Keyframe under the Insert menu.

126.   Click on the Oval tool.

127.   Set the Line Color to None.

128.   Click on the Fill Color button and select the gray gradient.

129.   Click and drag the Oval tool to draw a cannonball at the end of the cannon.

130.   Click on the Arrow tool.

131.   Click and drag the cannonball to position it inside the cannon.

132.   If the cannonball is on top of the cannon, click and drag the cannonball layer to position it below the cannon layer.

133.   Hide the cannon layer.

134.   Click on Motion Tween under the Insert menu.

135.   Click in Frame 90.

136.   Click on Keyframe under the Insert menu.

137.   Click and drag the cannonball to the bottom right corner of the Stage, leaving enough room for an arrow button.

138.   Turn on Onion Skins and Edit Multiple Frames.

139.   Place the start and end onion skin markers at Frames 60 and 90.

140.   Right click on the cannonball frame and click on Add Motion Guide.

141.   Click on the Line tool.

142.   Set the Line Color to Black.

143.   Use the Line tool to draw a straight path between the cannonballs.

144.   Click on the Arrow tool.

145.   Click and drag the cannonball path to form the desired curvature.

146.   Hide the Motion Guide.

147.   Turn off  Onion Skins and Edit Multiple Frames.

148.   Reveal the cannon layer.

149.   Click on Rewind under the Control menu.

150.    Click on Play under the Control menu.

151.   Click on Layer under the Insert menu.

152.   Double click on Layer 8.  Name the layer boom.

153.   Click in Frame 60.

154.   Click on Keyframe under the Insert menu.

155.   Click on Import under the File menu.

156.   Locate and double click on boom.wav.

157.   Press Ctrl-L to open the Project Library.

158.   Click and drag boom.wav onto the Stage.

159.   Click on Rewind under the Control menu.

160.    Click on Play under the Control menu.

161.   Click on Layer under the Insert menu.

162.   Double click on Layer 9.  Name the layer advance.

163.   Click in Frame 90.

164.   Click on Keyframe under the Insert menu.

165.   Click on Import under the File menu.

166.   Locate and double click on arrow1.gif.

167.   Click on the Arrow tool.

168.   Click and drag the arrow image to position it in the bottom right corner of the Stage.

169.   Click on Convert to Symbol under the Insert menu.

170.   Enter advance for the symbol Name, select Button for Behavior, then click OK.

171.   Right click on the arrow image and click on Edit in New Window.

172.   Click in the Over frame.

173.   Click on Keyframe under the Insert menu.

174.   Repeat Steps 172-173 to add keyframes in the Down and Hit frames.

175.   Click in the Over frame.

176.   Click on Import under the File menu.

177.   Locate and double click on arrow2.gif.

178.   Click on the Arrow tool.

179.   Click and drag the arrow2 to position it directly over arrow1.

180.   Click in the Down frame.

181.   Click and drag arrow2.gif from the Project Library and position it directly over arrow1.   Note:  If the Project Library is not open, press Ctrl-L.

182.   Click on Import under the File menu.

183.   Locate and double click on click.wav.

184.   Click and drag click.wav onto the Stage.

185.   Click in the Hit frame.

186.   Click on the Rectangle tool.

187.   Click and drag a rectangle large enough to cover the advance button. Note:  This defines the button action region.

188.   Close the editing window by clicking on the small x in the upper corner.

189.   Click on Scene under the Insert menu.

190.   Click on Goto Scene 1 under the View menu.

191.    Right click on the arrow1 image and click on Properties.

192.    Click on the Actions tab.

193.    Click on the + symbol and select Go To from the dropdown menu.

194.    Select <Scene 2> from the Scene dropdown menu, select Frame Number 1, and check the Control box labeled Go to and Play.

195.    Click OK.

196.    Click on Enable Buttons under the Control menu.  Note:  You cannot edit buttons while they're enabled.

197.    Click on Rewind under the Control menu.

198.    Click on Play under the Control menu and test the button.

199.   Click on Enable Buttons under the Control menu to disable buttons.

200.   Right click in Frame 120 on the flag layer.

201.   Click on Properties.

202.   Click on the Actions tab.

203.   Click on the + symbol and select Stop from the dropdown menu.

204.   Click OK.

205.   Click on Scene 2 under Goto on the View menu.

206.   Double click on Layer 1.   Name the layer timeline.

207.   Click on the Rectangle tool.

208.   Set the Line Color to None.

209.   Set the Fill Color to Black.

210.   Turn on Snap to grid.

211.   Click and drag the Rectangle tool to draw a rectangle with dimensions 100 pixels X 25 pixels.

212.   Click on the Arrow tool.

213.   Click and drag the rectangle to position it off the left side of the Stage, lined up with the 8th row in the grid.

214.   Click in Frame 60. 

215.   Click on Blank Keyframe under the Insert menu.

216.   Click on the Rectangle tool.

217.   Click and drag the Rectangle tool to draw a rectangle with dimensions 550 pixels X 25 pixels.

218.   Click on the Arrow tool.

219.   Click and drag the rectangle to position it on the 8th row in the grid.

220.   Double click on the timeline layer. 

221.   Click on the Tweening tab.

222.   Select Shape from the Tweening Dropdown menu.  Click OK.

223.   Click on Rewind under the Control menu.

224.   Click on Play under the Control menu.

225.   Click on Layer under the Insert menu.

226.   Double click on Layer 2.  Name the layer 1492.

227.   Click in Frame 15.

228.   Click on Keyframe under the Insert menu.

229.   Click on the Rectangle tool.

230.   Verify that the Line Color is None and the Fill Color is Black.

231.   Click and drag to form a rectangle with dimensions 25 pixels X 50 pixels.

232.   Click on the Arrow tool.

233.   Click and drag the rectangle to position it directly above the end of the timeline at Frame 15.

234.   Click on Convert to Symbol under the Insert menu.

235.   Enter notch for the symbol Name, select Graphic for Behavior, then click OK.

236.   Click on Layer under the Insert menu.

237.   Double click on Layer 3.  Name the layer columbus.

238.   Click in Frame 15.

239.   Click on Keyframe under the Insert menu.

240.   Click on the Text tool.

241.   Set the Font to Arial.

242.   Set the Font Size to 36 pt.

243.   Set the Text Color to Blue.

244.   Click on the Bold button.

245.   Click on the Stage above the first notch, and type 1492.

246.   Click on the Arrow tool.

247.   Click and drag the 1492 text to position it directly above the first notch.

248.   Click on Convert to Symbol under the Insert menu.

249.   Enter 1492 for the symbol Name, select Button for Behavior, then click OK.

250.   Right click on the 1492 button and click on Edit in New Window.

251.   Click in the Over frame.

252.   Click on Keyframe under the Insert menu.

253.   Repeat Steps 251-252 to add keyframes in the Down and Hit frames.

254.   Click in the Over frame.

255.   Double click in the text field, then click and drag across the 1492 text.

256.   Click on the Text Color button, and select Red.

257.   Click in the Down frame.

258.   Click on the 1492 text field, then press the Delete key on your keyboard.

259.   Click on Import under the File menu.

260.   Locate and double click on columbus.jpg.

261.   Click on the Arrow tool.

262.   Click and drag the Columbus image to position it directly over the 1492 text which appears on the other button frames.

263.   Click on Import under the File menu.

264.   Locate and double click on columbus.wav.

265.   Click and drag columbus.wav from the Project Library onto the Stage.

266.   Click in the Hit frame.

267.   Click on the Rectangle tool.

268.   Click and drag a rectangle large enough to cover the 1492 text. Note:  This defines the button action region.

269.   Close the editing window by clicking on the small x in the upper corner.

270.   Click on Enable Buttons under the Control menu.  Note:  You cannot edit buttons while they're enabled.

271.    Click on Rewind under the Control menu.

272.    Click on Play under the Control menu and test the button.

273.   Click on Enable Buttons under the Control menu to disable buttons.

274.   Click on Layer under the Insert menu.

275.   Double click on Layer 4.  Name the layer 1776.

276.   Click in Frame 30.

277.   Click on Keyframe under the Insert menu.

278.   Click and drag the notch symbol from the Project Library onto the Stage.

279.   Click on the Arrow tool.

280.   Click and drag the notch symbol directly below the timeline at Frame 30.

281.   Click on Layer under the Insert menu.

282.   Double click on Layer 5.  Name the layer independence.

283.   Click in Frame 30.

284.   Click on Keyframe under the Insert menu.

285.   Click on the Text tool.

286.   Set the Font to Arial.

287.   Set the Font Size to 36 pt.

288.   Set the Text Color to Blue.

289.   Click on the Bold button.

290.   Click on the Stage below the second notch, and type 1776.

291.   Click on the Arrow tool.

292.   Click and drag the 1776 text to position it directly under the second notch.

293.   Click on Convert to Symbol under the Insert menu.

294.   Enter 1776 for the symbol Name, select Button for Behavior, then click OK.

295.   Right click on the 1776 button and click on Edit in New Window.

296.   Click in the Over frame.

297.   Click on Keyframe under the Insert menu.

298.   Repeat Steps 296-297 to add keyframes in the Down and Hit frames.

299.   Click in the Over frame.

300.   Double click in the text field, then click and drag across the 1776 text.

301.   Click on the Text Color button, and select Red.

302.   Click in the Down frame.

303.   Click on the 1776 text field, then press the Delete key on your keyboard.

304.   Click on Import under the File menu.

305.   Locate and double click on independence.jpg.

306.   Click on the Arrow tool.

307.   Click and drag the independence image to position it directly over the 1776 text which appears on the other button frames.

308.   Click on Import under the File menu.

309.   Locate and double click on independence.wav.

310.   Click and drag independence.wav from the Project Library onto the Stage.

311.   Click in the Hit frame.

312.   Click on the Rectangle tool.

313.   Click and drag a rectangle large enough to cover the 1776 text. Note:  This defines the button action region.

314.   Close the editing window by clicking on the small x in the upper corner.

315.   Click on Enable Buttons under the Control menu.  Note:  You cannot edit buttons while they're enabled.

316.    Click on Rewind under the Control menu.

317.    Click on Play under the Control menu and test the button.

318.   Click on Enable Buttons under the Control menu to disable buttons.

319.    Click on Layer under the Insert menu.

320.   Double click on Layer 6.  Name the layer 1969.

321.   Click in Frame 45.

322.   Click on Keyframe under the Insert menu.

323.   Click and drag the notch symbol from the Project Library onto the Stage.

324.   Click on the Arrow tool.

325.   Click and drag the notch symbol directly above the timeline at Frame 45.

326.   Click on Layer under the Insert menu.

327.   Double click on Layer 7.  Name the layer moon.

328.   Click in Frame 45.

329.   Click on Keyframe under the Insert menu.

330.   Click on the Text tool.

331.   Set the Font to Arial.

332.   Set the Font Size to 36 pt.

333.   Set the Text Color to Blue.

334.   Click on the Bold button.

335.   Click on the Stage over the third notch, and type 1969.

336.   Click on the Arrow tool.

337.   Click and drag the 1969 text to position it directly over the third notch.

338.   Click on Convert to Symbol under the Insert menu.

339.   Enter 1969 for the symbol Name, select Button for Behavior, then click OK.

340.   Right click on the 1969 button and click on Edit in New Window.

341.   Click in the Over frame.

342.   Click on Keyframe under the Insert menu.

343.   Repeat Steps 341-342 to add keyframes in the Down and Hit frames.

344.   Click in the Over frame.

345.   Double click in the text field, then click and drag across the 1969 text.

346.   Click on the Text Color button, and select Red.

347.   Click in the Down frame.

348.   Click on the 1969 text field, then press the Delete key on your keyboard.

349.   Click on Import under the File menu.

350.   Locate and double click on moon.jpg.

351.   Click on the Arrow tool.

352.   Click and drag the moon image to position it directly over the 1969 text which appears on the other button frames.

353.   Click on Import under the File menu.

354.   Locate and double click on moon.wav.

355.   Click and drag moon.wav from the Project Library onto the Stage.

356.   Click in the Hit frame.

357.   Click on the Rectangle tool.

358.   Click and drag a rectangle large enough to cover the 1969 text. Note:  This defines the button action region.

359.   Close the editing window by clicking on the small x in the upper corner.

360.   Click on Enable Buttons under the Control menu.  Note:  You cannot edit buttons while they're enabled.

361.    Click on Rewind under the Control menu.

362.    Click on Play under the Control menu and test the button.

363.   Click on Enable Buttons under the Control menu to disable buttons.

364.   Click on Layer under the Insert menu.

365.   Double click on Layer 8.  Name the layer links.

366.   Click in Frame 60.

367.   Click on Keyframe under the Insert menu.

368.   Click on the Rectangle tool.

369.   Set the Line Color to Black.

370.   Set the Fill Color to Yellow.

371.   Set the Round Rectangle Radius to 32 pt.

372.   Click and drag to form a rounded rectangle button.

373.   Click on the Arrow tool.

374.   Click and drag the rounded rectangle to position it in the bottom right corner of the Stage.

375.   Click on the Text tool.

376.   Set the Font to Arial.

377.   Set the Font Size to 18 pt.

378.   Set the Text Color to Red.

379.   Click on the Bold button.

380.   Click on the Stage over the rounded rectangle, and type MORE..

381.   Click on the Arrow tool.

382.   Click and drag the MORE text to position it in the center of therounded rectangle..

383.   Click and drag a rectangle to select the rounded rectangle and the text.

384.   Click on Convert to Symbol under the Insert menu.

385.   Enter links for the symbol Name, select Button for Behavior, then click OK.

386.   Right click on the links button and click on Edit in New Window.

387.   Click in the Over frame.

388.   Click on Keyframe under the Insert menu.

389.   Repeat Steps 387-388 to add keyframes in the Down and Hit frames.

390.   Click in the Up frame.

391.   Click on the Arrow tool.

392.   Click and drag a rectangle to select the rounded rectangle and the text.

393.   Click on the Copy button.

394.   Click in the Over frame.

395.   Click on Paste in Place under the Edit menu.

396.   Double click in the text field, then click and drag across the MORE text.

397.   Click on the Text Color button, select Yellow, and type LINKS.

398.   Click on the Arrow tool.

399.   Doubleclick on the links button.   Note:  You may have to click outside of the button first, then try again.

400.   Click on the Paint Bucket tool.

401.   Set the Fill Color to Red.

402.   Click on the Links button.

403.   Click on the Arrow tool.

404.   Click and drag a rectangle to select the rounded rectangle and the text.

405.   Click on the Copy button.

406.   Click in the Down frame.

407.   Click on Paste in Place under the Edit menu.

408.   Click in the Hit frame.

409.   Click on the Rectangle tool.

410.   Click and drag a rectangle large enough to cover the links button. Note:  This defines the button action region.

411.   Close the editing window by clicking on the small x in the upper corner.

412.   Right click on the links button and click on Properties.

413.   Click on the Actions tab.

414.   Click on the + symbol and select Get URL from the dropdown menu.

415.    Enter http://www.wfu.edu/Academic-departments/History/whistory/timeline/namerica/index.htm in the URL field.

416.   Select _self from the Window dropdown menu.

417.   Select Don't send from the Variables dropdown menu.

418.   Click OK.

419.    Click on Enable Buttons under the Control menu.  Note:  You cannot edit buttons while they're enabled.

420.    Click on Rewind under the Control menu.

421.    Click on Play under the Control menu and test the button.  Note:  The FLASH movie cannot display a URL until it is published.

422.    Click on the Save button.

423.    Click on Publish Settings under the File menu.

424.    Click on the Formats tab.

425.    Check Flash and HTML and uncheck all other file types.

426.   Either check in the box labeled Use default names, which will name the .swf and .html files the same as the .fla file, or uncheck the box and enter the desired filenames.

427.   Click on the Flash tab.

428.   Select the desired Load Order (Bottom up), Jpeg Quality (80), Audio Stream (MP3, 16kbps, Mono), Audio Event (MP3, 16kbps, Mono), and Version (Flash 4).

429.   Uncheck the box labeled Override Sound Settings.

430.   Click on the HTML tab.

431.   Select the desired Template (Flash Only), Dimensions (Match Movie), Playback (check Display Menu; uncheck everything else), Quality (high), Window Mode (Window), HTML Alignment (Default), and Flash Alignment (Horizontal - Center; Vertical - Center).

432.   Check the box labeled Show Warning Messages.

433.   Click on the Publish button.

434.   Import the .swf and .html files into FrontPage Explorer.