Take your animation to the next level with space and depth. Create fluid camera swoops while keeping your animation workflow simple and intuitive. Make it come alive and take your viewers along for the journey with industry-leading, intuitive 3D animation software. With efficient design, tweening. The.swf file, the exported Flash object that plays in the Flash player in your browser, has been my friend for a long time. Indeed, I’ve been using Flash for my web e-learning projects since 2009. That was Flash version 3.0. No doubt, I love Flash.
- Create Flash Objects Pictures
- Flash Objects Free
- Shockwave Flash Object Update
- Create Flash Objects Games
- Flash Object Download
The educational technology and digital learning wiki
Jump to: navigation, search
This article or chapter is incomplete and its contents need further attention.Some information may be missing or may be wrong, spelling and grammar may have to be improved, use your judgment!
- 2Setting up the stage
- 4Some definitions
- 5The main tools panel
- 5.2List of standard tools
- 6Option controls and tools configuration
- 7Painting simple objects
1 Introduction
- Learning goals
- Learn about some features of the Flash CS3 drawing environment
- Learn painting and drawing simple (!) objects
- Prerequisites
- Flash CS3 desktop tutorial or Flash CS4 desktop tutorial
- Flash layers tutorial (first part)
- Related pages
- texture and clipart (import media elements)
- Materials (*.fla files you can play with)
- http://tecfa.unige.ch/guides/flash/ex/drawing-intro/
- Quality and level
- This text should technical people get going. It's probably not good enough for beginners, but may be used as handout in 'hands-on' class. That is what Daniel K. Schneider made it for. Screen captures were made with CS3, but the overall logic is the same for CS4 and CS5.
- Next steps
- More about drawing: Flash object transform tutorial and Flash arranging objects tutorial
- Any other introductory tutorial indexed in the Flash article.
- Alternative
2 Setting up the stage
Besides choosing the right settings for publication (Flash version) with which we shall not deal here, you should select the right size for your your stage, i.e. the size of your future flash document. You can do this either when you create a new file or later.
2.1 Defining document size
- Creating a new document
Flash lets you create a new document from various templates: File->New. Then choose from General or Templates.
These templates either just define the size of your stage or load 'half-baked' interactive applications that you will have to clip. Ignore the latter for now ...
- Size of the stage
- Version of Flash (e.g. Actionscript 2 or 3 or AIR for desktop/mobile phone applications)
- The Media Playback templates contain for example tools to make a slideshow.
Anyhow, for learning about Flash's drawing feature, don't worry about the template to choose from. Just make sure that you have enough space to draw. If an initial size turns out to be too small or too big, you simply can modify the document's size (see next).
- Modification of a document
With Modify->Document (or by clicking on an empty spot in the stage and then changing the properties) you can:
- Redefine the size of the stage.
- Change the background color
- Give it a title and a short description
2.2 What size for a Flash document ?
Size of your Flash document depends on its purpose. Since Flash documents (unlike well made HTML pages) have a fixed size, you must find a good compromise between readability (users should be able to read and distinguish all elements) and the horizontal/vertical space you flash clip will use.
- Larger flash documents
A default documents takes up 550x400px. This makes the document viewable without scrolling on a computer with a bad screen resolution of 800x600px. Do not forget that a screen also contains a tools bar (in most Operating systems) and that Flash is usually viewed within a web browser that also contains menu bars, a bottom bar and some pixels to the left and right.
Anyhow, most people today have bigger screen resolutions so you certainly can go bigger than 550x400.
- Banners and other embedded items
Advice depends on their purpose. Think hard about your potential target population (small screens, big screens, mobile phones, etc.)
3 Configuration of the drawing environment
Firstly you should know that drawing tools exist in two forms:
- Drawing tools in the main tools panel (that appears by default on top left of the desktop if you selected the 'designer' configuration)
- Tools available through various panels
Below is a screenshot I made from a simple drawing using the oval tool and the pencil tool.
- You can see that the properties panel (left) will display properties of the object that is selected or being drawn. E.g. when you use the pencil, it will display color of the stroke, size of the stroke, type of the line, fill color, etc.
- The same is true for the color panel that we display in the lower right.
The Flash CS6 drawing environment (designer workspace)
Since these panels give you shortcut access to features of objects you are drawing, it's a good idea to keep them open while you draw.
4 Some definitions
4.1 Strokes vs. fills
- When you draw something with a pencil tool or another drawing tool like the pen or the line tool, then the lines you draw are called strokes.
- Wen you crate graphics with the rectangle , oval, etc. tools you will by default both get strokes and fills. The insides of these drawing objects are fills and the outlines are strokes, i.e. both have various forms of color. You may choose to remove either stroke or fill (using the no color icon in a color selection tool.
- When you use the paint tool, then you create fills (not strokes).
4.2 Colors
There are several types of colors:
- None: You may choose to draw without fill or stroke
- Solid: Standard colors
- Linear: Gradient color changes that go from one side to another
- Radial: Gradient color changes that goes from inside out
- Bitmap: You can paint with an imported bitmap. This is particular useful with textures. E.g. to draw floors, walls or outdoors scenes with repetitive tiles.
To select a color type, there is a pull-down menu in the color panel.
- Read the Flash colors tutorial if you want to know more colors and gradients ...
5 The main tools panel
The main tools panel contains the major drawing tools. We suggest to leave this panel docked in the upper left side (since it's frequently used). But depending on your screen size, you can display it either grouped (as shown) or as a long column (try the 'essentials' workspace layout).
The main tools panel organizes tools by different categories:
- First, selection and transformation tools
- Next Drawing tools (annotations in red)
- Next, color manipulation, eraser etc,.
- Next color selection
- Finally, options (these change according to the tool that you select)
Options change according to tool that is selected. E.g. in the screen capture to the left you can see how the tools panels shows with the selection tool (left) and the brush tool (right).
Some tools are piled on top of each other, i.e. there are variants of a similar kind. In this case you can see a little down arrow in the icon. To see variants you must press the left mouse for a while or Shift-click. E.g. instead of the Oval tool you could for example display/access the Rectangle tool.
5.1 Merge (shape) vs. object drawing
Flash has two drawing models:
- The merge model will erase shapes below something you draw (but not graphic objects as defined next)
- The object drawing model draws shapes as separate objects (that you later can manipulate like in a typical vector graphics program).
Usually, you rather should work with the object model since the shape of each object can be easily modified later on. However the merge model can be used to draw complex shapes, e.g. you can draw a circle and then carve off things by drawing over it. The merge mode is also useful when you 'paint' things (as opposed to drawing). You later can convert 'paintings' to objects of course.
By default, the object model may be turned off, so turn it on by clicking on the Object drawing button. You can find in the options section of the tools panel after clicking on some drawing tool (e.g. the Pencil). You can see if it's on when there is a rectangle drawn around the button, like this:
You can see the difference between the 2 kinds of objects created in the Properties Panel:
- Objects are called Drawing Objects
- Simple drawings (from the merge model) are called Shapes.
The behavior of tools changes according to mode used and it's not so obvious to remember what Flash does.
- In merge mode
- In merge mode, when you draw a shape over another shape, it erases the shape underneath by default. You can change this with the control options (see later)
- When you draw another object (line, pencil, etc.) it will draw over the painting, but not erase it.
- In object mode
- Shapes drawn in object mode with the brush tool are drawn either within, on top or behind objects depending on how to set the controls of the brush tool.
- Shapes drawn in object mode with the pencil, the pen tool etc. are drawn on top of other objects. But in the object mode they can be moved behind with the right-click->Arrange context menu.
If you already tried to draw more complex shapes, you noticed that it is difficult to work with a single layer (e.g. to select objects), so you now have to learn how to work with layers.
- If you are not familiar with layers, please read the Flash layers tutorial now.
- Conversions
- To convert an object (instance) into its original components : Right click->Break apart
- To convert some shapes into a drawing object: Select them first (e.g. with the Lasso), then select Menubar Modify->Combine Objects->Union
- To convert some shapes into a symbol, Right-click; Convert to Symbol
5.2 List of standard tools
Also see the figure 'Items of the Flash CS3 tools panel' above in order to identify the corresponding icons in the tools panel. Some tools are stacked on top of each other. Hold down the mouse button for while to see the hidden ones.
5.2.1 Selection tool
The selection tool () lets you select elements (shapes, strokes, fills, symbols, bitmaps) in the work area by clicking on it (simple click). If you wish to select several objects together hold down the SHIFT key or use a the lasso or a selection box (click then drag the mouse).
Advanced uses:
- Double-clicking would put you into object editing mode for various parts (depending on where you click). To return from this mode (which we will not explain here), double-click in some empty area in the workspace.
- This tool also can act as a distortion tool ! See the Flash object transform tutorial. If no object is selected (e.g. click on an empty spot in the workspace), then you can use this tool to distort shapes. Move it close to an edge or a corner and pull as soon as the cursor changes. Always make sure that you see a big 'cross-hair' cursor before you start moving around anything.
5.2.2 Subselection tool
The subselection tool () allows you to select paths of an object so that you can make more sophisticated modifications. Click on the outlines of objects. You then can drag around the little squares and dots that will appear, i.e. modify portions of shapes. See the Flash object transform tutorial for details.
If you want to modify a symbol (in the properties panel you can see something like 'Instance-of') you have to break it apart: Right-click->Break Apart.
5.2.3 Free Transform and Gradient Transform tools
The Free Transform tool () will allow you to make several kinds of transformations.When you select an object with this tool and then move the mouse over different spots, you will that the mouse cursor changes shapes. Each one will allow you do different transformations:
- Scale an object: double-ended arrow
- Rotate an object: circle arrow
- Skew (distort an object): double ended double arrow
To do a proportional scale, hold down the SHIFT key and then drag a corner.
There are more options to the free transform tool, e.g. so-called envelope transform, see the Flash object transform tutorial if your are curious about this.
The Gradient Transform tool () is hidden below the free transform tool (by default) and allows you to change the ways in which color gradients flow.Hold down the mouse for a while and then change the tool. See the Flash colors tutorial.
5.2.4 Lasso tool
With the lasso tool ( you can select several objects or parts of a shape.
This tool also includes a 'magic wand' mode (see the optional controls) and a polygone lasso ( that allows selection by clicking on several spots.
If you want to edit parts of a shape, either double-click on the object until it becomes a shape or break it apart (right-click menu).
5.2.5 Pen tool
Create Flash Objects Pictures
The pen tool () allows you to make the most complex drawings, i.e. defining paths using so-called Bezier curves. Do not confuse this with the more simple pencil tool.
See the Flash pen tutorial (currently unfinished ...)
5.2.6 Text tool
Add text.
In the properties panel you may define various text properties such as fonts, color and positioning, alignment, etc. If you click on the paragraph symbol, you can define indent, line spacing and margins.
5.2.7 Line tool
The line tool () allows drawing simple lines (no surprise here ...)
5.2.8 Rectangle and other tools
On the same spot of the tools panel you got several tools. By default you will see the rectangle tool. To select another tool: hold the left mouse button down for while and then select the one you want.
- Rectangle tool (by default): Draw simple rectangles. In the parameter's panel you can define strokes and filling properties.
- Rectangle primitive tool: Lets you define additional properties like rounded corners
- Oval tool: Draw ovals
- Oval primitive tool: Define in addition other features, such as start/end angle, inner radius etc.
- Polystar tool: Define polygons and stars (there is a small pull-down menu in the properties panel that you should not overlook !)
Below you can see a few drawings. The screen capture has been taken with the Polystar tool activated.
Various drawings with the rectangle, oval, polystar tools (CS3, same principle)
5.2.9 Pencil tool
With the Pencil tool you make drawings like with a Pen. However, there is optional support to draw straight or smooth lines since drawing with a mouse isn't very obvious. You can define various options.
- 'Line' drawing Options
In the options section you can select different ways of drawing support. I.e. the the straight icon looks like this: .Below is a screen-dump that demonstrates the difference between straight, freehand and smooth drawing.
The three pencil drawing modes (CS3, same principle)
- Stroke, color and line properties.
In the properties panel you can define various options like stroke (pen) color, fill color, various dashes or not, and how the end of lines should look.
5.2.10 Brush tool
The paint brush tool lets you paint, i.e. create shapes () made of simple fills. There are several special effects and several modes.
- Object or merge mode
- In merge mode you only can paint fills
- In object mode you can add a stroke to your painting (by default it is off). Look at the properties panel.
- The Brush Mode
With the 'Brush Mode' in the options section (not the properties panel) you can select the paint mode. Make sure to understand these and to verify that the wanted mode is on, else you likely run into frustrations ...
- Paint Normal: paints over lines and fills on the same layer. Like painting with a 'heavy' paint.
- Paint Fills: Fills empty areas leaving lines unaffected.
- Paint Behind: Paints in blank areas of the Stage on the same layer, leaving lines and fills unaffected (this may be be default, I am not sure).
- Paint Selection: Applies a new fill to a selection. Therefore, before you start painting select a fill color first, then select the object with the selection tool, then paint. This is the quickest way to color drawings.
- Paint Inside: Fills the area within a 'fill' (i.e. where you start paining) and does not overpaint lines. If you start painting in an empty area outside a fill, painting will not affect existing filled areas.
- Selection of brushes and size
Choose from the options in the options section ....
5.2.11 Ink Bottle tool
This tool allows you to apply color changes to the strokes of drawings.
- Select the ink bottle
- Then select either a Stroke color (and/or a Fill Color if the object is a graphic) from controls in the main tools panel. If want to make more sophisticated changes (e.g. apply a gradient) do this through the color panel.
- The click on objects you want to change.
You also can change the color of a fill or stroke through the properties panel or the color panels, but make sure to select the object(s) you want to change first.
5.2.12 Paint bucket tool
The paint bucket tool works like the ink bottle tool. It has two purposes:
- Change colors of simple shapes (primitive drawings). Tip you can change the color of strokes by editing (double-click)
- Change color of fills (inside of a graphics object)
- Fill in empty areas (insides of drawings made with the pencil for example)
Procedure
- First, deselect everything
- Next, click on the paint bucket tool
- Select fill color (and style)
- Click on shape or fill (inside shape of a graphic object)
Filling a closed graphic with paint
Of course, you also could change paint of shapes and object by first selecting the thing in the stage, and then by making changes in the properties or the colors panels.
Tips:
- If you can't select a fill color, then try to click on the black and white icon and then set the colors again. I don't know if that is a bug or a feature ....
- If you want to fill an area that is not entirely closed, you can do so by modifying the gap size by changing the 'Gap size' control in the tool panel options. E.g. choose 'Close medium gaps'. Then click again on the shape or inside the area you want to fill
- If the paint bucket 'won't work' on the 'insides' of a complex drawing then:
- Make sure that the area is closed (no gaps between the enclosing strokes or shapes)
- Also try making the area you want to fill into a single drawing: menu Modify->Combine Objects->Union
5.2.13 Eyedropper tool
You can select a color from some spot on the workarea.The tool will then automatically change to the paint bucket tool (see above).
5.2.14 Erasor tool
Erase stuff. See the Flash object transform tutorial for details.
6 Option controls and tools configuration
Some option tools are always displayed, some only for certain tools.
6.1 Hand tool
- Move the stage around (useful for big drawings/small screens or with a strong zoom)
6.2 Zoom tool
- Zoom in/out
6.3 Pen color
- Select the pen (stroke) color
6.4 Fill color
- Select the fill color
6.5 Swap color
- Change fill color to stroke color
6.6 Configuration of the Tools panel
The Tools panel can be configured via Edit->Customize Tools Panel (but for now I suggest not to change anything there).
6.7 Configuration of drawing settings
Select Edit->Preferences and then change parameters in the section Drawing. (no need to do this now). Basically you can modify how Flash helps you drawing objects (e.g. connected lines, vertical/horizontal) and how it identifies objects when you click on them.
7 Painting simple objects
In this chapter we will show how to make a complete (but simple!) drawing. Disclaimer: Daniel K. Schneider doesn't even remotely feel to be graphics designer.If you are not familiar with layers, you now really should have a look at the Flash layers tutorial
Firstly, you can find lots of free clipart (drawings) on the Internet. As a principle it is a better idea to search for vector graphics as opposed to bitmaps and for three reasons:
- Vector graphics are smaller
- They can be re-edited
- They adjust nicely to size. A smaller or bigger version still looks as good as the original.
To find vector objects you can for instance type in Google 'free clipart download' or see the links in the clipart article (finding good and free clipart on the web is not easy).
Most often, clipart is distributed in *.wmf format (Windows Meta File format). Flash can handle this format. It also can handle Illustrator *.ai format, Enhanced Windows Metafile *.emf, Freehand, Flash *.swf, and Autocad *.dxf. It can not handle SVG (but you can open SVG files with Illustrater and then copy/paste).
You also can import a series of bitmap formats like the 'standard' *.png, *.jpg, *.gif, but also Photoshop *.psd and a variety of Quicktime formats if it is installed on your computer.
7.1 Drawing fuzzy objects
An apple tree drawn in merge mode
The basic principles for paint-challenged people like me is the following:
- Create a new layer. It is usually a good policy to create a new layer for each drawing. Do not worry about size and position at this stage, since you can later move the drawing around and resize it.
- Zoom in (like 200%), e.g. with View->Magnification
- Select merge mode from the Object Drawing tool and set the brush tool to overpaint.
- Keep the painting as simple as possible
- Use large Pencils or brushes for starters, then small ones to work on borders if needed.
- Use the eraser to trim off strokes that went too far
- Draw stuff that will go to the background first and then overpaint
E.g. To the right is a simple apple tree with a green snake (I later erased).
7.2 Drawing animals and such
A really ugly cat drawn mostly in object mode
- Find a recipe to draw these, e.g. on Google type: 'how to draw a cat'
- Then reproduce if you can ;)
- Rather use object mode and disable stroke since these models often ask you to overlay ovals. Without stroke you may overlay various geometric shapes of the same color.
E.g. here is a cat made as explained in Creature Features.
Alternatively you also can first draw the object with the pencil tool (or the pen tool) and then use the Paint Selection or Paint inside mode of the brush tool to apply colors.
Of course in the same drawings you can mix pencil, pre-built objects like rectangles and paint. E.g. draw the outline of house with the pencil and then draw the roof with the paint tool.
7.3 Save each object as symbol
Once you are happy with a drawing, you should convert it to a (reusable graphic symbol): Right-click->Convert to Symbol; Graphic. E.g. call it 'cat'.You then can remove the layer you used to draw this object, since the raw drawing is no longer needed.
convert a select object to a symbol
Once you have it in the library you can use several times, in various sizes and distortions. You also can copy the object and e.g. make a new one with different colors ...If you are unhappy with the results (as I ought to be), you can just break a graphic apart and restart again...
When you insert a library object into stage you can make it smaller.Drag it from your library into the stage (but onto another layer) and thenselect the Free Transform tool; Press Shift (proportional reduction) and make it as small (or big) as you like.
7.4 Importing clipart
Flash can handle various vector formats and even better: you can modify these within Flash. However, most free clip art is in the SVG format and that cannot be directly imported to Flash (Shame on adobe !)
To import:
- File->Import->Import to Stage or alternatively Import to Library
- If you import it to the stage and like it, then save it to the library with Right-click->Convert to Symbol; Graphic as explained above.
A cat from www.free-clip-art.com. Copyright: Personal and educational use
E.g. here is a cat I imported from Free Clip Art. This site has free clipart images for personal use. You can use them for school, fun, non-profit Web sites, and other personal needs.
- Using SVG Clipart
- Get one from http://www.openclipart.org/
- Display the SVG image in your browser, then just File->Save As the SVG page
- Open the SVG in Adobe Illustrator
- Select All
- Copy
- Paste to Flash (using default settings)
- Use directly ALT-CTL-S to resize.
Read more in Clipart
7.5 Adding background and Sky
I suggest to draw background stuff with a new layerYou can do this beforehand or after. In order to see either background or objects you can put all other layers in 'outline mode'.Click on rectangles near each layer or on the rectangle on top.
- First of all you can change the background of the stage: Modify->Document; then change the background color.
- If the layer with your background drawings (e.g. sky) is drawn over the objects instead of the other way round, just move this layer (either to the top or to the bottom depending on your settings).
7.6 A result (sort of)
Here is the result of a three times two trees, two of my cats, an imported cat and a little house.
7.7 Using textures
Of course, you may find the grass to be too ugly. A good solution might be to replace a background color with textures. Search on the web for 'free textures grass' and save the file (usually a *.jpg).
You should be aware that there are textures and textures meant to be tiled. Simple pictures (if smaller than the stage) will produce tiles that you can see (not exactly what you want). So instead you can search for something 'free tileable grass textures'. If you can't find good tiles, you may learn howto do this with this Photoshop from DadyyCool.
- You then can resize the image if it is too big and/or crop it.
- After that, deselect all objects (click in the gray area) or select the object you want to paint.
- Then open the color panel and select type: Bitmap from the pulldown menu. Import the bitmap and select it (you also will find a copy of the bitmap in your library).
- Then paint the outline of your textured area with the brush tool (in the 'Paint behind mode' (see brush tool above)
- Then fill the rest with the paint bucket.
- You can change the way textures are applied with the free transform tool (see Flash colors tutorial).
This result is not exactly better, but it's different and you can see that you can draw with bitmaps :). Of course one now also should repaint the house and the trees. I also rotated the gradient for the sky by the way.
Of course, one can do better graphics and colors. See more advanced Flash tutorials on drawing, e.g. the Flash object transform tutorial, the Flash arranging objects tutorial or the Flash colors tutorial
7.8 Files to download
You can download the *.fla files here:
- http://tecfa.unige.ch/guides/flash/ex/drawing-intro/
- flash-cs3-drawing-trees.fla is the one with a simple background
- flash-cs3-drawing-trees3.fla uses gradients and drawings outside the stage are clipped away (so it's a clean version of the above and I will use this one in the Flash motion tweening tutorial).
- flash-cs3-drawing-trees2.fla is the one with the textures.
Retrieved from 'http://edutechwiki.unige.ch/mediawiki/index.php?title=Flash_drawing_tutorial&oldid=59849'
ActionScript is what’s known as an object-oriented programming language. Object-oriented programming is simply an approach to programming. It’s really nothing more than a way to organize the code in a program, using objects.
Earlier the term “computer program” was defined as a series of steps or instructions that the computer performs. Conceptually, then, you can imagine a computer program as just a single long list of instructions. However, in object-oriented programming, the program instructions are divided among different objects. The code is grouped into chunks of functionality, so related types of functionality or related pieces of information are grouped in one container.
Adobe Flash Professional
If you’ve worked with symbols in Flash Professional, you’re already used to working with objects. Imagine you’ve defined a movie clip symbol such as a drawing of a rectangle and you’ve placed a copy of it on the Stage. That movie clip symbol is also (literally) an object in ActionScript; it’s an instance of the MovieClip class.
There are various characteristics of the movie clip that you can modify. When it’s selected you can change values in the Property inspector like its x coordinate or its width. You can also make various color adjustments like changing its alpha (transparency) or applying a drop-shadow filter to it. Other Flash Professional tools let you make more changes, like using the Free Transform tool to rotate the rectangle. All of these ways that you can modify a movie clip symbol in Flash Professional are also available in ActionScript. You modify the movie clip in ActionScript by changing the pieces of data that are all put together into a single bundle called a MovieClip object.
In ActionScript object-oriented programming, there are three types of characteristics that any class can include:
- Properties
- Methods
- Events
These elements are used to manage the pieces of data used by the program and to decide what actions are carried out and in what order.
Properties
A property represents one of the pieces of data that are bundled together in an object. An example song object can have properties named artist and title; the MovieClip class has properties like rotation, x, width, and alpha. You work with properties like individual variables. In fact, you can think of properties as simply the “child” variables contained in an object.
Here are some examples of ActionScript code that uses properties. This line of code moves the MovieClip named square to the x coordinate 100 pixels:
Flash Objects Free
This code uses the rotation property to make the square MovieClip rotate to match the rotation of the triangle MovieClip:
This code alters the horizontal scale of the square MovieClip making it one-and-a-half times wider than it used to be:
Notice the common structure: you use a variable (square, triangle) as the name of the object, followed by a period (.) and then the name of the property (x, rotation, scaleX). The period, known as the dot operator, is used to indicate that you’re accessing one of the child elements of an object. The whole structure together, “variable name-dot-property name,” is used like a single variable, as a name for a single value in the computer’s memory.
Methods
A method is an action that an object can perform. For example, suppose you’ve made a movie clip symbol in Flash Professional with several keyframes and animation on its timeline. That movie clip can play, or stop, or be instructed to move the playhead to a particular frame.
This code instructs the MovieClip named shortFilm to start playing:
This line makes the MovieClip named shortFilm stop playing (the playhead stops in place, like pausing a video):
This code makes a MovieClip named shortFilm move its playhead to Frame 1 and stop playing (like rewinding a video):
Methods, like properties, are accessed by writing the object’s name (a variable), then a period, and then the name of the method followed by parentheses. The parentheses are the way that you indicate that you are calling the method, or in other words, instructing the object to perform that action. Sometimes values (or variables) are placed in the parentheses, as a way to pass along additional information that is necessary to carry out the action. These values are known as method parameters. For example, the gotoAndStop() method needs information about which frame to go to, so it requires a single parameter in the parentheses. Other methods, like play() and stop(), are self-explanatory, so they don’t require extra information. Nevertheless, they are still written with parentheses.
Unlike properties (and variables), methods aren’t used as value placeholders. However, some methods can perform calculations and return a result that can be used like a variable. For example, the Number class’s toString() method converts the numeric value to its text representation:
For example, you would use the toString() method if you wanted to display the value of a Number variable in a text field on the screen. The TextField class’s text property is defined as a String, so it can contain only text values. (The text property represents the actual text content displayed on the screen). This line of code converts the numeric value in the variable numericData to text. It then makes the value show up on the screen in the TextField object named calculatorDisplay:
Events
A computer program is a series of instructions that the computer carries out step-by-step. Some simple computer programs consist of nothing more than a few steps that the computer performs, at which point the program ends. However, ActionScript programs are designed to keep running, waiting for user input or other things to happen. Events are the mechanism that determines which instructions the computer carries out and when.
In essence, events are things that happen that ActionScript is aware of and can respond to. Many events are related to user interaction, such as a user clicking a button or pressing a key on the keyboard. There are also other types of events. For example, if you use ActionScript to load an external image, there is an event that can let you know when the image has finished loading. When an ActionScript program is running, conceptually it just sits and waits for certain things to happen. When those things happen, the specific ActionScript code that you’ve specified for those events runs.
Basic event handling
The technique for specifying certain actions to perform in response to particular events is known as event handling. When you are writing ActionScript code to perform event handling, there are three important elements you’ll want to identify:
- The event source: Which object is the one the event is going to happen to? For example, which button was clicked, or which Loader object is loading the image? The event source is also known as the event target. It has this name because it’s the object where the computer targets the event (that is, where the event actually happens).
- The event: What is the thing that is going to happen, the thing that you want to respond to? The specific event is important to identify, because many objects trigger several events.
- The response: What steps do you want performed when the event happens?
Any time you write ActionScript code to handle events, it requires these three elements. The code follows this basic structure (elements in bold are placeholders you’d fill in for your specific case):
This code does two things. First, it defines a function, which is the way to specify the actions you want performed in response to the event. Next, it calls the addEventListener() method of the source object. Calling addEventListener() essentially “subscribes” the function to the specified event. When the event happens, the function’s actions are carried out. Consider each of these parts in more detail.
A function provides a way for you to group actions with a single name that is like a shortcut name to carry out the actions. A function is identical to a method except that it isn’t necessarily associated with a specific class. (In fact, the term “method” could be defined as a function that is associated with a particular class.) When you're creating a function for event handling, you choose the name for the function (named eventResponse in this case). You also specify one parameter (named eventObject in this example). Specifying a function parameter is like declaring a variable, so you also have to indicate the data type of the parameter. (In this example, the parameter's data type is EventType.)
Each type of event that you want to listen to has an ActionScript class associated with it. The data type you specify for the function parameter is always the associated class of the specific event you want to respond to. For example, a click event (triggered when the user clicks an item with the mouse) is associated with the MouseEvent class. To write a listener function for a click event, you define the listener function with a parameter with the data type MouseEvent. Finally, between the opening and closing curly brackets ({ ... }), you write the instructions you want the computer to carry out when the event happens.
The event-handling function is written. Next you tell the event source object (the object that the event happens to, for example the button) that you want it to call your function when the event happens. You register your function with the event source object by calling the addEventListener() method of that object (all objects that have events also have an addEventListener() method). The addEventListener() method takes two parameters:
- First, the name of the specific event you want to respond to. Each event is affiliated with a specific class. Every event class has a special value, which is like a unique name, defined for each of its events. You use that value for the first parameter.
- Second, the name of your event response function. Note that a function name is written without parentheses when it’s passed as a parameter.
Shockwave Flash Object Update
The event-handling process
The following is a step-by-step description of the process that happens when you create an event listener. In this case, it’s an example of creating a listener function that is called when an object named myButton is clicked.
The actual code written by the programmer is as follows:
Here is how this code would actually work when it’s running:
- When the SWF file loads, the computer makes note of the fact that there’s a function named eventResponse().
- The computer then runs the code (specifically, the lines of code that aren’t in a function). In this case that’s only one line of code: calling the addEventListener() method on the event source object (named myButton) and passing the eventResponse function as a parameter.Internally, myButton keeps a list of functions that are listening to each of its events. When its addEventListener() method is called, myButton stores the eventResponse() function in its list of event listeners.
- At some point, the user clicks the myButton object, triggering its click event (identified as MouseEvent.CLICK in the code).At that point, the following occurs:
- An object is created that’s an instance of the class associated with the event in question (MouseEvent in this example). For many events, this object is an instance of the Event class. For mouse events, it is a MouseEvent instance. For other events, it is an instance of the class that’s associated with that event. This object that’s created is known as the event object, and it contains specific information about the event that happened: what type of event it is, where it happened, and other event-specific information if applicable.
- The computer then looks at the list of event listeners stored by myButton. It goes through these functions one by one, calling each function and passing the event object to the function as a parameter. Since the eventResponse() function is one of myButton’s listeners, as part of this process the computer calls the eventResponse() function.
- When the eventResponse() function is called, the code in that function runs, so your specified actions are carried out.
Create Flash Objects Games
Event-handling examples
Here are a few more concrete examples of event handling code. These examples are meant to give you an idea of some of the common event elements and possible variations available when you write event-handling code:
- Clicking a button to start the current movie clip playing. In the following example, playButton is the instance name of the button, and this is a special name meaning “the current object”:
- Detecting typing in a text field. In this example, entryText is an input text field, and outputText is a dynamic text field:
- Clicking a button to navigate to a URL. In this case, linkButton is the instance name of the button:
Creating object instances
Before you can use an object in ActionScript, the object has to exist in the first place. One part of creating an object is declaring a variable; however, declaring a variable only creates an empty place in the computer’s memory. Always assign an actual value to the variable (create an object and store it in the variable) before you attempt to use or manipulate it. The process of creating an object is known as instantiating the object. In other words, you create an instance of a particular class.
One simple way to create an object instance doesn’t involve ActionScript at all. In Flash Professional place a movie clip symbol, button symbol, or text field on the Stage and assign it an instance name. Flash Professional automatically declares a variable with that instance name, creates an object instance, and stores that object in the variable. Similarly, in Flex you create a component in MXML either by coding an MXML tag or by placing the component on the editor in Flash Builder Design mode. When you assign an ID to that component, that ID becomes the name of an ActionScript variable containing that component instance.
However, you don’t always want to create an object visually, and for non-visual objects you can’t. There are several additional ways you can create object instances using only ActionScript.
With several ActionScript data types, you can create an instance using a literal expression, which is a value written directly into the ActionScript code. Here are some examples:
- Literal numeric value (enter the number directly):
- Literal String value (surround the text with double quotation marks):
- Literal Boolean value (use the literal values true or false):
- Literal Array value (wrap a comma-separated list of values in square brackets):
- Literal XML value (enter the XML directly):
ActionScript also defines literal expressions for the Array, RegExp, Object, and Function data types.
The most common way to create an instance for any data type is to use the new operator with the class name, as shown here:
Creating an object using the new operator is often described as “calling the class’s constructor.” A constructor is a special method that is called as part of the process of creating an instance of a class. Notice that when you create an instance in this way, you put parentheses after the class name. Sometimes you specify parameter values in the parentheses. These are two things that you also do when calling a method.
Flash Object Download
Even for those data types that let you create instances using a literal expression, you can also use the new operator to create an object instance. For example, these two lines of code do the same thing:
It’s important to be familiar with the new ClassName() way of creating objects. Many ActionScript data types don’t have a visual representation. Consequently, they can’t be created by placing an item on the Flash Professional Stage or the Design mode of Flash Builder’s MXML editor. You can only create an instance of any of those data types in ActionScript using the new operator.
Adobe Flash Professional
In Flash Professional, the new operator can also be used to create an instance of a movie clip symbol that is defined in the Library but isn’t placed on the Stage.
Working with arrays
Using regular expressions
Creating MovieClip objects with ActionScript