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..