TUTORIALS. step-by-step design

Description

The introduction of the Flash ActionScript 2.0 component enabled developers to work in a true object-oriented fashion. Flash components are powerful tools, and for most large-scale Flash projects, they are absolutely essential. This tutorial will walk you through building a simple component class. This is the first in a series of tutorials, and it is first for a reason. Components are the building blocks in Flash, and each tutorial hereafter will be developed to utilize the power of Flash components.

Required Software

Macromedia Flash Professional 8

Recommended Software

SE|PY ActionScript Editor

Knowledge Required

Basic ActionScript Programming

Object-oriented Programming

Setting up the Flash Document

In Flash, create a new Flash document. Save the file to a folder on your computer and name it whatever you like.

In the Library palette, create a new folder, and call it “CP Tutorial Components”.

Insert a new symbol, name it “SimpleComponent”, and set the type to Movie clip. Click the Advanced button if you haven’t already, check “Export for ActionScript”, and uncheck “Export in first frame”. This way, Flash does not automatically try to load this movie clip until we need it. We will manually add it to the first frame at a later time. In the AS 2.0 class field, type “cp.tutorial.SimpleComponent” and click “OK”. We have now assigned an ActionScript 2.0 class to the SimpleComponent movie clip. It’s important to clearly structure your class paths in Flash. I keep all my components inside the “cp” class. You’ll want to keep your own structure for classes you use in your future Flash projects.

In the Library palette, drag the SimpleComponent movie clip into the “CP Tutorial Components” folder. We will keep all the components we create for these tutorials in this folder.

Next, we need to set up the newly created SimpleComponent. In the timeline for the SimpleComponent movie clip, change the name of Layer 1 to “Actions”. In the first frame of the Actions layer, add a stop command.

stop();

Add another layer below the Actions layer and name it “Assets”. Add a keyframe on frame 2 of the Assets layer. This is where we will store everything needed for the component. The stop command on the first frame keeps the user from seeing these assets until we add them with ActionScript.

Now we’re going to steal some assets from Macromedia so that we can build off of their Flash UI Components. Browse to your Flash 8 folder and open the “StandardComponents.fla” document located in the “en/Configuration/ComponentFLA” folder. This file contains all the source assets used in the pre-built Flash UI components.

Go back into your work document, and in the Library palette, change the drop-down to the “SimpleComponent.fla” Library. Open the “Flash UI Components 2/Base Classes/FUIObject Subclasses” folder in the Library and drag the “UIComponent” movie clip to frame 2 of the Assets layer in your SimpleComponent movie clip. All Flash components extend this very simple component, so we need to include it in our SimpleComponent in order to utilize all its properties and methods.

You can now close the StandardComponents.fla file, go back to your working file Library, and take a look at what we added by dragging over the UIComponent. You’ll see the Flash UI Components 2 folder and the FUIComponent Subclasses folder along with UIComponent and UIComponentExtensions. Let’s do a little organizing to keep our Library clean. Create a new folder called “FUIObject Subclasses” and move the FUIComponent Subclasses, UIComponent, and UIComponentExtensions to the new folder. Next move this folder to “Flash UI Components 2/Base Classes” folder. Now our Library is all nice and tidy. It’s a good idea to keep Macromedia assets separate from your own custom assets in the Library.

Here’s what your Library should look like at this point:

Next, add the BoundingBox movie clip located in the “Flash UI Components 2/Component Assets” folder to frame 1 of the Assets layer in your SimpleComponent. This is a simple rectangle that is used to set the size of the component when you add it to the stage. Name the newly added object “boundingBox_mc” and drag it to 0,0 on the stage (the top-left corner should be at 0,0).

In the next article, we will delve into the ActionScript needed to complete our SimpleComponent.