ptg
274 LESSON 12 Delving Deeper into Graphics and Animation with ActionScript
6 Test the movie. In the testing envi ronment, clic k the Take A Snap shot button.
e arm graphic should animate down and land on the camera graphic. Notice
that even though you added code to control the movement of only one joint, the
entire armature moved down and bent at all of its joints.
7 Close the lesson12_start.swf file to leave the testing environment.
Next you will add code to the moveUp() function to return the armature to its
original position.
Coding the moveUp() function
After the moveDown() function sends the armature to its target location near the
camera graphic, the moveUp() function will return it to its original position.
e code for the moveUp() function is similar to that for the moveDown() function,
but reversed.
1 Between the curly braces of the
moveUp() function, add code so that the
function reads:
function moveUp(e:Event):void {
if(jt0.position.y > 165) {
var pt0:Point=new Point(jt0.position.x - 5,
¬ jt0.position.y - 5);
mover0.moveTo(pt0);
} else {
stage.removeEventListener(Event.ENTER_FRAME, moveUp);
snapshot_btn.visible = true;
}
}
Notice that this function sends the jt0 joint back five pixels on each frame
(jt0.position.x - 5, jt0.position.y - 5) until its y location has
returned to 165.
ptg

ACTIONSCRIPT 3.0 FOR ADOBE FLASH PROFESSIONAL CS5 CLASSROOM IN A BOOK 275
When the armature is back in its original position, there is no further reason
for this function to continue, so it is removed. At this point, the snapshot_btn
instance is made visible so that it can be used again.
2 Test the movie. e arm graphic should now mov e up and dow n. Notice the
Take A Snapshot button disappear for the duration of the animation.
You will add code to both the
moveUp() and moveDown() functions, but first let’s
use ActionScript to load some sound effects into this project. ese will be used to
enhance the armature movement.
Creating Sound and SoundChannel instances
e two sound files that accompany this lesson, robotArm.mp3 and click.mp3, will
be triggered to play while the armature is animating. e robotArm.mp3 sound
will play when the arm is moving up and down. e click will play each time the
arm reaches its target location over the camera graphic to create the impression
that a snapshot has been taken.
You will create two separate
Sound instances so that the two sounds can be con-
trolled independently and overlap a little. A SoundChannel instance will be used
for each sound so that it can be stopped and played. If you completed Lesson 9,
“Controlling Sound with ActionScript,” this code will be familiar to you.
Add code to create the
Sound and SoundChannel instances and to load the two
MP3 files.
1 In the Actions panel for Frame 1 of the
actions layer, scroll to locate the line
that reads:
var mover0:IKMover = new IKMover(jt0, jt0.position);
2 Starting on a new line below this line, insert the following code:
var fx1:Sound = new Sound();

fx1.load(new URLRequest("robotArm.mp3"));
var channel1:SoundChannel = new SoundChannel();
var fx2:Sound = new Sound();
fx2.load(new URLRequest("click.mp3"));
var channel2:SoundChannel = new SoundChannel();
Now that the sounds are loaded and available, you will set them to play and stop
as the armature animation plays. In this lesson, you will assume that the MP3 files
will load successfully because the files are local and in the same folder. You should
already know how to confirm loading from earlier lessons, and in fact, you should
confirm loading in all your online projects.
ptg
276 LESSON 12 Delving Deeper into Graphics and Animation with ActionScript
Playing and stopping the sound effects
e first sound in this animation will begin playing as soon as the user presses the
Take A Snapshot button, so the co de for this will go in the onSnapshot() function.
1 In the onSnapshot() function and below the line that reads:
snapshot_btn.visible = false;
insert the following line:
channel1 = fx1.play();
e onSnapshot() function should now read:
function onSnapshot(e:MouseEvent):void {
stage.addEventListener(Event.ENTER_FRAME, moveDown);
snapshot_btn.visible = false;
channel1 = fx1.play();
}
e robotArm.mp3 sound should play, continuing until the arm has completed
its descent. At this point, this first sound should stop and the “click” sound,
which is very short, should play once. e robot arm sound should then restart
for the ascent of the arm back to its original location.
All of the code for this should be inserted at the point at which the arm reaches

the target over the camera graphic. In your code, this point occurs at the
else
statement in the moveDown() function. is is where you will add the next bit
of code for the sounds.
2 Locate the
moveDown() function, and below the line in the moveDown()
function that reads:
} else {
insert the following three lines:
channel1.stop();
channel2 = fx2.play();
channel1 = fx1.play();
e full moveDown() function should now read:
function moveDown(e:Event) {
if(jt0.position.y < 305) {
var pt0:Point = new Point(jt0.position.x + 5,
¬ jt0.position.y + 5);
mover0.moveTo(pt0);
} else {
channel1.stop();
channel2 = fx2.play();
channel1 = fx1.play();
stage.removeEventListener(Event.ENTER_FRAME, moveDown);
ptg
ACTIONSCRIPT 3.0 FOR ADOBE FLASH PROFESSIONAL CS5 CLASSROOM IN A BOOK 277
stage.addEventListener(Event.ENTER_FRAME, moveUp);
}
}
e last Sound control that you will add will stop the sound when the arm has
returned to its original position. In your code, this occurs in the else statement

within the moveUp() function.
3 Locate the moveUp() function in your code, and below the line that reads:
snapshot_btn.visible = true;
insert the following line:
channel1.stop();
e full moveUp() function should now read:
function moveUp(e:Event):void {
if(jt0.position.y > 165) {
var pt0:Point = new Point(jt0.position.x - 5,
¬ jt0.position.y-5);
mover0.moveTo(pt0);
} else {
stage.removeEventListener(Event.ENTER_FRAME, moveUp);
snapshot_btn.visible = true;
channel1.stop();
}
}
4 Test the movie. Cl ick the Take A S napshot button. Now wh en the arm anim ates,
the sound effects should play in sync with the movement.
5 Close the lesson12_start.swf file to leave the testing environment.
e next sections will add the capability to take an actual snapshot and display it
onstage each time the Take A Snapshot button is clicked. ese snapshots will be
taken from a feed from the user’s live webcam using ActionScript’s
Camera class.
Accessing the user’s webcam or
video camera using ActionScript
If your users have webcams or external video cameras connected to their comput-
ers, Flash Player will recognize them, and you can use ActionScript to access a live
feed from those cameras to work in Flash. You accomplish this using the
Camera

class in ActionScript. To test the code you are about to add, you (and your users)
must have a video camera connected to your computer. Assuming that a camera
is available, the code you will now write will take the feed from the camera and
display it within the interface of this project. Later in the lesson, you will write code
that can take snapshots from this camera feed.
#
Note: Even though
ActionScript will
let you or your user
choose among multiple
cameras if more than
one video source is
connected, Flash can
display the feed from
only one camera at
a time.
ptg
278 LESSON 12 Delving Deeper into Graphics and Animation with ActionScript
Using the getCamera() method
To conne ct the fe ed from the user ’s vide o camera to y our Flash p roject , you us e
the getCamera() method of the Camera class. is method accesses the data
from a camera but doesn’t display it; you create an instance of the Video class to
display the feed.
Add the code to create an instance of the
Camera class and access the user’s camera.
1 Locate the line of code for Frame 1 of the actions layer that reads:
var channel2:SoundChannel = new SoundChannel();
2 On a new line below it, insert the following line:
var camera:Camera = Camera.getCamera();
Remember that the line you just added will access, but not display, the

user’s camera.
You’ll create a ne w instance named
video to display the camera if one
is available.
3 Below the line you just typed, add the following code:
var video:*;
If the user has an installed video camera, then this variable will contain an instance
of the Video class to display the camera feed. Soon you’ll use a Video object to
display the camera, but first you will write the code to check whether there actually
is a recognized video camera. You will do this in a conditional statement.
Checking for the presence of a video camera
e instance of the Camera class you just created is called camera. If there is a
video camera or cameras connected to the user’s machine, then camera will have
a value representing that specific camera. Otherwise, it will return null. So if the
camera value is not null, you know the user has a camera that Flash can access.
1 On a line below the last code you typed, insert the shell for a conditional
statement that checks for a camera’s presence:
if(camera != null) {
} else {
}
If a camera is available, then you want to create a new Video object with which
to display the camera’s input. If there is no camera, you will just trace a message
to the Output panel with that information.
#
Note: Instead of a
specific data type, the
variable video has
a wildcard (*) for the
data type. The wildcard
will allow any type of

data to be contained
in the variable. You
will see the reason for
this when you check
for the presence of a
video camera.
ptg
ACTIONSCRIPT 3.0 FOR ADOBE FLASH PROFESSIONAL CS5 CLASSROOM IN A BOOK 279
2 Add code to the conditional statement so that it now reads:
if(camera != null) {
video=new Video(160, 120);
video.attachCamera(camera);
addChild(video);
} else {
trace("There is no recognized camera connected to your
¬ computer.");
}
In the line that reads video=new Video(160, 120);, a new camera instance is
created and given two properties that represent the size of the video window. In this
case, these parameters are set to display the video at 160 by 120 pixels.
e next line,
video.attachCamera(camera);, uses the attachCamera()
method of the Video class to connect the live camera feed to the Video object.
A video instance is a display object. Like movie clips, text fields, and other
display objects you’ve worked with, instances created with ActionScript use the
addChild() method to place them in the display list and onstage. e next line,
addChild(video);, places the Video object with the camera feed onstage.
To tak e into account that some users may not have conne cte d v ide o c amera s ,
the library of the lesson12_start.fla file has an alternative video file embedded
in a movie clip named AltVid. Because you did not specify a data type for the

video variable, the variable can contain either a Video instance (if the user has
a connected camera) or a MovieClip instance (if there is no camera available)
without displaying an error message. You’ll add code to the else statement so that
if there is no connected camera, the clip from the library will play instead, making it
possible for users without a camera to use the rest of this lesson’s functionality.
3 Add code to the
else statement so that the full conditional statement now reads:
if(camera! = null) {
video=new Video(160, 120);
video.attachCamera(camera);
addChild(video);
} else {
trace("There is no recognized camera connected to your
¬ computer.");
video = new AltVid();
addChild(video);
}
ptg
280 LESSON 12 Delving Deeper into Graphics and Animation with ActionScript
Your full code so far should re ad:
import fl.ik.*;
var arm0:IKArmature = IKManager.getArmatureAt(0);
var rt0:IKJoint = arm0.rootJoint;
var jt0:IKJoint = rt0.getChildAt(0).getChildAt(0).
¬ getChildAt(0);
var mover0:IKMover = new IKMover(jt0, jt0.position);
var fx1:Sound = new Sound();
fx1.load(new URLRequest("robotArm.mp3"));
var channel1:SoundChannel = new SoundChannel();
var fx2:Sound = new Sound();

fx2.load(new URLRequest("click.mp3"));
var channel2:SoundChannel = new SoundChannel();
var camera:Camera=Camera.getCamera();
var video:*;
if(camera! = null) {
video = new Video(160, 120);
video.attachCamera(camera);
addChild(video);
} else {
trace("There is no recognized camera connected to your
¬ computer.");
video = new AltVid();
addChild(video);
}
snapshot_btn.addEventListener(MouseEvent.CLICK, onSnapshot);
function onSnapshot(e:MouseEvent):void {
stage.addEventListener(Event.ENTER_FRAME, moveDown);
snapshot_btn.visible = false;
channel1 = fx1.play();
}
function moveDown(e:Event) {
if(jt0.position.y < 305) {
var pt0:Point = new Point(jt0.position.x + 5,
¬ jt0.position.y + 5);
mover0.moveTo(pt0);
} else {
channel1.stop();
channel2 = fx2.play();
channel1 = fx1.play();
stage.removeEventListener(Event.ENTER_FRAME, moveDown);

stage.addEventListener(Event.ENTER_FRAME, moveUp);
}
}
function moveUp(e:Event):void {
if(jt0.position.y > 165) {
ptg
ACTIONSCRIPT 3.0 FOR ADOBE FLASH PROFESSIONAL CS5 CLASSROOM IN A BOOK 281
var pt0:Point = new Point(jt0.position.x - 5,
¬ jt0.position.y - 5);
mover0.moveTo(pt0);
} else {
stage.removeEventListener(Event.ENTER_FRAME, moveUp);
snapshot_btn.visible = true;
channel1.stop();
}
}
4 Test your movie to see the re sults of thi s camera co de.
In the testing environment, you should see either a message telling you that no
video camera is connected to your machine (or that Flash is not recognizing
your camera) or a Flash Player Settings dialog box requesting access to the
camera that has been recognized.
About the camera and
microphone settings
If a SWF file contains ActionScript, like the getCamera() method you used in this
lesson, that requests access to a user’s camera or microphone, then the security that
is built into Flash Player will display a screen giving the user the option of permitting
or denying this access. As a developer, there is nothing you can do to override this
security, but you can write code that will inform your application as to whether or
not the user granted permission, so that you can then write alternative content in
case the user denies camera access.

ptg
282 LESSON 12 Delving Deeper into Graphics and Animation with ActionScript
5 Assuming you see the dialog box requesting access to your camera, click Allow
to grant Flash Player access to your camera. You should see the live video feed
in the upper-left corner of the Stage.
e live video camera reveals that the diligent author is sleep deprived and
needs a shave.
6 Close the lesson12_start.swf file to leave the testing environment.
You will doubtless think of many cre ative and fr uitf ul uses for the
Camera class
in your own projects. In this project, you will use the Take A Snapshot button
to create still images from the video feed. To do this, you’ll use some very robust
ActionScript classes for creating and manipulating bitmap images. After that, you’ll
use some new tools that ship with Flash CS5 to manipulate the snapshots.
Using the Bitmap and BitmapData classes
If you wish to create and manipulate bitmap graphics with ActionScript, you’ll
want to get to know the Bitmap and BitmapData classes well. In this lesson, you
will learn to use a few features of these classes.
e
BitmapData and Bitmap classes work together in a manner not unlike the way
the Camera and Video classes did in the previous section. Typically, a BitmapData
instance is used to store the pixel information for a bitmap image, and that data is
passed to an instance of the
Bitmap class to be displayed onstage.
A method of the BitmapData class called draw() lets you draw a bitmap copy of
any display object in Flash and display it in a Bitmap instance. You will use this
draw() method to take snapshots from the video feed.
First, however, you will create a new variable to store a bitmap image.
1 Near the top of the Actions panel for Frame 1, locate the line that reads:
var mover0:IKMover = new IKMover(jt0, jt0.position);

ptg
ACTIONSCRIPT 3.0 FOR ADOBE FLASH PROFESSIONAL CS5 CLASSROOM IN A BOOK 283
2 On a new line below this code, create a new variable with the data type Bitmap:
var bmp:Bitmap;
When the Take A Snapshot button has been clicked and the armature reaches its
bottom target, you have already set a “click” sound to play. It is at this point that a
snapshot should be taken and displayed. is functionality all belongs in the
else
portion of the moveDown() function. You will add this snapshot functionality now.
3 Locate the else statement of the moveDown() function in the Actions panel.
4 Below the line of code that reads:
channel1 = fx1.play();
insert the following code:
var bData:BitmapData = new BitmapData(camera.width, camera.
¬ height);
is line creates a new instance of the BitmapData class. e two parameters
are for the width and height of the new bitmap data; here, they are set to
match the size of the onstage camera feed.
Next, you will use the
draw() method of the BitmapData class to capture a still
from the camera feed.
5 On the line below the code that you added, insert the following:
bData.draw(video);
e parameter of the draw() method indicates which display object will be
drawn in the BitmapData instance. In this case, the video instance is being
drawn. As mentioned earlier, the BitmapData instance doesn’t display the
bitmap data; to do this, you create a Bitmap instance in the variable you set up
for this purpose.
6 On the line below the code you just added, type the following:
bmp = new Bitmap(bData);

addChild(bmp);
e new Bitmap instance takes the BitmapData instance as its parameter.
e subsequent line (addChild(bmp);) adds the new bitmap instance to the
display list and puts it onstage.
When elements are added to the Stage using
addChild(), they are given
the default position of the Stage’s upper-left corner (0,0). Since this is already the
location of the camera feed, you need to move the
Bitmap object.
7 Below the last line you added, type the following lines:
bmp.x = 220;
bmp.y = 20;
As you might surmise, this code shifts the object 220 pixels to the right and 20
pixels down.
ptg
284 LESSON 12 Delving Deeper into Graphics and Animation with ActionScript
Before you test the movie, scale the bitmap up a little by setting its scaleX and
scaleY properties.
8 Add this line below the last code you entered:
bmp.scaleX = bmp.scaleY = 2;
e full moveDown() function should now read:
function moveDown(e:Event) {
if(jt0.position.y < 305) {
var pt0:Point = new Point(jt0.position.x + 5,
¬ jt0.position.y + 5 );
mover0.moveTo(pt0);
} else {
channel1.stop();
channel2 = fx2.play();
channel1 = fx1.play();

var bData:BitmapData=new BitmapData(camera.width, camera.
¬ height);
bData.draw(video);
bmp = new Bitmap(bData);
addChild(bmp);
bmp.x = 220;
bmp.y = 20;
bmp.scaleX = bmp.scaleY=2;
stage.removeEventListener(Event.ENTER_FRAME, moveDown);
stage.addEventListener(Event.ENTER_FRAME, moveUp);
}
}
9 Test the movie.
After you click the Allow button to grant permission to access the camera, the
video feed should appear (if there is not a connected camera, then the AltVid
clip will play instead). When you click the Take A Snapshot button, the arm
lowers, and a still image of the current video image should appear on the right.
#
Note: Beyond
the basic methods
you’ve learned here,
the Bitmap and
BitmapData classes
contain many additional
methods and properties
that offer a wide range
of possibilities for code-
driven graphics.
ptg
ACTIONSCRIPT 3.0 FOR ADOBE FLASH PROFESSIONAL CS5 CLASSROOM IN A BOOK 285

Examining the Pixel Bender Toolkit
ere are already a lot of cool things going on in this project, but we’ll discuss one
final set of features that will take advantage of some tremendous creative possibili-
ties in Flash CS5. e
Shader classes in ActionScript 3.0 work with the Adobe
Pixel Bender technology to let you write your own image-manipulating filters and
apply them dynamically in your Flash projects. e Pixel Bender Toolkit lets you
write, test, and compile these filters. It is beyond the scope of this book to cover
these processes in detail, but it is worth taking a brief look at these tools to get a
feel for how they work.
When you install Flash CS5 on your machine with the default installer, the Pixel
Bender Toolkit is also installed. (If it is not, you can install it from the original
installation disc or download it from www.adobe.com.) On the Macintosh, this
application is located under Applications/Utilities/Adobe Utilities/Pixel Bender
To olkit . On Win dows, it is ty pically fou nd under /Prog ram Files/Adob e/Adobe
Utilities – CS5/Pixel Bender Toolkit 2. You can launch it in Windows by choosing
Start/Programs/Adobe/Adobe Utilities – CS5/Adobe Pixel Bender Toolkit 2. If you
do not find Pixel Bender in this location, try using the search tool in your operating
system or reinstall Pixel Bender Toolkit 2 from the disc that you originally used to
install Flash CS5.
1 Locate or install the Pixel Bender Toolkit application on your machine, and then
launch it.
e Pixel Bender Toolkit lets you create filters using a relatively easy-to-learn
language and save them to be used in Flash. It also lets you import, modify, and
test existing filters. ese operations provide a good way for you to get a sense
of how the Pixel Bender Toolkit works.
To work w ith the Pixel B ender Too lkit, you nee d to create or op en an existing
filter and load an image to test the filter. Start by loading an image.
2 In the Pixel Bender Toolkit, choose File > Load Image 1.
#

Note: In Flash, Pixel
Bender filters can be
applied to movie clips,
buttons, video, text
fields, or bitmap data
using ActionScript.
However, in the Pixel
Bender Toolkit, they can
be tested only on JPEG
and PNG files.
ptg
286 LESSON 12 Delving Deeper into Graphics and Animation with ActionScript
e Open Image File dialog box displays a default folder of sample images.
Select one of these, or navigate to select any JPEG or PNG image on your
computer. Click OK.
e next step is to load a filter.
3 Choose File > Open Filter.
Navigate to the Lessons > Lesson12 > filters4PixelBenderToolkit folder, select
twirl.pbk, and click Open.
4 Choose Build > Run to see this filter applied to your selected image.
When the filter runs, it is compiled and applied to the selected image. e
parameters for the loaded filter can be controlled using the sliders on the right.
#
Note: The twirl.pbk
filter is one of the
many filters that come
with the Pixel Bender
Toolkit; many more
are available online at
www.adobe.com and

other locations.
ptg
ACTIONSCRIPT 3.0 FOR ADOBE FLASH PROFESSIONAL CS5 CLASSROOM IN A BOOK 287
You can export these filters for use in Flash by cho osing File > Export Ker nel Filter
For Flash Player.
You will not need to do this right now, since you will be working with pre-create d
filters in this lesson, but digging deeper into the possibilities available with this
application via Flash Help and resources at Adobe.com would be time well spent.
For now, quit the Pixel Bender Toolkit and return to Flash, where you will use a
provided ActionScript file to add Pixel Bender capabilities to your lesson file.
ptg
288 LESSON 12 Delving Deeper into Graphics and Animation with ActionScript
Examining the PBFilter.as file
To help ke ep the Tim eline code in the lesson file from getting to o long , an external
ActionScript file has been provided that you will integrate into the lesson project to
let users select and use the Pixel Bender filter of their choice. It is beyond the scope
of this lesson to go through every line in the
PBFilters class, but it is worth taking
a look at the code in this file and noting a couple of significant points.
1 In Flash CS5, choose File > Open and navigate to the Lessons > Lesson12 >
Start folder.
2 Open the PBFilter.as file.
3 Notice lines 12 through 16. ese variable declarations indicate much of what
this class will do.
is file contains an instance of the
FileReference class. is class is used to
let users upload files to a server and browse locations on their hard drives. In
this project, it will allow users to choose the location of a Pixel Bender filter on
their computers.
Line 13 creates a variable to store an instance of the Shader class, which is used

to represent a Pixel Bender filter in ActionScript.
Line 14 references the
ShaderFilter class, which is used to apply a Pixel
Bender filter using ActionScript.
Notice that lines 15 and 16 create public variables called
filterValue and
filterName. ese variables are both set to public, so they can be referenced in
external files. You will work with both these variables soon in this lesson’s project.
4 Examine line 18.
Since this function (
PBFilter) has the same name as the file (PBFilter.as), it
is clearly the constructor function (see Lesson 4, “Creating ActionScript in
External Files,” for a review of constructor functions). Notice that this function
takes two parameters. e first has a data type of
Bitmap, and the second a data
type of Number. is means that when an instance of the class is created, it can
pass a bitmap reference and a number. You will use these parameters in your
Flash file to tell this class which bitmap image will receive the filter selected by
the code in this file. e numeric value will set an initial property of that filter.
ptg
ACTIONSCRIPT 3.0 FOR ADOBE FLASH PROFESSIONAL CS5 CLASSROOM IN A BOOK 289
5 Scroll down to line 35 and examine the onComplete() function.
Notice that this function is set to be public. is function will be called once
each time the user selects a filter to apply to an image, but it will also be called
from the
Slider instance in the lesson file to manipulate the filter’s parameters.
Since each Pixel Bender filter can have many parameters with various names,
this function looks to see if the selected filter has one of the most common
parameter names; if it does, it will let the user adjust that parameter. You will
work with the Slider component in the lesson file to give the user the capability

to adjust whichever of these parameters is available.
You may want to come back to this file and use it as a starting point for your own
experiments, but for now, close the PBFilter.as file. You will import it into your
project file for this lesson.
Working with the PBFilter class
ere are three interface elements on the Stage of the lesson12_start.fla file that
you have not yet used. ese will work with the PBFilter class you just examined
to add live filtering to the snapshots taken using this project.
1 If it’s not still open, reopen the Lessons > Lesson12 > Start > lesson12_start.fla file.
ptg
290 LESSON 12 Delving Deeper into Graphics and Animation with ActionScript
2 Select Frame 1 of the actions layer in the Timeline and make the Actions
panel visible.
You will so on b e working w ith the
Slider instance that is onstage. If you recall
from previous lessons, the SliderEvent class needs to be imported so you can
work with its events in ActionScript.
3 Below the first line of the Actions panel that reads:
import fl.ik.*;
insert an import statement for the SliderEvent class:
import fl.events.SliderEvent;
Now create a new variable that will be used to store an instance of the
PBFilter class you just examined.
4 Below the line that reads:
var bmp:Bitmap;
add the following code:
var filter:PBFilter;
Using the onstage interface elements to add filters
ree interface elements onstage give the user control over the application of
filters to snapshots. e filter_btn instance will be used to let the user select

a filter. e valueText field will be used to give the user textual feedback on the
filters. e fSlider instance will be used after the user has applied a filter to alter
a parameter of the filter.
Your users will not nee d to be able to place a filter on a snapshot until they have
actually taken a snapshot, so when the file first launches you will hide all three of
the interface elements; you will subsequently make them visible as needed.
1 On the line below the code you added in the previous step, insert these lines:
valueText.visible = false;
fSlider.visible = false;
filter_btn.visible = false;
e code you just added will make the text field, the slider, and the button
invisible when the project starts. Remember that snapshots are taken within the
else statement of the moveDown() function, so that is also the place where the
user will need to use the button and see the text field.
Insert code into this function to make the button and text field visible. You will
also insert text into the text field to instruct the user to select a filter.
2 Locate the
else statement of the moveDown() function, and below the line
that reads:
bmp.scaleX = bmp.scaleY = 2;
ptg
ACTIONSCRIPT 3.0 FOR ADOBE FLASH PROFESSIONAL CS5 CLASSROOM IN A BOOK 291
insert the following lines:
valueText.visible = true;
valueText.text = "\n" + "Choose a Filter";
filter_btn.visible = true;
fSlider.visible = false;
With this code in place, when a snapshot has been taken, the user will see the
button and the text that instructs the user to select a filter.
e full (and final)

moveDown() function should now read:
function moveDown(e:Event) {
if(jt0.position.y<305) {
var pt0:Point = new Point(jt0.position.x + 5,
¬ jt0.position.y + 5);
mover0.moveTo(pt0);
} else {
channel1.stop();
channel2 = fx2.play();
channel1 = fx1.play();
var bData:BitmapData = new BitmapData(camera.width, camera.
¬ height);
bData.draw(video);
bmp = new Bitmap(bData);
addChild(bmp);
bmp.x = 220;
bmp.y = 20;
bmp.scaleX = bmp.scaleY = 2;
valueText.visible = true;
valueText.text = "\n" + "Choose a Filter";
filter_btn.visible = true;
fSlider.visible = false;
stage.removeEventListener(Event.ENTER_FRAME, moveDown);
stage.addEventListener(Event.ENTER_FRAME, moveUp);
}
}
Adding a function to the filter_btn instance
e filter_btn instance will enable users to select a filter and apply it to the
snapshots they have taken. Most of the work to accomplish this will be done by an
instance of the

PBFilter class that will be created when the user clicks this button.
1 Below all the existing code in this file, add an event listener for filter_btn with
the following code:
filter_btn.addEventListener(MouseEvent.CLICK, onFilter);
ptg
292 LESSON 12 Delving Deeper into Graphics and Animation with ActionScript
2 Below the line you just typed, add the shell for the onFilter() function that
filter_btn will call:
function onFilter(e:MouseEvent):void {
}
e first thing this function will do is create a new instance of the PBFilter class.
3 Within the curly braces of the onFilter() function, add this line:
filter = new PBFilter(bmp, fSlider.value);
Recall that the constructor function of the PBFilter class takes two
parameters, the first being Bitmap. Here you send the function the onstage
bitmap (bmp) that contains the current snapshot. e second parameter that is
passed is the number currently stored as the value of fSlider.
When this filter_btn instance is clicked, the PBFilter instance opens a
dialog box that lets the user select a filter to apply to the current snapshot.
Next, you’ll add code to this function to enable the slider.
4 Below the line you just typed, add the following two lines:
fSlider.visible = true;
valueText.text = "\n" + "Choose a Value";
e first of these lines makes the slider visible. Now that a filter has been
selected, fSlider should be available to change its parameters.
e second line changes the text in the text field to instruct the user to choose a
value with the slider.
5 Test the movie. No tice that when the movi e launches , the button, text field, and
slider are not visible.
6 Click the Take A Snapshot button. When the snapshot appears, the Choose A

Filter button and text field become visible.
7 Click the Choose A Filter button. A dialog box opens to let you select a filter.
8 Browse to the Lessons > Lesson12 > filters4Flash folder and select one of the filters.
ptg
ACTIONSCRIPT 3.0 FOR ADOBE FLASH PROFESSIONAL CS5 CLASSROOM IN A BOOK 293
e filter you selected should be applied to your snapshot. Experiment with some
of the other filters in the filters4Flash folder. If you create your own Pixel Bender
filters or download filters from the web, they can also be used with this project.
9 Notice that even though the slider is now visible, moving it has no effect.
10 Close the lesson12_start.swf file to leave the testing environment.
e final step of this project is to program the
fSlider instance to manipulate a
filter parameter.
Manipulating a filter parameter with the Slider component
In previous lessons, you have used the Slider component a number of times. In those
lessons, you have used the CHANGE event of the SliderEvent class to make some-
thing happen when the user drags the slider. e CHANGE event fires only when the
user stops dragging, so it occurs only once for each drag. To get real-time updates for
a filter while the user drags
fSlider, you will use a different Slider event. is one is
called the THUMB_DRAG event (the little thingy that the user slides around is known as
the thumb), and it occurs repeatedly while the slider is being dragged.
1 Below all the existing code for this file, add an event listener for the
THUMB_DRAG event:
fSlider.addEventListener(SliderEvent.THUMB_DRAG, valueChange);
e valueChange() function communicates with the PBFilter instance to
change the values of the loaded filter.
2 Add the shell for this function:
function valueChange(e:SliderEvent):void {
}

Recall that the PBFilter class had a public property called filterValue.
Because that property is public, it can be set using the value of the slider.
3 Insert the following line between the curly braces of the
valueChange() function:
filter.filterValue = fSlider.value;
Now you’ll add code that changes the text in the valueText field to display the
name of the selected filter as well as the current value of fSlider.
4 On the next line, add the following code:
valueText.text = filter.filterName + " \n" + "Value: " +
¬ filter.filterValue;
e final step is to call the public function named onComplete() in the
PBFilter instance. Recall that this function scans a number of common filter
parameters, and if it finds one that is contained in the currently applied filter, it
will set that parameter value from the slider’s value. Most of the supplied filters
have a parameter that this function will recognize.
#
Note: Many
developers frown upon
the practice of allowing
properties in a class file
to be set from outside
the file. They deem
it desirable, in many
situations, to keep the
classes independent of
any other files, so they
can be more flexible in
their use. To accomplish
tasks like the one you’re
doing here, you could

use get and set
functions instead of
setting the class files
properties directly. This
is probably something
you don’t need to worry
about now, but you may
want to keep this in
mind for the future. For
more information, see
Colin Moock’s Essential
ActionScript 3.0.
ptg
294 LESSON 12 Delving Deeper into Graphics and Animation with ActionScript
5 On the line below the code you just entered, add this code:
filter.onComplete();
e final valueChange() function should read:
fSlider.addEventListener(SliderEvent.THUMB_DRAG, valueChange);
function valueChange(e:SliderEvent):void {
filter.filterValue = fSlider.value;
valueText.text = filter.filterName + " \n" + "Value: " +
¬ filter.filterValue;
filter.onComplete();
}
Here's the completed code for the entire file:
import fl.ik.*;
import fl.events.SliderEvent;
var arm0:IKArmature = IKManager.getArmatureAt(0);
var rt0:IKJoint = arm0.rootJoint;
var jt0:IKJoint = rt0.getChildAt(0).getChildAt(0).

¬ getChildAt(0);
var mover0:IKMover = new IKMover(jt0, jt0.position);
var bmp:Bitmap;
var filter:PBFilter;
valueText.visible=false;
fSlider.visible = false;
filter_btn.visible = false;
var fx1:Sound = new Sound();
fx1.load(new URLRequest("robotArm.mp3"));
var channel1:SoundChannel = new SoundChannel();
var fx2:Sound = new Sound();
fx2.load(new URLRequest("click.mp3"));
var channel2:SoundChannel = new SoundChannel();
var camera:Camera = Camera.getCamera();
var video:*;
if(camera != null) {
video=new Video(160, 120);
video.attachCamera(camera);
addChild(video);
} else {
trace("There is no recognized camera connected to your
¬ computer.");
video = new AltVid();
addChild(video);
}
snapshot_btn.addEventListener(MouseEvent.CLICK, onSnapshot);
function onSnapshot(e:MouseEvent):void {
stage.addEventListener(Event.ENTER_FRAME, moveDown);
ptg
ACTIONSCRIPT 3.0 FOR ADOBE FLASH PROFESSIONAL CS5 CLASSROOM IN A BOOK 295

snapshot_btn.visible = false;
channel1 = fx1.play();
}
function moveDown(e:Event) {
if(jt0.position.y < 305) {
var pt0:Point = new Point(jt0.position.x + 5,
¬ jt0.position.y + 5);
mover0.moveTo(pt0);
} else {
channel1.stop();
channel2 = fx2.play();
channel1 = fx1.play();
var bData:BitmapData = new BitmapData(camera.width, camera.
¬ height);
bData.draw(video);
bmp = new Bitmap(bData);
addChild(bmp);
bmp.x = 220;
bmp.y = 20;
bmp.scaleX = bmp.scaleY = 2;
valueText.visible = true;
valueText.text = "\n" + "Choose a Filter";
filter_btn.visible = true;
fSlider.visible = false;
stage.removeEventListener(Event.ENTER_FRAME, moveDown);
stage.addEventListener(Event.ENTER_FRAME, moveUp);
}
}
function moveUp(e:Event):void {
if(jt0.position.y > 165) {

var pt0:Point = new Point(jt0.position.x - 5,
¬ jt0.position.y - 5);
mover0.moveTo(pt0);
} else {
stage.removeEventListener(Event.ENTER_FRAME, moveUp);
snapshot_btn.visible = true;
channel1.stop();
}
}
filter_btn.addEventListener(MouseEvent.CLICK, onFilter);
function onFilter(e:MouseEvent):void {
filter = new PBFilter(bmp, fSlider.value);
fSlider.visible = true;
(code continues on next page)
ptg
296 LESSON 12 Delving Deeper into Graphics and Animation with ActionScript
valueText.text = "\n" + "Choose a Value";
}
fSlider.addEventListener(SliderEvent.THUMB_DRAG, valueChange);
function valueChange(e:SliderEvent):void {
filter.filterValue = fSlider.value;
valueText.text = filter.filterName + " \n" + "Value: " +
¬ filter.filterValue;
filter.onComplete();
}
6 Test the movie. G o through the pro cess of tak ing a snapshot and selec ting a
filter. When a filter is selected, the slider should appear, and if that filter has
one of the coded properties in the
onChange() function, you should be able to
perform live manipulations of that property of the filter.

Whew! If you made it successfully through this lesson, you are probably starting to
get comfortable with ActionScript 3.0. You’ve just covered a lot of very formidable
new material. Again, it is important to remember that almost all the classes used in
this lesson have many capabilities that were not even touched on. To make full use
of them, it is worth taking time to look up each class in Flash Help and see what
else it can do.
When you have time, experiment with the many topics introduced in this lesson, and
when you feel ready, try to work some of these features into your real-world projects.
Suggestions to try on your own
You could enhance the proje ct in this less on in an infinite numb er of ways. Here are
just a few:
t In a copy of the lesson project, try to alter the graphics in the library used in the
Armature layer.
ptg
ACTIONSCRIPT 3.0 FOR ADOBE FLASH PROFESSIONAL CS5 CLASSROOM IN A BOOK 297
t Make your own IK armatures with authoring (Timeline) animation and
integrate them into the project as design elements.
t Change the parameters of the moveTo() methods and experiment with runtime
IK animation.
t Set the jt0 variable to refer to different joints in the armature and check out the
resulting animations.
t Use the draw() method of the BitmapData instance to draw other display
objects in the file and then modify the lesson to add filters to those objects.
t Experiment with the Pixel Bender Toolkit. Try creating your own filters or
modifying existing ones. Load the filters into the lesson file.
ptg
298 LESSON 12 Delving Deeper into Graphics and Animation with ActionScript
Review questions
1 What step is necessary in the Flash interface to indicate that an IK armature will be
controlled with ActionScript?

2 What two IK classes are created automatically when an armature is created in Flash?
3 Describe the process in ActionScript of displaying the feed from a user’s video camera
on the Flash Stage.
4 Describe the process of creating a bitmap graphic in ActionScript that draws a copy of
another display object.
5 What application ships with Flash CS5 and allows you to program your own filters
for Flash?
6 What event can be used with the Slider component to perform live tracking as the user
moves a slider’s thumb?
Review answers
1 An IK armature that will be controlled by ActionScript must have its option in the
Properties panel set to Runtime.
2 When an IK Armature is created in the Flash authoring environment, an instance of
the
IKManager class and of the IKArmature class are created automatically.
3 To disp lay a feed f rom a camcorder or webcam, a n instance of the Camera class is
created in ActionScript that uses the getCamera() method to connect to a video
camera. An instance of the Video class is created to display the camera feed. e
Video instance is connected to the Camera instance using the attachCamera()
method of the Video class, and then the Video instance is placed onstage using an
addChild() method. Here’s an example:
var camera:Camera = Camera.getCamera();
var video = new Video(160, 120);
video.attachCamera(camera);
addChild(video);