Flash CS6 Tutorial - Space Shooter Game step by step
Flash CS6 Tutorial - Space Shooter Game Part 2
Flash CS6 Tutorial - Space Shooter Game Part 3
Flash CS6 Tutorial - Space Shooter Game Part 4
Flash CS6 Tutorial - Space Shooter Game Part 5
Flash CS6 Tutorial - Space Shooter Game Part 6
Flash CS6 Tutorial - Space Shooter Game Part 7
Flash CS6 Tutorial - Space Shooter Game Part 8
Flash CS6 Tutorial - Space Shooter Game Part 9
Summary
Congratulations on creating a Flash document that includes graphics, a
video, and video control behaviors. In a few minutes, you learned how to
accomplish the following:
■ Tour the user interface
■ Dock and undock panels
■ Change the background and Stage size
■ Change your view of the Stage
■ View your document library
■ Add graphics to the Stage
■ Add video
■ View object properties
■ Add video control behaviors
■ Use the Movie Explorer to view the document structure
■ Test the document
■ Find help
To learn more about Flash read my other lessons..keep in touch...
video, and video control behaviors. In a few minutes, you learned how to
accomplish the following:
■ Tour the user interface
■ Dock and undock panels
■ Change the background and Stage size
■ Change your view of the Stage
■ View your document library
■ Add graphics to the Stage
■ Add video
■ View object properties
■ Add video control behaviors
■ Use the Movie Explorer to view the document structure
■ Test the document
■ Find help
To learn more about Flash read my other lessons..keep in touch...
Test the document
As you author a document, you should save and test it frequently to ensure
the Flash content plays as expected. When you test the SWF file, click
the video control buttons to see if the video stops, plays, and rewinds
as expected.
1. Save the document (File > Save) and select Control > Test Movie.
The Flash content plays in a SWF file window. Although .fla is the
extension for documents in the authoring environment, .swf is the
extension for tested, exported, and published Flash content.
2. When you finish viewing the SWF content, close the SWF file window
to return to the authoring environment.
Find help
The lessons provide an introduction to Flash, and suggest ways that you
can use features to create exactly the kind of document required. For
comprehensive information about a feature, procedure, or process
described in the lessons, see the Help tab of the Help panel
(Help > Flash Help).
the Flash content plays as expected. When you test the SWF file, click
the video control buttons to see if the video stops, plays, and rewinds
as expected.
1. Save the document (File > Save) and select Control > Test Movie.
The Flash content plays in a SWF file window. Although .fla is the
extension for documents in the authoring environment, .swf is the
extension for tested, exported, and published Flash content.
2. When you finish viewing the SWF content, close the SWF file window
to return to the authoring environment.
Find help
The lessons provide an introduction to Flash, and suggest ways that you
can use features to create exactly the kind of document required. For
comprehensive information about a feature, procedure, or process
described in the lessons, see the Help tab of the Help panel
(Help > Flash Help).
Use the Movie Explorer to view
The Movie Explorer helps you arrange, locate, and edit media. With its
hierarchical tree structure, the Movie Explorer provides information about
the organization and flow of a document.
1. Select Window > Movie Explorer.
If necessary, enlarge the Movie Explorer to view the tree structure
within the pane.
The Movie Explorer filtering buttons display or hide information.
2. Click the pop-up menu in the title bar of the Movie Explorer, and select
Show Movie Elements and Show Symbol Definitions, if they’re not
already selected.
3. Configure the filtering buttons, along the top of the Movie Explorer, so
the only ones selected are Show Buttons, Movie Clips, and Graphics;
Show Action Scripts; and Show Video, Sounds, and Bitmaps.
If you move your mouse pointer over a button, a tooltip displays the
name of the button.
Examine the list to view some of the assets included in the document,
and to see their relationship to other assets.
4. In the Movie Explorer pane, expand Actions for Play to view
ActionScript that Flash created when you added the Play video
control behavior.
5.To close the Movie Explorer, click its close box.
hierarchical tree structure, the Movie Explorer provides information about
the organization and flow of a document.
1. Select Window > Movie Explorer.
If necessary, enlarge the Movie Explorer to view the tree structure
within the pane.
The Movie Explorer filtering buttons display or hide information.
2. Click the pop-up menu in the title bar of the Movie Explorer, and select
Show Movie Elements and Show Symbol Definitions, if they’re not
already selected.
3. Configure the filtering buttons, along the top of the Movie Explorer, so
the only ones selected are Show Buttons, Movie Clips, and Graphics;
Show Action Scripts; and Show Video, Sounds, and Bitmaps.
If you move your mouse pointer over a button, a tooltip displays the
name of the button.
Examine the list to view some of the assets included in the document,
and to see their relationship to other assets.
4. In the Movie Explorer pane, expand Actions for Play to view
ActionScript that Flash created when you added the Play video
control behavior.
5.To close the Movie Explorer, click its close box.
View object properties
When you add an object to the Stage, you can select it, and then view and
change its properties in the Property inspector. The type of object selected
determines which properties appear. For example, if you select a text object
(not a text graphic, which you use in this lesson), the Property inspector
displays settings such as font, type size, and paragraph formatting, which
you can either view or change. If no object is selected, the Property
inspector displays properties for the entire document.
1. On the Stage, with the Selection tool selected, click the Title graphic.
The Property inspector (Window > Properties > Properties) shows
specifications, such as height, width, and Stage coordinates, for the
movie clip.
2. On the Stage, click the bounding box for the video movie clip that you
dragged to the Stage and view its attributes in the Property inspector.
3. In the Instance Name text box of the Property inspector, enter video as
the instance name.
An instance is an occurance of a symbol on the Stage. Because
ActionScript, the Flash scripting language, often refers to instance names
in order to perform operations on instances, it is a good practice to name
the instances you create. To learn more about naming instances, see the
tutorial: “ActionScript: Write Scripts” on page 225.
Add video control behaviors
Behaviors let you add complex functionality to your document easily,
without having to know ActionScript, the Flash scripting language. You’ll
now add behaviors for video control.
1. In the Timeline, click Frame 1 of the Content layer to select it, if it’s not
already selected.
2. On the Stage, click the Play movie clip instance (which looks like a play
button) to select it. In the Behaviors panel (Window > Behaviors), click
Add (+) and select Embedded Video > Play. To learn more about
symbols and instances, select Help > Flash Tutorials > Basic Tasks:
Create Symbols and Instances.
3. In the Play Video dialog box, verify that Relative is selected. Select
video, which is the instance name that you gave to the video clip, and
click OK.
4. On the Stage, click the Pause movie clip instance to select it. In the
Behaviors panel, click Add (+) and select Embedded Video > Pause.
5. In the Pause Video dialog box, again select the video movie clip, and
click OK.
6. On the Stage, click the Rewind movie clip instance to select it. In the
Behaviors panel, click Add (+) and select Embedded Video > Rewind.
7. In the Rewind Video dialog box, select Video.
8. In the Number of Frames to Step Back text box, enter 20.
The Number of Frames to Step Back text box indicates how many
frames the playhead should move back when the user clicks the
Rewind button.
change its properties in the Property inspector. The type of object selected
determines which properties appear. For example, if you select a text object
(not a text graphic, which you use in this lesson), the Property inspector
displays settings such as font, type size, and paragraph formatting, which
you can either view or change. If no object is selected, the Property
inspector displays properties for the entire document.
1. On the Stage, with the Selection tool selected, click the Title graphic.
The Property inspector (Window > Properties > Properties) shows
specifications, such as height, width, and Stage coordinates, for the
movie clip.
2. On the Stage, click the bounding box for the video movie clip that you
dragged to the Stage and view its attributes in the Property inspector.
3. In the Instance Name text box of the Property inspector, enter video as
the instance name.
An instance is an occurance of a symbol on the Stage. Because
ActionScript, the Flash scripting language, often refers to instance names
in order to perform operations on instances, it is a good practice to name
the instances you create. To learn more about naming instances, see the
tutorial: “ActionScript: Write Scripts” on page 225.
Add video control behaviors
Behaviors let you add complex functionality to your document easily,
without having to know ActionScript, the Flash scripting language. You’ll
now add behaviors for video control.
1. In the Timeline, click Frame 1 of the Content layer to select it, if it’s not
already selected.
2. On the Stage, click the Play movie clip instance (which looks like a play
button) to select it. In the Behaviors panel (Window > Behaviors), click
Add (+) and select Embedded Video > Play. To learn more about
symbols and instances, select Help > Flash Tutorials > Basic Tasks:
Create Symbols and Instances.
3. In the Play Video dialog box, verify that Relative is selected. Select
video, which is the instance name that you gave to the video clip, and
click OK.
4. On the Stage, click the Pause movie clip instance to select it. In the
Behaviors panel, click Add (+) and select Embedded Video > Pause.
5. In the Pause Video dialog box, again select the video movie clip, and
click OK.
6. On the Stage, click the Rewind movie clip instance to select it. In the
Behaviors panel, click Add (+) and select Embedded Video > Rewind.
7. In the Rewind Video dialog box, select Video.
8. In the Number of Frames to Step Back text box, enter 20.
The Number of Frames to Step Back text box indicates how many
frames the playhead should move back when the user clicks the
Rewind button.
Add graphics to the Stage
To add library items to your document, you verify that you’re adding the
object to the correct layer, and then drag the item from the Library panel to
the Stage.
1. In the Timeline, click the Content layer name to select that layer. With
the Selection tool selected, drag the Title movie clip, which contains a
bitmap image and vector graphic, from the Library panel to the Stage
and align it on top of the gray bar at the top of the Stage that contains
the word Title.
In Flash, you can work with bitmap images, which describe graphics
using pixels, and vector art, which uses mathematical representation to
describe art. For more information, see “About vector and bitmap
graphics” in Using Flash.
2. With the Content layer still selected, drag the text symbol from the
Library panel to Stage, and align it with the Trio ZX2004 text that’s
already in place as a guide. You can use your keyboard arrow keys to
nudge the text into place.
The title text is actually a graphic created from text.
Add video
The Library panel includes an imported Flash video file (FLV). You’ll add
the video to your document, and Flash will add the necessary frames to
play the video.
To learn more about using video in Flash, see “Working with Video” in
Using Flash.
1. Verify that the Content layer is still selected in the Timeline. From the
Library panel, drag the ggb_movie_for_trio_new video to the dark gray
Video guide on the Stage.
2. A dialog box appears that indicates Flash will add 138 frames to the
Timeline for the video. Click Yes.
3. Drag the playhead across the Timeline to view the video.
object to the correct layer, and then drag the item from the Library panel to
the Stage.
1. In the Timeline, click the Content layer name to select that layer. With
the Selection tool selected, drag the Title movie clip, which contains a
bitmap image and vector graphic, from the Library panel to the Stage
and align it on top of the gray bar at the top of the Stage that contains
the word Title.
In Flash, you can work with bitmap images, which describe graphics
using pixels, and vector art, which uses mathematical representation to
describe art. For more information, see “About vector and bitmap
graphics” in Using Flash.
2. With the Content layer still selected, drag the text symbol from the
Library panel to Stage, and align it with the Trio ZX2004 text that’s
already in place as a guide. You can use your keyboard arrow keys to
nudge the text into place.
The title text is actually a graphic created from text.
Add video
The Library panel includes an imported Flash video file (FLV). You’ll add
the video to your document, and Flash will add the necessary frames to
play the video.
To learn more about using video in Flash, see “Working with Video” in
Using Flash.
1. Verify that the Content layer is still selected in the Timeline. From the
Library panel, drag the ggb_movie_for_trio_new video to the dark gray
Video guide on the Stage.
2. A dialog box appears that indicates Flash will add 138 frames to the
Timeline for the video. Click Yes.
3. Drag the playhead across the Timeline to view the video.
View the Library panel
Flash content that you import or that is a symbol is stored in your Library
panel. To learn more about symbols and instances, select Help > Flash
Tutorials > Basic Tasks: Create Symbols and Instances.
■ To view the Library panel, select Window > Library.
We’ve already imported library items and created symbols for objects
that you’ll use in this lesson.
Flash also contains a library of buttons that you can use in your document.
To view this library, after taking this lesson, select Window > Common
Libraries and select the Buttons library.
panel. To learn more about symbols and instances, select Help > Flash
Tutorials > Basic Tasks: Create Symbols and Instances.
■ To view the Library panel, select Window > Library.
We’ve already imported library items and created symbols for objects
that you’ll use in this lesson.
Flash also contains a library of buttons that you can use in your document.
To view this library, after taking this lesson, select Window > Common
Libraries and select the Buttons library.
Change background and Stage size
The Stage provides a preview of how your Flash content will appear in your
published file. You’ll change the size of the Stage to accommodate artwork
designed for a larger Stage, and you’ll change the background color of
the Stage.
1. In the Tools panel, click the Selection tool.
2. On the Stage, click anywhere in the gray workspace that surrounds the
Stage, or on the background area of the Stage, so that no objects
are selected.
The Property inspector, under the Stage, displays properties for the
document when no objects are selected.
3. To change the Stage background color, click the Background color box
and select a light shade of gray, such as gray with the hexadecimal value
of #CCCCCC.
4. To change the Stage size, click Size in the Property inspector. In the
Document Properties dialog box, enter 750 for the Stage width, and
then click OK.
The Stage resizes to 750 pixels wide.
Change your view of the Stage
You can change your view of the Stage without affecting the actual Stage
size of your document.
1. In the Stage View text box, above the right side of the Stage, enter
500%. Then press Enter (Windows) or Return (Macintosh).
Your view of the Stage enlarges to 500%.
2. In the Stage View pop-up menu, which you access by clicking the
control to the right of the text box, select 100% to view the Stage in
dimensions that correspond to the size of the published Flash content.
View the Library panel
Flash content that you import or that is a symbol is stored in your Library
panel. To learn more about symbols and instances, select Help > Flash
Tutorials > Basic Tasks: Create Symbols and Instances.
■ To view the Library panel, select Window > Library.
We’ve already imported library items and created symbols for objects
that you’ll use in this lesson.
Flash also contains a library of buttons that you can use in your document.
To view this library, after taking this lesson, select Window > Common
Libraries and select the Buttons library.
published file. You’ll change the size of the Stage to accommodate artwork
designed for a larger Stage, and you’ll change the background color of
the Stage.
1. In the Tools panel, click the Selection tool.
2. On the Stage, click anywhere in the gray workspace that surrounds the
Stage, or on the background area of the Stage, so that no objects
are selected.
The Property inspector, under the Stage, displays properties for the
document when no objects are selected.
3. To change the Stage background color, click the Background color box
and select a light shade of gray, such as gray with the hexadecimal value
of #CCCCCC.
4. To change the Stage size, click Size in the Property inspector. In the
Document Properties dialog box, enter 750 for the Stage width, and
then click OK.
The Stage resizes to 750 pixels wide.
Change your view of the Stage
You can change your view of the Stage without affecting the actual Stage
size of your document.
1. In the Stage View text box, above the right side of the Stage, enter
500%. Then press Enter (Windows) or Return (Macintosh).
Your view of the Stage enlarges to 500%.
2. In the Stage View pop-up menu, which you access by clicking the
control to the right of the text box, select 100% to view the Stage in
dimensions that correspond to the size of the published Flash content.
View the Library panel
Flash content that you import or that is a symbol is stored in your Library
panel. To learn more about symbols and instances, select Help > Flash
Tutorials > Basic Tasks: Create Symbols and Instances.
■ To view the Library panel, select Window > Library.
We’ve already imported library items and created symbols for objects
that you’ll use in this lesson.
Flash also contains a library of buttons that you can use in your document.
To view this library, after taking this lesson, select Window > Common
Libraries and select the Buttons library.
Take a tour of the user interface
First, you’ll open the starting FLA file that you’ll use to complete this
lesson. Each lesson includes one start file, and a finished file that
demonstrates how the FLA file should appear upon completion of the
lessons.
1. To open your start file, in Flash select File > Open and navigate to
the file:
■ In Windows, browse to boot drive\Program Files\Macromedia\Flash
8\Samples and Tutorials\Tutorial Assets\Basic Tasks\Create a
Document and double-click document_start.fla.
■ On the Macintosh, browse to Macintosh HD/Applications/
Macromedia Flash 8/Samples and Tutorials/Tutorial Assets/Basic
Tasks/Create a Document and double-click document_start.fla.
The Create a Document folder contains completed versions of the tutorial
FLA files for your reference.
The document opens in the Flash authoring environment. The
document already includes two layers in the Timeline. To learn more
about layers, select Help > Flash Tutorials > Basic Flash > Work with
Layers.
One of the layers is named Guides, which contains items to assist you
in placing objects correctly on the Stage. The other layer is named
Content. This is the layer in which to place the objects that will
compose your document.
2. Select File > Save As and save the document with a new name, in the
same folder, to preserve the original start file.
As you complete this lesson, remember to save your work frequently.
Select panel sets and arrange panels
The Default Workspace Layout panel set arranges your workspace in a way
that facilitates taking lessons. You’ll use this layout for all lessons that you
take in Flash.
■ Select Window > Workspace Layout > Default.
You can move panels around, and resize them, as follows:
■ You can undock a panel by clicking the upper-left corner of the
panel, in the title bar, and dragging the panel to another location in
the workspace.
If the panel snaps against a border, it is docked in a new location (or
docked in the same location, if you moved it back). Otherwise, the
panel is undocked.
■ You can resize an undocked panel by dragging the lower-right edge
out to enlarge the panel.
Use tools to create Flash content
The white rectangular Stage area is where you can arrange objects as you
want them to appear in your published file.
You can open several documents at once and use document tabs, above
the Stage, to navigate between them.
The Tools panel, next to the Stage, offers a variety of controls that let you
create text and vector art. To learn more about tools in the Tools panel,
select Help > Flash Tutorials > Creating Graphics: Draw in Flash and
Help > Flash Tutorials > Text: Add Text to a Document.
1. Click the Pencil tool in the Tools panel. Click the Stroke color box in
the Tools panel colors area, and select any color except white.
2. Drag around the Stage, without releasing the mouse, to draw a line.
You’ve created Flash content. Your finished document will be much
more impressive.
Undo changes
Flash can undo a series of changes to your document. You’ll undo the
artwork that you just created.
1. To see the undo feature in action, first open the History panel
(Window > Other Panels > History).
The Pencil tool appears in the panel, because using the tool was your
last action.
2. Do one of the following:
■ Select Edit > Undo Pencil Tool.
■ Press Control+Z (Windows) or Command+Z (Macintosh).
Your scribbles disappear from the Stage. The History panel now shows
a dimmed Pencil tool, which indicates the undo action was executed.
Flash, by default, is set to undo 100 of your changes, in reverse order of
execution. You can change the default setting in Preferences. To change
your preferences, see “Setting preferences in Flash” in Getting Started
with Flash.
3. To close the History panel, click the pop-up menu in the upper-right
corner of the panel and select Close Panel.
View the Timeline
Just above the Stage, you see the Timeline and layers. You can create and
name layers, and then add content to frames on layers to organize how
your Flash content plays as the playhead moves across the frames.
■ Move the mouse pointer over the area that separates the Stage from the
Timeline. When the resizing handle appears, drag up or down slightly
to resize the Timeline as necessary.
Playhead
Keyframe
Resizing handle
The playhead (the red indicator line) is on Frame 1 in the Timeline.
The keyframes are designated by small circles in the frames, which are
filled, indicating there’s content in those frames. You can add a
keyframe to a document when you want the Flash content to change in
some way in that frame.
My Theme
Although usability evangelists often consider Flash to be a usability nightmare, used properly, Flash
can provide users with a rich and interactive interface which would be
impossible otherwise. Today Flash is the de-facto standard for
interactive elements on the Web as most users install Flash plug-in by
default. And in fact, there are many paths creative designers can take
to create a more interactive and user-friendly interface.
Searching for ‘flash tutorials’ via Google & Co. won’t provide you with the results you expect. Not that you won’t find any relevant results, on the contrary — you will be directed to a large number of Flash repositories which offer everything: sometimes useful, but mostly not. Besides, browsing through these repositories isn’t that much fun — as you sometimes need to figure out whether a link you see is a hidden AdSense-block or the actual tutorial. And it’s really hard to find something “refreshing” and new simply using some standard keywords.
This blog provides hand-picked professional Flash tutorials which can enrich your design skills and improve the quality of your works. We’ve tried to select most interesting and useful tutorials. Most sources can serve as the entry point for further tutorials.keep in touch.....
Searching for ‘flash tutorials’ via Google & Co. won’t provide you with the results you expect. Not that you won’t find any relevant results, on the contrary — you will be directed to a large number of Flash repositories which offer everything: sometimes useful, but mostly not. Besides, browsing through these repositories isn’t that much fun — as you sometimes need to figure out whether a link you see is a hidden AdSense-block or the actual tutorial. And it’s really hard to find something “refreshing” and new simply using some standard keywords.
This blog provides hand-picked professional Flash tutorials which can enrich your design skills and improve the quality of your works. We’ve tried to select most interesting and useful tutorials. Most sources can serve as the entry point for further tutorials.keep in touch.....
Subscribe to:
Comments (Atom)