A4 - CCSN Computer Graphics Program

Requirements: 

Apply a Kuler color scheme to your movie/project 

1 

GRC 288 

Assignment 4 

Provide example of broken apart text with the shapes of the letters altered, add a 

shape morph effect. Get creative and add at least 10 dif keyframes. 

Create an example of syncing audio (voice over). Sync a sound clip which has 

some type of speaking or voiceover to some animation that relates to the words in 

the sound clip. Sound must be imported into flash, set sync to stream. Voiceover 

sample audio file will be available in lab. 

Provide an example of Loader class 

Add an example of Perspective and provide an example of the 3d translation tool. 

Create a graphic showing a perspective in flash or import an image that shows a 

perspective (illusion of 3d, image should have a vanishing point). Add a second 

image that moves along the perspective accordingly (it matches the perspective). 

Add a shadow filter to image if appropriate. 

Add 3 examples of sounds from the sounds library 

(Window > Common Libraries > Sounds) 

Create an example of movable MC using start drag and stop drag 

Provide 4 dif videos, use the component inspector all same size like 320x240 

Provide an example of the Deco tool, provide examples for each of the 3 Drawing 

Effects available via the Properties Inspector 

Make a Flash movie with a transparent background 

Add some type of background image to the published html page 

Once you have finished your Assignment, save as 

firstletterofyourfirstname_lastname_A4 and place in a A4 folder, etc 

Extra Credit: Create an example of a Flash form (form does not have to submit 

data to an email or webserver but could have a submit button)

How to create Assignment 4 

Step 1 - Start a new project and Import files 

Import nec. assets 

File>Import>Import to library 

1 voice over audio clip (audio clip with speaking/talking) 

Don’t import the following, instead place in the same folder as this assignment 

4 video files, .flv or f4v 

Step 2 – Apply a “Kuler” color scheme to your movie/project 

Kuler is now integrated into Flash CS4. Kuler is a web-based color mixing application 

from Adobe. 

Window>Extensions>Kuler 

Add to swatches panel and then apply colors throughout your project 

Window>Swatches opens the swatches panel 

Add a color scheme throughout your movie, use those set of colors in your design 

throughout the movie. 

Step 3 – Create an example of broken apart text alter shapes of the letters 

Create a new movieclip and name styled_text 

Select the type tool and within the property inspector set font size to extra large for 

example 125 and pick a more blockier font 

Type some text on stage 

Break apart text twice, hit Control-B twice in order to break text apart into shapes 

Add a keyframe f6 

Move playhead to frame 2 

Using the subselection tool (press a) and select text which is now a shape 

Modify text shape by moving anchor points of shapes, create an unusual looking text 

Shape tween for a morph effect, add frames using f5 so morphing is viewable 

Get creative and add at least 10 dif keyframes. 

Add example to main movie timeline 

2

Extra credit, add examples of bones tool to your shape. 

Step 4 - Syncing audio to a voice over 

Syncing a sound clip requires an audio clip with some type of speaking or voiceover 

which will be matched to some animation that relates to the words in the sound clip. You 

will need to find a sound clip which has an example of a voice over, a voice over has 

audio with talking words or a voice speaking in the audio clip. You can alternatively 

create your own voiceover using the usb mic available from the Instructor. 

Navigate to google.com and search for voiceover.aif or voiceover.wav 

Or navigate use the sample file available in lab. 

If you use the above example, shorten the length of the file using audacity, it is very 

long, large file. We only need about 10 seconds of a talking audio file. 

If you haven’t already done so import audio clip into the library 

Create a new movieclip and put this example inside the movieclip 

Name layer audio, and drag sound clip to layer 

Click anywhere on sound waveform that is showing on the sound layer and within the 

property inspector set sound sync option to Stream 

Expand length of sound clip by adding frames (f5) 

Edit sound clip by clicking on edit within the property inspector, sound clip should 

play a short sentence or several words at least 

Add a new layer and name this layer whatever the first word of your sentence is 

Using the Text tool type the first word of your sentence 

Select the word and convert to symbol (f8) 

Name your movie clip symbol 

Select the key frame and use the properties inspector to set the color alpha 0% to 

make word transparent 

Position word slightly offstage 

Try adding a cool shadow or glow filter to the movie clip 

Determine what frame the word appears in the audio clip and add a second keyframe 

(f6) 

In order to determine the frame, scrub playhead, audio sync must be set to stream 

3

Select the second key frame and use the properties inspector to set the color alpha 

100% to make transparent position word onto the stage so it will be visible 

Repeat the above steps for each word, create a new layer, name layer, type the next 

word, and convert word into a movie clip symbol 

Classic tween all layers 

On property inspector set Ease to 100 out (tweening slows at end) 

Add easing to all of the tweens 

Add blur filter effect for added realism, add blur only while text is moving 

Control>Test Scene 

Add example to main movie timeline 

Step 5 – Loader class 

A .swf has the ability to load other swf files into itself. It is useful for separating a large 

project into smaller swf’s or simply loading any swf into a flash movie. Process was 

referred to as LoadMovie in Actionscript 2.0. In Actionscript 3.0 we now use the Loader 

class. 

Best to put this example inside a Movieclip symbol. 

Click on the frame where you want to load a new swf movie to appear, add a blank 

keyframe f7 

Within the Actions panel copy and paste the following: 

var myLoader:Loader = new Loader(); addChild(myLoader); var 

url:URLRequest = new 

URLRequest("http://media.ebaumsworld.com/2006/06/burgerking. 

swf"); myLoader.load(url); 

stop(); 

URL shown above represents the external url file we want to load . 

URL path can be either relative or absolute 

A relative file like main.swf means we must include the swf file within the same 

folder as the main project file. 

• Control>Test Movie 

4

You will need to create a button to unload the swf since it will continue playing once 

loaded 

Use premade buttons from the button library Window>Common Libraries>Buttons 

Add a button instance, give an instance name, and add the following script to frame 

where button first appears. 

You can add the following script to the same location as the loader script 

unloading_btn.addEventListener(MouseEvent.CLICK, 

unloading_function); 

function unloading_function(e:MouseEvent):void { 

myLoader.unload(); 

SoundMixer.stopAll(); 

gotoAndStop(1); 

} 

Modify unloading_btn to match the button instance name you used 

Modify gotoAndStop(1); to go to the desired frame once the unload button is pressed 

Add text above button, turn off please 

Control>Test Movie 

Step 6 - Perspective example 

Create an example of perspective in flash. Import an image that shows a perspective 

(illusion of 3d, depth and a vanishing point). Add a second image that moves along the 

perspective into its vanishing point. A perspective by definition is the way in which 

objects appear to the eye based on their spatial attributes, or their dimensions and the 

position of the eye relative to the objects. As objects become more distant, they begin to 

appear smaller. This phenomenon is caused by perspective. For more info about the 

definition of perspective: http://en.wikipedia.org/wiki/Perspective_%28visual%29 

• Search for an image example of a perspective 

• Go to images.google.com and do an image search for perspective 

• Below is a jpg image of a perspective. 

5

• Download image file to local computer (cntrl-click) 

• Within flash click File>Import>Import to Library 

• Select the image and drag to a new layer 

• Import a second image that will move along the perspective, the second image needs 

to be converted into a movieclip 

• For example, in the above picture you might find a train or a car to move along the 

tracks 

• You will need to either draw the train in flash or import an image 

• If you find a image make sure to remove the background so you have only the train 

and no background around the train 

• You will need to convert image into a movieclip f8 

• Optional add a shadow filter, select movieclip on stage, on the property inspector, 

select the filter tab and click on the Add Filter button and choose drop shadow from 

the drop down list. Adjust settings as desired, for example blur x, strength, and angle. 

• Use the 3d translation tool in order to tween along the z-axis 

• Before using the tool you will need to add a motion tween to the layer 

• After adding the tween select frame where you want the change to occur then select 

the 3d translation tool and drag the z-axis 

• Adjust as desired to make object appear it is moving along the perspective towards 

the vanishing point 

6

Step 7 – Add several audio examples from sounds library 

Flash includes a Sounds library containing many useful sounds that can be used for 

effects. To open the Sounds library, choose Window > Common Libraries > Sounds. 

Create a new layer name sounds 

Select the desired frame where you want audio to appear and add a blank keyframe f7 

Drag desired sound from the Sounds library to the stage. 

Set sync to stream (recommended). 

Repeat steps adding two more new sounds to different areas 

Step 8 - Create an example of movable MC using start drag and stop drag 

• MUST put this example inside a movieclip symbol!!! 

• Select frame where you want example to appear 

• Create a new layer and name movable_MC 

• Create a circle or similar shape 

• Convert circle to a movieclip symbol (f8) 

• Select movieclip and give an instance name circle 

• Select the Actions layer, add a blank keyframe where movieclip first appears 

• Copy and paste the following script into the Actions layer, make sure script is in the 

same frame where movieclip first appears 

circle.addEventListener(MouseEvent.MOUSE_DOWN, mouseDown) 

function mouseDown(event:MouseEvent):void { 

circle.startDrag(); 

} 

circle.addEventListener(MouseEvent.MOUSE_UP, mouseReleased); 

function mouseReleased(event:MouseEvent):void { 

circle.stopDrag(); 

} 

stop(); 

• Stop action was added in order to keep playhead on the particular frame where 

movieclip appears 

• Control>Test Movie 

7

• Click and hold down the mouse button and drag the circle to reveal the background, 

releasing mouse button stops dragging of mask circle 

Step 9 - Create a Video jukebox with controls 

Create a video jukebox, a video area within your project with options to play four 

different videos, make all videos the same dimension 320x240. Flash uses Skins to 

provide built-in play controls. You will first need to create four flv/f4v/h264 video files 

using Adobe media encoder batch program. Make videos all the same dimensions, 

320x240 and place in the same folder as the flash project. 

You will want to organize our video jukebox by first creating a movieclip to contain 

all of our videos 

Create a new movieclip name VideoJukebox 

Select blank layer, name video1 

Click on frame 2 and insert a blank keyframe f7 

Open Window>Components 

Expand Video and select FLVPlayback (double+click adds to stage) 

Select video player on stage and within the top right of the properties inspector select 

the Component Inspector panel icon 

On the Parameters tab find Source and click on the magnifying glass and select the 

first flv file 

Adjust other settings if desired 


Note our first video should be in frame 2 not frame 1, our second video will be in 

frame 3 only. 

Select video clip on stage and reposition if desired. 

Create a new layer, required! Name layer video2. 

Click on frame 3 of this layer and insert a blank keyframe. 

Repeat same steps for the second video putting on a new layer. 

Select FLVPlayback (double+click adds to stage) 

Select video player and using the Component Inspector find Source and click on the 

magnifying glass and select the second flv file 

8

Create a new layer required! Name layer video2. 

Click on frame 4 and insert a blank keyframe. 

Repeat the steps for the third video. 

Create a new layer, required click on frame 5 and insert a blank keyframe and repeat 

the steps for the fourth video 

Add a new layer and call labels, add labels to frame 2, 3, 4, 5 

Name labels video 1, video2, video3, etc. 

Labels will be referenced by Actionscript 

Add a new layer, name buttons, add 4 buttons for each video, must begin on frame 1 

Use premade buttons from the button library Window>Common Libraries>Buttons 

If necessary add text for buttons in a new layer above your buttons 

Give each button a unique instance name like a, b, c, d 

Each button will represent each of the videos 

Buttons should be available throughout the video area 

Add an Actions layer, select frame 1 of the actions layer 

Copy and paste the script on the next page into frame 1 

9

stop(); 

//Video 1 button, modify instance name, function name, and label 

btn_instancename.addEventListener(MouseEvent.CLICK, 

functionnamegoeshere); 

function functionnamegoeshere(e:MouseEvent):void { 

gotoAndStop("the label name"); 

} 



functionnamegoeshere2); 

function functionnamegoeshere2(e:MouseEvent):void { 


} 






} 






} 

Modify btn_instancename, functionnamegoeshere, and the label name for each of the 

scripts above in order to match the values for your 4 video buttons 

All four video buttons should be available throughout your video jukebox 


Modify as desired, try adding an interface around video and buttons, for example 

draw a rounded corners box with a shadow filter. 

10

Step 10 – Provide an example of the Deco tool 

Use the Deco tool to provide examples for each of the 3 Drawing Effects available via the 

Properties Inspector. View the following tutorials for more help: 

http://www.adobe.com/go/lrvid4060_fl 

http://tv.adobe.com/#vi+f1552v1001 

htpp://ww.adobe.com/devnet/flash/articles/deco_intro.html. 

The Decorative drawing tools let you turn graphic shapes into complex, geometric 

patterns. The Decorative drawing tools use calculations applied to a movie clip or graphic 

symbol in the library. In this way, you can create a complex pattern using any graphic 

shape or object. You can use the Spray Brush or Fill tool to apply the patterns that you 

create. You can create kaleidoscopic effects using single or multiple symbols with the 

Deco Symmetry tool. The following instructions came from flash help press f1. 

Apply patterns with the Spray Brush tool 

The Spray Brush acts like a particle sprayer, letting you “brush” a pattern of shapes onto 

the Stage at one time. By default, the Spray Brush emits a spray of dot particles using the 

currently selected fill color. However, you can use the Spray Brush tool to apply a movie 

clip or graphic symbol as a pattern. 

Select the Spray Brush tool. 

In the Spray Brush tool Property inspector, select a fill color for the default spray 

of dots. Or, click Edit to select a custom symbol from the library. 

You can use any movie clip or graphic symbol in the library as a “particle.” These 

symbol-based particles give you a great deal of creative control over artwork you 

create in Flash. 

Click or drag on the Stage where you want the pattern to appear. 

Spray Brush tool options 

The Spray Brush tool options appear in the Property inspector when you 

select the Spray Brush from the Tools panel. 

11

Edit, opens the Select Symbol dialog box, from which you select a movie 

clip or graphic symbol to use as a spray brush particle. When a symbol in 

the library is selected, its name appears next to the edit button. 

Color selector, select a fill color for the default particle spray. The color 

selector is disabled when you use a symbol in the library as a spray 

particle. 

Scale width, scale the width of a symbol used as a spray particle. For 

example, a value of 10% makes the symbol 10% narrower. A value of 

200% makes the symbol 200% wider. 

Scale height, scales the height of a symbol used as a spray particle. For 

example, a value of 10% makes the symbol 10% shorter. A value of 200% 

makes the symbol 200% taller. 

Random scaling, specifies that each symbol-based spray particle is placed 

on Stage at a random scale, altering the size of each particle. This option is 

disabled when using the default spray of dots. 

Rotate symbol, rotates the symbol-based spray particle around a center 

point. 

Random rotation, specifies that each symbol-based spray particle is 

placed on Stage at a random degree of rotation. This option is disabled 

when you use the default spray of dots. 

The Deco Drawing tool 

Use the Deco Drawing tool to apply an effect to a selected object on the Stage. Choose 

the effects from the Property inspector after you select the Deco Drawing tool. 

Apply the Symmetry effect 

Use the Symmetry effect to arrange symbols symmetrically around a central point. When 

you draw the symbols on the Stage, a set of handles appears. Use the handles to control 

the symmetry by increasing the number of symbols, adding symmetries, or editing and 

modifying the effect. Use the Symmetry effect to create circular user interface elements 

12

(such as an analog clock face or dial gauge) and swirl patterns. The default symbol for 

the Symmetry effect is a black rectangle shape with no stroke that is 25 x 25 pixels. 

Select the Deco Drawing tool 

Select Symmetry Brush from the Drawing Effect menu in the Property inspector. 

In the Deco Drawing tool Property inspector, select a fill color to use for the 

default rectangle shape. Or, click Edit to select a custom symbol from the library. 

You can use any movie clip or graphic symbol in the library with the Symmetry 

Brush effect. These symbol-based particles give you a great deal of creative 

control over artwork you create in Flash. 

The Symmetry Brush advanced options 

The Symmetry Brush advanced options appear in the Property inspector 

when you select Symmetry Brush from the Drawing Effect pop-up menu 

in the Property inspector. 

Rotate Around Point, rotates the shapes in the symmetry around a fixed 

point that you designate. The default reference point is the center point of 

the symmetry. To rotate the object around its center point, drag in a 

circular motion. 

Reflect Across Line, flips the shapes an equal distance apart across an 

invisible line that you specify. 

Reflect Around Point, places two shapes an equal distance apart around a 

fixed point that you specify. 

Grid Translation 

Creates a grid using the shapes in the Symmetry effect you are drawing. Each click of the 

Deco Drawing tool on the Stage creates a grid of shapes. Adjust the height and width of 

the shapes using the x and y coordinates defined by the Symmetry Brush handles. 

13

Test Collisions 

Prevents shapes in the Symmetry effect you are drawing from colliding with one another, 

regardless of how you increase the number of instances within the Symmetry effect. 

Deselect this option to overlap the shapes in the Symmetry effect. 

Click the Stage where you want the Symmetry Brush artwork to appear. 

Use the Symmetry Brush handles to adjust the size of the symmetry and the 

number of symbol instances. 

Apply the Grid Fill effect 

The Grid Fill effect lets you fill the Stage, a symbol, or closed region with a symbol from 

the library. After the Grid Fill is drawn to the Stage, if the filled symbol is moved or 

resized, the Grid Fill will move or resize accordingly. Use the Grid Fill effect to create a 

checkerboard, a tiled background, or area or shape with a custom pattern. The default 

symbol for the Symmetry effect is a black rectangle shape with no stroke that is 25 x 25 

pixels. 

Select the Deco Drawing tool, and select Grid Fill from the Drawing Effect menu 

in the Property inspector. 

In the Deco Drawing tool Property inspector, select a fill color for the default 

rectangle shape. Or click Edit to select a custom symbol from the library. 

You can use any movie clip or graphic symbol in the library as a symbol with the 

Grid Fill effect. 

You can specify the horizontal and vertical spacing and the scale of the fill shape. 

Once the Grid Fill effect is applied, you cannot change the advanced options in 

the Property inspector afterwards to alter the fill pattern. 

Click the Stage or within the shape or symbol where you want the Grid Fill 

pattern to appear. 

14

Grid Fill effect advanced options 

Horizontal spacing, specifies the horizontal distance in pixels between 

shapes used in the Grid Fill. 

Vertical spacing, specifies the vertical distance in pixels between shapes 

used in the Grid Fill. 

Pattern scale, enlarges or shrinks an object horizontally (along the x axis), 

and vertically (along the y axis). 

Apply the Vine Fill effect 

The Vine Fill effect lets you fill the Stage, a symbol, or closed region with a vine pattern. 

You can substitute your own artwork for the leaves and flowers by selecting symbols 

from the library. The resulting pattern is contained in a movie clip that itself contains the 

symbols that make up the pattern. 

Select the Deco Drawing tool, 

Select Vine Fill from the Drawing Effect menu in the Property inspector. 

In the Deco Drawing tool Property inspector, select a fill color for the default 

flower and leaf shapes. Or, click Edit to select a custom symbol from the library 

to replace one or both of the default flower and leaf symbols. 

You can use any movie clip or graphic symbol in the library to replace the default 

flower and leaf symbols with the Vine Fill effect. 

You can specify the horizontal and vertical spacing and the scale of the fill shape. 

After you apply the Vine Fill effect, you cannot change the advanced options in 

the Property inspector afterward to alter the fill pattern. 

Click the Stage or within the shape or symbol where you want the Grid Fill 

pattern to appear. 

Grid Fill effect advanced options 

Branch angleSpecifies the angle of the branch pattern. 

Branch colorSpecifies the color to use for the branch. 

Pattern scaleScaling an object enlarges or reduces it both horizontally 

(along the x axis), and vertically (along the y axis). 

15

Segment lengthSpecifies the length of the segments between leaf and 

flower nodes. 

Animate patternSpecifies that each iteration of the effect is drawn to a new 

frame in the timeline. This option creates a frame-by-frame animated 

sequence of the flower pattern as it's drawn. 

Frame stepSpecifies how many frames to span per second of the effect 

being drawn. 

Step 10 - Make a Flash movie with a transparent background 

• First save your movie File>Save 

• Adjust publish settings File>Publish settings and click on the HTML tab 

• Under the Window mode: select the Transparent Windowless option 

• Click on Publish and then OK 

Step 11- Add a background image to the published html page 

Next we will add a background to the published HTML file in order to see if flash movie 

is transparent 

• Find the published HTML file for your flash movie 

• Open with a text editor or Dreamweaver 

• Modify the first several lines of your HTML code, add internal css, must go inside the 

head tags 

 

 

 

• Replace bg_image.jpg (above) with the name of the background image you would 

like to use. Image will have to be added to the same folder/directory as your html file. 

• Save your HTML file and then double click on the file to open within a browser. 

16

Step 12 - Finish movie by adding any additional content to your areas 

Add content to each of your areas and test movie to make sure your project works as 

intended and that all Assignment requirements have been met. 

Deliverables for Assignment 4 

Once you have finished your Assignment make sure you have named in this format 

firstletterofyourfirstname_lastname_A4 place in a folder with the same naming 

convention. Publish an html, swf, and remember to include the fla file 

17

Extra credit: Cut out a head or body in Photoshop and import and use in your movie, 

image must enlarge or shrink slowly 

First what we want to do is cut out an image in Photoshop and import that image into 

Flash. Basically in Photoshop we want to add cut out the background of an image using a 

technique called quick mask in Photoshop. We want to take an image of a person and cut 

out their body or head, export that image out of Photoshop and import that image into 

Flash. Once in Flash we will add the “ken burns” style effect to this image. 

Find and image that has a picture of a head or body that we can cut out in photoshop 

Go to images.google.com and type headshot.jpg 

Download an image 

Next, there are two options you can use to remove background 

Use Flash or Photoshop to remove bg, pick one 

Open image in flash, drag to stage, break image apart command+b and then use 

eraser to erase background 

Open within Photoshop 

Click on the edit in quick mask mode icon or press Q 

Select the brush tool and adjust size, opacity, and other settings, make sure brush 

color is set to black/white default 

Use brush to paint the areas you wish to make transparent on the image 

Quick mask mode paints area red that you want to become transparent, make sure all 

areas you want removed are painted with the brush and appear red 

Click on the edit in standard mode or press Q 

Click on Select>Inverse in order to select the desired masked area 

Click on Edit>Cut in order to remove the masked area we want to delete 

Click on Select>Inverse in order to select the new desired area 

Click on Edit>Copy in order to copy the desired area 

Click on File>New and create a new Photoshop document that has a transparent 

background, make sure documents dimensions are big enough for us to paste the 

copied image 

Within new document paste the copied image Edit>Paste 

18

Click on File>Save for web and export image 

Make sure you pick the png or gif option and make sure transparency is selected 

Import the png/gif image into flash, its background should be transparent 

Add image somewhere to your movie 

Add a second keyframe at about frame 60 and tween image 

Select the second keyframe and use the transform tool to make the image larger or 

smaller while holding down the shift key, shift key constrains the image so that the 

aspect ratio remains constant and doesn’t become distorted 

Add a background image behind cutout, tween background so that it either gets 

bigger or smaller at a much slower rate than the cutout. Add a blur filter for an 

enhanced look. 


Extra Credit: Flash forms 

Forms in Flash are similar to forms in HTML which allow users to interact and select 

information or fill out (forms) with their own information. Forms are most often used to 

have viewers fill out an online inquiry with their own answers or information such as in a 

survey or order form. 

The form we will create in this example will not have to submit data to an email or 

webserver but should have a submit button. Optional, when the user presses submit it 

takes them to a confirmation message or a message saying this feature is not currently 

activated. 

User Interface (UI) Components within Flash are a way to create form related elements 

Form related User Interface (UI) Components 

Button 

Button, can be clicked on and can also be programmed with a behavior or 

action to do something 

CheckBox 

Checkbox, can be selected or deselected (checked or unchecked) 

19

ComboBox 

Drop down menu, provides multiple choices, user selects one choice 

Label 

Label, similar to a text field but allows an instance name to be assigned 

List 

List, list of choices in a scrollable menu 

RadioButton 

Radio button, allows one to many choices to be listed but only one choice 

can be chosen for an assigned group 

TextArea 

Can be used to display text or for users to type in text 

TextInput 

Allows users to insert text such as a username and password 

Four basic steps to creating a functioning form in Flash 

1. Add component(s) to your project 

2. Configure the components (define/modify) 

3. Modify their appearance 

4. Write ActionScript to enable the components functionality 

(The last step will require advanced knowledge of ActionScript as well as an 

application server to submit the data to, for example when a user fills out the 

form and presses the submit button you may want the info to be submitted to 

another server, database, or email ) 

Adding a Flash form (Extra Credit) 

Create a new scene or new area for our form 

Determine which form elements (components) you will be using or determine what 

questions or info you want users to provide through the form 

Create a new layer, name components 

Open the Components panel (cmd f7 mac or ctrl f7 pc) and expand the UI options by 

clicking on its + 

20

Drag 1x ComboBox, 1x List, 4x RadioButton, 1x TextArea, 1x Button onto the stage 

Use the Align panel to align (cmd k mac or ctrl k pc) 

Create a new layer, name text 

Select text tool, type directions or questions next to each form component 

Return to the components layer and select the ComboBox (allows you to list all 

options within a drop down box, allows a single selection to be picked) 

Within the Properties inspector select the Parameters tab 

Type an Instance name, quantity (type quantity under the word Component in the 

Instance name field) 

Double click right of labels 

Within the Values window, select + and then select the field under values and type 

the first value, select + , select field and type the second value, etc. In this example I 

am using quantity 1,2,3, etc. 

Repeat this step for each value you want to list 


Select the List box (allows you to list all options within a box, box can also be 

configured to allow multiple selections the default allows only one selection ) 

Within the Properties inspector click on the Parameters tab 

Type an Instance name, product 

Double click right of labels 

With the Values window, select + , then select field and type first option name, for 

example product name, select +, select field and type second product name, for 

example coffee cup, pillow, etc 

Repeat this step for each selection option you want to list 


Select the first RadioButton (allows you to list several options with the viewer having 

the ability to choose one of the options) 

Within the Properties inspector (Parameters tab) type an Instance name, red 

Click to the right of groupName and type colorsGroup 

Click to the right of label, type red 

Select the next RadioButton 

21

Within the Properties inspector type an Instance name, black 

Click to the right of groupName and type colorsGroup 

Repeat this step for each of the two remaining color options you want to list 


Select the TextArea box (allows for text to be typed) 

Within the Properties inspector type an Instance name text 

Make sure wordWrap is set to true 

Select Button (on stage) 

Within Properties inspector, right of label, type Submit 

Remember previously we used the text tool on the text layer to type directions or 

questions next to each form component, modify as desired 


Note: When you test movie, each form component should work/ function (allow input 

or selection) except the submit button, submit button will not have any functionality 

(doesn’t submit anything when you click on). 

The submit button, in order to take the information that is typed by the viewer and 

then submit it, you will need to have some advanced ActionScript attached to the 

button. This would also require the use of an application server set up to accept our 

form information. These topics are beyond the scope of this assignment. The most 

important think to learn how to create a form and the various form components that 

are available. Check with your web host about using CGI or PHP scripts to submit 

form data. 

Extra Credit: Finding more components at Adobe Flash Exchange 

Components and extensions extend the capabilities of Flash using plug-ins which add 

additional features. Components are imported and managed using the Adobe Extension 

Manager built into Flash. 

Components and extensions are available for use within Flash by navigating and 

downloading via Adobe’s website: 

22

http://www.adobe.com/cfusion/exchange/index.cfm?l=3&loc=en_us&event=produc 

tHome&exc=2&Submit=Filter 

Installing a component or extension 

Go to Adobe’s site, search for extension, register or log in, save extension to your 

local computer 

Within Flash click on Help>Manage Extensions 

Within Adobe’s Extension Manager window click on File>Install Extension 

Locate file where it was saved locally and click on Install 

The component/extension should now be available through the components panel 

Drag component onto stage to desired location 

Within the Properties inspector, under Parameters modify component as desired 


23

A4 - CCSN Computer Graphics Program

Create successful ePaper yourself

Delete template?

Save as template?