The Flash Anthology: Cool Effects & Practical ActionScript - Chapter 1: Flash Essentials

Comparing Vectors and Bitmaps

During the early days of Web design, bandwidth was always an issue—the greater the page content, and the larger the number of images, the longer the wait for the page to render in the browser.

Long download times proved to be a big turn-off for many surfers. However, as the Web evolves and high-speed connections become more commonplace in homes and workplaces, less emphasis is placed on creating super-tight pages with ultra-skinny images. Of course, it's still best practice to write concise code, and make sure you images are as small as possible, in order to keep download times to a minimum. With Flash's vector-based graphics system, you can consistently generate Web-optimized images and create low bandwidth applications. The beauty of creating images within Flash is that when you zoom into the movie, you don't experience the loss of clarity or the pixellation that occurs with traditional bitmaps. This produces a crisper look and feel, as shown in Figure 1.1.

Figure 1.1. Compare bitmap and vector image file formats.

You can import traditional bitmaps into Flash, but these will obviously increase the size of the final movie. For example, if you compared a vector-based interface created within Flash to an interface built from multiple bitmaps and HTML, the Flash-developed interface file size would be dramatically lower, and the download speed significantly faster, than the bitmap-and-HTML version of the page.

Interactivity Unlimited

Flash uses an object-oriented programming language called ActionScript, which shares many themes and functions with JavaScript. As JavaScript is familiar to many Web designers, understanding the ActionScript syntax can be relatively easy. In fact, this is the case even for those without a programming background. Subsequent chapters provide a full explanation of how the application fits together, as well as the reasoning behind ActionScript code.

Designing interactive effects in Flash stumps many developers. They might have an idea of what they want to do, but they don't know how to do it, what can be scripted, or which effects require normal timeline interaction and tweening. The major advantage of creating scripted effects is that merely altering a few variables or the way a function is referenced can have a dramatic impact upon the final movie. Creating effects with traditional methods means altering the timeline, keyframes, and tweening, and can be quite daunting—especially when you're working with a large number of frames and layers. The techniques outlined in this book will involve scripted effects unless otherwise noted.

When a new user casts their eye over several lines of ActionScript, the typical response is a glazing over of the eyes. The sight of virtually any programming language can scare beginners away, but it's important to remember that ActionScript isn't difficult to understand; its learning curve is comparatively gentle. Events are triggered in three ways: buttons within the interface are clicked, certain conditions are met, or the playhead of the timeline reaches a certain frame.

While ActionScript can get very complicated, there are many ways to create quick, pleasing effects with minimal effort. Every line of ActionScript you create will help you understand further the intricacies of the language and how it can be modified to suit your needs. Every line you write will give you more confidence to undertake increasingly complex and rewarding projects.

With this in mind, let's move on to explore ActionScript's common terminology, the programming interface, and how it all fits together to create the effects you desire.
ActionScript Uncovered

ActionScript is an Object-Oriented Programming (OOP) language that interacts with a movie's objects and controls the movie's playhead. ActionScript is ECMA-262-compliant, which means it conforms to the international standard for JavaScript.

While we will examine many aspects of ActionScript, it's beyond the scope of this publication to cover every built-in function and object. The books listed below cover most of the extended functionality of JavaScript and ActionScript, and are invaluable references that should be a part of any Flash developer's library.

• ActionScript: The Definitive Guide (2nd Edition, O'Reilly)
• Professional JavaScript (2nd Edition, SAMS)

Throughout this book, I'll explain why we're using particular pieces of code; where appropriate, I'll also show how similar functions can be carried out by timeline manipulation, and why it's best practice to script them in most circumstances.

Here's a simple example that illustrates the benefits of ActionScripting and indicates how easy it is to manipulate parts of the ActionScript to alter the final outcome.

To animate an object's movement from point A to point B, you could create a movie clip of the object you want to move, create two key frames on the timeline, and tween between them to produce the movement. While this is a legitimate method for creating animation, you can instead script this process in a few lines of simple code.

Assume we have a movie clip named myMC. Adding the following ActionScript code to the main timeline moves the movie clip to the right if the horizontal position (_x) is less than 500:

myMC.onEnterFrame = function ()  
{  
 if (this._x < 500)  
 {  
   this._x++;  
 }  
};

Pretty simple, isn't it?

The good thing about scripting animation and other effects is that the scripts can be stored within your own script library (or a shared library), ready for inclusion in your Flash applications whenever you need them. Changing the scripts to suit your needs, rather than altering nested timelines, has obvious benefits in terms of your own productivity, and in helping you develop a reference library. To change the range of motion in the above example, we could simply alter the numeric value from 500 to some other value.

Let's take a quick look at some of the objectives ActionScript can accomplish, bearing in mind that these are just a few of its many uses. In later chapters, we'll cover many more, including some that may surprise you.

• Simple or complex animation effects
• Transitional effects
• Interactive user interfaces
• Menu systems that cannot be produced in any other medium
• Experimental mathematical effects
• Simple or complex interactive games
• Connection to databases or external files via a middle tier (ASP, ColdFusion, PHP, or Macromedia Data Connection Components)

ActionScript Dot Notation

ActionScript uses a special method to reference objects that appear on the stage and are embedded within movie clips and buttons. If you're familiar with JavaScript, you'll be at home with the ActionScript Dot Notation for referencing objects within your Flash movies. According to this notation, document.layer1.form1.checkbox1.value refers to the value of a checkbox within a form inside a layer contained in the current document.

If you're not familiar with this method of referencing objects, don't worry—it's as straightforward as falling off a bike. You'll soon pick it up!

There are three special keywords in ActionScript that can be used to address objects on the stage:

• this - refers to the actual object to which the script is attached (i.e. itself)
• _parent - refers to the movie clip that contains the object to which the script is attached
• _root - refers to the main Flash movie, which contains the entire hierarchy of objects

In this discussion, let's concentrate on _root. Say you create a Flash movie that contains a movie clip called Cloud, which in turn contains another movie clip called Water_Droplet_001. To find the alpha property value (opacity) of the Water_Droplet_001 clip, you could use the following ActionScript expression:

_root.Cloud.Water_Droplet_001._alpha

How does this code work? Have a look at Figure 1.2 below. Notice that the water droplets are contained within the cloud (i.e. they're children of the parent cloud). We reference a single water droplet—for the sake of simplicity, the first water droplet (water_droplet_001)—within that cloud. The reason we use the term _root before the object is to tell Flash to start looking from the very top of the movie hierarchy within the stage.

Figure 1.2. Understand the impact of the ActionScript dot notation.

Grabbing this value of the alpha property of the Water_Droplet_001 movie clip, and storing it in a variable named Water_Droplet_001_Alpha, is as simple as this:

Water_Droplet_001_Alpha = _root.Cloud.Water_Droplet_001._alpha;

Objects placed on the canvas can have many properties controllable both from within, and outside, the objects themselves—all of which adds to the fun of experimentation and learning.

Actions Panel Unraveled

Actions are pieces of ActionScript code that perform specified functions. Functions that are commonly used to create basic actions within Flash include:

getURL
Sends the browser to an HTML page you specify

stop
Stops the playhead of the timeline

play
Starts the playhead of the timeline

gotoAndPlay, gotoAndStop
Jumps the playhead of the timeline to either a labeled frame or frame number

These core ActionScript functions are among the most common you'll use to navigate to different parts of a movie. You may already have encountered them while dabbling in Flash 5 or later versions of the software. This really is just the tip of the iceberg when it comes to ActionScript. As you'll see later, it offers numerous ways to increase interaction and add special effects to your work.

ActionScript is added to the stage via the Actions Panel. If you've ever created a scripted animation, or any effects that use these basic methods, you will have seen the Actions Panel. In this book, it will be the single most important weapon in your arsenal, so let's go through it now to make sure you understand everything this tool places at your disposal. You can access the panel through Window > Development Panels > Actions, or by hitting F9.

Figure 1.3. The Actions Panel in Flash MX 2004 is your single most important weapon.

Figure 1.3 shows the Actions Panel with the following components indicated:

1. Add a new item to the script window


2. Find code


3. Find and replace (very useful)


4. Insert target path browser


5. Check syntax


6. Auto-format code (you can change formatting preferences from the Options menu)


7. Show code hint (when at a relevant point)


8. Options menu (useful in configuring code hinting, code colors etc.)


9. View options (line numbers, word wrap, Esc shortcut keys)


10. Debug options (see Chapter 9, Debugging)


11. ActionScript reference


12. Pin active script within Actions Panel


13. Actions toolbox


14. Script navigator


15. Script pane