Flash Tutorial

We have briefly gone over how colors work, but this section will delve into more detail and introduce you to gradients, how they work, and how to create them.
The easiest way to adjust color is to use the Color Swatches panel and the Color Mixer panel.

The Color Swatches Panel
Windows, Color Swatches (Ctrl+F9)
The Color Swatches panel has the default web 256 colors in it as well as a few gradients at the bottom from which you can select. You can sort these colors to group by color or leave them in the standard layout. You can add colors from color files (.clr), which can be found at C:\Program Files\Macromedia\Flash8\en\First Run\Color Sets. You can also add colors from graphics by going through the following steps:

1.
Open the Color Swatches panel.
2.
Select Add Colors from the submenu in the panel.
3.
Choose any GIF file (or use image_1.gif, which can be found on the website).

That's it. You now have all the colors from that GIF file. If you do not see any change in the colors in the panel, the GIF you chose did not have any new colors. Try a higher-quality GIF file (nature pictures are great for this).
After you have the new colors in your swatches, you can save them back out as a .clr file or even set them as your default from the same submenu.

The Color Mixer Panel
Windows, Color Mixer (Shift+F9)
The Color Mixer panel can create and edit colors and gradients. The Color Mixer panel is a bit different than the Color Swatches panel; however, they work together to create and store colors and gradients.


This walkthrough will go over how to edit and save a gradient using the Color Mixer panel.
1.
Draw an oval on the stage with a solid color.
2.
With the Color Mixer panel open, select Radial from the fill type drop-down.
3.
You can select either of the handles, slide them along the color bar, or change their color completely using the color drop-down. You can also add colors to the color bar by clicking when you see a white plus sign.
4.
When you're satisfied with your new gradient, select the submenu drop-down from the Color Mixer panel and choose Add Swatch.
TIP
Gradients can handle up to 15 different colors. Read More..

Sometimes, when you're drawing graphics or working with animations, it is a lot easier to draw with rulers or grids. Flash offers you both.
To turn on rulers, go to View, Rulers.
You can also use gridlines. Gridlines are great for animation as well as application layout so that you can see exactly where to place visual objects on the stage.
To turn gridlines on, go to View, Grid, Show Grid.
You can also edit the grid to better fit your needs by choosing View, Grid, Edit Grid, and the Grid settings dialog box will appear. Some of the options for the grid are as follows:

Color This is the actual color of the gridlines.
Show Grid Toggles the grid between visible and invisible.
Snap to Grid This option allows objects to snap to cross sections in the grid.
Horizontal Space The horizontal space between gridlines in pixels.
Vertical Space The vertical space between gridlines in pixels.
Snap Accuracy This option tells Flash how close you need to be to a cross section in the grid for the object to snap to it.
If you want something a little more customizable, you can turn on guidelines.
Guidelines are lines you create yourself during authoring. To turn them on, choose View, Guides, Show Guides. For them to work, you must have Rulers turned on as well.
If you have both guides and rulers turned on, you can click in the ruler at a set point and drag a line out to the stage. After you release it, you can still move it by clicking it and dragging it again. By choosing View, Guides, Lock Guides, you can also lock the guides down so that you do not accidentally move them.
You can also customize the guidelines by choosing View, Guides, Edit Guides. The Guides settings dialog box will pop up.
The settings are the same basic settings as the grid.
Finally, if you want to clear the guides and start over, you can select View, Guides, Clear Guides, or drag them individually back over to the rulers. Read More..

We have saved the best for last in this chapter because the movie clip has it all. Movie clips have an independent timeline in that their timeline is not dependent on the main timeline; therefore, their play head can move in sync or out of sync with the main play head. Also, movie clips can have ActionScript within their own timeline and/or have ActionScript in their object actions. The main timeline itself is a movie clip, although you won't find it in the Library panel with the others. Movie clips are so powerful. Making a Movie Clip symbol is the same as making the other symbols, but you choose a different behavior.

1.
Create a new Flash document and save it as myFirstMovieClip.fla.
2.
Draw a circle in the center of the stage about 75x75 and give it a red fill color (0xff0000).
3.
Select the circle, both stroke and fill, and choose Modify, Convert to Symbol (F8).
4.
In the Convert to Symbol dialog box, give it a symbol name of circleMC, choose Movie Clip for the behavior, and click OK.

If you tested the movie right now, the square would be there. But if that was all you were going to do, you could have used a graphic. Instead, you will go back into the movie clip and add some ActionScript to make the circle interactive.
5.
Back on the main timeline, select the circle movie and open the Actions panel by choosing Window, Actions (F9).
6.
In the object actions of the circle, place the following code:
onClipEvent(mouseDown){
//if the user clicks the circle
if(hitTest(_root._xmouse,_root._ymouse)){
//drag the circle
this.startDrag(false);
}
}
//when the user lets go
onClipEvent(mouseUp){
//stop dragging the circle
stopDrag();
}

Do not worry if the code is new to you, it will be covered in later chapters, but the code is necessary so that you can see the power of movie clips.
Test the movie at this point, and you will see that if you click the circle and move the mouse, the circle will drag. Let go and the movie will stop dragging. Read More..

One of the most exciting new features of Flash is the capability to download and upload files directly from your SWF. Flash accomplishes this by means of the FileReference object.
The FileReference object allows you to browse for files with the browse() method. You can even tell Flash what types of files you want the end user to be able to select. And when a user selects a file, the FileReference will have these available properties:

creationDate A Date object representing the creation date of the file on the users computer.
creator The Mac creator type of the file on the user's computer.
modificationDate A Date object representing the last modified date of the file.
name The name of the file.
size The size of the file in bytes.
type The file type of the file.
Following is an example that will allow you to select a file and then display all the information in the Output panel.
1.
Create a new Flash document.
2.
Drag an instance of the Button component onto the stage and give it an instance name of browse_butn and set the label to browse.
3.
Now create a second layer called actions and place the following code in the first frame of that layer:
//import the FileReference Object
import flash.net.FileReference;

//the file reference object
var file_fr:FileReference = new FileReference();
//object for listening to for FileRefernce events
var list_obj:Object = new Object();
//the event for when a user selects a file and hits open
list_obj.onSelect = function(){
trace("name: "+file_fr.name);
trace("creation date: "+file_fr.creationDate);
trace("modification date: "+file_fr.modificationDate);
trace("type: "+file_fr.type);
trace("size in bytes: "+file_fr.size);
trace("creator: "+file_fr.creator);
}
//add the listener to the FileReference object
file_fr.addListener(list_obj);
//event for the Button component
browse_butn.clickHandler = function(){
file_fr.browse();
}

This code does quite a few things. First, it imports the necessary class file for the FileReference object. Then it creates a generic object to use as a listener for the onSelect event that is triggered when a user selects a file and clicks Open. Then we create the actual event callback for the listener object. Next the listener object is added to our FileReference. And finally, we create the event for the Button component, so that when the button is clicked, the File Browse window will appear.
Test this movie, and when you select a file and click Open, you should see some information about the file in the Output panel.
If you want to see the FileReference object working with a server-side script to actually be able to upload images, check out "PHP and Flash." Read More..

Although it is a tedious process, frame-by-frame animation has been done for quite some time and does give the animator the most control of his or her animation. Some of the best cartoons have been done using the process of creating a separate frame for each and every piece of animation.

Your First Animation
In the following exercise, you are going to create a frame-by-frame animation of a hand waving.

1.
Create a new Flash document by going to File, New (Ctrl+N), and then select Flash Document and save it as wavingHand.fla.
2.
Double-click Layer 1 and rename it wavingHand.
3.
In wavingHand, draw a small hand.
4.
Select the second frame of the same layer, and then choose Insert, Timeline Keyframe (PCF6). This creates an identical copy of the previous frame, so select the hand on the stage and then open up the Transform panel (Window, Design Panels, Transform, or Ctrl+F7 for PC users).
5.
While the hand is still selected, in the Transform panel, set the Rotate field to 10 and press Enter.
6.
Follow the previous two steps for frames 3 through 10 until you have completed frame 10 (at which point, the hand will have rotated 90 degrees).
7.
If you test the movie right now (Control, Test Movie, or use Ctrl+Enter), the hand will wave from left to right and then jump back to the first frame. We could go through the process we just did and use 10 as the rotation, but there is an easier way to do it.
8.
After closing the test movie screen, select frames 19.
TIP
The easiest way to select frames is to select the first frame you want, then hold down the Shift key and select the last frame you want.
9.
After the frames are selected, right-click (Ctrl+click on MAC) and choose Copy Frames from the menu. (Ctrl+Alt+C)
10.
Select frame 11, right-click, and choose Paste Frames. At this point, if you tested the movie again, it would show the hand waving twice and then starting over. What we want to do is make the hand wave one direction and then go back the other direction in a smooth manner.
11.
Now select frames 1119; then select Modify, Timeline, Reverse Frames.
Now you're done. Test the movie again and you will see the hand waving back and forth continuously.
You can definitely see some of the benefits of using keyframe animation with the capability to control every aspect of the stage in each frame. The downside is that you have to make adjustments for each frame. The previous example was not too complicated because it was just a hand waving, but imagine if it was an entire person that was walking and wavingthat would take a lot of keyframes to accomplish. This is where tweening comes in. Read More..

Although we have not covered ActionScript much thus far, it is important to understand some of the basic ideas and uses of the Sound object, one of the many native objects in ActionScript.
Before you can use the Sound object, it must be initialized in the Actions panel, like this:

var mySound_sound:Sound = new Sound();

After you have a Sound object initialized, several methods and properties can be called to manipulate this sound. But the first thing you want to do with a new Sound object is to get the sound into it. There are two methods for doing this, the loadSound() method and the attachSound() method. Because ActionScript is still new in the book, we will focus on the simpler method, the attachSound() method, which will grab the sound file from the library after it has been imported and you have set the linkage property.
In the following example, you are going to import an MP3 song, set its linkage property, and use ActionScript to start and stop it.
1.
Start by creating a new Flash document.
2.
Select File, Import, Import to Library, and then choose your favorite MP3 song or use the one from the accompanying website.
3.
After it is imported, go to the library, select the song you just imported, choose the panel Properties button from the top right of the library and select Linkage from the drop-down.
4.
Select the Export for ActionScript check box, and give it a linkage name of sample.
5.
Next, you'll want to add Start and Stop buttons to the stage. You can get them from the Common Libraries or create your own; just make sure they each have the instance property names of play_btn and stop_btn, respectively.
6.
Create a new layer and name it actions; then open the Actions panel in the first frame of this new layer (F9) and place the following actions in it:
//create the new sound object
var mySound_sound:Sound = new Sound();
//attach the song we want to this sound object
mySound_sound.attachSound("sample");
//when released, the song will play
play_btn.onRelease=function(){
mySound_sound.start(0,0);
}
//when released, the sound will stop
stop_btn.onRelease=function(){
mySound_sound.stop();
}

Now you can test the movie, and when you click the Play button, the song will begin to play. When you click the Stop button, the song will stop.
That was a simple way to make Start and Stop buttons with sound. Another great thing you can do with the sound object is to control the volume and pan of the sound itself. Pan is the left and right speaker control; basically, you can use the pan controls to make a sound appear to be coming more from the left or right speaker.
Building on the last example, you are going to make the sound automatically play, but this time, as it starts playing, it will fade out and to the left (if you have stereo speakers).
Simply replace the code in the Actions layer with this code:
//create the new sound object
var mySound_sound:Sound = new Sound();
//attach the song we want to this sound object
mySound_sound.attachSound("sample");
//start the sound
mySound_sound.start(0,0);
//set the initial pan
mySound_sound.setPan(100);
//this function will fade it from the left to the right, and the volume to zero
this.onEnterFrame=function(){
if(mySound_sound.getVolume()>0){
mySound_sound.setVolume(mySound_sound.getVolume()-.5);
mySound_sound.setPan(mySound_sound.getPan()-3);
}
}

Now when you test the movie, the sound automatically plays, and as it does, it fades out gradually from left to right.
You can do more things with the Sound object, such as get the current position in a song, as well as ID3 information about a song, which is included in most MP3s. You can also capture the event when the sound has completely finished playing. Just add the following code to the previous example, and you will see something in the Output panel when the song is done.
mySound_sound.onSoundComplete = function(){
trace("All Done");
}

But sound is not the only way to add a better experience to your websitethere is also video. Read More..

Video on the web is one of the most exciting (and high bandwidth) kinds of content out there. And Flash has not forgotten this in Flash Professional 8. With a streamlined import wizard and the capability to cut segments from imported videos, Flash has never looked better when it comes to video integrationespecially now that Flash has full support for the alpha channel in video, allowing you to completely remove the background.

Importing Video into Flash
Video can play natively inside the Flash 8 player or can be brought in at runtime as either a stream (if you have a streaming server) or progressive download. The video formats Flash supports are as follows: DV, MPEG, WMV, MOV, AVI, and Flash Video FLV.
To import a video, follow these steps:

1.
Select File, Import, Import Video.
2.
When the Video Import Wizard pops up click Browse and choose any video you want (or use one from the companion site). Notice, however, that you can also map to videos that are out on the web.
3.
Click Next and the next screen asks you how you want to deploy video. For this chapter, choose Embed Video in SWF and Play in Timeline.
4.
The Embedding window enables you to choose different options for the symbol type. Set this to Movie Clip so it will work with a later example. You can also choose whether you want the audio either integrated into the video or as a separate file. And you can choose to place an instance of it on the stage and stretch the timeline. Finally, in this section, you can choose to edit your video before you import it, so choose that option and click Next.
5.
In the video's progression bar, the top arrow represents the position in the video you are viewing, and the bottom two bars represent the starting and ending points of the segment of the video you would like to create. You can use the controls to go through and preview your selection, and then use the Create a New Clip in the List button (the plus sign in the top left) to make the video slice, which will then appear in the video list box.
6.
After you have made the slice you want, click Next to get to the Encoding section. This section enables you to select the type of encoding, including quality and player, because the Flash 8 player has a different video codec than the Flash 7 player. This means that if your intended audience has the Flash 7 player, and you choose the Flash 8 player, errors will occur, and users with the older player will not be able to view all your content. Also in this section are some more options. If you click the Show Advanced Settings button. This is where you can set it to encode the alpha channel, so keep that in mind. Click Next when you have the settings you like.
7.
Where the only option is whether you want video help files to pop open when the video is done encoding. Go ahead and click Finish.
Play around with different video settings until you find the right settings for you and your audience, especially when it comes to quality versus file size.
When the video is done importing, a movie clip will appear on the stage with the video embedded into it. And in the library, you will see both the movie clip and the video object. If you test now, the video will play right through, so the next example will take it a step further by showing how easy it is to add controls.
CREATING CONTROLS TO PLAY AND STOP VIDEO
In this exercise, we will be working from the previous example:
Test your movie. Notice that it takes a second to export. In a real-world situation, you would create a preloader to overcome the blank space while waiting for content to load.

You can also add fast-forward and rewind buttons using the goto action. This should give you a good understanding of how video is handled in Flash. Remember, you always have the options of animating, scaling, and rotating the video, just to name a few. In fact, if you're not satisfied with the quality of the video, you might consider taking down the alpha of the video, which seems to take away some of the compression artifacts. Read More..

Major improvements have been made to increase not only the speed of the player in both data parsing and animation, but the player has received a new text-rendering engine that allows it to show much sharper text.
FlashType
FlashType is a new text-rendering technology that has been included in the Flash Player 8. It uses adaptively sampled distance fields (ADFs) to improve the anti-aliasing quality of text for static, dynamic, and input text fields. This will be especially noticeable when you are dealing with small point text. These ADFs create outlines that determine glyphs in a different way than most text-rendering engines do. They can also use subpixel rendering on LCDs in much the same way that ClearType works. You should notice in the Properties Inspector several new anti-aliasing options.

But the rendering engine is not the only thing new to text in Flash. Flash now has a much better WYSIWYG for dealing with text on the stage; you can now select it with the arrow tool, and sizing handles will appear that, if used, affect the dimensions of the text field without scaling the text itself.
Also assisting the Flash player in speed is bitmap caching.
Cache as Bitmap
You can now cache movie clips and buttons as bitmaps to increase the level of performance because the Flash player actually caches a copy of the vector data into the player itself. When you set this option on a button, the player will cache all four states of the button.
To set this property manually, select a movie clip on the stage and check the Use Runtime Bitmap Caching option. This can also be set with ActionScript. In the following cases, however, even if this option is selected, it will not work:
The computer is out of memory, and the bitmap cannot allocate more.
The object you are trying to set is larger than 2,880 pixels in either height or width.
There are also new visual features of Flash that many designers will enjoy working with, as discussed in the following sections. Read More..

There have been a lot of upgrades to the Flash authoring environment, and one in particular is a "catch-up" feature added to the Windows.

Tabs on the Windows
One of the best productivity features in the previous version of Flash was the document tabs at the top of the screen. This allowed users working in the interface to quickly switch between files, including FLAs, ActionScript files, and JSFL files. But in the previous version of Flash, this feature was PC only. Now, document tabs have indeed been included in the Mac interface. However, if you prefer the old way of having several floating file windows, you can easily switch back to it on the Mac platform.

Tabs in Panels Are Back
Those who worked in Flash as early as Flash 5 will remember when you could group panels together into a single panel with a tab for each individual section. When Flash MX came out, this feature was removed in favor of dockable/collapsible panels. Now this feature is back, and dockable/collapsible panels are still here as well. To group panels together, select the panel options drop-down (in the top right of the panel) and select Group "PANEL NAME" with, and then select the panel or group of panels you want to group the current panel with. You can also choose New Panel Group to remove the selected panel from the group it is currently in.

One Library to Rule Them All
In previous versions of Flash, when you had multiple documents open, and you wanted to grab elements from one library and place them in another file, you would have a separate library for each document. The new library has a drop-down menu. That enables you to switch among different document libraries. You can also "pin" the current library so that when you switch documents, it stays as the current library. This new feature is similar to the feature added in the previous version of Flash that enabled you to pin ActionScript in the Actions panel. If you want to have several libraries floating around instead of the one, you can do this as well by clicking the New Library panel to the right of the Pin Current Library button.

Bigger Pasteboard
Sometimes, you will want to have content available, but not necessarily on the stage where it is visible to end users. Most Flash users will put these elements off the stage in what's called the pasteboard. This area will not be viewable by end users viewing your Flash content, but you can manipulate it with ActionScript or tweening. In Flash 8, the pasteboard has been expanded to allow the storage of even more elements.

Two Levels of Undo
With Flash 8, you now have two options for undoing mistakes:
Document-level Undo A huge list of every action you have taken from anywhere in your Flash document. This is the default selection.
Object-level Undo Keeps separate lists for the different objects you are working with in Flash so that undoing several things within an object will not affect any changes to others.
You can set which type of undo you want to use by going to Edit, Preferences, and opening the Preferences window, which has also been updated.

Object DrawingThe New Grouping
When dealing with raw shapes on the stage, if you place one shape over top of the other (in the same layer) and then move that shape, the shape in the background will have lost the area the foreground shape was overlaying. You can group shapes so that this will not happen, but then you lose the ability to directly edit them. Drawing Objects, however, have the best of both worlds. Drawing Objects can be placed over other Drawing Objects or raw shapes on the same level, and they will not affect one another. In addition, Drawing Objects can have changes applied to them just as if they were a raw shape.
You can create Drawing Objects as you draw the shape with the Rectangle and Oval tool by selecting the Object Drawing option in the Options section of the toolbar. You can also convert raw shapes to Drawing Objects by selecting the shape and going to Modify, Combine Objects, Union.
That when a Drawing Object is selected, the Properties Inspector will still show the same options as if it were a raw shape.

Content on the Go
With the capability to publish to both Flash Lite 1.0 and 1.1, you might be using Flash to create a great deal of mobile content. Macromedia has included several templates and panels to help you.
After you set your publish settings to publish to Flash Lite, the device settings become available. Here you can select the content type your application will be, and as you do, all the available devices for that content type become available. Then you can select the individual devices that you want to test on and click OK.When you have your Flash app ready for testing, you can test the movie as you would normally by going to Control, Test Movie, but this time a different window will appear. In this test window, you can choose the different devices to test and output information about your application. You can also adjust the magnification level and rotation of the device in the test environment.

Hide and Seek Is Over
One of the major complaints about Flash content on the web (.swf files) is that their content cannot be searched by search engines such as Google. But now in Flash 8, you can actually embed data directly into your published content instead of just having comments and text within the HTML that many search engines do not fully index. To create the metadata necessary for search engines to see SWFs, fill out two fields in the Document Properties dialog box.
Following are descriptions of the two fields:
Title The title of your projects; this does not have to match the title tag in your html document.
Description This field can contain anything from searchable keywords for your project to copyright information.
There are even more new features in the interface, and you will find them scattered throughout the book. But the interface is not the only part of Flash to receive upgrades.

Welcome Back, Normal Mode
If you have worked in Flash MX or earlier, you might remember an optional way to enter ActionScript that did not require a great deal of typing, but instead allowed you to choose certain options for certain scripts. This was called Normal mode, and it was removed from Flash MX 2004. However, it has returned to Flash as Script Assist.
Script Assist will help you if you are unfamiliar with ActionScript or are concerned that you might be missing some options of a given script. To activate Script Assist, click the Script Assist button in the Actions panel (Window, Actions). Read More..