Flash tutorials | Flash video tutorials | Flash actionscript | flash animation | flash menu | flashconf.com Flash tutorials, Flash video tutorials, Flash actionscript, flash animation , flash menu

11Mar/100

Flash CS4 3D graphics example

Flash allows you to create 3D effects by moving and rotating movie clips in 3D space on the Stage. Flash represents 3D space by including a z axis in the properties of each movie clip instance. You add 3D perspective effects to movie clip instances by moving them along their x axis or rotating them around their x or y axis using the 3D Translation and 3D Rotation tools. In 3D terminology, moving an object in 3D space is called a translation and rotating an object in 3D space is called a transformation. Once you have applied either of these effects to a movie clip, Flash considers it a 3D movie clip and a colored axes indicator appears overlaid onto the movie clip whenever it is selected.

To make an object appear nearer or further away from the viewer, move it along its z axis with the 3D Translation tool or the Property inspector. To give the impression of an object that is at an angle to the viewer, rotate the movie clip around its z axis with the 3D Rotation tool. By using these tools in combination, you can create realistic perspective effects.

Both the 3D Translation and the 3D Rotation tools allow you to manipulate objects in global or local 3D space. Global 3D space is the Stage space. Global transforms and translations are relative to the Stage. Local 3D space is the movie clip space. Local transforms and translations are relative to the movie clip space. For example, if you have a movie clip containing several nested movie clips, local 3D transforms of the nested movie clips are relative to the drawing area inside the container movie clip. The default mode of the 3D Translation and Rotation tools is global. To use them in local mode, click the Global toggle button in the Options section of the Tools panel.

Stage with a movie clip rotated in global 3D space .

Stage with a movie clip containing a nested movie clip rotated in local 3D space .

By using the 3D properties of movie clip instances in your FLA file, you can create a variety of graphic effects without duplicating movie clips in the library. However, when you edit a movie clip from the library, 3D transforms and translations that have been applied are not visible. When editing the contents of a movie clip, only 3D transforms of nested movie clips are visible.

Note: Once a 3D transform is added to a movie clip instance, its parent movie clip symbol cannot be edited in Edit in Place mode.

If you have 3D objects on the Stage, you can add certain 3D effects to all of those objects as a group by adjusting the Perspective Angle and Vanishing Point properties of your FLA file. The Perspective Angle property has the effect of zooming the view of the Stage. The Vanishing Point property has the effect of panning the 3D objects on the Stage. These settings only affect the appearance of movie clips that have a 3D transform or translation applied to them.

In the Flash authoring tool, you can control only one viewpoint, or camera. The camera view of your FLA file is the same as the Stage view. Each FLA file has only one perspective Angle and Vanishing Point setting.

To use the 3D capabilities of Flash, the publish settings of your FLA file must be set to Flash Player 10 and ActionScript 3.0. Only movie clip instances can be rotated or translated along the z axis. Some 3D capabilities are available through ActionScript that are not available directly in the Flash user interface, such as multiple Vanishing Points and separate cameras for each movie clip. Using ActionScript 3.0, you can apply 3D properties to objects such as text, FLV Playback components, and buttons, in addition to movie clips.

Note: The 3D tools cannot be used on objects on mask layers and layers containing 3D objects cannot be used as mask layers.

Tagged as: , , , , , , , , , , No Comments
8Mar/100

Flash CS4 Color panel

The Color panel lets you modify the color palette of a FLA and change the color of strokes and fills, including the following:

  • Import, export, delete, and otherwise modify the color palette for a FLA file by using the Swatches panel.
  • Select colors in hexadecimal mode.
  • Create multicolor gradients.
  • Use gradients to produce a wide range of effects, such as giving an illusion of depth to a two-dimensional object.

The Color panel with the gradient controls displayed.

The Color panel contains the following controls:

Stroke Color
Changes the color of the stroke, or the border, of a graphic object.
Fill Color
Changes the color of the fill. The fill is the area of color that fills up the shape.
Type Menu
Changes the fill style:
None
Removes the fill.
Solid
Provides a solid, single fill color.
Linear
Produces a gradient that blends on a linear path.
Radial
Produces a gradient that blends outward in a circular path from a central focal point.
Bitmap
Tiles the selected fill area with a bitmap image that you can select. When you choose Bitmap, a dialog box lets you select a bitmap image on your local computer, and add it to the library. You can apply this bitmap as a fill; the appearance is similar to a mosaic tile pattern with the image repeated within the shape.
RGB
Lets you change the density of the red, green, and blue (RGB) colors in a fill.
Alpha
Sets the opacity for a solid fill, or the currently selected slider for a gradient fill. An alpha value of 0% creates an invisible (or transparent) fill; an alpha value of 100% creates an opaque fill.
Current Color Swatch
Displays the currently selected color. If you select a gradient fill type (Linear or Radial) from the fill Type menu, the Current Color Swatch displays the color transitions within the gradient you create.
System Color Picker
Lets you select a color visually. Click System Color Picker and drag the cross-hair pointer until you find the color you want.
Hexadecimal value
Displays the current color’s hexadecimal value. To change the color using the hexadecimal value, type in a new value. Hexadecimal color values (also called hex values) are 6‑digit alphanumeric combinations that represent a color.
Overflow
Lets you control colors applied past the limits of a linear or radial gradient.
Extend
(Default) Applies the colors you specify past the end of the gradient.
Reflect
Causes the gradient colors to fill the shape using a reflective mirroring effect. The gradients you specify are repeated in a pattern from the beginning of the gradient to the end, and then repeated in the opposite sequence from the end of the gradient to the beginning, and then back to the beginning of the gradient to the end until the selected shape is filled.
Repeat
Repeats the gradient from the beginning of the gradient to the end until the selected shape is filled.

Note: Overflow modes are supported only in Adobe Flash Player 8 and later.
Linear RGB
Creates a SVG-compliant (Scalable Vector Graphics) linear or radial gradient.
Tagged as: , , , , , No Comments
4Mar/100

How to Create and edit text fields

Text is horizontal by default. However, static text can also be aligned vertically.

You can use most common word-processing techniques to edit text in Flash. Use the Cut, Copy, and Paste commands to move text in a Flash file as well as between Flash and other applications.

Add text to the Stage

  1. Select the Text tool .
  2. In the Property inspector (Window > Properties), select a text type from the pop‑up menu to specify the type of text field:
    Dynamic Text
    Creates a field that displays dynamically updating text.
    Input Text
    Creates a field in which users can enter text.
    Static Text
    Creates a field that cannot update dynamically.
  3. For static text only: In the Property inspector, click Change Orientation Of Text  and select a direction for text orientation and flow. (Horizontal is the default setting.)
  4. On the Stage, do one of the following:
    • To create a text field that displays text in a single line, click where you want the text to start.
    • To create a text field with a fixed width (for horizontal text) or fixed height (for vertical text), position the pointer where you want the text to start and drag to the desired width or height.
    Note: If you create a text field that extends past the edge of the Stage as you type, the text isn’t lost. To make the handle accessible again, add line breaks, move the text field, or select View > Pasteboard.
  5. Select text attributes in the Property inspector.

Change the size of a text field

  • Drag the text field’s resize handle.
When text is selected, a blue bounding box lets you resize the text field by dragging one of its handles. Static text fields have four handles that let you resize the text field horizontally. Dynamic text fields have eight handles that let you resize the text field vertically, horizontally, or diagonally.

Switch a text field between fixed-width (or fixed-height) and extending

Double-click a resize handle.

Select characters in a text field

  1. Select the Text tool .
  2. Do one of the following:
    • Drag to select characters.
    • Double-click to select a word.
    • Click to specify the beginning of the selection, and Shift-click to specify the end of the selection.
    • Press Control+A (Windows) or Command+A (Macintosh) to select all the text in the field.

Select text fields

Using the Selection tool , click a text field. Shift-click to select multiple text fields.

Set dynamic and input text options

  1. Click in an existing dynamic text field.
  2. In the Property inspector, make sure Dynamic or Input is displayed in the pop‑up menu.
  3. Enter an instance name for the text field.
  4. Specify the height, width, and location of text.
  5. Select the font and style.
  6. In the Paragraph section of the Property inspector, specify one of the following options from the Behavior menu:
    Single line
    Displays the text as one line.
    Multiline
    Displays the text in multiple lines.
    Multiline No Wrap
    Displays text in multiple lines that break only if the last character is a breaking character, such as Enter (Windows) or Return (Macintosh).
  7. To enable users to select dynamic text, click Selectable . Deselect this option to prevent users from selecting dynamic text.
  8. To preserve rich text formatting (such as fonts and hyperlinks) with the appropriate HTML tags, click Render Text As HTML .
  9. To display a black border and white background for the text field, click Show Border Around Text .
  10. (Optional) In the Var box, enter the variable name for the text field. (Use this option only when authoring for Macromedia Flash Player 5 from Adobe or earlier.)Beginning with Macromedia Flash MX (version 6), you assign the text field an instance name using the Property inspector. Although you can use the variable name method with dynamic text fields for backwards compatibility to Macromedia Flash 5 and earlier versions, Adobe doesn't recommend this, because you can't control other text field properties, or apply style sheet settings.
  11. Click Character Embedding for embedded font outline options:
    Don’t embed
    Specifies that no fonts be embedded.
    Auto fill
    Click Auto Fill to embed all of the characters from the selected text field.

Set preferences for vertical text

  1. Select Edit > Preferences (Windows) or Flash > Preferences (Macintosh) and click the Text category in the Preferences dialog box.
  2. Under Vertical Text, set any of these options:
    Default Text Orientation
    Automatically gives new text fields vertical orientation.
    Right to Left Text Flow
    Makes lines of vertical text fill the page from right to left.
    No Kerning
    Prevents kerning from being applied to vertical text. (Kerning remains enabled for horizontal text.)
Tagged as: , , , , , , No Comments
4Mar/100

Flash CS4 text fields

There are three types of text fields: static, dynamic, and input. All text fields support Unicode.

  • Static text fields display text that doesn’t change characters dynamically.
  • Dynamic text fields display dynamically updating text, such as stock quotes or weather reports.
  • Input text fields allow users to enter text in forms or surveys.

    You can create horizontal text (with a left-to-right flow) or static vertical text (with either a right-to-left or left-to-right flow).

    When creating static text, you can place text on a single line that expands as you type, or in a fixed-width field (for horizontal text) or fixed-height field (for vertical text) that expands and wraps words automatically. When creating dynamic or input text, you can place text on a single line, or create a text field with a fixed width and height.

    Flash displays a handle on the corner of a text field to identify the type of text field:

  • For static horizontal text that extends, a round handle appears at the upper-right corner of the text field.
  • For static horizontal text that has a fixed width, a square handle appears at the upper-right corner of the text field.
  • For static vertical text that has right-to-left flow and extends, a round handle appears at the lower-left corner of the text field.
  • For static vertical text that has right-to-left flow and a fixed height, a square handle appears at the lower-left corner of the text field.
  • For static vertical text that has left-to-right flow and extends, a round handle appears at the lower-right corner of the text field.
  • For static vertical text that has left-to-right flow and a fixed height, a square handle appears at the lower-right corner of the text field.
  • For dynamic or input text fields that extend, a round handle appears at the lower-right corner of the text field.
  • For dynamic or input text that has a defined height and width, a square handle appears at the lower-right corner of the text field.
  • For dynamic scrollable text fields, the round or square handle becomes solid black instead of hollow.

    Shift-double-click the handle of dynamic and input text fields to create text fields that don’t expand when you enter text on the Stage. This allows you to create a text field of a fixed size and fill it with more text than it can display to create scrolling text.

    After you use the Text tool to create a text field, use the Property inspector to specify the type of text field, and to set values that control how the text field and its contents appear in the SWF file.

  • Static text fields display text that doesn’t change characters dynamically.
  • Dynamic text fields display dynamically updating text, such as stock quotes or weather reports.
  • Input text fields allow users to enter text in forms or surveys.

    You can create horizontal text (with a left-to-right flow) or static vertical text (with either a right-to-left or left-to-right flow).

    When creating static text, you can place text on a single line that expands as you type, or in a fixed-width field (for horizontal text) or fixed-height field (for vertical text) that expands and wraps words automatically. When creating dynamic or input text, you can place text on a single line, or create a text field with a fixed width and height.

    Flash displays a handle on the corner of a text field to identify the type of text field:

  • For static horizontal text that extends, a round handle appears at the upper-right corner of the text field.
    A round handle at the upper-right corner of the text field.
  • For static horizontal text that has a fixed width, a square handle appears at the upper-right corner of the text field.
    A square handle appears at the upper-right corner of the text field.
  • For static vertical text that has right-to-left flow and extends, a round handle appears at the lower-left corner of the text field.
    A round handle appears at the lower-left corner of the text field.
  • For static vertical text that has right-to-left flow and a fixed height, a square handle appears at the lower-left corner of the text field.
    A square handle appears at the lower-left corner of the text field.
  • For static vertical text that has left-to-right flow and extends, a round handle appears at the lower-right corner of the text field.
    A round handle appears at the lower-right corner of the text field.
  • For static vertical text that has left-to-right flow and a fixed height, a square handle appears at the lower-right corner of the text field.
    A square handle appears at the lower-right corner of the text field
  • For dynamic or input text fields that extend, a round handle appears at the lower-right corner of the text field.
    A round handle appears at the lower-right corner of the text field
  • For dynamic or input text that has a defined height and width, a square handle appears at the lower-right corner of the text field.
    A square handle appears at the lower-right corner of the text field.
  • For dynamic scrollable text fields, the round or square handle becomes solid black instead of hollow.
    The round or square handle becomes solid black instead of hollow

    Shift-double-click the handle of dynamic and input text fields to create text fields that don’t expand when you enter text on the Stage. This allows you to create a text field of a fixed size and fill it with more text than it can display to create scrolling text.

    After you use the Text tool to create a text field, use the Property inspector to specify the type of text field, and to set values that control how the text field and its contents appear in the SWF file.

Tagged as: , , , , , , No Comments
28Feb/100

How to Synchronize a sound with animation in Flash CS4

To synchronize a sound with animation, you start and stop the sound at keyframes.

  1. Add a sound to a document.
  2. To synchronize this sound with an event in the scene, select a beginning keyframe that corresponds to the keyframe of the event in the scene. You can select any of the synchronization options.
  3. Create a keyframe in the sound layer’s Timeline at the frame where you want the sound to end. A representation of the sound file appears in the Timeline.
  4. Select Window > Properties, and click the arrow in the lower-right corner to expand the Property inspector.
  5. In the Property inspector, select the same sound from the Sound pop-up menu.
  6. Select Stop from the Sync pop-up menu.When you play the SWF file, the sound stops playing when it reaches the ending keyframe.
  7. To play back the sound, simply move the playhead.
Tagged as: , , , No Comments
28Feb/100

How to Add a sound to a button in Flash CS4

You can associate sounds with the different states of a button symbol. Because the sounds are stored with the symbol, they work for all instances of the symbol.

  1. Select the button in the Library panel.
  2. Select Edit from the Panel menu in the upper-right corner of the panel.
  3. In the button’s Timeline, add a layer for sound (Insert > Timeline > Layer).
  4. In the sound layer, create a regular or blank keyframe to correspond with the button state to which you want to add a sound (Insert > Timeline > Keyframe or Insert > Timeline > Blank Keyframe).For example, to add a sound that plays when you click the button, create a keyframe in the frame labeled Down.
  5. Click the keyframe you created.
  6. Select Window > Properties.
  7. In the Property inspector, select a sound file from the Sound pop-up menu.
  8. Select Event from the Sync pop-up menu.To associate a different sound with each of the button’s keyframes, create a blank keyframe and add another sound file for each keyframe. You can also use the same sound file and apply a different sound effect for each button keyframe.
Tagged as: , , No Comments
28Feb/100

How to Add a sound to the Timeline

You can add a sound to a document using the library, or you can load a sound into a SWF file during runtime, using the loadSound method of the Sound object. For more information, see loadSound (Sound.loadSound method) in the ActionScript 2.0 Language Reference or Sound Class in the ActionScript 3.0 Language and Components Reference.

  1. Import the sound into the library if it has not already been imported.
  2. Select Insert > Timeline > Layer.
  3. With the new sound layer selected, drag the sound from the Library panel onto the Stage. The sound is added to the current layer.You can place multiple sounds on one layer or on layers containing other objects. However, it is recommended that each sound be placed on a separate layer. Each layer acts as a separate sound channel. The sounds on all layers are combined when you play the SWF file.
  4. In the Timeline, select the first frame that contains the sound file.
  5. Select Window > Properties, and click the arrow in the lower-right corner to expand the Property inspector.
  6. In the Property inspector, select the sound file from the Sound pop-up menu.
  7. Select an effect option from the Effects pop-up menu:
    None
    Applies no effects to the sound file. Select this option to remove previously applied effects.
    Left Channel/Right Channel
    Plays sound in the left or right channel only.
    Fade Left To Right/Fade Right To Left
    Shifts the sound from one channel to the other.
    Fade In
    Gradually increases the volume of a sound over its duration.
    Fade Out
    Gradually decreases the volume of a sound over its duration.
    Custom
    Lets you create custom in and out points of sound using the Edit Envelope.
  8. Select a synchronization option from the Sync pop-up menu:
    Note: If you are placing the sound on a frame other than frame 1 in the main Timeline, select the Stop option.
    Event
    Synchronizes the sound to the occurrence of an event. An event sound, such as a sound that plays when a user clicks a button, plays when its starting keyframe first appears and plays in its entirety, independently of the Timeline, even if the SWF file stops playing. Event sounds are mixed when you play your published SWF file. If an event sound is playing and the sound is instantiated again (for example, by the user clicking the button again), the first instance of the sound continues to play and another instance begins to play simultaneously.
    Start
    The same as Event, except that if the sound is already playing, no new instance of the sound plays.
    Stop
    Silences the specified sound.
    Stream
    Synchronizes the sound for playing on a website. Flash forces animation to keep pace with stream sounds. If Flash can’t draw animation frames quickly enough, it skips frames. Unlike event sounds, stream sounds stop if the SWF file stops playing. Also, a stream sound can never play longer than the length of the frames it occupies. Stream sounds are mixed when you publish your SWF file.An example of a stream sound is the voice of a character in an animation that plays in multiple frames.

    Note: If you use an mp3 sound as a stream sound, you must recompress the sound for export. You can export the sound as an mp3 file, with the same compression settings that it had on import.
  9. Enter a value for Repeat to specify the number of times the sound should loop, or select Loop to repeat the sound continuously.For continuous play, enter a number large enough to play the sound for an extended duration. For example, to loop a 15-second sound for 15 minutes, enter 60. Looping stream sounds is not recommended. If a stream sound is set to loop, frames are added to the file and the file size is increased by the number of times the sound is looped.
  10. To test the sound, drag the playhead over the frames containing the sound or use commands in the Controller or the Control menu.
Tagged as: , , , No Comments
27Feb/100

How to Publish FLA file in Flash CS4 Professional

When you finish your FLA file, you are ready to publish it so it can be viewed in a browser. When you publish the file, Flash Professional 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.

To publish the FLA file and view the SWF in a browser:

  1. Choose 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 (see Figure 1)This action causes Flash to publish only the SWF file and an HTML file. The HTML file is used to display the SWF file in a web browser.

    Figure 1. 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 (see Figure 2). This template creates a simple HTML file that contains only your SWF file when displayed in a browser window.

    Figure 2. Choosing Flash Only from the Template menu

  4. Click OK.
  5. Choose File > Publish and open your web browser.
  6. Choose 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 Professional creates these files when you click Publish.
  8. Select the file named SimpleFlash.html.
  9. Click Open. Your application displays in the browser window.

Congratulations! You have now completed your first FLA file.

Tagged as: , , , , No Comments
27Feb/100

How to Create a symbol and adding animation in Flash CS4

You can turn your new artwork into a reusable asset by converting it to a symbol. A symbol is a media asset that can be reused anywhere in your document without the need to re-create it. Symbols can contain images and animations along with other types of content.

  1. Click the Selection tool in the Tools panel (see Figure 1).

    Figure 1. Tools panel with the Selection tool selected

  2. Click the circle on the Stage to select it. A bounding box selection appears around the circle.
  3. With the circle still selected, choose Modify > Convert to Symbol (or press F8) to bring up the Convert to Symbol dialog box (see Figure 2).Note: You can also convert a graphic into a symbol by selecting it and dragging it into the Library panel.

    Figure 2. Convert to Symbol dialog box

  4. Click OK. A square bounding box appears around the circle. You have now created a reusable asset, called a symbol, in your document. In this case, you created a movie clip symbol.If the Library panel is not open, choose Window > Library. The new symbol appears in the Library panel.

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 (see Figure 3).

    Figure 3. Circle moved to the left of the Stage area

  2. Right-click the dot (also called the keyframe) on frame 1 of the Timeline and choose the Create Motion Tween option from the menu. Notice that the Timeline is automatically extended to frame 24 and the red marker (current frame indicator or playhead) is located at frame 24 (see Figure 4). This indicates that the timeline is ready for editing at 1 second—that is, at frame 24 when the frame rate is 24 fps.

    Figure 4. Extended Timeline ready for editing on frame 24

  3. Select the circle on the Stage and drag it to the right of the Stage area. This step just created the tweened animation. Notice the dot (keyframe) which appears at frame 24. Also notice the motion guide line showing the path of motion between frame 1 and frame 24 (see Figure 5).

    Figure 5. A 24-frame animation showing the circle at the end of the animation on frame 24

  4. In the Timeline, drag the red playhead back and forth from frame 1 to frame 24 to preview the animation by scrubbing the Timeline.
  5. Add a change in direction in the middle of the animation by dragging the playhead to frame 12 and then moving the circle to another location on the screen. Notice the change in the motion guide line and the new dot on the Timeline at frame 10 (see Figure 6). The dots on the Timeline are keyframes which mark where (at what frame) objects change on the screen.

    Figure 6. The tweened animation showing a change in direction at frame 12

  6. Experiment with changing the shape of the motion guide path. Click the Selection tool in the Tools panel and then click a section of the motion guide line and drag it to bend the line shape (see Figure 7).

    Figure 7. The tweened animation showing curves added to the motion guide line

  7. Choose Control > Test Movie to test the FLA file.
  8. Close the Test Movie window.
Tagged as: , , , , , , , , No Comments
27Feb/100

How to Create a FLA file and adding graphics in Flash CS4

To build an application in Flash CS4 Professional, you create vector graphics and design elements with the drawing tools, and import additional media elements like audio, video, and images into your document. Next, you define how and when you want to use each of the elements to create the application you have in mind.

When you author content in Flash Professional, you work in a document called a FLA file. FLA files have the file extension .fla (FLA). While viewing a FLA file, you'll notice the Flash CS4 Professional user interface (see Figure 1) is divided into five main parts:

  • The Stage is where your graphics, videos, buttons, and so on appear during playback.
  • The Timeline controls the timing of when elements in the movie appear on the Stage. You also use the Timeline to specify the layering order of graphics on the Stage. Graphics in higher layers appear on top of graphics in lower layers.
  • The Tools panel holds the general set of tools used for selecting objects on the stage and drawing vector graphics.
  • The Property inspector displays editable information about any selected object.
  • The Library panel is where media elements and symbols are stored and organized.

Figure 1. Flash CS4 Professional user interface is divided into five main parts

ActionScript code allows you to add interactivity to the media elements in your document. For example, you can add code that causes a button to display a new image when the user clicks it. You can also use ActionScript to add logic to your applications. Logic enables your application to behave in different ways depending on the user's actions or other conditions. Flash CS4 Professional uses ActionScript 3.0 when an ActionScript 3.0 or Adobe AIR file is created, or ActionScript 1.0 and 2.0 when an ActionScript 2.0 file is created.

Flash includes many features that make it powerful but easy to use, such as prebuilt drag-and-drop user interface components, built-in motion effects which you can use to animate elements on the Timeline, and special effects that you can add to media objects.

When you have finished authoring your FLA file, you publish it using the File > Publish command (Shift+F12). This creates a compressed version of your file with the extension .swf (SWF). You can then use Flash Player to play the SWF file in a web browser or as a stand-alone application.

Creating a simple FLA file

To illustrate the basic steps of creating any FLA document, this tutorial guides you through the process in a simple tutorial. This short tutorial is just a sample of the workflow you'll use while authoring in Flash Professional. The first step is to create a new document:

  1. Choose File > New.
  2. In the New Document dialog box, Flash File (ActionScript 3.0) is selected by default. Click OK.
  3. Click the workspace drop-down menu un the upper right of the screen and select the Essentials workspace layout option (see Figure 2).

    Figure 2. Choosing the Essentials option to see the workspace layout used by the tutorial

  4. Click the Properties tab in the upper right side of the user interface to view the Stage properties for the file.
  5. In the Property inspector, located by default vertically along the right side of the workspace, the Size button displays the current Stage size setting as 550 × 400 pixels (see Figure 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.

    Figure 3. Property inspector showing the Stage size and background color

  6. Choose File > Save.
  7. Choose a location for the file on your hard disk, name the file SimpleFlash.fla, and then click Save. Remember this location, because you'll need to find this directory at the end of this tutorial.

Drawing a circle on the Stage

After you've created your document, you are ready to add some artwork for the document:

  1. Select the Oval tool from the Tools panel (see Figure 4).

    Figure 4. Oval tool in the Tools panel

  2. Click the stroke color swatch in the Property inspector and select the No Color option from the Stroke Color Picker (see Figure 5).

    Figure 5. Selecting the No Color option in the Stroke Color Picker

  3. Select a color of your choice from the Fill Color Picker, located directly below the Stroke Color Picker. Make sure the fill color contrasts well with the Stage color. In this example, we chose a blue fill color with a red Stage color.
  4. With the Oval tool still selected, draw a circle on the Stage by Shift-dragging on the Stage (see Figure 6). Holding the Shift key constrains the Oval tool to a circle.

    Figure 6. Circle drawn on the Stage

Tagged as: , , , , , , , , , No Comments
7Feb/100

How to Make a Wheel in Flash CS4

how to create a spinning wheel in Flash CS4. It's very easy, and shouldn't require any prior knowledge of Flash. It might be kind of confusing, because the first time I made the video my microphone was off. The second time, I was kind of annoyed I had to make it again, so I wasn't thinking straight.

Tagged as: , , , No Comments
7Feb/100

How to Make a Link in Flash CS4

This was a highly requested tutorial by many different people. I said I would do it in another video, and here it is.

ACTIONS:
instanceNameHere.addEventListener(MouseE vent.CLICK, mouseClick);
function mouseClick
{
var request = new URLRequest("link goes here");
navigateToURL(request,"_blank");
}

Tagged as: , , , , , , No Comments
5Feb/100

How to Create and Use a Motion Tween (Flash CS4)

This is a tutorial on how to create and use the new motion tween in Flash CS4. A motion tween is used to create a movement between two positions on the timeline. With the new motion tween, you can easily add changes to each frame, bend the path, and extend the length of the motion tween while keeping the frames at the same spot (proportionally).

Tagged as: , , , , , , , No Comments
1Jan/100

Easy Flash CS4 Alpha Gradient Mask Logo Effect

Easy Flash CS4 Alpha Gradient Mask Logo Effect (Video Tutorial)

Part 2

Tagged as: , , , , No Comments
1Jan/101

Integrate Google Maps into Flash CS4

One of the most important skills for Flash developers to learn is how to utilize the vast collections of Web APIs that are available for services such as Flickr, Twitter, Facebook, and mapping using either Google or Yahoo. In this tutorial you'll learn how to integrate Google Maps into your Flash application using just a few lines of code. The Google API is incredibly easy to use and it's extremely powerful.

1. Download the Google Maps API

The first step in adding Google Maps to your Flash application is to first download the necessary files. Go to http://code.google.com/apis/maps/documentation/flash in your browser. This site is where you can find all of the information on using Google Maps inside of Flash, so be sure to bookmark it. Find the section on the right called "How do I start?" and download the Software Development Kit (SDK) using the link posted in the second item on the list. Unzip the downloaded file to your desktop.

2. Installing the API

In the sdk/lib folder of the SDK you'll find a file named "map_1_9.swc." Copy (Command-C [PC: Ctrl-C) this file to the clipboard. If you're on a Mac navigate to [user folder]/Library/Application Support/Adobe/Flash CS4/language/Configuration/Components (create a new folder named "Components" if you don't already have one). If you're on a PC navigate to [user folder]Local SettingsApplication DataAdobeFlash CS4languageConfigurationComponents (create a new folder named "Components" if you don't already have one). Create a new folder named "Google" and paste (Command-V [PC: Ctrl-V) the SWC file into this new directory. If you had Flash open you'll need to restart it before trying to work with the API.

3. Open the FLA file

Download the tutorial files for this article at www.layersmagazine.com. Open the map.fla file in Flash CS4. In the Library there's a movie clip of the Adobe logo that you'll be placing on the map at the Adobe offices in San Francisco. There's a single layer in the Timeline named "actions." The actions layer is where you'll be placing all the ActionScript code for this project. This project will be built entirely using ActionScript and you won't be adding anything to the Stage.

4. Add the Google Maps component

Before you can start using Google Maps you first need to add the component to your application. Open the Components panel by selecting it from the Window menu. You should see the Google folder that you created earlier. Twirl down the folder and you should see the GoogleMapsLibrary component. Drag the component into the Library to add it to your project. You'll now be able to access all of the Google Maps APIs.

5. Create a basic map

Select the first keyframe of the actions layer and open the Actions panel (Window>Actions). Enter in the code shown in the image above. The first three lines import the Google Maps libraries. Line 5 creates a new instance of the Map class, which is the main object that creates the map. Line 6 is where you'll need to add your API key, which we'll get to in the next step. Line 7 sets the size of the map to the same size as the Flash stage. Finally, line 8 adds the map to display list so we can see it.

6. Get an API key

One of the things that you have to do when using Google Maps is to get an API key. Even though it works without one, you need to get one to prevent breaking the license agreement. Go back to the API website and click on the link in the first item in the list. Agree to the terms and then enter in the website that you'll be using the map on. If you don't know, just enter http://localhost. Click the Generate API Key button and then copy the resulting key to the clipboard (it will ask you to sign into your Google Account if you're not already signed in). Now replace MY_API_KEY in the code with your key.

7. Testing the Map

Go ahead and test your application (Control>Test Movie) to make sure that you're seeing the basic map. You should see a zoomed out map of the world but without any of the controls, such as a zoom slider or map type selector, that you're used to seeing on Internet maps. These will be added in the next step. You must wait until the map ready event fires before adding any controls to the map. Enter in the highlighted code shown above into the Actions panel. The onMapReady function is where you'll begin manipulating the map.

8. Add some controls

Now you're ready to begin adding some controls to the map so users can manipulate it. Add the highlighted code into the Actions panel as shown above. The first line of code adds a new ZoomControl to the map. This adds a slider that the user can use to zoom in and out on the map. The second line adds a MapTypeControl that allows users to select between the different map types available such as satellite or hybrid. Press Command-Return (PC: Ctrl-Enter) to test the movie and try out the map controls.

9. Center the map

At this point the map is centered on the world map and is zoomed all the way out. Now you'll reposition the map so that it's centered at the Adobe offices in San Francisco. Enter in the above highlighted code into the Actions panel. To the setCenter method we send in three items: the latitude and longitude of the Adobe office, the desired zoom level, and the type of map. The user can, of course, change these things, but this is how we want the map to show at the start. Test your application to see the new center.

10. How to find latitude and longitude

You may be wondering how I found the coordinates for the Adobe office. There are numerous ways to get this information. The easiest is to first search for an address on the Google Maps site (http://maps.google.com). Once the map is centered on the address, simply type javascript:void(prompt(",gApplication.getMap().getCenter())); in your browser's address bar and hit Return (PC: Enter). You'll see a pop-up with the coordinates that you can paste into Flash. The Google Maps API has the ability to do this directly from Flash, but that's out of the scope of this tutorial.

11. Add a marker

Enter the above highlighted code into the Actions panel. The first line creates a new Marker object at the Adobe offices. There are many different options available for how the marker will look and behave. For now we'll just keep everything at their default values. The second line of code adds the new marker to the map. Test the application to see the default marker. Now wherever you move the map, the marker will always be visible at the Adobe office. In the next step we'll customize this marker with the Adobe logo.

12. Customize the marker

In the Library panel you'll see a movie clip named "marker." Double-click on it to enter edit mode. You'll see an image of the Adobe logo surrounded by a custom marker graphic. It's important that the point of the marker is on the crosshairs of the registration point. This movie clip has been set up with a class name of "marker" so we can attach it at runtime. Click on Scene 1 at the top left of the Stage to exit edit mode. Add the highlighted code to the Marker object to tell it to use the custom marker (note the changes made at the end of line 16). Test your application.

13. Other marker options

In the last step you customized the look of the marker but there's much more that you can do. Since the marker is just a regular movie clip, it can contain animation, video, or any other type of interactive content that's supported in Flash. Markers are not the only types of overlays either. You can draw lines and shapes and add them to the map to create rich, interactive mapping applications.

14. Where to go from here

In this tutorial you've created a very simple mapping application in Flash but have only scratched the surface of what's possible with the Google API. There's a full geocoding API that allows you to get latitude and longitude coordinates for points on the map or from addresses. You can also get directions between two points or addresses on the map. You can find the full API reference by clicking on the link in item 4 on the API website that you downloaded the SDK from.

Tagged as: , , , 1 Comment
1Jan/100

Flash CS4 3D Tools

Flash CS4 3D Tools (Video Tutorial)

In this tutorial, Tom Green shows how to use 3D tools in Flash CS4 to create a 3D tour out of a group of static images.

Tagged as: , No Comments
   

Pages

Advertise Here

Categories

Archives

Tags

3d ActionScript ActionScript 3 actionscript 3 basics actionscript 3.0 Adobe flash CS3 Adobe Flash CS4 Adobe Flash Player Animation firefox Flash flash actionscript Flash animation flash button Flash Buttons Flash cs3 Flash CS4 Flash Designer Flash Media Server Flash Menu Flash movie Flash Player Flash Preloader flash preloader tutorial flash scripts Flash Sound flash tutorial Flash Tweening Flash Video freebsd flash player geturl Google Chrome How To how to install how to install gnash Install Adobe Flash Install Flash Player install gnash install Google Chrome JPEG Thumbnails Macromedia Flash PowerPoint shell script Tweening Ubuntu Linux

Recent Posts

Random Posts

links

Similar Articles

Active Posts