Creating Simple Flash Document

Flash Document

When you open the Flash Professional 8, the start page will automatically appear but you can disable it at the Edit>Preferences. In general category you can see the at the right “on launch” , there are choices you can select about what you want to do during start up of Flash Professional 8. At the start page you can open your recent file, create new file and create template. Just select create new Flash document to start a simple flash document.

Creating a simple Flash Document

To demonstrate the basic steps of creating any Flash document, this section guides you through the process in a simple tutorial. This short tutorial is just a sample of the Flash workflow.


The first step is to create a new document in Flash.

1. Select File > New. Or by selecting at the startup page “create new Flash Document”
   
   
2. In the New Document dialog box, Flash Document is selected by default.
   Click OK.
   In the Property inspector, the Size button displays the current Stage size setting as 550 x 400 pixels.
   
3. The Background color swatch is set to white. You can change the color of the Stage by clicking the swatch and selecting a different color.
   
   
   You can see this at the bottom of the screen of Flash Professional 8
   

• Drawing a circle
  After you've created your document, you are ready to add some artwork for the document.
  1. Select the oval tools at the tools panel.
  2. Select the No Color option from the Stroke Color Picker.
  3.Select a color of your choice from the Fill Color Picker.
  Make sure the fill color contrasts well with the Stage color.
  4. Draw a circle on the Stage by selecting the Oval tool and Shift-dragging on the Stage.
  Holding the Shift key constrains the Oval tool to a circle.

• Creating a symbol
  You can turn your new artwork into a reusable asset by converting it to a Flash symbol. A symbol is a media asset that can be reused anywhere in your Flash document without the need to re-create it.
  

1. Click the Selection tool in the Tools panel.
   
2. Click the circle on the Stage to select it.
   
3. With the circle still selected, select Modify > Convert to Symbol.
   
4. In the Convert to Symbol dialog box, type my_circle into the Name text box.
   The default behavior is now Movie Clip.
   
5. Click OK.
   A square bounding box appears around the circle. You have now created a reusable asset, called a symbol, in your document.
   
6. The new symbol appears in the Library panel.
   If the Library panel is not open, select Window > Library
   

• Animating the circle
  Now that you have some artwork in your document, you can make it more interesting by animating it to move across the Stage.
  

1. Drag the circle to just left of the Stage area.
   
   
   
2. Click Frame 20 of Layer 1 in the Timeline.
   
   Selecting Frame 20 of Layer 1 in the Timeline
   
   
3. Select Insert > Timeline > Frame.
   Flash adds frames to Frame 20, which remains selected.
   
   Frames inserted in the Timeline
   
4. With Frame 20 still selected, select Insert > Timeline > Keyframe.
   A keyframe is added in Frame 20. A keyframe is a frame where some property of an object is explicitly changed. In this new keyframe, you will change the circle's location.
   
   Inserting a keyframe in Frame 20
   
5. With Frame 20 still selected in the Timeline, drag the circle to just right of the Stage area.
   
6. Select Frame 1 of Layer 1 in the Timeline.
   
7. In the Property inspector (its default location is at the bottom of the Flash application window), select Motion from the Tween pop-up menu.
   
   Selecting a motion tween in the Property inspector
   
   An arrow appears in the Timeline in Layer 1 between Frame 1 and Frame 20.
   
   The Timeline with an arrow indicating a motion tween
   
   This step creates a tweened animation of the circle moving from its position in the first keyframe in Frame 1 to its new position in the second keyframe in Frame 20.
   
8. In the Timeline, drag the red playhead back and forth from frame 1 to frame 20 to preview the animation.
   
9. Select File > Save.
   
10. Choose a location for the file on your hard disk and name the file SimpleFlash.fla.
    
11. Select Control > Test Movie to test the FLA file.
    
12. Close the Test Movie window.
    

• Publishing the file
  When you finish your Flash document, you are ready to publish it so it can be viewed in a browser. When you publish a FLA file, Flash compresses it into the SWF file format. This is the format that you place in a web page. The Publish command can automatically generate an HTML file with the correct tags in it for you.
  

1. Select File > Publish Settings.
   
2. In the Publish Settings dialog box, select the Formats tab and verify that only the Flash and HTML options are selected.
   This action causes Flash to publish only the Flash SWF file and an HTML file. The HTML file is used to display the SWF file in a web browser.
   
   The Flash and HTML options on the Formats tab
   
   


3. In the Publish Settings dialog box, select the HTML tab and verify that Flash Only is selected in the Template pop-up menu.
   This template creates a simple HTML file that contains only your SWF file when displayed in a browser window.
   
   Choosing Flash Only from the Template menu
   
4. Click OK.
   
5. Select File > Publish and open your web browser.
   
6. Select File > Open in the web browser.
   
7. Navigate to the folder where you saved your FLA file.
   The SimpleFlash.swf and SimpleFlash.html files are there. Flash creates these files when you click Publish.
   
8. Select the file named SimpleFlash.html.
   
9. Click Open.
   Your Flash document is displayed in the browser window.
   

Congratulations! You have now completed your first Flash document