Tải bản đầy đủ - 0 (trang)
Chapter 12:Introduction to ActionScript 3.0

Chapter 12:Introduction to ActionScript 3.0

Tải bản đầy đủ - 0trang

Getting

to Know

ActionScript

3.0



Getting to Know ActionScript 3.0

ActionScript is a serious programming language. As explained in the box below, folks

in cubicles use ActionScript to develop major programs—like ticket purchasing and

reservation systems. ActionScript incorporates geeky programming concepts like

variables, functions, parameters, and so on. Delve deep and you find the scripting

object model (the internal, Flash-designated names of all the parts of your animation). But none of that will stop you from using ActionScript for your own needs.

In fact, Flash has some great tools to ease you into programming, like the Actions

panel and Code Snippets introduced in this chapter. The visual nature of Flash

gives you instant feedback, letting you know when your script works and when it

doesn’t. Combine those features, and you’ve got a great way to dip your toe in the

programming waters. You can even apply the skills you gain with ActionScript to

other programming languages, including that web developer favorite, JavaScript.



In the News



ActionScript on the Desk, in the Phone

Believe it or not, now is an exciting time to learn ActionScript.

Not only is ActionScript the programming language Flash uses

to control animations, but it also lets you create lots of other

programs that run via the Internet, on a smartphone, or on your

desktop, just like your wordprocessor or spreadsheet. Adobe

is taking advantage of the fact that nearly every computer

on earth plays the SWF files that Flash creates. ActionScript

programs can sit on a website and run in people’s browsers. Adobe calls these programs rich Internet applications

(RIAs), and they’re at the forefront of a big wave in computer

software. Traditional (non-artist) programmers use Flex SDK

(now an Apache Open Source project) and Flash Builder to

create these RIAs.

It doesn’t end with the Internet. Flash Player is the little

unit that plays Flash movies on your computer desktop. The

pocket-protector set calls it a runtime program, since Flash

Player provides all the support needed to run programs in

a given computer operating system. There are Flash Players

for Windows, Mac, and Linux computers, making it a virtually

universal system. So if you create your program in Flash, it can

run just about anywhere. Adobe has expanded this universality



into a standard dubbed Adobe Integrated Runtime (AIR). AIR

combines several standards to produce desktop programs:

Flash, ActionScript, JavaScript, PDF (Adobe Acrobat), and HTML.

You can build AIR programs using Flash, Dreamweaver, Flash

Builder, and other tools. Depending on your program’s version,

it may require either an upgrade or an extension.

There’s icing on the AIR cake, too. You can build applications

for Android devices and Apple’s iOS devices. Yes, that means

you can use Flash to create apps for iPhone, iPad, and all sorts

of Android smartphones and tablets. You may remember all

the furor, gnashing of teeth, and blog space devoted to Apple’s

refusal to allow Flash Player on the iPhone, which meant web

pages that use Flash Player wouldn’t work on iPhones and

iPads. What hasn’t gotten as much press is the fact that Adobe

has done an end run around the issue. That’s right: With AIR,

Flash Pro now lets you create apps and turn the code into

the native language for iOS as well as Android. You can build

apps, test them on mobile devices, and sell them through the

Apple and Android app stores. The last few chapters in this

book get you started.



The Flash/ActionScript Partnership

ActionScript is a great name for a programming language. All computer programs

perform actions, but the cool thing about Flash and ActionScript is that those actions are so visible. You’re not just “assigning a value to a variable,” as you would



408



flash CS6: The Missing Manual



www.it-ebooks.info



in typical computer lingo—you’re making the moon move across the sky, or playing

a video clip, or turning up the volume of the music. ActionScript programming is

satisfying because many of the actions it performs are so apparent.



Getting

to Know

ActionScript

3.0



In the earliest versions, ActionScript was sort of tacked on to the Flash animation

machine, the way macro programming was added to early word processors and

spreadsheets. You used drop-down menus and dialog boxes to move parts of your

drawing around the stage. You could start and stop animations on specific frames

using familiar programming techniques like loops and conditionals (more on those

later). In short, you could create some pretty snazzy visual effects.

At first, programming and animation seemed a curious match, since artists and

programmers often seem to be such different people. But when you think about it,

programming and drawing are both creative activities. Just like the artist, a programmer needs imagination and a vision. And animation is a very programmatic visual

art, complete with reusable chunks of action that branch off into separate scenes.

Today, there are Flash artist/programmers responsible for both the artwork and the

programming code in their projects. There are also large teams producing Flash

projects where artists create the objects that the programmers animate.

 Note  In recent years, Adobe developed separate tools for Flash development teams. Flash Catalyst is a tool

for designers, while Flash Builder is a tool for programmer/developers. When you work in Flash Pro, you have

access to both sides of the coin.



Up to Speed



About ActionScript 1.0, 2.0, or 3.0

Today’s Adobe Flash Player can run programs written with any

version of ActionScript (1.0, 2.0, or 3.0), but it uses an entirely

different engine to run the ActionScript 3 programs. More

important, ActionScript 3 programs run faster. ActionScript 3.0

programs also work better with XML, a popular, nearly universal

way to store data, and with CSS (Cascading Style Sheets), used

to format web pages.

ActionScript 1.0 (2000). Flash 5 was the first version to introduce the term “ActionScript,” and for the first time, animators

could type in code like real programmers. Before that, Flash

kept track of commands chosen from drop-down menus and

dialog boxes.

The ActionScript language was based on ECMAScript, which

was a great move, since the popular JavaScript also has the

same roots. Web programmers who know JavaScript can easily

pick up ActionScript.

ActionScript 2.0 (2003). Flash MX 2004 introduced ActionScript

2.0 a few months prior to the date implied by its moniker.





A­ ctionScript 2.0 adopted additional object-oriented programming concepts, making it a better tool for larger projects and

projects developed by teams of programmers. Some concessions were made so that both ActionScript 1.0 and ActionScript

2.0 animations would run in the same Flash Player that was

installed on so many computers.

ActionScript 3.0 (2006). Adobe introduced ActionScript 3.0 with

Adobe Flex 2.0 (a programming system that makes use of the

Flash Player but doesn’t use the Flash Authoring program)—a

sure sign that the language had matured beyond a simple

macro language for controlling Flash animations. ActionScript

3.0 follows established object-oriented programming concepts

very closely, bringing benefits as well as changes from the

previous versions. Adobe Flash CS3 was the first version to

include ActionScript 3.0 as an option. With Flash Pro CS5.5,

Adobe added the ability to create apps for iOS and Android.

These apps are translated into the devices’ native language so

they do not require Flash Player.



Chapter 12: Introduction to ActionScript 3.0



www.it-ebooks.info



409



Getting

to Know

ActionScript

3.0



ActionScript 3.0

Each version of Flash has introduced new, more sophisticated features, like better

video handling à la YouTube. For example, Flash CS4 introduced a powerful new

­Motion Editor for creating and adjusting tweens. Flash CS5 introduced the Text

Layout Framework. All along, ActionScript has kept pace. (The box on page 409

details some of the history.) With ActionScript 3.0, Flash’s programming language

has matured quite a bit, adopting the latest and best programming concepts. As a

result, ActionScript is more powerful, more consistent, and a better tool for teambased projects. If you’re a lone artist/programmer, does that mean ActionScript 3.0

doesn’t have any benefits for you? Not at all. You’ll benefit from ActionScript 3.0’s

consistency and power. Tools like the Display List and the Event Listener system will

help you write better programs and keep your sanity in the process.



ActionScript vs. JavaScript and Other Languages

ActionScript and JavaScript have a lot in common. They’re both scripting languages,

meaning that they’re programming languages that run inside other programs. Specifically, ActionScript runs inside Flash Player, and JavaScript runs inside a web browser.

On top of that, ActionScript and JavaScript sprouted from the same programming

language specification, ECMA-262.

 Note  Since you’re just dying to know, ECMA stands for European Computer Manufacturers Association, the

standards group that established the spec.



Initially, programmers used both ActionScript and JavaScript in snippets to perform

quick and easy chores. For example, in ActionScript, you’d write something like the

following:

on (press) {

startDrag(this);

}



You would literally attach code to a drawn object on Flash’s stage. JavaScript uses

similar chunks of code to control the behavior of buttons and rollover images. However, JavaScript is often interspersed throughout the HTML code that describes web

pages. From a technical point of view, ActionScript and JavaScript are considered

high-level languages because they’re closer to human language than the 1’s and 0’s

of machine language.

As human nature kicked in and Flash animations became more elaborate, ActionScript

snippets got tucked in all over the place. As a result, if an animation didn’t work as

expected, it was hard to find the misbehaving code. It could be almost anywhere.

ActionScript writers started to use more disciplined programming techniques, and



410



flash CS6: The Missing Manual



www.it-ebooks.info



new versions of ActionScript encouraged better programming practices. The idea

of attaching ActionScript code to any old object became frowned upon. Instead,

programmers tried to keep all their code in one place, usually a single layer in the

timeline. At the same time, object-oriented programming was becoming more

popular and better-defined in programming circles, from the Visual Basic coders to

the C programming crowd. ActionScript added object-oriented concepts in version

2.0 and even more in ActionScript 3.0.



Getting

to Know

ActionScript

3.0



ActionScript 3.0 Spoken Here

The ActionScript chapters in this book focus entirely on ActionScript 3.0. If you’re

already versed in one of the earlier versions, you may be pleased to know that

Flash  CS6 still supports ActionScript 1.0 and 2.0, but you can’t mix code from

­ActionScript 3.0 with code from earlier versions in the same SWF file. The reason is

that the Flash Player now includes two completely separate virtual machines (the

software that interprets ActionScript code and turns it into actions). The original one

runs ActionScript versions 1.0 and 2.0. A completely new virtual machine handles

ActionScript 3.0 code, which tends to run faster.

Coders’ Clinic



Diving Deeper into ActionScript

This book introduces ActionScript 3.0 and covers many of the

common elements of ActionScript programming. The goal is

to make you comfortable writing ActionScript code so you

can use it to control your Flash animations. But don’t stop

there—experiment with ActionScript code and branch out from

the examples in this book. If you’re in the midst of a project

and have an ActionScript question, try Flash’s help (Help→Flash

Help). Click the ActionScript topic near the top of the page. That

jumps to a section of the page with ActionScript help topics. For

a compendium of geeky ActionScript details, click the link that

says “ActionScript 3.0 Reference” (middle Figure 12-1). At that

point, you see the ActionScript reference that provides details

on every single object, property and method. There are three

panels; click an item in the top left panel to see its details.

Then to fine tune your selection, click an item in the lower left



panel. The details are always shown in the large panel on the

right. If you do a lot of ActionScript 3.0 coding, this reference

is probably the one you’ll use the most. For more details on

setting up and using Flash’s help files, see page 770.

In an effort to get you up and programming quickly, this book

doesn’t cover everything you’d learn in an advanced computer

science course. There are great books that go into more detail

on ActionScript topics. Learning ActionScript 3.0 by Rich Shupe

and Zevan Rosser (O’Reilly) is a clearly written guide for beginners. For a more advanced reference, Essential ActionScript 3.0

by Colin Moock (O’Reilly) is ideal. If you’re an old hand with

ActionScript 2.0 and want to make the move to ActionScript

3.0, consider ActionScript 3.0 Quick Reference (O’Reilly) to ease

you through the transition.



 Tip 



If you’re interested in learning more about ActionScript 2.0, find a copy of Essential ActionScript 2.0 by

Colin Moock.







Chapter 12: Introduction to ActionScript 3.0



www.it-ebooks.info



411



Getting

to Know

ActionScript

3.0



If you’re new to ActionScript, no problem. As the language of the future, ­ActionScript 3

is the version to learn. If you’re an experienced ActionScript programmer, it’s worth

a little relearning to gain the advantages that ActionScript 3.0 gives you.



Figure 12-1



It takes a few steps to

reach the help reference

for ActionScript. Top: You

see this web page when

you choose Help→Help

in Flash. Click the ActionScript link (circled).

Middle: That displays several ActionScript-­related

items, including articles

and a reference. For the

best details, click ActionScript 3.0 Reference.

Bottom: Finally, you see

the help reference for the

ActionScript and all its

objects, properties and

methods. Use the panels

on the left to display

details in the main panel

on the right.



412



flash CS6: The Missing Manual



www.it-ebooks.info



Beginning Your ActionScript Project



Beginning

Your

ActionScript

Project



When your Flash project includes ActionScript programming, you have some decisions to make at the outset. As explained in the previous section, you need to decide

whether you’re using ActionScript 2.0 or ActionScript 3.0, since you can’t mix version

3.0 with earlier versions. The exercises in this book all use ActionScript 3.0, so that

fact alone may make your decision easier. Once you’ve decided, you choose the

type of Flash file you want to create in the intro screen or in the File→New dialog

box (Figure 12-2). If you choose one of the AIR options, you’re automatically creating

an ActionScript 3.0 document.

Coders’ Clinic



Timeline Programming: Pros and Cons

Ask more than one script writer where it’s best to place code—

the Flash timeline or an ActionScript file—and you’re likely to

start an energetic debate. If you plan on a long ActionScript

career, it’s worth learning both techniques.

Originally, ActionScript was considered a helper tool for animations. If you wanted the moon to rise at a certain point in an

animation, you’d attach a snippet of ActionScript code to the

moon or to a specific frame in an animation. Before you knew it,

you had bits and pieces of code tucked in every nook and cranny

of your timeline and Flash file. That situation is bad enough if

you’re the only one working on the project, but it was really

a problem for team projects. Eventually, it became a common

practice to keep one timeline layer devoted to ActionScript

code. That way, at least most code was in one place. In recent

years, the growing trend is to store ActionScript code in a

separate file, making it easier for teams to work on the same

project. Artists can work on the drawing in an .fla document,

and programmers can write code in .as documents.

If you’re working on a team project, chances are your team

leaders will tell you exactly where and how to add ActionScript

to the project. If you’re working on your own, you can choose

the method that’s best for you. In some cases, particularly

with smaller projects or projects that need to be hammered

out quickly, it may make perfect sense to attach code to the

Flash timeline. Here are more details about both methods:



Timeline programming is the way everyone used to write

ActionScript. You attach scripts to individual frames in the

Flash timeline. Quick and easy, this method gives a certain

amount of instant gratification. If you want to quickly test an

idea, the tendency is to attach some code to the timeline. The

problem is that you may end up with snippets of ActionScript

code in many different places, which makes it more difficult

to troubleshoot the code if something goes wrong. It’s even

worse if you (or someone else) return to a project years later

to make some changes.

ActionScript file programming is the preferred method for

large projects and true object-oriented programming. One

of the goals of object-oriented programming is to create

code that’s easily reusable. First of all, it has to be readable

and understandable. Second, the chunks of code have to be

somewhat independent. Placing all your code in a separate

.as file forces you to provide more thorough definitions of the

objects in your Flash project. As a result, you write more lines

of code, but there’s a better chance that you can reuse that

code for other projects. When teams of programmers work

on the same project, it’s much easier this way to update the

code and keep track of each updated version.

In the end, it comes down to the needs of your project and, if

you’re the project boss, your personal preference.



Next, you need to decide where you’re going to place your ActionScript code. You

have two choices. You can place your ActionScript code in frames in the Flash

timeline, or you can place your code in one or more separate ActionScript (.as) files:

• To place ActionScript code in the timeline of your Flash file, create a Flash document (.fla) by choosing File→New→ActionScript 3.0. You have a choice between





Chapter 12: Introduction to ActionScript 3.0



www.it-ebooks.info



413



Beginning

Your

ActionScript

Project



creating a Flash document based on ActionScript 2.0 or ActionScript 3.0. When

Flash creates a new .fla file, it includes information that (ultimately through the

.swf file) tells the Flash Player what flavor of ActionScript to use. You can use

timeline programming for smaller projects and when you’re not working with

a team of other programmers. Just remember that it’s more difficult to reuse

your ActionScript code if it’s embedded in a Flash document’s timeline.



Figure 12-2



When you create a Flash

file, you need to decide

between ActionScript 3.0 and

ActionScript 2.0. You can’t use

code from both in a single

Flash document (.fla). Use the

Intro splash screen (top) or the

File→New command (bottom)

to create a new document. If

you’re using a separate ActionScript document for your code,

then choose ActionScript File to

create an .as document.



414



flash CS6: The Missing Manual



www.it-ebooks.info



• To place ActionScript code in a separate ActionScript file, create an ActionScript

document (.as) by choosing File→New→ActionScript File. When you work with

teams of programmers and artists, it’s likely the team manager will tell you to

keep ActionScript code in a separate file. Even if you’re working alone, you may

want to keep code in a separate .as file so that your work can be reused with

other Flash projects. There’s a bit more programming overhead when you keep

your ActionScript code in a separate file. On the plus side, that overhead leads

to better object-oriented practices, making your code easier to reuse.



Beginning

Your

ActionScript

Project



For more details on making the choice between timeline programming and keeping

your code in a separate ActionScript file, see the box on page 413.

 Note  Most of the examples in this book use timeline programming to show ActionScript programming



principles.



Writing ActionScript Code in the Timeline

If you’ve got a Flash document open, you’re ready to begin adding ActionScript

code to the timeline. Here are the steps to get you started:

1. Create a new layer in the timeline to store your code.

To make your life easier later, keep your ActionScript code in one place—a single

layer at the top of the timeline that holds only ActionScript code. You can use

any name you want for this layer, but for clarity’s sake, call it actions or scripts.

2. Click a keyframe where you want to add your code, and then press F9

(Option-F9) to open the Actions panel.

The Actions panel is divided into three main parts, as shown in Figure 12-3. The

Script pane is where you type your ActionScript code. The Actions toolbox

holds a list of ActionScript objects, properties, methods, and events. The Script

navigator shows a list of objects that have ActionScript code attached.

3. Type your statements in the Script pane, or choose statements from the

­Actions toolbox.

You can type code directly into the Script pane, or you can double-click or drag

the ActionScript elements in the Actions toolbox. As you add code to individual

frames, you see them listed in the Script navigator (in the toolbox, located on

the left side of the Actions panel), giving you a running list of the objects that

have code attached. To view or edit code for a particular object, click the object

in the Script navigator, and you see the code in the Script pane.







Chapter 12: Introduction to ActionScript 3.0



www.it-ebooks.info



415



Beginning

Your

ActionScript

Project



 Tip  You can collapse and expand the Actions toolbox and its panels. If you don’t see the item you’re looking



for, click the rectangular buttons with the triangles to open and close the panels.



Actions toolbox



Script pane



Figure 12-3



The Actions panel has

three parts: the Script

pane, the Actions toolbox,

and the Script navigator.

In the Actions toolbox,

the circle-arrow icons

represent ActionScript

elements that can be

added to your script. Click

the book icons to expand

and collapse the different

ActionScript categories.



Script navigator



Using the Script Pane Toolbar

The toolbar above the Script pane provides helpful tools for working with your

ActionScript code (Figure 12-4). The buttons aren’t labeled, but you can see their

names when you mouse over them. From left to right, these are the buttons:



Debug options

Auto format

Insert a target path



Figure 12-4



Collapse selection

Apply block comment



Add a new item to the script



Remove comment



Find



Show/Hide Toolbox



Check syntax

Show code hint



Apply line comment

Expand all



Collapse between braces



416



flash CS6: The Missing Manual



www.it-ebooks.info



The buttons in the toolbar above the Script pane

may seem cryptic at first, but they’re worth investigating. Pause with your cursor over a button to

show a tooltip that explains its function.



• Add a new item to script. Provides access to the same elements as the Actions

toolbox. Useful if you’ve hidden the toolbox using the Show/Hide toolbox command (last in this list of buttons).



Beginning

Your

ActionScript

Project



• Find. Searches your script for words and characters.

• Insert a target path. Click this button, and then choose your target object from

a list, and this tool writes the proper code identifying it.

• Check syntax. Inspects your code for obvious errors.

• Auto format. Formats your script, making it easier to read, by using colors

and indents. To set formatting options, go to Edit→Preferences→ActionScript

(Flash→Preferences→ActionScript on a Mac).

 Tip  Some coders have reported that in some cases autoformatting has broken their otherwise serviceable

code. To avoid this, test your code before and after autoformatting. If you run into trouble, you can undo the

formatting.



• Show code hint. Displays tooltips with suggestions for your script.

• Debug options. Inserts and removes breakpoints in your code. Breakpoints

stop your program from running, giving you an opportunity to examine the

workings of your program.

• Collapse between braces. Hides the text between a set of curly braces {},

making it easier to read and understand your code. Similar to collapsing an

outline in a word processor.

• Collapse selection. Select the text you want to hide, and then click this button

to hide it. Hold down the Alt (Option) key when you click this button, and the

Actions panel collapses the code not selected.

• Expand all. Expands collapsed portions of your script after you’ve used one of

the two previous commands.

• Apply block comment. Inserts the /* and */ used to create a block comment.

• Apply line comment. Inserts the // used to create a line comment.

• Remove comment. Removes the comment characters from a comment.

• Show/Hide toolbox. If you need more room to see your Script pane, use this

button to hide the Actions toolbox. When the toolbox is hidden, you can use

the “Add a new item to script” button to insert elements.

 Tip  If you need more room to see your script, use the “Show/Hide toolbox” button on the far right to tem-



porarily hide the Actions toolbox. When the toolbox is hidden, you can use the “Add a new item to script” button

(far left) to insert ActionScript elements.







Chapter 12: Introduction to ActionScript 3.0



www.it-ebooks.info



417



Beginning

Your

ActionScript

Project



Writing Code in an ActionScript File

When you want to store all your code in an ActionScript (.as) file, the first thing you

need to do is create the file:

1. Create a new ActionScript file (File→New→ActionScript File).

A new window opens, as shown in Figure 12-5. Initially, the window has a tab

that reads Script-1 or something similar. When you save the ActionScript file

with a name of your choice, that name appears on the tab. The Script window

has two sections, a Script pane and the Actions toolbox. The toolbar above the

Script pane is identical to the one described on page 416.



Tab showing script filename



Script pane



Figure 12-5



The Script window used to write code

in an ActionScript (.as) file looks very

similar to the Actions panel of a Flash

document. There’s no Script navigator,

because the ActionScript code is linked

to particular objects by statements

within the code itself.



Actions toolbox



2. Save your ActionScript file in the same directory as your Flash file

(File→Save).

A dialog box opens where you can select a folder and then name your document.

You want to save your file in the same directory as your Flash file. This way,

Flash’s compiler can find it when it creates an .swf file for distribution. Another

option is to save your file in a folder that’s designated as the ActionScript class

folder; the steps for doing so are described in the box on page 419.

3. Type your statements in the Script pane or choose statements from the

­Actions toolbox.

You can type code directly into the Script pane, or you can double-click or drag

the ActionScript elements in the Actions toolbox.



418



flash CS6: The Missing Manual



www.it-ebooks.info



Tài liệu bạn tìm kiếm đã sẵn sàng tải về

Chapter 12:Introduction to ActionScript 3.0

Tải bản đầy đủ ngay(0 tr)

×
x