Download Report

oit
UMass Ofﬁce of Information Technologies
How to Make Basic Image Adjustments
using Photoshop CS2
Getting Around in Photoshop
Color Management
2
Opening & Saving Files
3
Photoshop’s Workspace
4
Tools, Zooming and Panning
5
Basic Photoshop Operations
Crop or Enlarge Page
6
Resizing Images...
For a Web page
For PowerPoint
For Printing
7
8
8
Color Correction
9
Retouching Flaws
9
Layers
10
Painting & Drawing
11
Picking Colors
12
Selections
12
Exercise: Fix-up an Image
OIT Academic Computing
Lederle Graduate Research Center
13
Appendices
Tips & Troubleshooting
14
Phone: (413) 577-0072
Creating Web page Mastheads & Buttons
using Photoshop’s Text Tool
15
Email: [email protected]
Photoshop Resources
17
University of Massachusetts Amherst
http://www.oit.umass.edu/academic
July 2007
Photoshop Basics
page 2
Color Spaces and Color Gamuts
A “Color gamut” is the possible colors in a
color space. Each color space has a unique
range of colors:
Visible spectrum
Adobe RGB
sRGB
Getting Around in Photoshop
Color Management
Color management standards let you move image ﬁles between
computers and applications, or from camera, to monitor, to printer, with
relative color consistency.
The system works by embedding a “color proﬁle” into to an image
ﬁle that speciﬁes what color space is in use. When the ﬁle is opened
in Photoshop, if the working space for Photoshop is set for a different
colorspace than speciﬁed in a ﬁle’s color proﬁle, Photoshop may be set
to give an alert, or to “preserve” the embedded proﬁle to maintain the
appearance of the colors in the image.
Which color settings should you use?
That depends on how you will publish your images. You may need to
change this setting depending on whether you are working for print
or for the Web.
Color Settings
Settings menu of preset congurations
The color “target” info only appears if you have installed other Adobe
Creative Suite applications such as Illustrator & InDesign.
What to do about “Prole Mismatch”
alerts..
The Rule of thumb: Preserve embedded
proﬁles.
If you preserve the embedded proﬁle, color
data will not be changed; Photoshop will
match the image’s appearance from the
previous working space so that it looks the
same in your current working space.
If an alert says the ﬁle is “Missing a Proﬁle,”
it’s a good idea to assign one. Choose your
current “Working Color Space,” for example,
“sRGB IEC61966-2.1.” Then, the next time
you save the image, embed the Color Proﬁle.
1. The ﬁrst time Photoshop is launched, you are asked to setup color management; you’ll automatically be taken to the
Color Settings window. In subsequent work sessions you can
access color settings by going to Edit > Color Settings. (Mac
Photoshop CS it’s Photoshop > Color Settings).
2. At the very top of the Color Settings window, pop out the
Settings menu.
When working on Web Graphics choose “North American
Web/Internet.”
Prole Mismatches will be set to alert you when you open a
ﬁle that has a different color proﬁle embedded. It will also
convert the ﬁle to sRGB, and important step if you want the
color to look right in a Web browser (Web browsers display
in the sRGB colorspace). When saving JPG ﬁles for the Web
remember to check the “Embed color proﬁle” option in the
Save window.
For Desktop Publishing choose “North American General
Purpose.”
The working RGB color space will be set to sRGB IEC619662.1, a good all-purpose color space. The CMYK work space
to SWOP color. Color Management Policies will be set to
“Preserve Embedded Proﬁles” which will preserve image
appearance without actually changing the embedded proﬁle
For commercial printing or ne art inkjet printing choose
“North America Prepress 2.”
The working color space will be set to “Adobe RGB (1998)”
which allows more subtle tones, and the CMYK work space
will be set to SWOP color. Color Management Policies will be
set to “Preserve Embedded Proﬁles” which will preserve image
appearance without actually changing the embedded proﬁle.
A warning will appear if you open a ﬁle with an embedded
proﬁle that doesn’t match the working space, or if the ﬁle has
no embedded proﬁle.
OIT Academic Computing, Lederle Graduate Research Center, University of Massachusetts
070710mtgevr
Photoshop Basics
page 3
Getting Around in Photoshop, continued
Opening ﬁles
Photoshop can open most image ﬁles types.
From the desktop...
• If you double-click on an image ﬁle from the desktop, it may
open in a system-designated application rather than in Photoshop
(for instance Windows Picture Viewer or Mac Preview, etc.)
• If you have a shortcut to Photoshop on your desktop, or if
Photoshop is in the OS X Doc, you can drop a ﬁle icon on top of
the program icon.
• You can also right-click (Control-click on a Mac) and choose
> Open With > ...
From Photoshop...
Image File Types
When you are ready to share a photo, you
will have several options for ﬁle type and
compression. You should adjust the settings
after considering how you intend to use and
distribute the image.
JPG - Is optimized for photographs and
images that contain many colors and tones.
It achieves impressive compression ratios
while maintaining image quality. At moderate
compression levels, and without enlargement,
it is difﬁcult to discern compressed ﬁles from
the original.
TIFF - A versatile ﬁle format with little to no
compression and therefore little to no loss of
quality to the image. The ﬁle sizes tend to be
quite large. This is not a web format.
PNG - A lossless ﬁle storage format with
compression. Compatible with only the most
recent Web browsers. Using PNG instead of
a high-quality JPG for detailed images may
result in ﬁle sizes 5 to 10 times larger than
JPEG, without noticeable gains in quality.
GIF - Creates a table of 256 colors from the
image and renders the image with only those
colors. The compression level is very high,
and acceptable for images with limited colors,
but photos may lose most of their color range
and may appear to have a speckled, or
“dithered” texture.
1. Go to File > Open.
File > Browse is even better! It opens the Adobe Bridge.
The Bridge provides thumbnails and a preview of the picture
ﬁles within any folder allowing you compare images before you
open the ﬁles.
Saving ﬁles
Photoshop ﬁles can be quite large. For the best portability between
locations use a thumb drive or a network drive (such as your
UDrive), or burn ﬁles to a CD.
1. Choose File > Save.
a. Type in a name for the ﬁle.
b. Locate the drive and folder where you’ll save your ﬁle.
c. Choose the ﬁle format.
Always save a copy of working ﬁles in the PSD format!
The PSD format preserves important info about your picture
and will make it easier to work with next time you open it.
Use other formats for sharing ﬁles.
The list on the left details the various choices for le types
when saving the les you intend to share.
TIP: If you burn a CD from a Mac, make it a hybrid, cross-platform CD or the les won’t open on a MS Windows machine.
BMP - Microsoft’s uncompressed proprietary
format. There is infrequent reason to use this
format.
PSD - This is the preferred working format
of Photoshop as it retains the editing power
of the program. Layers, adjustment layers,
masks, and vector layers are preserved when
saved as PSD but may be lost if the ﬁle is
converted to other ﬁle types.
OIT Academic Computing, Lederle Graduate Research Center, University of Massachusetts
070710mtgevr
Photoshop Basics
page 4
Getting Around in Photoshop, continued
Photoshop’s Workspace
When Photoshop is ﬁrst installed, the workspace will be
arranged similarly to the layout below (depending on the version and platform).
You can drag around the palettes, the tool bar, and any open
document windows. When Photoshop opens again the windows and palettes will be arranged as they were last left.
If you don’t see a palette you need, use the Window menu to
open it, or, if you can see the tab in its group, click on the tab to
bring a palette to the front of the group.
Tool Bar
Palette Well
Tool Options Bar
Document Name Bar
Palettes
Image Display
Magniﬁcation
Active Layer
OIT Academic Computing, Lederle Graduate Research Center, University of Massachusetts
070710mtgevr
Photoshop Basics
page 5
Getting Around in Photoshop, continued
Tools
Selection
The Tool bar
The toolbar provides quick access to the most frequently used “tools” in
Photoshop. To ﬁnd additional tools, right-click (or hold down the mouse
button) on any tool with a black triangle in the lower right hand corner.
Tool group
The Option Bar
Navigation Vector
Painting
1. In the Tool bar, select different tools:
Note how changing the tool changes the option bar.
2. Change the options to match the desired settings.
Magniﬁcation
Zoom
Pan
“Quckmask” mode
(not for normal editing)
Normal Editing Mode
Launch Photoshop, then go to File > Open to open any image ﬁle.
Files open to ﬁt within the available screen space.
Large les will open with a magnication less than 100%.
Image opens to ﬁt in
available screen space
Zoom in to see pixels
The Zoom tool
1. Use the Zoom tool to target an area of the image to enlarge on
the screen.
• Click to zoom-in incrementally.
• Drag to enlarge a particular area.
If you zoom-in far enough, you will see the pixels that make up
the image.
Note: Zooming in does not actually change the le, it just makes
it appear larger on the screen.
2. With the zoom tool still selected, click the [—] button in the
Option bar to zoom out.
The Zoom Command
1. In the main application menu go to View > Zoom In to enlarge,
or View > Zoom Out to shrink, the image window.
The Pan tool
Zoom in on the picture, then change to the Hand tool to pan around the
image: This lets you see the image that extends beyond the edge of the
document window.
OIT Academic Computing, Lederle Graduate Research Center, University of Massachusetts
070710mtgevr
Photoshop Basics
page 6
Basic Photoshop Operations
Crop
1. From the toolbar, click the Crop tool.
2. Check the Options bar to set any Crop tool options.
3. Drag diagonally over the desired part of the image. A
selection box will appear.
4. Adjust the selection box as needed, by dragging the
corners or sides.
• To constrain the proportions as you adjust the
size of the box, hold down Shift while dragging a
corner handle.
• To reposition the selection box, drag from inside
the selection box.
• To rotate the selection box, position the pointer
outside the box and drag. The center point around
which the marquee rotates, can be repositioned by
dragging the circle at the center of the box.
5. To complete the crop, double-click inside the selection box,
or press Enter. You can also click the check button in the
Options bar.
To cancel the crop, press the Esc key on your keyboard, or
click the Cancel button in the options bar
In the Options bar you can constrain the crop to set dimensions (in pixels, or in inches) and resolution.
Enlarge the ‘page’ or canvas
Enlarging the canvas is useful when creating illustrations,
photomontages or layouts from multiple images.
Center existing image
1. Use one of the color picking methods to choose
the color for the ‘canvas’ that will be added.
2. Go to Image > Canvas size.
3. Choose the unit (pixels, inches, percent).
Foreground color
4. Type in new dimensions.
Background color
5. Choose whether to center to existing image,
or place it to one side or in a corner.
6. Choose whether to use the foreground or background color for
the new canvas area.
7. Click OK.
Move image to
side or corner
OIT Academic Computing, Lederle Graduate Research Center, University of Massachusetts
070710mtgevr
Photoshop Basics
page 7
Basic Photoshop Operations, continued
Resizing images in Photoshop
In the Image Size window, you can change the “document size,” which
you can think of as the print size of the image, or you can choose to
“resample” the image which reduces or increases the number of pixels.
When preparing images for the web, you will most often need to downsample (shrink) images for faster downloading.
A GENERAL TIP ABOUT RESIZING:
It’s OK to shrink an image, but avoid
enlarging
Reducing the pixel dimensions of an image
ﬁle usually results in a crisp picture.
Increasing the pixel dimensions, especially
scaling-up small images, may give poor
results. (In order to enlarge an image, the
software interpolation to calculate color values
for new pixels, which causes the image to look
“soft” or blurry.)
To ‘down-sample’ an image for a Web page
1. Open the original ﬁle.
2. Go to Image > Image Size.
Working from the bottom of the window, up:
• Check the “Resample image” check box.
• Check the “Constrain proportions” check box.
• With the units set to Pixels, enter a value for either the
Width, or the Height (the other will adjust automatically).
For Web images, you can ignore everything
in the Document Size area, even resolution.
Web browsers always display images at screen
resolution (typically 96 dpi). It’s pixels that
matter on the Web!
Set units to ‘pixels’
and type in a new
height or width.
As long as “Constrain proportions” is checked
you only have to enter one dimension (height
or width). The other will adjust automatically to
preserve proportions
Unless “Resample” check box is checked,
you will not be able to type values into the
Pixel Dimension boxes.
Resampling methods
Nearest Neighbor: Preserves hard edges
Bicubic: best for smooth gradients
Bicubic Smoother: best for enlargement
Suggested Dimensions for
Web Graphics
Bicubic Sharper: best for reduction
Masthead graphic at top of page:
not more than 80 x 750 pixels
Button:
not more than 10 x 30 pixels
Thumbnail Link:
about 60 x 60 pixels
Illustration:
not more than 250 x 300 pixels
Enlargement:
400 x 600 pixels or larger if linking
to a new page
3. Click OK.
4. Go to File > Save for Web... and save the image.
Save photos as JPEG. Save solid-colored graphic as GIF.
5. The Save for Web command saves a copy of the ﬁle. When
you close the ﬁle currently open in Photoshop, do not save the
changes or you will overwrite the original ﬁle.
Go to File > Close: a dialog box will prompt you to “Save
changes ... before closing?” Click Don’t Save.
OIT Academic Computing, Lederle Graduate Research Center, University of Massachusetts
070710mtgevr
Photoshop Basics
page 8
Basic Photoshop Operations, continued
Resizing in PowerPoint
In PowerPoint on Windows (not Mac) you
can insert over-large images, then resize
all the images in a presentation at once by
right-clicking on any image and choosing
“Compress” from the menu. Images will be
down-sampled and turned into JPGs.
While convenient, this method can result in
very large working ﬁles that demand a robust
computer. You also have more control over
image quality if your resize in Photoshop.
It’s up to you to decide whether it’s worth the
investment in time to resample images in
Photoshop.
To re-size an image for PowerPoint or KeyNote
1. Open your original ﬁle.
2. To crop the image:
a. Go to the tool bar and choose the Crop tool.
b. Hold down and drag across the image to select the part of
the image to keep. To adjust the crop click and drag on the
boxes at the corners or sides of the crop outline.
c. Press the Enter key on your keyboard to make the crop.
(Press the Escape key to cancel the crop.)
3. Go to Image > Image Size.
Working from the bottom of the window:
a. Check the Resample image check box.
b. Check the Constrain proportions check box.
c. Set the Resolution to 96 dpi (typical screen resolution).
d. In the Document Size area:
Set the units to inches (if not already) and inspect size.
Enter a value for either the Width or Height
(the other dimension will adjust automatically).
If more than 10 inches wide, or 7 inches high, the image
will be larger than the PPT slide.
e. Click OK.
4. Go to File > Save As...
Rename the ﬁle as needed (if the original was a JPEG you don’t
want to overwrite the original).
Save the ﬁle as a JPEG at the highest quality.
A PowerPoint window is 10 inches wide by 7.5
inches high. The image should not exceed the
PPT window dimensions. Consider leaving
room for a margin.
Resolution Guidelines for
Bitmap printing
For desktop ink jet printing:
For photo or laser printing:
240 ppi
300 ppi
For Commercial Offset printing:
Pixel resolution gets matched to line frequency
of the half-tone screen (typically, PPI = 1.5 x
LPI). Ask the service bureau what they want.
Common Paper Sizes (in inches)
Photo paper: 4 x 6
US Letter: 8.5 x 11
To set the resolution and dimensions of an image for printing
1. Open the original ﬁle (e.g., a scan or digital camera shot).
2. Go to Image > Image Size.
Working from the bottom of the window:
a. Check the Resample image check box.
b. Check the Constrain proportions check box.
c. Set the Resolution for your printer (see sidebar).
d. In the Document Size area:
Set the units to inches (if not already) and inspect size.
Enter a value for either the Width or Height
(the other dimension will adjust automatically), to
ﬁt within your paper size (with required margins).
e. Click OK.
3. Go to File > Save As...
Rename the ﬁle to prevent overwriting the original.
Save the ﬁle as a TIFF (no compression) or PSD.
US Legal: 8.5 x 14
Tabloid (US B): 11 x 17
US C: 17 x 22
Super A3/B: 13 x 19
If you are using a commercial printing service call to nd out
what resolution and le-type they want to receive. They may
also want the image “attened.” (See ‘Photoshop Layers’
below)
OIT Academic Computing, Lederle Graduate Research Center, University of Massachusetts
070710mtgevr
Photoshop Basics
page 9
Basic Photoshop Operations, continued
Color Correction
Original Scan
Automatic Color Adjustment
Choose Image > Adjust > Levels. Sometimes selecting AutoLevels works well, sometimes it works better to do it manually.
Auto-adjust levels,
can neutralize color
bias, and punch
up contrast and
saturation, sometimes
too much
Adjusting Color by hand.
Follow these steps to neutralize color biases and improve contrast, by
adjusting each channel separately.
1. In the main application menu, go to Image > Adjust
Adjust the levels
manually to make
more subtle
corrections
Red
Levels.
2. In the Channels pop-out menu, select Red.
3. Pull the two outside markers at the bottom of the Input
graph to the edges of the “histogram” graph.
4. Repeat for the Green and Blue channels.
5. Click OK.
For more ﬂexibility use this same method in a “non-destructive”
Adjustment Layer: Layer > New Adjustment Layer > Levels. The
adjustment layer can be reopened and tweaked, or discarded, without
changing the original image data.
Retouching and Repairing ﬂaws
You can easily correct simple ﬂaws such as dust, spots and scratches,
and reduce the severity of signiﬁcant damage such as tears.
A simple and effective correction tool is the Healing Brush.
Note: The spot healing brush does not
require “sampling”—it automatically
attempts to match colors of new pixels from
surrounding pixels. It can be useful for
repairing spots or dust shadows on scans of
slides in areas such as skies, but may have
undesirable effects along edges of highcontrast.
1. Select the healing brush from the tools palette.
2. In the options bar:
Choose a brush size.
3. Choose a source to use for repairing pixels, for the Healing
Brush tool in sampling mode, to set the sampling point position
the pointer in a similarly colored and textured area then
ALT-click (Windows) or OPTION-click (Mac OS).
4. Now position the cursor over the area to be repaired or replaced
and drag. The sampled pixels will be melded with the existing
pixels each time you release the mouse button.
Experiment with the spot healing brush tool for small ﬂaws, and the
patch tool for larger irregularly shaped areas.
You may ﬁnd the Clone tool (below Healing brush on the Tool bar)
works better when working close to the edge of a high-contrast area.
Use it like the Healing brush (ALT-click to sample, then “paint”).
TIP: In the Options bar, experiment with blending modes to see if
“replace” works better for Healing brush, or if Lighten or Darken
works better with the Clone Stamp tool.
OIT Academic Computing, Lederle Graduate Research Center, University of Massachusetts
070710mtgevr
Photoshop Basics
page 10
Basic Photoshop Operations, continued
Photoshop Layers
Working with Layers
Drag & drop
Instead of copy and paste: use the move
tool to copy layers from one document into
another.
Change the layer order
Drag the layer up and down within the Layers
palette.
Hide and show layers
Click on the “eye” icon to the left of the layer
name to hide or show a layer.
Delete layers
Click on the layer name, then click on the
trash can icon at the bottom of the palette.
Blending modes
Blending determines how layers combine with
layers below, for instance, you can make only
lighter or darker pixels show.
Transparency
To make a layer translucent, use the Opacity
slider at the top of the Layers Palette.
Layers are like clear sheets of workspace that stack on your
Photoshop project. Individual layers can be edited without affecting the other layers. Within a layer, some portion may contain
content, whereas the rest can be completely empty and
transparent.
Creating new layers
• When you use the paste
command, a new layer is
made automatically. The
pasted image “ﬂoats” above
the layer below it.
• When you use the Text
tool, text appears on a new
layer.
• Choose Layer > New to create a new layer. You may want to
do this when painting or drawing by hand so that you don’t
merge the drawing into the layer below.
Name layers
Stay organized! Double click on the name to
rename the layer.
Layers add to ﬁle size
Adding layers to a ﬁle increases the ﬁle size. To combine the layers and
decrease the ﬁle size, save the ﬁle as an image such as .jpg. Once saved
in a non-PSD format, you will not be able to extract and work on the
separate layers.
Lock layers
You can prevent layers from changing
transparency, from changing color, from
moving, or at changing at all.
Layer Properties
See the sidebar to the left for some important properties that can be set
for individual layers.
Float the background layer
The background layer of an image always
starts out “locked down. If you double-click on
the background Layer name, it will become
Layer 0 and will no longer be locked-down;
now you can move it, delete parts of it, or
change it’s layer order.
Among the most important properties are Blending Modes, Opacity,
Hide/Show and Locking.
Opacity
Blending Modes
Layer Locking
Hide/Show Layer
For descriptions of Blending Mode
effects, see the Photoshop Help
OIT Academic Computing, Lederle Graduate Research Center, University of Massachusetts
070710mtgevr
Photoshop Basics
page 11
Basic Photoshop Operations, continued
Paint & Retouching tools
The Brush and the Pencil are Photoshop’s primary paint tools. The
other tools in that section of the Tool bar can be thought of as
specialized painting tools.
Healing brush
Paint Brush &
Pencil
Clone stamp
History brush
Eraser
Gradient & Fill
Blur/Sharpen
Dodge & Burn
Tool Options
When you choose a tool, the tool options at the top of the screen will
change. The properties you can control from the Options bar for any
paint tool include...
Brush Size
Blending Mode
TIP: Paint on a new layer
Opacity
Blending mode determines how brush
marks combine with colors
already on a layer.
For additional control and ﬂexibility,
create a new layer before painting.
For instance, when a tool
is set to ‘darken,’ it will not
change darker pixels than
the color it is using; it will
only make lighter pixels
darker.
Vector Drawing & Text Tools
Use Photoshop’s shape and pen tools to draw vector shapes made from
points and curves. Unlike raster images (made from pixels), vectors
remain crisp when scaled. Text is a special kind of vector shape.
Shape Select
tools
Text Tools
Pen tools
Shape tools
Shape & Text Layers
In Photoshop CS, each time you use a vector-based tool the new
content appears on a new layer (in CS2 you have an option of drawing
just a path or drawing shapes on layers).
Rasterizing Shape & Text Layers
Vector based layers can accept commands from the Layer menu such as
Layer Styles, but to use most Filter or Image > Adjust commands, the
layer must ﬁrst be converted to pixels using
Layer > Rasterize....
OIT Academic Computing, Lederle Graduate Research Center, University of Massachusetts
070710mtgevr
Photoshop Basics
page 12
Basic Photoshop Operations, continued
TOOLBAR COLOR PICKERS
Picking Colors
Eyedropper
Click to
change
Foreground
Color
Swap foreground|
& background colors
Click to change
Background
Color
Restore
default colors
COLOR PALETTE
Photoshop provides a number of methods for picking colors for painting
and drawing tools:
•
•
•
•
Eyedropper tool (samples color from an open image)
The Color Picker in the Tool bar
The Colors palette
The Swatches palette
How Foreground and Background colors work...
The Paint brush, Pencil and Bucket apply the foreground color.
Foreground
Color
The Background Layer (locked) erases the background color.
Background
Color
The Gradient tool creates a gradient between the foreground &
background colors.
Selections
Selection tools and commands outline an area to copy, paint, or
manipulate using a command. Only the area within the selection outline
will be affected.
Feather Edges
Selections do not need to have a hard jagged edge; you can set
a “Feather” value in the Option bar before making a selection,
or if a selection has already been made, give the Select >
Feather command to soften the edge and blend effects into
surrounding pixels.
Rectangular &
Oval Marquees
Add to a Selection
Lasso &
Magnetic Lasso
Magic Wand
Hold down the Shift key and use any method to select an area
to add to the current selection.
Subtract from a Selection
Hold down the Alt/Option key and use any method to select an
area to subtract from the current selection.
Save a Selection
Select > Save Selection. save the selection as a reloadable
channel.
Convert a Path to a Selection
On the Path palette, from the Option menu at the top right,
choose > Make selection.
Scale, rotate or distort a selection
Right-click inside the selection and choose Transform >
Selection
“Paint” a Selection
Quickmask
Mode
On the tool bar click the Quickmask button
‘Automatically’ extract a ﬁgure from a background
Go to Filter > Extract
Explore the Select > menu for more commands...
OIT Academic Computing, Lederle Graduate Research Center, University of Massachusetts
070710mtgevr
Photoshop Basics
page 13
Exercise:
Fix up an Image in Photoshop
Crop & adjust size
1. Open a sample image (skewed scan shown here).
2. Select the Crop tool and drag from the upper left to the
lower right of the part of the image you want.
• Adjust the size of the selected area by dragging the
“handles” at the corners of the selection.
• Rotate the selection by dragging outside the selected
area (good for straightening crooked scans.)
• To complete the crop press the ENTER key on the
keyboard.
Adjust contrast and tonal range
Increase shadows (black triangle)
and add highlights (white triangle)
1. Select Image > Adjustments > Levels
This interactive graph, or “histogram” shows how many pixels
there are of each level of brightness. Often, scans only have
pixels in the grey middle with no deep shadows or bright
highlights. A full range of tones, from black (on the left) to
white (at the right) usually improves the image.
2. Drag the black and white markers inward to the edges of the
charted pixels. Check the preview and click OK. (Photoshop
will adjust the overall tone scale. If you open the Levels
window again, the histogram will stretch across the entire
range.)
This adjustment improved the contrast, but you can improve both
contrast and color balance by using this same command in a slightly
expanded fashion:
1. Select Edit > Undo Levels.
2. Return to Image > Adjustments > Levels, but this time use the
pop-out channel menu to individually adjust each channel (red,
green and blue). As you did in step 2, pull the black and white
markers in to the “toe” on each end of the histogram for each
channel.
Removing Unwanted Objects
Pick something in the image you would like to remove. You will erase
it by “cloning” an area that matches what would show “behind” the
object you plan to “erase.”
Extra credit:
Change Brush Size
With the Clone stamp
selected, go to the
Photoshop Options bar
and change the brush
size for more reﬁned
drawing...
1. Select the Clone Stamp tool.
2. Position the cursor over the “background” area that you will
use to “paint out” the unwanted object. Hold down the ALT
key (OPTION key on a Mac) and click to “load” the Clone
stamp tool.
3. Now, release the ALT key, and drag the cursor over the
unwanted object to clone the sampled image content.
TIP: Use short brush strokes, make frequent samples, and don’t sample
from too close to the object you want to erase.
OIT Academic Computing, Lederle Graduate Research Center, University of Massachusetts
070710mtgevr
Photoshop Basics
page 14
Appendix A:
Tips & Troubleshooting
Tips
Undo Mistakes
The Edit > Undo command (CTRL + Z)
undoes the last action
•
•
To go back further, use the History Palette.
By default, the history remembers 20 steps.
•
Back up frequently.
See your true brush size and shape rather than an icon:
Choose Preferences > Display & Cursors.
Use the keyboard to change tools
e = eraser
s = stamp
l = lasso
m = move
•
tool
Learn these handy keyboard commands
CTRL + D deselects selection
CTRL + A selects all
CTRL + Z = undo
CTRL + S = Save
CTRL + H Hides/shows selection
outline
Troubleshooting
•
•
•
Tools or menu commands won’t work?
Check the layer palette:
Make sure the layer you intend is highlighted (active).
Make sure the layer is not locked.
Are you trying to work outside a hidden selection?
Choose View > Show > Selection edges
Is the Color mode set to other than RGB or Grayscale?
Not all tools or commands will work in Indexed
Color, LAB color, CMYK or 16 bit.
Are you working in Quickmask mode?
Towards the bottom of the Tool bar, click the Normal
Mode button.
How are tool options set?
Check opacity, blending mode, brush size.
Cursor not visible?
Check the Caps Lock key (pressing Caps Lock toggles
the cursor between a cross-hairs and the usual
brush icon).
Tools and Pallets not visible?
Press the Tab key (pressing Tab toggles all Palettes on
and off).
OIT Academic Computing, Lederle Graduate Research Center, University of Massachusetts
070710mtgevr
Photoshop Basics
page 15
APPENDIX B:
Creating Web Page mastheads &
buttons using Photoshop’s Text tool
Step one: Create the graphic
1. Go to File > New... to create a new ﬁle and make these settings:
Dimensions: e.g., 50 pixels high, and 300 pixels wide.
This does not need to be precise, you can crop later.
Resolution: 96 ppi
Not crucial, images always display at screen resolution in a
browser.
Color Mode: RGB.
RGB is necessary to use all the features and tools of Photoshop.
Background color: (optional)
If the graphic will sit on a colored background in the Web page,
match the color for the background using the Web-safe Color
picker. (Warning: saturated colors make text hard to read, avoid
overly intense colors.)
Click OK.
2. In the Photoshop Color Picker, Swatches palette or Color
palette, choose a new color for the foreground color.
Choose colors carefully, this color should contrast with your
background color to keep the text readable: the text color should
be signiﬁcantly darker or lighter than the background.
3. Get the Text tool from the Toolbox and click in the document
window where you want the text to start. Set text styles (font,
size, color, etc.) in the options bar at top of Photoshop window.
To edit text on a different computer,
fonts must be installed..
If you move to a computer that does not have
a font you used in a graphic, that font will not
be available for editing text when you open
a copy of the PSD. You can substitute a font
that is present on the system, or install the
font and re-start Photoshop.
Text tool options
Font Formatting
The Layers palette for the banner graphic below
shows how each text object is on its own layer, the
university seal is on a layer above the background
layer. Double-click on layer names to rename layers.
Text align Text color
More Text
options
Commit
Changes
4. Type the text. Click the Check button in the options bar when
you are done typing.
Note: A new layer is created for every text entry.
5. To edit a text layer, ﬁrst click on the layer name in the Layers
palette, then, using the Text tool, click in the line of text in the
document window and type as in a Word processor.
To change the color of selected characters: Click the layer
name in the Layers palette, get the text tool and select the text
to color, then change the color in the Options bar.
To change the color of all the text on a layer you don’t have
to select the text, just click on the layer name, get the Text tool,
then change the color.
OIT Academic Computing, Lederle Graduate Research Center, University of Massachusetts
070710mtgevr
Photoshop Basics
page 16
Optional: Using Special Effects on Text
Layer Styles
Layer Styles can be applied to text layers to create editable (temporary)
special effects including drop shadows and embossing.
Layer effect
1. Go to Layer > Layer Style and from the sub-menu choose a
style.
Use the options in the style window to create effects.
Note: The effects show in the Layers Palette as a sub-layer which can
be hidden or discarded as needed.
Filters
Filters can only be applied to “rendered” text (text that has been
rasterized into a bitmap).
NOTE: Rendered text becomes an image and can no longer be edited
with the text tool. We suggest you work on a duplicate layer to test lter
effects.
1. In the Layers palette, click on the text layer name, then go to
Duplicate Layer from the palette menu. Hide the original text
layer (click the eye in from of the layer).
2. In the Layers palette, click on the name of the duplicate layer,
then go to Layer > Rasterize. You can now apply commands
from the Filter menu.
Optional: To change the background color
1. In the Layers palette, click the Background layer name.
2. Use the Toolbar color picker, Swatches palette or Color palette
to choose a new color.
3. Go to Edit > Fill.
Step two: Save a Photoshop version of the ﬁle
The Photoshop le format (.psd)
preserves all layers and layer effects
You can open the PSD ﬁle to make changes
to the graphic in the future without having to
recreate the entire graphic. Keep it in a safe
place!
More often than not, you will ﬁnd yourself
wanting to return to the image to change text
colors, fonts or effects.
You will not be able to retype the text in the
GIF version of the ﬁle you use on your Web
page.
1. Go to File > Save As...
Make sure you choose the PSD ﬁle type.
Step three: Save a Web friendly version of the ﬁle
1. Go to File > Save for Web.
a. Set the ﬁle format option: Unless you have added a lot of
special effects, GIF is usually best for images with text.
b. Click on the 4-Up tab: The top left view shows the
uncompressed PSD version. The others preview what a
compressed GIF or JPEG will look like on a Web page.
Click on each of the 4 preview windows in turn, adjusting
the settings in the right column.
c. Click the Preview view with the best balance of ﬁle size
and quality, then click Save.
2. After you click Save , the Save Optimized As window will
open. Name the ﬁle and choose the folder in which to save it.
Remember to use a Web-friendly ﬁle name. Do not use spaces
or special characters. Use only letters, numbers, underscores or
dashes
OIT Academic Computing, Lederle Graduate Research Center, University of Massachusetts
070710mtgevr
Photoshop Basics
page 17
Appendix C:
Photoshop Resources
Online Resources
Try Photoshop’s built-in help!
1. Choose Help > Photoshop help
2. Use the Index, or Search for your topic.
OIT maintains limited Photoshop
documentation
Topics include more extensive handouts on
preparing Web images, and working with
images in Dreamweaver. Visit our Web site:
http://www.oit.umass.edu/
workshops/tutorials.html
Goggle “Photoshop Tutorials” and you’ll get zillions of results! Here
are a few we recommend...
Adobe Tips & Tutorials
http://studio.adobe.com/us/search/sort?product=15
Adobe Design Center Video Workshops
http://www.adobe.com/designcenter/video_workshop/
Russell Brown Photoshop (great bite-sized tutorial videos)
http://www.russellbrown.com/tips_tech.html
Design & Publishing - Photoshop Tips & Tricks
http://www.graphic-design.com/Photoshop/
Creative Bits - Photoshop Tutorials
http://creativebits.org/taxonomy/adobephotoshop
Digital Photography Review (unbiased reviews of digital cameras)
http://www.dpreview.com/
Bookshelf Resources
Find the edition for your version of Photoshop (e.g., Photoshop 7, CS,
CS2 or CS3)
The Photoshop Bible
Deke McClelland - John Wiley & Sons
The Photoshop Wow! Book
Jack Davis - Peachpit Press
Photoshop for Windows and Macintosh:
Visual QuickStart Guide
Elaine Weinmann, Peter Lourekas - Peachpit Press
Other Image Editing Software
Here are some alternatives to Photoshop:
Handouts on iPhoto and
Microsoft Ofce Picture Manager
OIT has handouts available on how to make
basic adjustments to images using Apple’s
iPhoto, and Microsoft Ofﬁce Picture Manager.
Download the handout at:
http://www.oit.umass.edu/workshops/
tutorials/
•
•
•
It’s quite likely that one of these applications
is already on your machine.
•
If all you need to do is basic color correction,
cropping, or resizing an image, you may
already have all the software you need!
•
Adobe Photoshop Elements:
Every thing you need in Photoshop for Web and Desktop
printing at a much reduced price from Photoshop.
Jasco Paint Shop Pro
Affordable basic image processing for the PC
Adobe Fireworks
For Web images only. Bundled with Dreamweaver in the
Adobe Design Suite.
The GNU Image Manipulation Program (GIMP)
This open-source (free) program works much like Photoshop.
Cameras, scanners, and Operating Systems often come with
very basic image editing software. Check to see if the software
can crop, resample an image and save in different ﬁle formats.
OIT Academic Computing, Lederle Graduate Research Center, University of Massachusetts
070710mtgevr
CONTRIBUTED DOCUMENTATION
This document is NOT supported by Computing Services.
DO NOT contact the Help Center with questions on this document.
Computer Education - LUNCH & LEARN
PHOTO RETOUCHING WITH PHOTOSHOP®
Photo Retouching with Photoshop®
Objectives
Using Photoshop, repair a digital or scanned photograph.
1.
2.
3.
4.
5.
6.
7.
List three methods to get photos into a computer.
Define the term resolution as it refers to photographs.
Identify the crop tool.
List the process used to lighten or darken a photograph.
List the process used to remove red-eye.
Define the term action as it is used in Photoshop.
Identify the Action palette.
Introduction
Nothing is more frustrating than having a great picture ruined when a person's eyes come
out bright red, the photo is overexposed or in the shadows. Photoshop can help you easily
repair these problems as well as enhance your photos. In this lesson, we will discuss how
to get your photos into your computer, techniques for repairing common problems and fun
photo tricks.
1
Computer Education - LUNCH & LEARN
PHOTO RETOUCHING WITH PHOTOSHOP®
Getting photos into your computer
There are three methods to get your photos into your computer: scanning, digital camera
or photo CD.
•
Scanning converts a photo into electronic format. When scanning a photo use 300
dpi resolution and save the file as .jpeg or .tiff format.
•
Digital cameras let you take a picture and then download it to your computer. A
two-megapixel camera generates photos that look similar to a standard photo print
at 4x6 size. These photos are saved as .jpeg format.
•
Photo CDs are made by scanning your film at a photo lab. The photos are generally
high-resolution and saved in .jpeg format.
Terms to know
Resolution - Resolution refers to the number of pixels in an image. Resolution is
sometimes referred to by the width and height of the image as well as the total number of
pixels in the image.
Resolution
640 X 480
1152 x 864
1600 x 1200
Print Size
4x6
5x7
8 x 10
DPI - Dpi is dots per inch and refers to the number of pixels that fit into an inch.
JPEG - JPEG is the standard format for compressing continuous-tone images such as
photographs.
TIFF – TIFF format is flexible and maintains high photo quality.
RGB and CMYK modes - Scanners and digital cameras create images using combinations
of just three colors: Red, Green and Blue (RGB). These are the colors computers use to
display photos. Printers print full color photos using Cyan (blue), Magenta (red), Yellow and
Black. This is known as CMYK mode. Use Photoshop to convert RGB photos to CMYK.
Notes:
__________________________________________________________________________
__________________________________________________________________________
__________________________________________________________________________
__________________________________________________________________________
__________________________________________________________________________
2
Computer Education - LUNCH & LEARN
PHOTO RETOUCHING WITH PHOTOSHOP®
Repairing photos
Basic cropping
Cropping is the process of removing portions of a photo to create focus or strengthen the
composition. You can crop a photo using the Crop tool
.
1. Select the Crop tool.
2. If necessary, adjust the cropping rectangle.
3. Drag over the part of the photo that you want to keep.
4. Click the Enter key to crop the selection.
Note: Select Edit > Step Backward to return to the original image.
Using the crop tool
Notes:
__________________________________________________________________________
__________________________________________________________________________
__________________________________________________________________________
__________________________________________________________________________
__________________________________________________________________________
3
Computer Education - LUNCH & LEARN
PHOTO RETOUCHING WITH PHOTOSHOP®
Lighten or darken a photograph
Photos that are overexposed (too light) or underexposed (too dark) can be quickly repaired
using Photoshop blend modes.
1.
Open a photo that you want to repair.
2.
Select the background layer and make a copy. (Layer > New
Layer via Copy)
3. Change the blend mode of the layer copy from Normal to:
•
•
Use Multiply for a light photo
Use Screen for a dark photo
4. Repeat steps 2-3 until the photo has enough detail.
5. Finally, flatten the layers. (Layer > Flatten Image)
Choosing a blend mode
Notes:
__________________________________________________________________________
__________________________________________________________________________
__________________________________________________________________________
__________________________________________________________________________
__________________________________________________________________________
4
Computer Education - LUNCH & LEARN
PHOTO RETOUCHING WITH PHOTOSHOP®
Getting the red out
Photoshop gives you a simple way to fix red-eye in just a few steps.
1. Open a photo that you want to repair.
2. Use the elliptical marquee tool to select the first red eye. Hold the Shift key down
while selecting the other red eye.
Using the elliptical marquee to select
3. From the Select menu choose Feather. Enter a feather radius of about 0.5 pixels.
Click OK.
4. From the Image menu choose Adjustments > Channel Mixer.
5. Adjust the source channels as seen in the image. Basically, you want to remove all
the red.
Removing the red
6. Click OK.
5
Computer Education - LUNCH & LEARN
PHOTO RETOUCHING WITH PHOTOSHOP®
Actions
An action is a series of commands that you play back on a single file
or a group of files. Photoshop has several predefined actions. Using
actions can enhance your photos. Some favorites are: Vignette,
Frame, Sepia Toning and RGB to Grayscale.
Using the Action palette
1.
Open a photo.
2.
Display the Action palette, choose Window > Actions.
3. Select an action.
4. Click the Play button
in the Actions palette to play.
Note: To undo an action, choose File > Revert or select the F12 key
on your keyboard.
Action palette
Adding actions
1. Click the triangle
in the upper right corner of the palette to add more actions like
Frames and Image Effects.
Adding more actions
6
Computer Education - LUNCH & LEARN
PHOTO RETOUCHING WITH PHOTOSHOP®
Notes:
__________________________________________________________________________
__________________________________________________________________________
__________________________________________________________________________
__________________________________________________________________________
__________________________________________________________________________
How to tips
The Photoshop Help menu contains “how to tips” for fixing and enhancing photos. Select
Help > Fix and Enhance Photos and choose a topic from the submenu.
This document contains information from the Adobe® Photoshop® CS User Guide for Windows® and
Macintosh. ©2003 Adobe Systems Incorporated. All rights reserved.
Adobe® Photoshop® and ImageReady® are registered trademarks of Adobe Corporation.
7
Computer Education - LUNCH & LEARN
PHOTO RETOUCHING WITH PHOTOSHOP®
What did you learn?
8
How to Use Filters and Effects in Adobe Photoshop CS5
Subject Descriptors: Filter, Effects, Artistic, Artistic Effects, Blur Effects, Blur, Brush Strokes, Brush
Stroke Effects, Distort, Distort Effects, Render, Render Effects, Sketch, Sketch Effects, Texture,
Texture Effects.
Application (Version): Adobe Photoshop CS5
Task Description: How do I use the filters? How do I create effects?
Tutorial Date: 13 May 2009, by Arnousone Chanthalyxay. Updated 21 June 2010, Kasidy Stafford
Select "Filter"
A drop down menu will show all of the different effects that you can apply to your image.
How to Use Filters and Effects in Adobe Photoshop CS5 - 1
Artistic Effects
These effects will make your image look more artistic through the use of different paints or painting
techniques.
How to Use Filters and Effects in Adobe Photoshop CS5 - 2
Artistic Effects Applied
How to Use Filters and Effects in Adobe Photoshop CS5 - 3
Blur Effects
These effects create different types of blurs on your image.
Most commonly used blur:
- Gaussian blur
- Motion blur
How to Use Filters and Effects in Adobe Photoshop CS5 - 4
Blur Effects Applied
How to Use Filters and Effects in Adobe Photoshop CS5 - 5
Brush Stroke Effects
These effects create different artistic brush strokes across your image.
Brush Stroke Effect Applied
How to Use Filters and Effects in Adobe Photoshop CS5 - 6
Render Effects
These tools will add lighting effects to your image.
Render Effects Applied
How to Use Filters and Effects in Adobe Photoshop CS5 - 7
Distort Effects
These effects will allow you to distort your image.
How to Use Filters and Effects in Adobe Photoshop CS5 - 8
Distort Effects Applied
How to Use Filters and Effects in Adobe Photoshop CS5 - 9
Sketch Effects
These effects will make your image look like it was sketched through the use of different sketching
techniques.
How to Use Filters and Effects in Adobe Photoshop CS5 - 10
Sketch Effects Applied
How to Use Filters and Effects in Adobe Photoshop CS5 - 11
Texture Effects
These effects will give your image more of a texture to it.
How to Use Filters and Effects in Adobe Photoshop CS5 - 12
Texture Effects Applied
How to Use Filters and Effects in Adobe Photoshop CS5 - 13
How to Use Filters and Effects in Adobe Photoshop CS5
Subject Descriptors: Filter, Effects, Artistic, Artistic Effects, Blur Effects, Blur, Brush Strokes, Brush
Stroke Effects, Distort, Distort Effects, Render, Render Effects, Sketch, Sketch Effects, Texture,
Texture Effects.
Application (Version): Adobe Photoshop CS5
Task Description: How do I use the filters? How do I create effects?
Tutorial Date: 13 May 2009, by Arnousone Chanthalyxay. Updated 21 June 2010, Kasidy Stafford
Select "Filter"
A drop down menu will show all of the different effects that you can apply to your image.
How to Use Filters and Effects in Adobe Photoshop CS5 - 1
Artistic Effects
These effects will make your image look more artistic through the use of different paints or painting
techniques.
How to Use Filters and Effects in Adobe Photoshop CS5 - 2
Artistic Effects Applied
How to Use Filters and Effects in Adobe Photoshop CS5 - 3
Blur Effects
These effects create different types of blurs on your image.
Most commonly used blur:
- Gaussian blur
- Motion blur
How to Use Filters and Effects in Adobe Photoshop CS5 - 4
Blur Effects Applied
How to Use Filters and Effects in Adobe Photoshop CS5 - 5
Brush Stroke Effects
These effects create different artistic brush strokes across your image.
Brush Stroke Effect Applied
How to Use Filters and Effects in Adobe Photoshop CS5 - 6
Render Effects
These tools will add lighting effects to your image.
Render Effects Applied
How to Use Filters and Effects in Adobe Photoshop CS5 - 7
Distort Effects
These effects will allow you to distort your image.
How to Use Filters and Effects in Adobe Photoshop CS5 - 8
Distort Effects Applied
How to Use Filters and Effects in Adobe Photoshop CS5 - 9
Sketch Effects
These effects will make your image look like it was sketched through the use of different sketching
techniques.
How to Use Filters and Effects in Adobe Photoshop CS5 - 10
Sketch Effects Applied
How to Use Filters and Effects in Adobe Photoshop CS5 - 11
Texture Effects
These effects will give your image more of a texture to it.
How to Use Filters and Effects in Adobe Photoshop CS5 - 12
Texture Effects Applied
How to Use Filters and Effects in Adobe Photoshop CS5 - 13
Best Practices for Accessible Flash Design
by Bob Regan
August 2005
Copyright © 2004 Macromedia, Inc. All rights reserved.
The information contained in this document represents the current view of Macromedia on the issue discussed as of the date of publication. Because
Macromedia must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Macromedia, and Macromedia
cannot guarantee the accuracy of any information presented after the date of publication.
This white paper is for information purposes only. MACROMEDIA MAKES NO WARRANTIES, EXPRESS OR IMPLIED, IN THIS DOCUMENT.
Macromedia may have patents, patent applications, trademark, copyright or other intellectual property rights covering the subject matter of this
document. Except as expressly provided in any written license agreement from Macromedia, the furnishing of this document does not give you any license
to these patents, trademarks, copyrights or other intellectual property.
Flash8, Flash Basic 8, Flash Professional 8 and Flash Player 8 are either trademarks or registered trademarks of Macromedia, Inc. in the United States
and/or other countries. The names of actual companies and products mentioned herein may be the trademarks of their respective owners.
Macromedia, Inc.
600 Townsend Street
San Francisco, CA 94103
415–252–2000
Best Practices for Accessible Flash Design
Contents
Introduction......................................................................................................................................... 1
Define User Requirements .............................................................................................................2
Technical Requirements .................................................................................................................4
Key Concepts ....................................................................................................................................5
Labels................................................................................................................................................. 7
Role.....................................................................................................................................................8
State ...................................................................................................................................................8
Structure............................................................................................................................................8
Accessibility Best Practices ...........................................................................................................9
Provide Text Equivalents................................................................................................................9
Provide Context ............................................................................................................................. 12
Control Reading Order.................................................................................................................. 14
Control Animation.......................................................................................................................... 19
Ensure Keyboard Access............................................................................................................20
Progressive Disclosure................................................................................................................. 21
Enable Component Accessibility............................................................................................... 22
Provide Captions........................................................................................................................... 24
Provide Control over Audio Playback....................................................................................... 25
Use Color Wisely........................................................................................................................... 25
Support Users with Low Vision.................................................................................................. 26
Conclusion .......................................................................................................................................27
Resources ....................................................................................................................................... 28
August 2005
Page iii
Best Practices for Accessible Flash Design
Introduction
This document has been written for web designers who wish to make accessible,
interactive rich media. This guide to creating accessible Macromedia Flash
content assumes no previous knowledge of accessibility or assistive technology.
Included within are the following key topics for developing accessible Flash
content:
n
Define User Requirements
n
Technical Requirements
n
Key Concepts
n
Flash Accessibility Best Practices
The first section, Define User Requirements, presents a number of use case
scenarios in which fictional characters provide a framework for understanding
users with disabilities. These personas illustrate the broad range of disabilities that
a designer needs to be aware of and highlights the unique issues, challenges,
techniques and tools of each.
The second part, Technical Requirements, establishes the base set of
requirements for developing accessible Flash. As well, hints, tips and special
considerations of a technical nature are shared here.
The third topic, Key Concepts, introduces ideas common to computer
programming that remain relevant to developing accessible Flash content. These
concepts include label, role, state and structure and provide a means to explore
how a user manipulates objects within a Flash movie.
Finally, Flash Accessibility Best Practices offers a number of recommendations
for creating accessible design in Flash. These are:
n
Provide Text Equivalents
n
Provide Context
n
Control Reading Order
n
Control Animation
n
Ensure Keyboard Access
n
Progressive Disclosure
n
Enable Component Accessibility
n
Provide Captions
n
Provide Control over Audio Playback
n
Use Color Wisely
n
Support Users with Low Vision
August 2005
Page 1
Best Practices for Accessible Flash Design
Define User Requirements
For many Flash designers, the single greatest challenge to understanding
accessibility is how to best appreciate the experience of people with disabilities. A
web designer’s inherent talent is an ability to perceive the world in a unique visual
way. The skill of the web designer allows her to view, conceptualize and translate
visual information into layout and graphics. This is a fundamental and powerful
way of seeing and understanding the world that should not be taken for granted.
To understand accessibility and implement it in practice is to ask designers to set
their visual skills aside. The first thing to do when addressing accessibility is to
step outside of our frame of reference and consider the perspective of users with
disabilities. Key questions, such as the following, arise: What are the specific
issues that prevent users from accessing content? What are the tools used by
people with disabilities to navigate the Internet? What techniques and interfaces
are used to make working with the web easier?
The following list of fictional characters illustrates common issues for people with
disabilities and may be helpful when planning out your design project. The list is
certainly not exhaustive but should serve as a model for the wide range of
disabilities that must be considered. What is important here is that a consistent set
of use case scenarios becomes an integral part of the plan, build and test phases
of your accessible Flash web design project.
John, 53, a user who is blind:
n
Uses the Window Eyes 5.0 screen reader
n
Uses the keyboard exclusively for input and navigation
n
Does not use the mouse
n
Relies on audio cues to let him know if something has happened on screen
John is a university professor who uses the computer for all of the same tasks as
his colleagues, who are not visually impaired. He writes email and research
papers, and reviews student work.
John is part of a dance troupe in town and uses the web extensively to read up on
a wide range of topics. He is easy going, most of the time, but what really he really
finds frustrating is when web sites of interest do not make their content
accessible.
Ava, 30, a user who is visually impaired (e.g. person with 20/300 vision):
n
Relies heavily on the keyboard for input
n
Uses a mouse, but only when she can’t use the keyboard
n
Uses ZoomText, a screen magnifier to receive information about the movie
n
Will also use JAWS with ZoomText when there is a lot of text
August 2005
Page 2
Best Practices for Accessible Flash Design
Ava is a developer for a small consulting firm. She can see, but only with
significant magnification or when objects are held very close. She uses the
computer every day for work to review and write code for her clients. She uses
ZoomText most of the time but will occasionally use a screen reader to read long
text passages.
Ava loves music and is a fan of Stevie Wonder. Ironically, Stevie Wonder’s site, a
Flash site, is completely inaccessible. She has been waiting for the new album and
checks the site from time to time for information but finds it a struggle to get
around.
Jeff, 22, a user who is color blind:
n
Needs visuals that are usable given specific color limitations
Like 10% of all men, Jeff is color blind and cannot distinguish between certain
colors. Generally speaking, he does not have much trouble using the web.
However, trouble arises on sites where red buttons are placed on a green
background, or where red and green buttons are next to one another to “start” and
“stop” movie actions. This lack of contrast in foreground and background colors
and red and green combinations can be frustrating for users who are colorblind.
Makoto, 48, a user with a mobility impairment:
n
Uses only the keyboard to navigate the site
Makoto was involved in an auto accident and lost the use of his hands. He relies
on a mouth stick (a long stick in his mouth with a small rubber pointer tip on the
end) to navigate web pages and applications via the keyboard. He uses the tab
and Enter keys to move between objects on the screen, as well as the Windows
sticky keys tool to create key combinations.
Makoto works at a local rehab center with other adults with disabilities. Computers
are used to complete paperwork for clients and file weekly reports. A devoted
New York Yankees fan, Makoto takes a few minutes each day to check the online
Baseball scores. His favorite baseball page is The Sporting News. However,
accessing this page can be a tedious experience due to the many navigation links
he has to tab through to get to the day’s top stories.
Karen, 29, a user who is deaf:
n
Receives information from the movie in a visual form.
Deaf since birth, Karen is an art teacher at the local high school. With two young
kids at home and needing to maintain her teaching license, Karen decided to take
the required courses online. Accessing the course was no trouble for Karen;
however, a problem arose concerning some instructional video content. While
most of the videos used in the coursework contained closed captioning, a few did
not. In the cases where no captioning was available, Karen had to request a full
transcript from student services, which often took more than a week to be
delivered. As a result, Karen fell behind in her course work.
August 2005
Page 3
Best Practices for Accessible Flash Design
Technical Requirements
Web accessibility can be broadly described as the capacity of any user, regardless
of disability, to access the same content and information. With regard to
accessible Flash web content, obstacles for users with disabilities have two
sources: issues of design; or issues of assistive technologies. In a following
section, the techniques for successful, accessible Flash design will be discussed.
In this section, we’ll investigate the technical requirements and review assistive
technologies.
Developers creating accessible Flash must meet the following minimum
requirements:
n
Macromedia Flash Player 6 or later
n
Windows 98, 2000 or XP
n
Microsoft Internet Explorer 5 or later
n
Screen readers:
o
GW Micro Window Eyes 4.2 or later
o
Freedom Scientific JAWS 4.5, 6.1 or later
o
IBM Home Page Reader 3.04
o
Dolphin HAL 6.50
o
KDS PC Talker (Japan)
The release of Macromedia Flash MX and Flash Player 6 marked the first
accessible versions of the Flash platform. This version of the player serves as a
minimum requirement for accessible Flash content.
All accessible Flash content must be tested on the Microsoft Windows platform.
While there have been recent improvements to the Apple Macintosh OS 10.4
release (Tiger), including a built in screen reader called VoiceOver, the Flash
Player does not support this screen reader.
All accessible Flash content must be tested using Microsoft Internet Explorer. At
the time of publishing this document, Internet Explorer was still the only accessible
browser available. The Mozilla Project has made some improvements with the
Firefox Browser, and support for screen readers will soon be available. However,
the version of the Flash Player that runs in Firefox is not yet accessible.
Designers often question the wisdom of testing accessible content using only one
browser and one platform. While the future of cross platform and cross browser
accessibility looks promising (with the recent improvements at Apple and Mozilla),
the reality is that today, people with disabilities are almost exclusively restricted to
using Windows with Internet Explorer. For now, designers should feel comfortable
testing their content using only this configuration.
August 2005
Page 4
Best Practices for Accessible Flash Design
As part of your development, production and testing phases for accessible Flash
content, designers should rely on a minimum of one screen reader. While Flash
content does not behave exactly the same in all screen readers, it is generally true
that an application that functions properly in one screen reader will likely work in
another. Applications with greater complexity or a wide range of users should plan
to test using more than one screen reader.
Here’s how rich media content is passed from the web page to the screen reader.
Flash uses Microsoft Active Accessibility (MSAA) to deliver information about
Flash movies to screen readers and other assistive technologies. MSAA operates
as the go between for the Flash player and the screen reader. The Macromedia
Flash Player creates a list of objects on the screen and records them on the
MSAA “data tree”. The screen reader will then read this list as it encounters Flash
content. As changes are made to the screen, the MSAA data tree is updated.
Changes to the movie prompt the screen reader to return to the top of the movie
and commence reading through the list again.
By default, text objects in a Flash movie are read by screen readers. Screen
readers are also able to identify buttons and movie clips with attached scripts.
Screen readers, however, cannot look at a graphic element on the screen and
determine its meaning. It is up to the designer to assign a text description of any
graphic or animated elements in a Flash movie. This information can be assigned
via either the accessibility panel or ActionScript. Some properties, such as “Make
Child Objects Accessible” or “.forcesimple” have no counterpart in HTML.
Designers will need to rely on information in this document as well as information
found on the Macromedia Accessibility Resource Center to learn more about
these properties and the associated techniques.
Screen readers and MSAA shape the experience of Flash content for users with
visual disabilities in ways that are often quite unfamiliar to sighted designers. Given
that screen readers always start from the top of the movie and can only read one
thing at a time, there are some complex forms of Flash content that simply can not
be made accessible. For example, many simulations require users to attend to
several objects at the same time. Decisions must be made based on multiple
factors and relayed back to the simulation quickly. This type of multitasking
activity may be easy to do in the real world for someone who is blind, but can pose
a real challenge while using a screen reader.
Key Concepts
In its flexibility, Flash allows designers to create simple objects that can be used as
a number of different controls. Take this simple circle for example.
August 2005
Page 5
Best Practices for Accessible Flash Design
If we add a label and a script to this circle, it becomes a button.
Another slight change and it becomes a slider.
Yet another alteration and this same circle is now a dial.
Visually, it may be obvious what these controls are and how to operate them.
However, to a screen reader user it may not be obvious. For simple buttons, no
extra effort is required. Yet as controls become increasingly sophisticated,
additional information about the control is required.
This is where Flash accessibility begins to approach the accessibility of desktop
applications. In HTML, there are only 12 different types of controls. The screen
reader knows how to handle them, and an experienced screen reader user
understands how the controls work. In Windows, there are 76 different types of
controls and an infinite variety of custom objects. While many of these controls
are also familiar to screen reader users, there are an equal number of users who
may not understand how a complex control works. Further, the combinations of
controls can add greater levels of difficulty to an application.
August 2005
Page 6
Best Practices for Accessible Flash Design
We must return to the point of expecting designers to have the perspective of a
disabled user. It is important to create accessible controls that work both in a
technical sense (are accessible to a screen reader) and in a practical sense
(controls that are familiar and work as expected). In other words, the user has an
opportunity to understand how a control functions without significant effort or help
from someone else.
Macromedia Flash allows authors to create these types of controls in ways that
other applications simply can’t. While technologies such as SVG and Ajax have
generated interest in the last couple of years, there is no way to expose these
types of controls to a screen reader using these technologies. When accessibility
is a priority, these technologies should be avoided.
The following set of key concepts provides designers with the fundamentals to
understanding what makes an accessible control in a Flash movie.
Labels
The label for a control answers the question, “What is this thing?” Every control in
a movie should have a label that describes the function of the control. Labels
should be concise and read immediately before, or together with the control. In
this simple example, the label for the button is clearly displayed as text inside of
the button. It is important that the screen reader also reads the label.
When the label for a control is an icon, a text equivalent for the label should be
provided as a text equivalent for the button. For example, the button below shows
a commonly used icon for “play”. It is up to the designer to make sure this button
has a label associated as a text equivalent.
If the function of the control changes, so should the label. The example below
shows a pause button from a movie controller. Typically play and pause are
included in the same button. If the user presses play, the button transforms to a
pause button. As the user activates this button, the label should update as well.
August 2005
Page 7
Best Practices for Accessible Flash Design
Role
The role of a control answers the question, “What does this thing do?” As shown
previously, a simple control made of a circle can be a button, a slider or a dial, or
any number of possibilities. Flash automatically assumes that if a script is attached
to an object, then that control is a button. The designer can formally specify a role
in MSAA using the Flash component architecture. However, this is a significant
amount of effort and well beyond the scope of all but the most complex
development projects. Instead, the role can be exposed using simple text objects
that provide hints to the user.
The role helps the user to understand how a control operates. If a control is
defined as a combo box, then the user will naturally assume it will behave similarly
to other combo boxes they have come across in the past. The role provides a
quick and easy method of explaining to a user how a control is operated.
State
The state of a control answers the question, “Is this thing on or off?” or “At level 1,
2 or 3?” and so on. Many controls have multiple settings. Think of a dial that sets a
skill level in a game using the control shown below.
In this case, there are three possible settings: level 1, level 2 and level 3. The
position of the red arrow lets us know visually that level 2 is selected. However,
screen readers have no way of knowing anything about the red arrow or how many
possible levels there are.
In controls with multiple settings, designers need to let the user know how many
possible states there are for a control and what state is selected. In the example
above, we might use a text object or even the name property to read, “Level 2 of 3
is selected.”
Structure
The structure of a control answers the question, “How does this thing relate to the
other things on screen?” It is important that individual elements within a control
not be read separate from the rest of the control. In Flash, this is generally a matter
of controlling the reading order. In the example above, it is crucial that the
designer ensure that the text, “level 3” is read right after the text “level 2.” In some
cases, Flash reading order can get jumbled based on the position on screen.
Mixing up elements of content and controls can result in a terribly confusing
experience for the end user.
August 2005
Page 8
Best Practices for Accessible Flash Design
Accessibility Best Practices
When developing accessible Flash content, there are a few basic rules that must
be observed. The following comprises a list of best practices for accessible rich
media design. This list is not intended to be fixed, nor is it comprehensive. It is up
to designers to make decisions about individual applications and whether they
meet the requirements as outlined in the use case scenarios.
Provide Text Equivalents
Screen readers are not able to discern the meaning of graphic or animated
elements on the stage. As a result, designers must provide a brief text description
of graphic elements. Text equivalents can be provided for either an entire movie, a
single object within a movie or a group of objects within a movie.
Providing text equivalents for an entire movie
Text equivalents should be provided for an entire movie in cases where the movie
can be conveyed using a single text equivalent. Examples of this include movies
that show a simple animation, banner ads or complex movies that cannot
otherwise be made accessible.
The text equivalent should be placed in the name field. It is generally advisable to
make the contents of the name field short and focused in order to describe the
function of the movie. The description field can be used for longer descriptions.
However, be aware that both JAWS and Window Eyes read this content
automatically rather than upon user request. As a result, long descriptions used in
this field can result in a tedious listening experience.
In cases where a single text equivalent is used for an entire movie, the child
objects of the movie should be made inaccessible. This will prevent animations
within the move from causing frequent updates to the screen reader. It will also
facilitate automated testing of the content for accessibility.
The text equivalent may be assigned using the accessibility panel. In this screen
shot below, a text equivalent is placed in the name field, “Moon orbiting a planet.”
August 2005
Page 9
Best Practices for Accessible Flash Design
To provide a text equivalent using ActionScript, a new object must be created for
each instance and then the accessibility information is assigned. Once the name
value has been assigned, the accessibility objects must be updated. This is done
once for all objects when a change is made. It is not necessary to update each
instance of the object. Notice the sample code below includes a line to create the
new object for the entire movie. Next, the value is assigned for the .name property
and then the child objects are made inaccessible using the .forcesimple property.
A complete list of the ActionScript properties is shown below with the
corresponding fields on the accessibility panel.
_root._accProps = new Object(); _root._accProps.name = "Moon orbiting planet"; _root._accProps.forcesimple = true; Accessibility.updateProperties();
The following is a list of accessibility properties in ActionScript.
Table 1:
Accessibility Properties in ActionScript
Property
Type
Equivalent in accessibility panel
Applies to
.silent
boolean
Make Movie Accessible/
Make Object Accessible
whole movies
buttons
movie clips
dynamic text
input text
(inverse logic)
.forceSimple
boolean
Make Child Objects Accessible
whole movies
movie clips
.name
String
Name
whole movies
buttons
movie clips
input text
.description
String
Description
whole movies
buttons
movie clips
dynamic text
input text
(inverse logic)
Providing text equivalents for single movie clip
Unlike HTML, not every movie clip or button in a Flash movie requires a text
equivalent. There are at least three cases that need to be considered here.
Case 1: Setting a movie clip to be silent
First, there are elements that are purely decorative, are repetitive or convey no
content. These movie clips should be made inaccessible. This can be done using
the accessibility panel by deselecting the option, “Make object accessible.”
August 2005
Page 10
Best Practices for Accessible Flash Design
This same property can be set using ActionScript. The following code example
shows an object set to be inaccessible using the .silent property.
logo_mc._accProps = new Object(); logo_mc._accProps.silent = true; Accessibility.updateProperties();
Case 2: Labels for buttons and controls
Flash includes an option called “auto‐labeling.” If a text object is used within a
button, the Flash player will assume that text object is the label for the button. The
same holds true for movie clips used as buttons. It is important in these cases that
the child objects of the movie clip are accessible. It is important to keep in mind
that only a single text object can be used as a label and the text object must fit
completely within the hit area of the button.
Auto‐labeling also works for components such as radio buttons and list boxes
used in a movie. The Flash player will assume text objects above or to the left of
the control should be used as the label. Again, only a single text object will be used
as a label.
If a text equivalent is assigned via the name property using either the accessibility
panel or ActionScript, that value will override the auto‐labeling without disabling
the auto‐labeling completely. Auto labeling can only be turned off on the
accessibility panel and it cannot be changed dynamically once set.
The screen shot below shows the auto‐labeling option enabled.
August 2005
Page 11
Best Practices for Accessible Flash Design
Case 3: Text equivalents for a single movie clip or button
If a text equivalent is assigned for a single object in a movie, this can be done via
the accessibility panel. The text equivalent should be relatively short and should
address the function of the object, rather than a longer or more detailed
description. This will help prevent the movie from becoming verbose and tedious
to navigate.
The description field can be used for longer descriptions. However, JAWS and
Window Eyes will both read this field by default. As a result, there is no advantage
to using this field at this time.
Provide Context
Screen readers are not able to provide clues to a screen reader user about the
layout or structure of a Flash movie, or individual controls within that movie. As a
result, it is important that complex movies provide descriptions about the movie
itself, as well as its important parts and controls. Determining when a movie is
sufficiently complex to merit a description or when a control requires additional
cues is really up to each designer.
Describe the movie
Designers should provide a description of the movie at the root level to let the user
know what the movie or application is about. This description should be written to
help the user get oriented to the application quickly and understand the key
controls and shortcuts used.
This can be accomplished in a number of ways. First, this information may be
placed on a separate screen in the Flash movie or a separate HTML page. It is
recommended that in this case, a link to the information screen be placed at the
top of the page in a button titled “site info.” Using this short title will help prevent
the application from becoming overly verbose. This button can be hidden if
desired, but to enable sighted users with disabilities to access the same
information, it is recommended that a second link to the same information be
placed elsewhere on the screen (most likely at the bottom).
Expose state
Flash allows designers to create an infinite variety of controls. In cases where the
user is provided visual cues about the state of a control or a screen within the
movie, this information should also be made available via a dynamic text field that
is updated as the control is activated.
Take the example below. In this case, the movie uses tabs that drop down to
indicate which screen is the active screen. While this is a helpful visual cue, this
information is not available to screen reader users.
August 2005
Page 12
Best Practices for Accessible Flash Design
To provide a cue for the screen reader user, a text field is hidden under the banner
(see circled area below, where the hidden text is made available). Since it is
intended to provide information for screen reader users, it need not be visible. As
the user moves between screens, the contents of this field can be made to reflect
the active screen.
In this sample screen shot, a screen reader accessing this as a web page would
read:
· Accessible Flash
· Site info button
· Keyboard area
August 2005
Page 13
Best Practices for Accessible Flash Design
· Captions button
· Equivalents button
With each area of the site, the text “keyboard area” will update to reflect the active
area.
Control Reading Order
The default reading order of a Flash movie does not follow a predictable left to
right, top to bottom order. As a result, contents of a Flash movie can be difficult to
understand. Take the example below. Based on the visual presentation of the
alphabet in three rows, it would be natural to expect the reading order to follow
alphabetical order.
However, the actual reader order jumps between letters in each row. The resulting
order is shown below.
There are two strategies for controlling reading order. The simplest is to keep the
physical size of the movie small. The second strategy requires controlling the
reading order using the accessibility panel or ActionScript.
August 2005
Page 14
Best Practices for Accessible Flash Design
With the release of Macromedia Flash Player 8, handling issues with the reading
order have been significantly simplified. In previous releases, a designer had to
specify values for all objects in a movie. Missing one would cause the reading
order to revert to the default. This made setting the reading order a tedious and
time intensive task. In Flash Player 8, the reading order can be partially specified.
The author need list only the objects that they want to control. The remaining
objects will follow the default reading order after the specified values.
It is still important to consider the reading order of a movie from the beginning of
the development process. It is certainly more work to retrofit for proper reading
order of a Flash movie after the movie has been completely built. Therefore using
a screen reader to evaluate during an ongoing development process can definitely
make finding and fixing problems much easier.
The key to creating an appropriate reading order is to ensure that the order
reflects the structure of the screen. At a high level, the elements of the screen
should be reading in a reasonable and consistent order from one screen to the
next. For example, one would most often expect that the title of the site would be
followed by the navigation, followed by the content. Placing the title of the
application at the end of the reading order might create confusion.
Finally, the reading order should ensure that elements from each of these higher
level groups are not mixed together. For example, the title of the application
should not be read between buttons on the navigation bar or pieces of the content
on screen. To extend this concept, buttons at one level of a navigation bar should
not be read mixed in with buttons on the next level.
Limit the size of the stage
A small Flash movie that is less than 300 pixels wide and consists of a single
column or a single row of objects does not require any specific control over the
reading order. Examples might include small animations or applications that pop
up in a separate window, a navigation bar that consists of a single row or an
application that consists of a single column.
Controlling reading order using the accessibility panel or ActionScript
The most precise means for controlling reading order is to use tab index values.
Tab index values are easily assigned using the accessibility panel or ActionScript.
The designer simply assigns each object a value that reflects the desired reading
order.
August 2005
Page 15
Best Practices for Accessible Flash Design
Objects within a Flash movie that are assigned a tab index value are then placed at
end of the reading order, following the default order.
Tab index values need not be sequential. In fact, it is recommended that the order
NOT be sequential, to allow designers to add objects into the movie at a later time.
Intervals of 10 should be sufficient.
Assigning a reading order using ActionScript
In cases where the reading order is dynamic or objects are created on the fly,
designers will need to use ActionScript to assign tab index values. This is an
existing property of all objects in ActionScript. There is no need to create an
accessibility object to assign a tab index value.
Consider the following simple example. Three circles displayed with the text,
“Third”, “Second” and “First” displayed on screen. Using tab index values
assigned in ActionScript, we will reverse that reading order.
When the following ActionScript is added to movie, the reading order reverses to
read “First”, “Second”, “Third.”
first_mc.first_txt.tabIndex = 10; second_mc.second_txt.tabIndex = 20; third_mc.third.txt.tabIndex = 30;
In general, it is best practice to place the ActionScript controlling the reading order
at the root level of the movie in the first frame.
August 2005
Page 16
Best Practices for Accessible Flash Design
Scoping
When controlling the reading order using ActionScript, the .tabIndex property
value has to be assigned to the text object itself, not to the parent. Consider again
the example shown above. In this case, the .tabIndex property is assigned to the
text objects in the circle movie clips. The values of the parent are not inherited by
the child. Thus, assigning the .tabIndex property values to the circles would not
result in the reading order reversing.
Static text cannot be controlled
It is not possible to provide an instance name to static text objects. As a result, it is
not possible to assign a .tabIndex property to a static text object and the reading
order of static text objects cannot be controlled.
In cases that do require precise control over the reading order, designers are
encouraged to use dynamic text objects. This will have implications for the font
used in the application and potentially impact the overall file size. To learn more
about handling font symbols in Flash, please visit:
www.macromedia.com/support/flash/ts/documents/flashfonts.htm
Removing objects from the reading order
There are numerous examples where a designer will want to hide elements from
the user and remove them from the reading order temporarily. This is a relatively
simple task. However, it should be noted that objects placed behind another
object or tucked just off stage are not necessarily removed from the reading order.
Screen readers have no concept of whether one object is in front of another or
whether it is just barely on stage or completely off stage. Designers need to more
formally hide objects if they wish to remove them from the reading order.
The easiest means of removing an object from the reading order is to move them
completely off stage. The bounding rectangle of the object needs to be more than
1 pixel off stage. Even if the visible object itself is off stage, the bounding rectangle
is what matters here. Consider the follow example. Circle “One” is offstage.
However, we can see that the blue bounding rectangle is still on stage. As a result,
this object will be read by the screen reader. Circle “Two” is shown with the
bounding rectangle completely off stage. In this case this object will not be read by
the screen reader.
August 2005
Page 17
Best Practices for Accessible Flash Design
A more formal way to make sure a screen reader does not read an object, is to set
the ._visible property to false or the .silent property to true. Referring back to
this example used earlier, the circles “Third” and “Second” from the reading order
can be temporarily removed.
When the ._visible property is set to false, the circles are not read by the screen
reader. However, they are not visible either.
second_mc._visible = false; third_mc._visible = false;
Using the .silent property will ensure that the screen reader will not read these
objects without affecting the visibility of these objects.
second_mc.silent = true; third_mc.silent = true;
August 2005
Page 18
Best Practices for Accessible Flash Design
Controlling reading order when loading SWFs at runtime
In cases where a series of child .SWF files are loaded into a parent movie, the list
of .tabindex values must be listed in the child movie clip. However, it is important
that the values list in the reading order of each child SWF be unique. For example,
if two child movies loaded into a parent movie each have three elements with
.tabindex values of 1, 2 and 3, the screen reader will read the first value of the first
movie loaded, then the first value of the second movie loaded. Next, the screen
reader will read the second value of the first movie clip loaded and then the
second value of the second movie clip loaded and so on. In order to read the
contents of the first movie followed by the contents of the second movie, the list
of .tabindex values for the first movie should be 1, 2, 3 while the list of values for
the second move should be 4, 5, 6. These values need not be sequential, but they
should be unique.
Screen reader detection
Since this case is intended to benefit screen reader users alone, this method is
frequently used in conjunction with screen reader detection. Flash has a unique
advantage over JavaScript in that it is able to use MSAA to detect the presence of
a screen reader. The method Accessibility.isActive() will return a value of true
if a screen reader is present and it is currently focused on the Flash content. It is
important that this method not be called in the first moments in the timeline of the
movie, or it could return a false negative. Rather than calling this method in the
first frame of a movie, many designers will attach this method to the first button in
the movie.
Control Animation
While Flash is now much more than an animation tool, it is still commonly used to
create and deliver animations for a variety of purposes. There are three key issues
to consider when using animations in Flash.
Hide Child Objects
As mentioned earlier, constant changes to the screen can cause a screen reader
to refresh constantly. This can be very frustrating to screen reader users when
they are trying to read through content and the screen reader is repeatedly
returning to the top of the page.
To prevent constant screen reader refreshes, hide the child objects of the movie
clips that contain animation. This can be accomplished via the accessibility panel
by deselecting “Make Child Objects Accessible.” Using ActionScript, the
.forcesimple property should be set to true.
Settle Motion
Avoid constant motion on the screen when the user is expected to read text on the
screen. For users with certain learning and cognitive disabilities, moving objects or
patterns on the screen can be a distraction. It is acceptable to use motion together
with text, but the screen must settle after a moment or two.
August 2005
Page 19
Best Practices for Accessible Flash Design
Avoid Blinking
It is very important that Flash movies avoid blinking for more than a second across
a large viewable area of the screen. Photo‐sensitive epilepsy can be triggered by
blinking at specific rates if viewed at close quarters across a significant portion of
one’s field of vision. There is no way to predict a flicker rate precisely because it is
dependent on the end user’s machine. Subsequently, it is important to avoid
flicker completely.
Ensure Keyboard Access
It is important that all controls that can be manipulated via the mouse are also
accessible via the keyboard. This is intended to support screen reader users as
well as users with mobility impairments. The Flash player facilitates keyboard
access on its own by automatically making mouse defined events accessible via
the keyboard. However, there are two specific techniques commonly used among
Flash designers that should be avoided. In addition, designers should add
keyboard shortcuts to facilitate keyboard access in complex applications. Finally,
designers should be aware of an issue with the Flash Player 6 and earlier in pages
that blend HTML and Flash content.
on (click) { getURL(index.html); }
For example, the script shown above might be used to open a web page. It is
directly associated with the instance of the movie clip used as a button. This script
should instead be placed in a frame, likely the first frame, of the movie. The revised
script could be as follows.
home_mc.onRelease = function () { getURL(index.html); }
Avoid empty hit areas
Hit areas are empty button clips with a shape defined in the hit state. These allow
designers to reuse single library objects repeatedly by placing them over text
objects and varying only the scripts used. Be aware, however that screen readers
may find a problem with this technique. The screen reader assumes that if the
button clip up state is empty, then it is not a button at all.
The solution to this issue is quite simple. By placing a transparent movie clip in the
up state, screen readers will recognize the button and allow the user to activate it.
Assign keyboard shortcuts for most essential controls
In complex applications with multiple controls, it is extremely helpful for users to
navigate the application using keyboard shortcuts. For many users with mobility
impairments, pressing keys may be very difficult. Using keyboard shortcuts
helpsreduce the number of keystrokes required to perform important tasks.
August 2005
Page 20
Best Practices for Accessible Flash Design
Using the shortcut field on the accessibility panel or the .shortcut property in
ActionScript is not sufficient for this purpose. Creating a keyboard shortcut
requires that a listener event be defined and a script associated with that listener.
The shortcut field merely announces a shortcut value via MSAA. It does not create
the listener. Moreover, no screen readers support this feature in MSAA as of the
writing of this document.
Be aware of ActiveX controls trapping focus within hybrid pages
When using Macromedia Flash Player 6 or earlier versions, users may find that
they are not able to tab out of a Flash movie to the HTML contents elsewhere on
the page. This is an issue common to all ActiveX controls. The easiest solution to
this issue is to update the Flash player to Version 7 or newer.
A workaround, which requires modifications to the HTML and Flash content,
exists for this issue in earlier versions. Details on this technique can be found at:
www.sonokids.com/tabnew.html
Progressive Disclosure
One of the greatest challenges for screen reader and keyboard users in navigating
a complex site is moving from the top of the screen to the content they are trying
to access. Sites with numerous controls or links can result in a time‐consuming
and tedious experience for the user. As result, the best user interface for someone
who relies on a screen reader or a keyboard is one that is very narrow, offering a
limited number of options at the top and increasingly more as the user drills down.
A tactic increasingly used in Flash content is to hide multiple controls under a
single control. As the user requests more information, additional controls are
progressively revealed to the user. For example, a phone with many buttons is
placed near the top of a Flash application. With multiple buttons, quite a few key
presses would be required to get past it. If it reappears on other screens, then it
would require additional key presses on each of these screens just to progress
further.
August 2005
Page 21
Best Practices for Accessible Flash Design
To reduce the complexity of this control, the phone object is grouped into a single
movie clip with the name property, “Pick up Phone.” By default, the .silent
property for each of the buttons is set to true. The screen reader user hears only
one button.
If the user presses the button to pick up the phone, four things happen. First, the
individual buttons are exposed. Second, the “Pick up Phone” button is temporarily
hidden. Third, all of the other content on screen outside of the phone is hidden.
This allows the user to focus on just the phone for a brief period of time. Fourth, a
slight change is made to the “Hang Up” button. It not only disconnects the call, but
it reverts the phone to its default state, hiding the individual buttons, revealing the
“Pick up Phone” button and exposing other content on screen.
The advantage of this technique is that it allows designers to create interfaces that
are narrow for users with disabilities without making significant changes to the
layout. In general, this technique can be applied quickly with a few extra lines of
code. The only consideration that a designer should take is to use movie clips to
strategically group objects and facilitate the showing and hiding of content.
Enable Component Accessibility
With the release of Macromedia Flash MX 2004, the following accessible
components were included with the application.
n
Simple Button
n
Check Box
n
Radio Button
n
Label
n
Text Input
n
Text Area
n
Combo Box
n
List Box
n
Window
n
Alert
n
Data Grid
For each component, the designer or developer need only enable the accessibility
object by using the command enableAccessibility(). This includes the
accessibility object with the component as the movie is compiled. Because there
is no simple means of removing an object once it has been added to the
component, these options are turned off by default. It is therefore very important
that the designer or developer enable accessibility for each component. This step
needs to be done only once for each component; it is not necessary to enable
accessibility for each instance of a component. Here is the sample code added for
the label component:
August 2005
Page 22
Best Practices for Accessible Flash Design
import mx.accessibility.LabelAccImpl; LabelAccImpl.enableAccessibility();
Again, this code is added only once for each component. It is best to attach this
script to the first frame in the movie. The code required for each of the
components is listed below.
Simple Button
import mx.accessibility.ButtonAccImpl; ButtonAccImpl.enableAccessibility();
Check Box
import mx.accessibility.CheckBoxAccImpl; CheckBoxAccImpl.enableAccessibility();
Radio Button
import mx.accessibility.RadioButtonAccImpl; RadioButtonAccImpl.enableAccessibility();
Label
import mx.accessibility.LabelAccImpl; LabelAccImpl.enableAccessibility();
Combo Box
import mx.accessibility.ComboBoxAccImpl; ComboBoxAccImpl.enableAccessibility();
List Box
import mx.accessibility.ListAccImpl; ListAccImpl.enableAccessibility();
Window
import mx.accessibility.WindowAccImpl; WindowAccImpl.enableAccessibility();
Alert
import mx.accessibility.AlertAccImpl; AlertAccImpl.enableAccessibility();
Data Grid
import mx.accessibility.DataGridAccImpl; DataGridAccImpl.enableAccessibility();
No additional code is required for the text input and text area components. The
player implements the accessibility for these components automatically.
There is a known issue with screen readers and the combo box, list box and data
grid components. The Macromedia Flash Player 7 is not able to pass information
past the first instance of one of these objects without entering forms mode. This
significantly reduces the usefulness of these components.
August 2005
Page 23
Best Practices for Accessible Flash Design
Provide Captions
Flash is frequently used to deliver audio and video content. Any audio used to
deliver substantive content should include a synchronized text equivalent in the
form of captions. There are three key strategies for including captions. Captions
may be included by importing previously captioned audio content, by placing text
objects directly on the stage, or by streaming caption data via XML.
Importing audio content that is already captioned
A simple if rather limited approach to captioning in Flash is to import content that
has been captioned in another application. The limitation of this solution is that it
limits the design options and flexibility of the application. By building the caption
tool directly into Flash, the designer has an increased number of options in terms
of formatting and the user interface.
Placing text directly on the stage
A second strategy for captioning Flash content relies on placing text objects
directly on the stage. This method is the most precise in terms of synchronizing
audio content with the captions, yet it is the most tedious in terms of the effort
required on the part of the designer. One particular advantage of this method is
that it allows for captions to be positioned on the stage to indicate different
speakers as well as emphasis and emotion.
There is a third party tool from Hi‐Software available to help facilitate delivering
captions by placing text objects directly on the stage. The single greatest
challenge in delivering captions is creating the transcript of the audio. While voice
recognition software has improved tremendously, it still is not a reliable means of
converting speech to text automatically. Once the transcript is available, there are
two commonly used tools for creating captions: Hi‐Caption SE from Hi‐Software
and MAGpie from the National Center for Accessible Media. These tools help
designers break the transcript into individual screens of text and then set the
timing for each of those screens.
Hi‐Caption SE has the additional advantage of being able to convert this
information directly into text objects on the timeline. This is particularly useful in
situations where use of XML can result in sandbox violations, such as a
Macromedia Breeze presentation.
Streaming XML caption data
The most flexible and straightforward means of delivering caption data in a Flash
movie is to stream caption data at run time. This is possible with both Hi‐Caption
SE from Hi Software and MAGpie from the National Center for Accessible Media.
Both create a custom XML file with caption data specifically for Flash. This file
strips down xml data included in captioning standards such as SAMI for improved
performance in the Flash player.
Hi‐Caption SE includes a component that imports this XML file and delivers it via
a pre‐built closed captioning interface. The designer may modify the look and feel
of the icon as well as the text used to deliver the captions.
For more information on Hi‐Caption SE, visit:
August 2005
Page 24
Best Practices for Accessible Flash Design
www.macromedia.com/software/flash/extensions/hicaption/
For more information about MAGpie visit:
ncam.wgbh.org/webaccess/magpie/
Provide Control over Audio Playback
Music and audio that plays as the site loads presents a serious challenge to screen
reader users. The audio from a Flash movie can interfere with the end user’s ability
to hear the contents of a movie using a screen reader. As a result, it is important to
make sure that the user is given control over when music is played.
The simplest strategy for handling audio playback is simply to allow the end user
to control audio with a play and pause button. Allowing the end user to initiate
audio provides the experience of the audio without creating additional hurdles.
A more advanced strategy for controlling playback relies on the use of keyboard
shortcuts for audio playback. Providing global keystrokes that allow the user to
control the audio can greatly enhance the experience for end users. Here are
several controls to consider.
n
Play / Pause
n
Mute
n
Volume
Play and Pause is typically controlled using a single keystroke, such as the letter
P, as a toggle. The first time the button is pressed, the audio starts to play. The
second time the button is pressed, the audio is paused. A mute button, such as the
letter m or the number 0, silences but does not stop the audio. This provides the
screen reader user the opportunity to listen to the screen reader temporarily
without stopping the audio. Finally, volume controls allow the user to quietly play
the audio in the background while still listening to the screen reader. This is most
appropriate in cases where the audio does not require the focused attention of the
user, as in the case of a music stream.
Use Color Wisely
Given the range of colors available to Flash designers, it is important to emphasize
that color selection in Flash content should consider issues for people with color
deficits and low vision. This means that color should not be the sole means of
providing information. For example, you should never say, “Click on the red button
to move forward and the green button to move back.” It is acceptable to reference
color, but a second indicator should be used at the same time. The same example
would be fine if we add a reference to position as well, “Click on the red button on
the right to go forward and the green button on the left to go back.”
August 2005
Page 25
Best Practices for Accessible Flash Design
A second issue related to the use of color is to ensure that foreground and
background colors have sufficient contrast to ensure readability. One way to think
of this is if the application were displayed on a black and white television, would
the colors be readable. Colors that lack contrast can make it very challenging to
read elements on the page.
A helpful tool in making decisions about the use of color is the Color Doctor from
Fujitsu. This free tool simulates grayscale as well as three different types of color
blindness. The Color Doctor can be found at:
design.fujitsu.com/jp/universal/assistance/colordoctor/
One major issue to note about the Color Doctor is that it is currently only available
in Japanese. Just the same, it is helpful to English speaking designers, even if it
takes a little longer to decipher the controls.
Support Users with Low Vision
One of the most complicated situations in accessible Flash design is that of a
person with low vision who does not rely on the use of a screen magnifier. Users
with moderately to severely low vision rely on the use of a screen magnifier to view
content on the screen. Magnifiers, such as Zoom Text from AI Squared, not only
make the contents of the screen larger but also move the point of focus to the
center of the screen to make working with content easier. Many magnifiers also
include functionality that allows users to view content in a variety of contrast
modes and include screen reader functionality. Screen magnifiers are based on
very similar technologies to screen readers. As a result, content that reads well in a
screen reader will also tend to read well with a screen magnifier.
August 2005
Page 26
Best Practices for Accessible Flash Design
However, many people with low vision do not rely on screen magnifiers but
instead use the browser settings to change the font size. The Macromedia Flash
Player 7 does not support browser settings for font size. As a result, designers
need to take additional steps to consider and support users with low vision. There
are two key strategies identified here. First, applications built in Flash should
incorporate options that allow users to modify the text size of an application when
possible. A simple example shown below allows the user to globally increase the
text size from 12 pts to 18 pts by pressing a button on the home screen of the
application.
Conclusion
If you are a web designer new to Flash accessibility, it is best to keep in mind that
the biggest challenge to creating accessible rich media may not be the technical
aspect, but rather the mental. Understanding how people with disabilities use web
applications and what makes a great web experience requires designers to revisit
their assumptions about user interfaces and interactivity. Designers must create
and revisit their use case scenarios regularly while continuing to test and review
using assistive technologies. Getting to know and understand these use cases will
help designers develop the instincts they need to build applications that are not
only accessible but truly usable for people with disabilities.
The techniques reflected in this document are neither technically advanced, nor
are they aesthetically challenging. Building a great Flash movie depends on
designers developing an instinct for how all users, including those with disabilities,
use content and making sound design and development decisions along the way.
August 2005
Page 27
Best Practices for Accessible Flash Design
Resources
Macromedia Accessibility Resource Center at:
http://www.macromedia.com/macromedia/accessibility/
Rich Media Accessibility Center at:
http://ncam.wgbh.org/richmedia/mediatypes/FL.php
Accessibility Blog at:
http://weblogs.macromedia.com/accessibility/
Hi‐Caption SE at:
http://www.macromedia.com/software/flash/extensions/hicaption/
August 2005
Page 28
ActionScript Programming
Introduction to ActionScript............................................................................................................................ 1
Button scripts ................................................................................................................................................. 3
Loops ............................................................................................................................................................. 5
Functions ....................................................................................................................................................... 6
Arrays ............................................................................................................................................................ 7
Edit fields ....................................................................................................................................................... 8
Operators....................................................................................................................................................... 9
Assignment operators.................................................................................................................................. 11
Internal functions ......................................................................................................................................... 13
MovieClip ..................................................................................................................................................... 16
Drawing Sprites ........................................................................................................................................... 21
Array ............................................................................................................................................................ 24
Key............................................................................................................................................................... 28
Mouse .......................................................................................................................................................... 30
Button .......................................................................................................................................................... 31
Math............................................................................................................................................................. 33
Date ............................................................................................................................................................. 35
Variable classes........................................................................................................................................... 37
Sound .......................................................................................................................................................... 41
String ........................................................................................................................................................... 43
Stage ........................................................................................................................................................... 45
System......................................................................................................................................................... 46
TextField ...................................................................................................................................................... 49
CSS ............................................................................................................................................................. 55
XML ............................................................................................................................................................. 57
LoadVars ..................................................................................................................................................... 61
Functions not supported by Alligator Flash Designer.................................................................................. 63
Introduction to ActionScript
ActionScript allows Flash developer to control contents of a Flash document by using commands executed
during animation playback.
Frame script is executed before the frame appears on the screen. Button script is triggered by events like
mouse click or when the mouse cursor enters the area of an object.
Frame Script
To define the script, choose “Frame” > “ActionScript” and enter the script in the dialog box.
The simplest ActionScript
Launch Alligator Flash Designer, draw an edit field using the “Edit field” tool. The field will appear as
Edit1,Edit2… etc.).
Choose “Frame” > “ActionScript” and paste the following code:
Edit1 = "hello!!!";
Press F9 to run the animation. The text “hello!!!” will appear in the edit field.
Language Syntax
ActionScript consists of a series of commands each ending with a semicolon.
To maintain script clarity each command shall be entered on a separate line.
Text and Numbers
In order to distinguish text from numbers in ActionScript, text is limited with quotes, and numbers are
entered without any delimiters.
In the following example, number 100 will appear instead of “hello!!!”:
Edit1 = 100;
Variables
Variables can be divided into text variables and number variables. Text variables store a string of
characters and number variables store numbers. A variable stores data during playback of the entire Flash
animation.
In the following example you can use ActionScript to calculate area of a rectangle.
Launch Alligator Flash Designer, draw and edit field with the “Edit field” tool. The edit field will appear as
Edit1, Edit2 etc. Choose “Frame” > “ActionScript” and paste the following code:
width = 20;
height = 30;
result = width * height;
Edit1 = result;
1
Press F9 to run the movie. “600” will be displayed in the edit field.
You can use numeric variables in various mathematical equations, for example to calculate surface area
of a triangle:
result = 0.5 * width * height;
or more complex operation
result = 1.45 + (width * height + 20) * 100;
Text variables
Text variables can be concatenated with + operator:
width = 20;
height = 30;
result = width * height;
text = "Area: " + result + " m2";
Edit1 = text;
The result displayed in the edit field is “Area: 600 m2".
Variable name must start with an alphanumeric character: a to z and can include numbers (not as the first
character) and underscore sign _. Variable names must not include any national characters.
Correct variables:
variable1, my_variable
Incorrect variables
1variable (starts with a number)
íúvariable (includes diacritics)
2
Button scripts
ActionScript can be executed in response to mouse events (click, mouse over, mouse out, mouse up). To
define button script, select an object and choose “Action”, then one of the commands: “On Click”, “On
Over”, “On Out”, “On Up”. In the dialog window select “ActionScript” and enter the script.
To define a simple event, open a new Flash project and draw 2 objects: edit field Edit1 and Button2.
Select Button2 and choose “Action” > “On Click”. Enter the following code and click OK
Edit1 = "Button event";
Press F9 to run preview. Click Button2 to execute the code; “Button event” will be displayed in the edit
field.
Mouse over and mouse out event.
choose “Action” > “On Over” and enter the code:
Edit1 = "Mouse over";
choose “Action” > “On Out” and enter the code:
Edit1 = "";
this command will erase the content of Edit1.
3
Conditionals
The following instruction checks the variable value and executes part of the code if the condition is met
Syntax:
if (condition)
{
.. execute code
}
Example:
width = 20;
height = 30;
result = width * height;
if (result > 500)
{
text = "Area > 500";
}
Edit1 = text;
If the area is larger than 500, “Area > 500” will be displayed in the Edit1 field.
Else instruction
Else command executes the code, if the condition is not met:
width = 20;
height = 30;
result = width * height;
if (result > 500)
{
text = "What a large area";
}
else
{
text = "What a small area";
}
Edit1 = text;
If the result is larger than 500, command text = “What a large area” will be executed, otherwise text =
“What a small area” will be executed.
4
Loops
Loop will execute the same code several times, each time with increased (or decreased) specific variable,
enabling the same calculation for several variable values.
For instruction
Syntax
for( initial value ; continuation condition ; increasing command )
{
instructions will be repeated in the loop
}
Draw Edit1 text field, choose “Frame” > “ActionScript” and enter the following script:
text = "Even numbers: ";
for( i = 2 ; i < 10 ; i = i + 2 )
{
text = text + i + " ";
}
Edit1 = text;
The code will display Even numbers: 2 4 6 8
While instruction
While loop is another type of loop::
while( condition )
{
instructions will be repeated in the loop
}
In this case, you have to enter the command for initiating variable and increasing its value so the loop can
end.
text = "Even numbers: ";
i = 2;
while( i < 10 )
{
text = text + i + " ";
i = i + 2;
}
Edit1 = text;
5
Functions
Function is a part of code that can be stored in a memory and executed as one of the ActionScript
commands. Function can have parameters and return a value calculated inside the function.
In the following example, a function calculating rectangle area surface will be defined and executed.
function area(width,height)
{
result = width * height;
return result;
}
Edit1 = area(20,30);
Function definition must be preceded by ‘function’ word. The name of the function must obey the same
rules as variable names, e.g. it can not start with a numerical and it can include letters, numbers and
underscore sign.
The code of a function is entered between brackets { }.
The last command is return returning calculated value.
6
Arrays
Array is a variable with several values. Array index is specified in brackets [ ].
For example, create an array with female names:
names = new Array();
names[0] = "Julia";
names[1] = "Maria";
names[2] = "Sandra";
Edit1 = names[2];
Unlike numeric and text variables, arrays must be created before used.
Array can be initialized directly with the command new.
names = new Array("Julia","Maria","Sandra");
Edit1 = names[2];
Objects
Objects, also referred to as classes, are similar to variables, although their structure allows you to store
variables referred to as object attributes and functions referred to as object methods.
For example all Sprite objects are of MovieClip class. They include _x and _y attributes which is the upper
and left position of a sprite. A sprite object can be moved during the playback by modifying these
attributes.
Attributes and methods must be referenced with a dot between the object name and the method or
between the object name and the attribute name.
Draw Sprite1 object, draw circle inside the Sprite. Exit the sprite, choose "Frame" > "ActionScript" and
enter the code:
Sprite1._x = 0;
Sprite1._y = 0;
Press F2 to change the sprite name so it is identical to the name used in the code, in this case it must be
“Sprite1”. Press F9 to execute the code. The sprite will move to the upper left corner of your animation.
Use new command to create objects:
variable = new ObjectType( parameters );
7
Edit fields
Edit fields, usually Edit1, Edit2 etc. can be used for displaying variables and entering data.
Create a new Flash project and draw 3 edit fields: Edit1, Edit2 and Edit3, and Button4 button.
Select each field and press Enter to open preferences. Name the fields accordingly height, width and
result, and name the button Calculate:
Select the Calculate button, choose "Action" > "On Click", enter the following code:
result = height * width;
Press F9 and try some calculations by entering input data and clicking Calculate button.
Multiline fields
Text fields are a single line as a default. Select the field and press Enter to modify the field parameters.
Check Multiline to accept return key in the edit field.
New line mark
Use "\n" string inside the string variable to break the text into lines. Create the text field and extend it
vertically to contain several lines, check the Multiline option.
Enter the following frame code:
Edit1 = "Line 1\nNew line\nAnother line";
8
Operators
Operators are mathematical or logical operation commands for variables and numbers.
+
add values
subtract values
/
divide values
*
multiply values
%
modulo, remainder of the division
e.g.
Edit1 = 10 % 3;
the result is 1
Comparison operators
Operators used for conditional commands, returning true or false value.
<
less, returns true, if the first parameter is less than the second parameter
>
greater, returns true, if the first parameter is greater than the second parameter
<=
less or equal to, returns true, if the first parameter is less or equal to the second parameter
>=
greater or equal to, returns true, if the first parameter is greater or equal to the second parameter
==
equality, returns true, if the parameters are identical, and false if they differ
===
exact equality, returns true if the parameters are identical and of the same type, and false if they differ
!=
inequality, returns true if the parameters differ, false if they are identical
!
logical negation, converts true to false or false to true
9
Logical operators
Operators used in conditional commands to combine true of false values.
&&
logical sum, returns true if both conditions are met, otherwise returns false
||
returns true if one of the conditions is met, returns false if both conditions are not met
Bit operators
Operators for binary numbers
Example: decimal and binary numbers
1
2
3
4
8
16
32
=
=
=
=
=
=
=
00000001
00000010
00000011
00000100
00001000
00010000
00100000
&
bitwise AND operator, if for both parameters in a specific location the bit has a value of 1, the result is also
1.
example
1 & 2 = 0
1 & 3 = 1
|
if both bits on specific location have a value of 1, the resulting bit is also 1
example
1 & 2 = 3
^
Xor, if bits in a specific location are equal, the result is a bit 0, if they differ, the result is 1
example
1 ^ 3 = 2
~
Bit negation, inverse the bit value for each position
10
Assignment operators
Assignment operator calculates value on the right-hand side of the equal sign and stores it in the variable
on the left-hand side of the equal sign.
Edit1 = x + 1;
Also the following operators are available:
+=
adds value on the right-hand side of the equal sign to the variable
x += 4;
is equivalent to
x = x + 4;
or
Edit1 += "additional text";
is equivalent to
Edit1 = Edit1 + "additional text";
-=
subtracts value on the right-hand side of the equal sign from the variable
x -= a + 2;
is equivalent to
x = x – (a + 2);
*=
multiplies value on the right-hand side by the variable
x *= a + 2;
is equivalent to
x = x * (a + 2);
/=
divides a variable by the value on the right-hand side of the equal sign
x /= a + 2;
11
is equivalent to
x = x / (a + 2);
%=
calculates variable modulo and assigns a result
&=
adds bit value to the current variable and assigns a result
|=
executes OR operation of the value and the current variable and assigns a result
^=
executes XOR operation of the value and the current variable and assigns a result
>>=
moves variable bits to the right-hand side and assigns a result
<<=
moves variable bits to the left-hand side and assigns a result
12
Internal functions
escape(expression:String) : String
Changes a string to a form that can be transmitted as HTTP call arguments, i.e. all non-alphanumeric
characters are changed to % code
unescape(x:String) : String
Changes string from the HTTP call arguments to normal text
getTimer() : Number
Returns milliseconds from the time when the movie clip has started
getURL(url:String)
Opens an internet link
getURL(url:String, window:String)
Opens an internet link with target parameter
Example
getURL("http://www.selteco.com","_blank");
opens www.selteco.com address in a new window
Link parameters can be specified after ? sign
getURL("http://www.selteco.com?param1=value1&param2=value2","_blank");
gotoAndPlay(scene:String)
jumps to the frame with specified name
gotoAndPlay("Frame 2");
Sprite1.gotoAndPlay("Frame 2");
_root.gotoAndPlay("Frame 2");
gotoAndPlay(frame:Number)
jumps to the frame by physical frame index, number of frames depends on movie clip frequency, usually
20 frames per second.
gotoAndStop(scene:String)
jumps to the frame with specified name and stops
gotoAndStop("Frame 2");
Sprite1.gotoAndStop("Frame 2");
_root.gotoAndStop("Frame 2");
gotoAndStop(frame:Number)
jumps to the frame with frame index and stops
isNaN(expression:Object) : Boolean
Returns true if value is non-numerical, false if it is numerical
13
Number(text: String)
Converts string value to numeric
Example
Edit3 = Number(Edit1) + Number(Edit2);
parseFloat(string:String) : Number
Changes string to number
Example
Edit1 = parseFloat("3.5e6");
3500000 is obtained
parseInt(expression:String [, base:Number]) : Number
Changes an integer in the specific base system: binary or hexadecimal
Examples
Edit1 = parseInt("101",2);
setInterval(functionName:Function, interval:Number) : Number
Call specific function in specified time interval in milliseconds
Example: draw Edit1 field and paste the frame code
Edit1 = 0;
function myInterval()
{
Edit1 = Edit1 + 1;
}
setInterval(myInterval,100);
this
Variable used inside the function refers to the current owner of the function
function Constructor()
{
this.attribute1 = "some text";
}
o = new Constructor();
Edit1 = o.attribute1;
14
typeof(expression) : String
Return variable type
String: string
Sprite: movieclip
Button: object
Text field: object
Number: number
Boolean: boolean
Object: object
Function: function
Null value: null
Undefined value: undefined
Examples:
s = "12345";
Edit1 = typeof(s);
or
s = 12345;
Edit1 = typeof(s);
or
Edit1 = typeof(_root);
or
Draw Sprite1 with a circle inside and Edit1 text field, paste the frame code:
Sprite1.onPress = function ()
{
Edit1 = "press";
}
Edit1 = typeof(Sprite1.onPress);
undefined
Not a number
if (someUndefinedVariable == undefined)
{
Edit1 = "variable does not exist";
}
15
MovieClip
MovieClip it is the most commonly used class. All Group or Sprite type objects exist as MovieClips.
The main Flash movie is defined as a _root object.
MovieClip._alpha : Number
Object transparency from 0 to 100 %
MovieClip._currentframe : Number
Number of current physical frame during playback.
MovieClip._droptarget : String
Name of other Sprite, the current Sprite is dragged and dropped into
MovieClip.enabled : Boolean
True if the Sprite can receive mouse events, otherwise the Sprite is blocked
MovieClip.focusEnabled : Boolean
True value if the Sprite can receive key events, otherwise Sprite is blocked
MovieClip._focusrect : Boolean
If true, Sprite is enclosed with a rectangle, which means that it accepts keyboard events
MovieClip._framesloaded : Number
Number of Sprite frames currently downloaded from the internet, if the Sprite is loaded from an external
file
MovieClip._height : Number
Sprite height in pixels
MovieClip.hitArea : MovieClip
Indicator of a different Sprite, if the Sprite has a different object acting as an active button field
MovieClip._lockroot : Boolean
If the subclip is loaded from an external file _lockroot = true, references from the subclip to the _root object
are related to the subclip object not the main clip that loads a subclip.
MovieClip.menu : ContextMenu
Context menu objects (right mouse button) assigned to a specific Sprite.
File must be exported to Flash Player 8 or higher.
In this example, menu item for the main clip is added
function goOnTheWeb()
{
getURL("http://www.selteco.com", "_blank");
}
mymenu = new ContextMenu();
mymenu.customItems.push(new ContextMenuItem("www.selteco.com",goOnTheWeb));
_root.menu = mymenu;
16
MovieClip._name : String
Sprite instance name
Edit1 = Sprite1._name;
MovieClip._parent : MovieClip
Indicator for parent Sprite including this sprite
MovieClip._quality : String
Movie quality:
"LOW" Low quality, fast playback
"MEDIUM" Medium quality, bitmaps and text are not optimized
"HIGH" Default quality
"BEST" High quality, bitmaps are optimized
MovieClip._rotation : Number
Sprite angle of rotation
MovieClip._soundbuftime : Number
Delay in seconds, before buffered sound is played
MovieClip.tabEnabled : Boolean
True if the Sprite belongs to the chain of Tab switching
MovieClip.tabChildren : Boolean
True if the Sprite children will be included in the Tab switching cycle
MovieClip.tabIndex : Number
Entry number for Tab switching
MovieClip._target : String
Absolute sprite path
Edit1 = Sprite1._target;
MovieClip._totalframes : Number
Total number of sprite frames
17
MovieClip.trackAsMenu : Boolean
If true, specific Sprite accepts all events of mouse up, even outside the sprite area
MovieClip._url : String
Internet address from which the Sprite is loaded
MovieClip.useHandCursor : Boolean
If false and when mouse action is defined, the Sprite will have an arrow cursor instead of a link cursor
Sprite1.useHandCursor = false;
MovieClip._visible : Boolean
Defines if Sprite is visible or not
Show sprite:
Sprite1._visible = true;
Hide sprite:
Sprite1._visible = false;
MovieClip._width : Number
MovieClip._height : Number
Sprite width and height in pixels
MovieClip._x : Number
MovieClip._y : Number
Sprite location inside the parent
MovieClip._xmouse : Number
MovieClip._ymouse : Number
Cursor location
function readmouse()
{
Edit1 = _root._xmouse + ", " + _root._ymouse;
}
setInterval(readmouse,10);
MovieClip._xscale : Number
MovieClip._yscale : Number
Sprite x and y scale in percents, default 100
MovieClip.createEmptyMovieClip(instanceName:String, depth:Number) : MovieClip
Creates new and empty Sprite object with instanceName and specific depth, higher depth hides the object
under other objects
MovieClip.createTextField(instanceName:String, depth:Number, x:Number, y:Number,
width:Number, height:Number)
Creates empty text field with instanceName, specific depth and dimensions.
18
Dimensions are specified in pixels.
_root.CreateTextField("EditField1",10,20,20,500,40);
EditField1.text = "My text field";
MovieClip.duplicateMovieClip(newname:String, depth:Number) : MovieClip
Duplicates Sprite and places it on specific depth
Sprite1.duplicateMovieClip("Sprite2",100);
Sprite2._x = Sprite1._x + 10;
Sprite2._y = Sprite1._y + 10;
MovieClip.getBounds(targetCoordinateSpace:Sprite) : Object
Returns rectangle with items visible inside the Sprite in relation to targetCoordinateSpace object or in
relation to each other, if the parameter is not specified
rect = Sprite1.getBounds();
Edit1 = rect.yMin + ", " + rect.yMax + ", " + rect.xMin + ", " + rect.xMax;
MovieClip.getBytesLoaded() : Number
Returns loaded bytes if the file is downloaded from the internet
MovieClip.getBytesTotal(): Number
Returns total Sprite bytes
MovieClip.getDepth(): Number
Returns sprite depth
MovieClip.getInstanceAtDepth(depth:Number) : MovieClip
Returns pointer to the sprite on specific depth
MovieClip.getNextHighestDepth() : Number
Returns any depth on which the new Sprite can be located Each depth may include a single object.
MovieClip.getSWFVersion(): Number
Returns version number for which the specific sprite is intended, if loaded from an external file
MovieClip.getTextSnapshot() : String
Creates a string from the content of text fields within the Sprite
MovieClip.getURL(URL:String [,window:String, method:String])
Open link
URL: internet address e.g. http://www.selteco.com
window: _blank opens new browser window, _self opens link in the current window
method: string POST or GET, if link has parameters after the ?, default value is GET
MovieClip.globalToLocal(point:Object)
Changes global point coordinates (x and y) to the coordinates within the Sprite
MovieClip.gotoAndPlay(framename:String)
Jumps to the specific frame (e.g. Frame2) and starts playback
MovieClip.gotoAndStop(framename:String)
Jumps to specific frame (e.g. Frame2) and stops playback
19
MovieClip.hitTest(target:Object)
Returns true, if the Sprite overlaps (contacts) the Sprite specified as a target parameter
MovieClip.hitTest(x:Number, y:Number, shapeFlag:Boolean)
Returns true, if point (x and y) touches the Sprite, shapeFlag parameter defines, if the visible sprite
components or the whole rectangle is taken for the calculations
MovieClip.loadMovie(url:String)
Loads SWF, FLV or JPG file
MovieClip.loadVariables(url:String)
Loads variable from the text file, text file must contain variable in the same form as the URL addresses
.txt file example
var1="hello"&var2="goodbye"
MovieClip.localToGlobal(point:Object)
Changes point coordinates (x and y) inside the Sprite to global coordinates
MovieClip.nextFrame()
Jumps to the next frame
MovieClip.play()
Starts movie playback
MovieClip.prevFrame()
Jumps to the previous frame
MovieClip.removeMovieClip()
Removes Sprite created using MovieClip.duplicateMovieClip() command
MovieClip.setMask(target:Sprite)
Sets Sprite as a mask for other Sprite
MovieClip.startDrag()
Starts dragging a Sprite with a mouse
MovieClip.startDrag([lock:Boolean, [left:Number, top:Number, right:Number, bottom:Number]])
Starts dragging a Sprite with a mouse limiting available area with left, top, right and bottom values
Lock parameter makes the Sprite center correspond to a mouse cursor
MovieClip.stop()
Stops Sprite playback
MovieClip.stopDrag()
Stops dragging a Sprite with a mouse
MovieClip.swapDepths(depth:Number)
MovieClip.swapDepths(target:String)
Swaps 2 Sprite depths at the specific depth or with a specific name
MovieClip.unloadMovie()
Removes the sprite, dynamically loaded from an external file, from memory
20
Drawing Sprites
MovieClip.beginFill(rgb:Number)
MovieClip.beginFill(rgb:Number, alpha:Number)
Specifies fill Color using hexadecimal code and alpha opacity
MovieClip.beginGradientFill(fillType:String, Colors:Array, alphas:Array, ratios:Array,
matrix:Object)
Specifies gradient fill between different Colors
fillType: "linear" or "radial"
Colors: Color array, max. 8 items
alphas: opacity array (from 0 transparent to 255 full opacity), max. 8 items
ratios: gradient fill Color position array, values from 0 to 255, max. 8 items
MovieClip.clear()
Clears the drawing made with drawing commands
MovieClip.curveTo(cx:Number, cx:Number, x:Number, y:Number)
Draws Bezier curve from point x,y and control point cx and cy
MovieClip.endFill()
Closes started lines and fills the curve with Color specified with MovieClip.beginFill() or
MovieClip.beginGradientFill() commands.
MovieClip.lineStyle(thickness:Number, rgb:Number, alpha:Number)
Sets new line style with specific thickness rgb Color and alpha opacity
MovieClip.lineTo(x:Number, y:Number)
Draws straight line to the x, y point
MovieClip.moveTo()
Sets new drawing start position
Sprite event support
The below events can be assigned to the defined functions
MovieClip.onData : Function
Called while downloading data
MovieClip.onDragOut : Function
Called when mouse button is pressed within the sprite and moved outside its area
MovieClip.onDragOver : Function
Called when the mouse button is pressed outside the sprite and moved into its area
MovieClip.onEnterFrame : Function
Called before displaying each physical frame
MovieClip.onKeyDown : Function
21
Called after pressing Key.getCode() and Key.getAscii() in order to obtain a key code
MovieClip.onKeyUp : Function
Called when the key is released
MovieClip.onKillFocus : Function
Called when the Sprite cannot accept keyboard events
MovieClip.onLoad : Function
Called before the Sprite appears in the clip for the first time
MovieClip.onMouseDown : Function
Called when left mouse button is used
MovieClip.onMouseMove : Function
Called by mouse movement
MovieClip.onMouseUp : Function
Called when the mouse button is released
MovieClip.onPress : Function
Called when left mouse button is used
MovieClip.onRelease : Function
Called when the mouse button is released
MovieClip.onReleaseOutside : Function
Called when mouse button is pressed within the sprite, moved outside and released
MovieClip.onRollOut : Function
Called when mouse cursor is moved outside the sprite area
MovieClip.onRollOver : Function
Called when mouse cursor is moved into the sprite area
MovieClip.onSetFocus : Function
Called when sprite sets focus
MovieClip.onUnload : Function
Called when sprite is unloaded from the clip
22
Example:
Draw Edit1 field and Sprite2, draw circle inside the sprite:
paste the following code in the ActionScript frame:
Sprite2.onPress = function ()
{
Edit1 = "onPress";
}
Sprite2.onRelease = function ()
{
Edit1 = "onRelease";
}
Sprite2.onRollOut = function ()
{
Edit1 = "onRollOut";
}
Sprite2.onRollOver = function ()
{
Edit1 = "onRollOver";
}
23
Array
This class represents array type, arranged variables that can be referred to using index in brackets [ ].
Array.concat( array1, array2, ... )
Joins arrays
arr1 = new Array();
arr1[0] = "Julia";
arr1[1] = "Maria";
arr2 = new Array();
arr2[0] = "Sandra";
arr2[1] = "Pamela";
arr3 = arr1.concat(arr2);
Edit1 = arr3[3];
Array.join( separator )
Joins array items as a string
arr1 = new Array();
arr1[0] = "Julia";
arr1[1] = "Maria";
arr1[2] = "Pamela";
Edit1 = arr1.join(", ");
Array.pop()
Removes last array item and returns its value
arr1 = new Array();
arr1[0] = "Julia";
arr1[1] = "Maria";
arr1[2] = "Pamela";
Edit1 = arr1.pop();
Array.push()
Adds item at the end of an array and returns new number of items
arr1 = new Array();
arr1[0] = "Julia";
arr1[1] = "Maria";
arr1.push("Pamela");
Array.reverse()
Reverses the order of array items
arr1 = new Array();
arr1[0] = "Julia";
arr1[1] = "Maria";
arr1[2] = "Pamela";
arr1.reverse();
Edit1 = arr1.join(", ");
24
Array.shift()
Removes the first array item and returns its value
arr1 = new Array();
arr1[0] = "Julia";
arr1[1] = "Maria";
arr1[2] = "Pamela";
Edit1 = arr1.shift();
Array.slice( start, end )
Slices part of an array from the start item to the end item (not included) and returns a new array
arr1 = new Array();
arr1[0] = "Julia";
arr1[1] = "Maria";
arr1[2] = "Sandra";
arr1[3] = "Pamela";
arr2 = arr1.slice(1,3);
Edit1 = arr2.join(", ");
Array.sort()
Sorts array items
arr1 = new Array();
arr1[0] = "Maria";
arr1[1] = "Sandra";
arr1[2] = "Pamela";
arr1[3] = "Julia";
arr1.sort();
Edit1 = arr1.join(", ");
Array.sort( option )
Available option parameter values
•
•
•
•
•
1 or Array.CASEINSENSITIVE, case insensitive
2 or Array.DESCENDING, reversed order (descending)
4 or Array.UNIQUESORT, sorting error, identical values
8 or Array.RETURNINDEXEDARRAY, returns indexed arrays without sorting original array
16 or Array.NUMERIC, numerical values in array, otherwise algorithm will sort 100 before 99,
since 1 is before 9
25
Sorting function syntax
function sort(a, b)
{
... compare a and b
return 1 , 0 or -1
}
Array.sort( compareFunction )
Sort compareFunction must return 0, when items are identical, -1 when item a is lesser than item b, 1
when item b is lesser than item a.
arr1 = new Array();
arr1[0] = 30;
arr1[1] = 4;
arr1[2] = 1;
arr1[3] = 16;
function sort(a,b)
{
if(a<b) return -1;
if(a>b) return 1;
return 0
}
arr1.sort(sort);
Edit1 = arr1.join(", ");
Array.sortOn( fieldName)
Sorts items in relation to the array field.
Array fields can be used as a sorting value:
arr1 = new Array();
arr1[0] = new Object();
arr1[1] = new Object();
arr1[2] = new Object();
arr1[3] = new Object();
arr1[0].name
arr1[1].name
arr1[2].name
arr1[3].name
=
=
=
=
"Maria";
"Sandra";
"Pamela";
"Julia";
arr1[0].age
arr1[1].age
arr1[2].age
arr1[3].age
=
=
=
=
24;
15;
31;
22;
arr1.sortOn("age");
Edit1 = arr1[0].name + ", " + arr1[1].name + ", " + arr1[2].name + ", " +
arr1[3].name ;
26
Array.splice( start, count)
Removes array items
arr1 = new Array();
arr1[0] = "Julia";
arr1[1] = "Maria";
arr1[2] = "Sandra";
arr1[3] = "Pamela";
arr1.splice(1,2);
Edit1 = arr1.join(", ");
Array.toString()
Converts array to a string.
arr1 = new Array();
arr1[0] = 1;
arr1[1] = 10;
arr1[2] = 100;
arr1[3] = 1000;
Edit1 = arr1.toString();
Array.unshift()
Adds new items at the beginning.
arr1 = new Array();
arr1[0] = "Julia";
arr1[1] = "Maria";
arr1.unshift("Sandra", "Pamela" );
Edit1 = arr1.join(", ");
Array.length
Returns number of items in the table
names = new Array();
names[0] = "Julia";
names[1] = "Maria";
names[2] = "Sandra";
Edit1 = names.length;
27
Key
This Class is responsible for keyboard support.
Before keyboard actions are supported by the clip, it must be activated in the browser by clicking a mouse
button in the movie clip area.
Key.addListener(newListener:Object)
Adds listener for support of pressing and releasing buttons
Example
myListener = new Object();
myListener.onKeyDown = function ()
{
Edit1 = "Key pressed";
}
myListener.onKeyUp = function ()
{
Edit1 = "Key released.";
}
Key.addListener(myListener);
Key.getAscii() : Number
Returns ASCII of the last pressed button
Key.getCode() : Number
Returns code of the last pressed button
Key.isDown(keycode:Number) : Boolean
Returns true if specific key is pressed
Key.isToggled(keycode:Number) : Boolean
Returns true if Num Lock or Caps Lock is pressed.
Key.removeListener(listener:Object) : Boolean
Removes listener
28
Key codes
To simplify, Key class includes attributes corresponding to the codes of the most common keys
Key.BACKSPACE = 8
Key.CAPSLOCK = 20
Key.CONTROL = 17
Key.DELETEKEY = 46
Key.DOWN = 40
Key.END = 35
Key.ENTER = 13
Key.ESCAPE = 27
Key.HOME = 36
Key.INSERT = 45
Key.LEFT = 37
Key.PGUP = 33
Key.PGDN = 34
Example: moving the sprite with keys.
Draw Sprite1, place a circle inside, exit the sprite and enter the frame code:
myListener = new Object();
myListener.onKeyDown = function ()
{
if(Key.isDown(Key.LEFT)) Sprite1._x = Sprite1._x - 5;
if(Key.isDown(Key.RIGHT)) Sprite1._x = Sprite1._x + 5;
if(Key.isDown(Key.UP)) Sprite1._y = Sprite1._y - 5;
if(Key.isDown(Key.DOWN)) Sprite1._y = Sprite1._y + 5;
}
Key.addListener(myListener);
29
Mouse
Mouse.addListener(newListener:Object)
Adds listener for mouse events support
Mouse.hide() : Number
Hides mouse cursor, returns true if cursor is visible
Mouse.removeListener((listener:Object) : Boolean
Removes listener added by addListener().
Mouse.show() : Number
Shows cursor, returns if cursor is visible before function call
MouseListener.onMouseDown : Function
Function called when pressing mouse button
MouseListener.onMouseMove : Function
Function called when mouse is moved
MouseListener.onMouseUp : Function
Function called when mouse button is released
MouseListener.onMouseWheel : Function
Function called when mouse scroll is rotated
Example display of mouse position in Edit1 field
myListener = new Object();
myListener.onMouseMove = function ()
{
Edit1 = _root._xmouse + ", " + _root._ymouse;
}
Mouse.addListener(myListener);
30
Button
Button class corresponds to buttons created with “Button” tool
By default buttons are named: ButtonObject1, ButtonObject2 etc. Select the button and press F2 to
display button name.
In order to define button for ActionScript press F2 and check “ActionScript object” option.
Button._alpha : Number
Button opacity: 0 to 100 percent
Button.enabled : Boolean
Specifies if the button accepts mouse and keyboard events
Example: blocking button before clicking, draw Button1 and paste the frame code:
ButtonObject1._alpha = 20;
ButtonObject1.enabled = false;
Button._height : Number
Button._width : Number
Define button dimensions
Button._name : String
Button object name
Button._rotation : Number
Button rotation in relation to upper left corner
Button.tabEnabled : Boolean
True if the button is within the chain of Tab switching
Button.tabIndex : Number
Entry number for Tab switching
Button._target : String
Absolute button path
Edit1 = ButtonObject1._target;
Button.trackAsMenu : Boolean
If true, specific button accepts all mouse release events, even outside the sprite area
Button.useHandCursor : Boolean
If false, button will have an arrow cursor instead of a link cursor, if the mouse action is defined for the
specific button
ButtonObject1.useHandCursor = false;
Button._x : Number
Button._y : Number
Shifting button in relation to the current position, default 0,0
31
Button._xmouse : Number
Button._ymouse : Number
Mouse cursor position on a button
Button._visible : Boolean
Specifies if the button is visible
Button.onDragOut : Function
Called when the mouse button is pressed within the button and the cursor is dragged outside the area
Button.onDragOver : Function
Called when the mouse button is pressed outside the button and the cursor is dragged over the area
Button.onKeyDown : Function
Called after pressing Key.getCode() and Key.getAscii() in order to obtain a key code
Button.onKeyUp : Function
Called when the key is released
Button.onKillFocus : Function
Called when the button cannot accept keyboard events
Button.onPress : Function
Called when pressing left mouse button on the button
Button.onRelease : Function
Called when the mouse button is released
Button.onReleaseOutside : Function
Called when the mouse button is pressed within the button, and the cursor is dragged outside the area
and the mouse button is released
Button.onRollOut : Function
Called when the mouse cursor rolls out of the button
Button.onRollOver : Function
Called when the mouse pointer rolls over the button
Button.onSetFocus : Function
Called when the button accepts keyboard events
32
Math
Math class provides mathematical functions and fixed values.
Math.abs(x:Number) : Number
Absolute number value
Edit1 = Math.abs(-1.45);
Math.acos(x:Number) : Number
Calculates acosine.
Math.asin(x:Number): Number
Calculates asine
Math.atan(x:Number) : Number
Calculates atangent.
Math.atan2(y:Number, x:Number) : Number
Calculates angle from x,y point to the x axis in radians (from -pi to pi)
Math.ceil(x:Number) : Number
Rounds up a number to the next integer
Math.cos(x:Number) : Number
Calculates cosine
Math.exp(x:Number) : Number
exp function
Math.floor(x:Number) : Number
Rounds down a number to the next integer
Math.log(x:Number) : Number
Calculates natural logarithm
Math.max(x1:Number, x2:Number) : Number
Returns greater of 2 numbers
Math.min(x1:Number, x2:Number) : Number
Returns lesser of 2 numbers
Math.pow(x:Number, y:Number) : Number
Returns number raised to the y power
Math.random() : Number
Returns random number from 0.0 to 1.0.
Math.round(x:Number) : Number
Rounds up to the next integer
Math.sin(x:Number) : Number
Calculates sine
33
Math.sqrt(x:Number) : Number
Calculates square root
Math.tan(x:Number) : Number
Calculate tangent
Mathematical variables
Incorporated variables that can be used in calculations
Math.E : Number
Base for the natural logarithm (approx. 2.718).
Math.LN2 : Number
Natural logarithm of 2 (approx. 0.693).
Math.LOG2E : Number
approx. 1.442.
Math.LN10 : Number
Natural logarithm of 10 (approx. 2.302).
Math.LOG10E : Number
approx. 0.434
Math.PI : Number
PI (approx. 3.14159).
Math.SQRT1_2 : Number
Square root of 1/2 (approx. 0.707).
Math.SQRT2 : Number
Square root of 2 (approx. 1.414).
Example:
Edit1 = "Area of the circle with the radius of 5 is " + Math.PI *
Math.pow(5,2);
34
Date
Date class represents an object with the current time or any time specified by the user.
UTC is a coordinated universal time, independent on seasons or time zone.
Local time is a standard time accounting daylight savings time and time zone.
new Date()
creates a new Data class object with current time
to display of a current year use the code
d = new Date();
Edit1 = d.getFullYear();
new Date(year:Number, month:Number [, date:Number [, hour:Number [, minute:Number [,
second:Number [, millisecond:Number ]]]]])
Creates a new data object with specified time
year: year
month: month number from 0 to 11
date: day from 1 to 31
hour: hour from 0 to 23
minute: minute from 0 to 59
second: second from 0 to 59
millisecond: 1/1000 seconds from 0 to 999
Example: date 12 February 1990
mydate = new Date(1990, 1 ,12);
Example: calculation of the number of days between 2 dates: 1 January 1980 and 14 march 2009
date1 = new Date(1980, 0 ,1);
date2 = new Date(2009, 2 ,14);
days = ( date2.getTime() - date1.getTime() ) / (1000 * 60 * 60 * 24);
Edit1 = days;
new Date(timeValue:Number)
Creates Data class object with time specified in milliseconds, from 1 January 1970, UTC
Example: creating 3 seconds after 1 January 1970, UTC
d = new Date(3000);
Edit1 = d;
Date.getDate() : Number
Returns day of the month
Date.getDay() : Number
Returns day of the week
35
Date.getFullYear() : Number
Returns 4 digit year
Date.getHours() : Number
Returns hour
Date.getMilliseconds() : Number
Returns milliseconds
Date.getMinutes() : Number
Returns minutes
Date.getMonth() : Number
Returns month
Date.getSeconds() : Number
Returns seconds
Date.getTime() : Number
Returns milliseconds from midnight 1 January 1970, UTC
Date.getTimezoneOffset() : Number
Returns time difference in seconds, UTC
Date.getYear() : Number
Returns year
Date.getUTCDate() : Number
Date.getUTCDay() : Number
Date.getUTCFullYear() : Number
Date.getUTCHours() : Number
Date.getUTCMilliseconds() : Number
Date.getUTCMinutes() : Number
Date.getUTCMonth() : Number
Date.getUTCSeconds() : Number
Date.getUTCYear() : Number
Identical functions, although they return time converted to the UTC
Date.setDate() : Number
Date.setFullYear() : Number
Date.setHours() : Number
Date.setMilliseconds() : Number
Date.setMinutes() : Number
Date.setMonth() : Number
Date.setSeconds() : Number
Date.setTime() : Number
Date.setYear() : Number
Functions, which modify time in Date object
Date.toString() : String
Returns time as a string
Date.UTC() : Number
Number of milliseconds between 1 January 1970, UTC and the time stored in the object
36
Variable classes
Arguments
Object representing list of function parameters
arguments.callee : Function
Pointer to the function called by the specific function
arguments.caller : Function
Pointer to the function being called
arguments.length : Number
Number of parameters
Example:
function getArgCount(param_arg1, param_arg2, param_arg3)
{
return (arguments.length);
}
Edit1 = getArgCount("par1","par2","par3");
Boolean
Class represents Boolean type variable, i.e. true or false
Boolean.toString() : String
Returns text representation of a variable ("true" or "false")
Boolean.valueOf() : Boolean
Returns object value ("true" or "false")
Hexadecimal system
System used for specifying color values. RGB colors are stored as hexadecimal numbers (6 characters).
In hexadecimal notation,every digit instead of 10 values takes on a values between 0 to 15, numerals
above the value of 9 are denoted with a,b,c,d,e,f or A,B,C,D,E,F.
To differentiate hexadecimal numbers from decimal numbers, they are preceded with 0x, otherwise
hexadecimal numbers without any value above 9 might be confused with decimal number.
Examples of hexadecimal numbers and equivalent decimal values
0x2 =
0x9 =
0xF =
0x10
2
9
15
= 16
37
0x18 = 32
0xFF = 255
Color in computer graphics is defined using 3 values, corresponding to the intensity of red, green and
blue. All Colors can be obtained by mixing primary Colors with correct ratio. Intensity of all Colors can
have a value of 0 (no Color) to 255 (maximum brightness of a component Color).
Maximum brightness of all Colors gives white, and no brightness gives black.
To code a single component Color, also referred to as a channel it is required to use 2 hexadecimal
numbers. Maximum value is 255, i.e. 0xFF.
Color code is created by specifying hexadecimal number with 6 digits:
0xRRGGBB
where RR means intensity of red, GG - green and BB - blue.
example of Colors denoted in hexadecimal numbers:
0x000000
0xFFFFFF
0xFF0000
0x00FF00
0x0000FF
0x808080
black
white
red
green
blue
grey 50%
Color
Color class modifies Sprite color matrix. Sprite matrix allows to change Colors or transparency.
Color gain is a percentage gain of specific channel of all graphic items within a Sprite, Color phase means
adding all items to the current channel. E.g. by shifting red to 255 and other Colors to -255, all sprite items
will be red, irrespective of their previous Color.
new Color( target:Sprite )
Creates new Color type object related to a specific Sprite
Color.getTransform() : Object
Downloads a current sprite Color matrix. It is an object incorporating the following attributes:
ra red gain percentage (-100 to 100).
rb red value shift (-255 to 255).
ga green gain percentage (-100 to 100).
gb green value shift (-255 to 255).
ba blue gain percentage (-100 to 100).
bb blue value shift (-255 to 255).
aa opacity gain percentage (-100 to 100).
ab opacity value shift (-255 to 255).
Default matrix include 100 gain an 0 shift for each channel.
Color.setTransform(matrix:Object)
Creates new sprite Color matrix
Color.getRGB() : Number
Returns numerical value corresponding to a Color code, incorporating rb, gb and bb values
38
Color.setRGB(0xRRGGBB:Number)
Sets Color phase in current matrix to the specific numerical value (stores in rb, gb and bb fields)
Example: draw Sprite and a grey circle inside. Exit the sprite and enter the frame code:
c = new Color(Sprite1);
c.setRGB(0xFF0000);
Sprite will change Color to red:
Change to 50% opacity
c = new Color(Sprite1);
m = c.getTransform();
m.aa = 50;
c.setTransform(m);
Number
Class represents numerical object
Number.toString()
Returns string
Number.valueOf()
Returns numerical value of an object
Number.MAX_VALUE
The highest possible numerical value, approx. 1.79E+308.
Number.MIN_VALUE
The lowest possible numerical value, approx. 5e-324.
Number.NaN
39
Expression value for comparing, if an object is a number, Not a Number (NaN).
Number.NEGATIVE_INFINITY
Positive infinity value
Number.POSITIVE_INFINITY
Negative infinity value
40
Sound
Class provides sound control
new Sound([target:Sprite])
Creates new Sound type object
When Sprite parameter is specified, object controls sounds within the Sprite
Sound.attachSound("idName":String)
Attaches sound with a specific ID to the object As a default it is a file name of the sound. Name can be
changed in “Movie” > “Sounds”
Sound.getBytesLoaded()
If the sound is loaded from the file, returns downloaded bytes
Sound.getBytesTotal()
Returns total size of a sound file
Sound.getPan()
Returns balance value -100 (left channel) to 100 (right channel)
Sound.getTransform()
Returns object with the following attributes
ll: intensity of a left track in left speaker
lr: intensity of a left track in right speaker
rl: intensity of a right track in left speaker
rr: intensity of a right track in right speaker
values 0 to 100
Sound.getVolume()
Returns sound intensity 0 to 100
Sound.loadSound(url:String)
Downloads MP3 sound from the internet address
Sound.setPan(balance:Number)
Set balance from -100 to 100
Sound.setTransform(mixer:Object)
Define channel mixing
mixer is an object with ll, lr, rl and rr attributes
see also getTransform()
Sound.setVolume(volume:Number)
Sets sound intensity 0 to 100
Sound.start()
Starts sound playback from the beginning
start(secondOffset:Number)
Starts sound playback from the specific second
41
start(secondOffset:Number, loop:Number)
Starts sound playback from the specific second and with specific number of repetitions
Sound.stop()
Stop sound
Sound.duration
Sound duration in milliseconds
Sound.id3
Pointer to the ID3 object of a MP3 file, if present
Incorporates the following attributes
Sound.id3.comment
Sound.id3.album
Sound.id3.genre
Sound.id3.songname
Sound.id3.artist
Sound.id3.track
Sound.id3.year
Comments
Album
Genre
Song name
Artist
Track number
Release year
Attributes with names defined for ID3 specification are also available:
COMM
TALB
TBPM
TCOM
TCOP
TDAT
TEXT
Comment
Album title
Pace (per minute)
Composer
Copyrights
Data
Text author
Sound.position
Position of a current sound playback in milliseconds
Sound.onID3
Function called when ID3 is available
Sound.onLoad
Function called when sound is read from the file
Sound.onSoundComplete
Function called when sound playback is finished
42
String
Class represents string of alphanumeric characters. Characters in the string are indexed from 0 (first
character of a string from the number smaller by 1 from the string length)
Letters in “Pamela” string will have the following indices:
0P
1a
2m
3e
4l
5a
String.length : Number
Number specifying the current number of characters in the string
String.charAt(x:Number) : String
Returns character in position x (from 0)
String.charCodeAt(x:Number) : Number
Returns ASCII of the character as a number in position x (from 0)
String.concat(val1:String, ... valN:String) : String
Creates and returns combination of a string with specified parameters.
stringA = "Hello";
stringB = "World";
Edit1 = stringA.concat(" ", stringB);
“Hello World” is displayed
String.fromCharCode(c1:Number,c2,...cN) : String
Returns string consisting of characters in ASCII
Edit1 = "dog"+String.fromCharCode(64)+"house.net";
[email protected] is displayed
String.indexOf(substring:String) : Number
Returns index of a first instance of a substring from 0 at the beginning, or -1 if the substring is not found
String.indexOf(substring:String, startIndex:Number) : Number
Returns index of a substring instance, beginning from the startIndex
String.lastIndexOf(substring:String) : Number
Returns index of a last instance of a substring or -1 if the substring is not found
String.lastIndexOf(substring:String, startIndex:Number) : Number
Returns index of a last instance of a substring, beginning search from the startIndex
String.slice(start:Number) : String
Returns substring from the start character to the end character
43
String.slice(start:Number, end:Number) : String
Returns substring consisting of a start character and end character
String.split("delimiter":String) : Array
Divides the string into substrings using delimiter and returns string array
s = "Maria:Pamela:Sandra";
a = s.split(":");
Edit1 = a[1];
String.substr(start:Number) : String
Returns substring from the start position to the end position, if start is a negative number, returns substring
counted from the end
String.substr(start:Number, n:Number) : String
Returns n character substring from the start position
String.substring(start:Number, end:Number) : String
Returns substring from the start character to the end character, not including end character
String.toLowerCase() : String
Returns string of characters in lowercase without changing the original object
String.toUpperCase() : String
Returns string of characters in uppercase without changing the original object
44
Stage
Stage class correspond to the Flash movie clip located in the browser window
Stage.align : String
Alignment of a Flash object in the browser window
"T" top center
"B" bottom center
"L" center left
"R" center right
"TL" top left
"TR" top right
"BL" bottom left
"BR" bottom right
Stage.height : Number
Stage.width : Number
Width and height of a movie clip in pixels
Stage.scaleMode : String
Movie clip scale in the browser, available values: "exactFit", "showAll", "noBorder" and "noScale"
Stage.showMenu : Boolean
True if the whole context menu is available, false if the menu is limited
Stage.addListener(myListener:Object)
Adds listener checking if the movie clip is scaled in the browser
Stage.removeListener(myListener:Object) : Boolean
Removes listener added by the addlistener command
Stage.onResize : Function
Pointer to the function with notification about the movie clip scale in the browser. scaleMode parameter
must be set to “noScale”.
45
System
System
System.setClipboard(string:String) : Boolean
Copies string to the clipboard
System.showSettings()
Displays setting panel of a Flash player
System.showSettings(n:Number)
Displays setting panel in the n tab:
0 Privacy
1 Local Storage
2 Microphone
3 Camera
System.exactSettings : Boolean
True if the access settings apply to the specific domain, false if they apply to domains and subdomains in
a specific domain.
System.useCodepage : Boolean
If false, Flash treats external text files as a Unicode, true if the files are stored in a code page. It applies to
the files loaded by the LoadVars class.
System.onStatus : Function(genericError:Object)
Called in the case of a Flash plugin error
System.security
Object includes information on access permissions for SWF files run in the specific domain.
System.security.allowDomain("domain1":String, "domain2", ... "domainN")
Allows SWF files from specified domains to use this SWF file
System.security.allowInsecureDomain("domain":String)
Allows files from the domain to use this SWF file, if it is provided by the HTTPS
System.security.loadPolicyFile(url: String)
Download XML permission file from the specific internet address
File example:
<cross-domain-policy>
<allow-access-from domain="*" to-ports="507" />
<allow-access-from domain="*.foo.com" to-ports="507,516" />
<allow-access-from domain="*.bar.com" to-ports="516-523" />
<allow-access-from domain="www.foo.com" to-ports="507,516-523" />
<allow-access-from domain="www.bar.com" to-ports="*" />
</cross-domain-policy>
46
System.capabilities
Object contains information about capabilities of the system, where Flash file is executed
System.capabilities.avHardwareDisable : Boolean
Is camera and microphone available
System.capabilities.hasAccessibility : Boolean
Is system equipped with accessibility features
System.capabilities.hasAudio : Boolean
Does system play sound
System.capabilities.hasAudioEncoder : Boolean
Does system store sound
System.capabilities.hasEmbeddedVideo : Boolean
Does system play video
System.capabilities.hasMP3 : Boolean
Does system play MP3 files
System.capabilities.hasPrinting : Boolean
Is printing available
System.capabilities.hasScreenBroadcast : Boolean
System.capabilities.hasScreenPlayback : Boolean
Does system use Flash Communication Server
System.capabilities.hasStreamingAudio : Boolean
Does system play stream audio
System.capabilities.hasStreamingVideo : Boolean
Does system play stream video
System.capabilities.hasVideoEncoder : Boolean
Does system store video in a file (e.g. from a camera)
System.capabilities.isDebugger : Boolean
Is plugin version featured with a debugging function
System.capabilities.language : String
System language as a two-letter code, e.g. “en” English
System.capabilities.localFileReadDisable : Boolean
Is access to system files blocked on a disk
System.capabilities.manufacturer : String
Flash plugin author
System.capabilities.os : String
Operating system
System.capabilities.pixelAspectRatio : Number
47
Ratio of physical pixels to logical pixels of a display, usually 1
System.capabilities.playerType : String
Plugin type, available values: "StandAlone", "External", "PlugIn" or "ActiveX".
System.capabilities.screenColor : String
Screen Color, available values: "Color", "gray", "bw".
System.capabilities.screenDPI : Number
Screen resolution in pixels per inch, usually 72
System.capabilities.screenResolutionX : Number
Horizontal screen resolution
System.capabilities.screenResolutionY : Number
Vertical screen resolution
System.capabilities.serverString : String
Variable string coded as an URL call
System.capabilities.version : String
Plugin version
48
TextField
Class corresponds to text fields.
For text fields, variable name must be differentiated from the field object name. Text fields as objects are
referred to by name, not by variable name. Select the field and press F2 to check the field name. Field
name is usually EditField1, EditField2 etc.
Also check “ActionScript object” option (after pressing F2)
TextField.autoSize : Boolean
If true, field will automatically extend to include the whole text.
TextField.background : Boolean
Field has a uniform background, otherwise it is transparent
TextField.backgroundColor : Number
Background Color
TextField.border : Boolean
Field has borders
TextField.borderColor : Number
Frame Color
TextField.bottomScroll : Number
Index of a last visible line of text
TextField..condenseWhite : Boolean
If true, in the HTML field all marks of a new line and additional spaces are ignored
TextField.embedFonts : Boolean
If true, font from a Flash file is used, if false system font is used
TextField._height : Number
Total field height in pixels
TextField.hscroll : Number
Position in pixels of a vertically scrolled text
TextField.html : Boolean
If true, fields interpret HTML tags
TextField.htmlText : String
Field HTML code may include the following tags:
 new line
, , bold, italic, underline end with: , , 
<li> list
 font face, end with: 
 font Color, end with: 
 font size, end with: 
49
TextField.length : Number
Number of characters
TextField.maxChars : Number
maximum allowable number of characters in the field, null = no limits
TextField.maxhscroll : Number
Maximum possible value of horizontal scroll
TextField.maxscroll : Number
Maximum possible value of vertical scroll
TextField.menu : ContextMenu
pointer to the field context menu
TextField.mouseWheelEnabled
If true, field supports mouse scroll actions
TextField.multiline : Boolean
if true, field can be multiline
TextField._name : String
Field object name
TextField._parent : MovieClip
Pointer to the sprite containing the field
TextField.password : Boolean
Password type field, characters are masked
TextField.restrict : String
Set of characters that can be entered in the field.
Examples:
Allow numerals only
EditField1.restrict = "0123456789";
Same as above
EditField1.restrict = "0-9";
Numerals and uppercase only
EditField1.restrict = "A-Z 0-9";
^ character forbids entering the specific character
* cannot be entered
EditField1.restrict = "^*";
Numerals cannot be entered
EditField1.restrict = "^0-9";
If you want to use ^ or - or \ it must be preceded with \
TextField._rotation : Number
50
Rotates text field by a specific angle
TextField.scroll : Number
Vertical field scrolling, index of a first visible line
TextField.selectable : Boolean
If true, allows selecting text in the field
TextField.tabEnabled : Boolean
If true, field is included in the chain of tab switching
TextField.tabIndex : Number
Index of an item in the chain of tab switching
TextField._target : String
Absolute object path
TextField.text : String
Text in field
TextField.textColor : Number
Font Color
TextField.textHeight : Number
TextField.textWidth : Number
Text size inside the field
TextField.type : String
"input" text may be input
"dynamic" text may not be input
TextField._url : String
Internet address of a file that created the field
TextField.variable : String
Variable name related to the field, usually Edit1 for the EditField1
TextField._visible : Boolean
True if the field is visible
TextField._width : Number
Total width in pixels
TextField.wordWrap : Boolean
if true, line are broken if longer than the field
TextField._x : Number
TextField._y : Number
Field x and y position
TextField._xmouse : Number
TextField._ymouse : Number
Cursor location
TextField._xscale : Number
TextField._yscale : Number
51
Vertical and horizontal scale in percents
TextField.addListener()
Adds listener to the events of text change within field
TextField.getFontList() : Array
Returns list of fonts available in the system as an array
Method must be called for a global TextField class, not for a single field
a = TextField.getFontList();
Edit1 = a.join();
TextField.getDepth()
Return object depth
TextField.removeListener() : Boolean
Removes listener
TextField.removeTextField()
Removes field created with MovieClip.createTextField()
TextField.replaceSel(text:String)
Changes the text selected in the field to a new text
TextField.replaceText(beginIndex:Number, endIndex:Number, text:String)
Changes the text in a field from beginIndex to endIndex with a new text
Function available in a Flash Player 8 plugin or higher
Text field event support
TextField.onChanged : Function
Function called when the field is modified
Example: draw text fields Edit1 and Edit2, paste the frame code:
EditField1.onChanged = function ()
{
Edit2 = Edit1;
}
text entered in the Edit1 field will be copied to the Edit2 field
TextField.onKillFocus : Function
Function called when field cannot accept input characters
TextField.onScroller : Function
Function called when field is scrolled
TextField.onSetFocus : Function
Function called when field accepts input characters
Example: draw text fields Edit1 and Edit2, paste the frame code:
52
EditField1.onChanged = function()
{
Edit2 = "modified text";
}
EditField1.onKillFocus = function()
{
Edit2 = "finished entering";
}
EditField1.onSetFocus = function()
{
Edit2 = "start typing";
}
Text formatting
TextField.getNewTextFormat()
Creates and returns text formatting object, which will be applied to the new text
TextField.getTextFormat()
Returns default text formatting object
TextField.getTextFormat(index:Number)
Returns text formatting objects from the index character
TextField.getTextFormat(start:Number, end:Number)
Returns text formatting object from the start character to the end character
TextField.setNewTextFormat(tf:TextFormat)
Sets default text formatting
TextField.setNewTextFormat(index:Number, tf:TextFormat)
Sets text formatting from the index character
TextField.setNewTextFormat(start:Number, end:Number, tf:TextFormat)
Sets text formatting from the start character to the end character
TextFormat class
TextFormat.align : String
Text adjustment to the left, to the right or centered
Values "left", "right" or "center"
TextFormat.blockIndent : Number
Paragraph indent in points, applies to all text lines
TextFormat.bold : Boolean
Bold text
TextFormat.bullet : Boolean
Bullets
53
TextFormat.Color : Number
Font Color
TextFormat.font : String
Font face
TextFormat.indent : Number
Indent of the first text line
TextFormat.italic : Boolean
Text in italic
TextFormat.leading : Number
Horizontal distance between text lines
TextFormat.leftMargin : Number
Left text margin
TextFormat.rightMargin : Number
Right text margin
TextFormat.size : Number
Font size in points
TextFormat.tabStops : Array[Number]
Array of a tabulator position in pixels
TextFormat.underline : Boolean
Underlined text
TextFormat.url : String
TextFormat.target : String
Internet link and link target e.g. _self, _blank etc.
Example:
Draw Edit1 field, double-click, check HTML and click OK.
Paste the following frame code:
Edit1 = "www.selteco.com - Click";
tf = new TextFormat();
tf.font = "Tahoma";
tf.Color = 0x0000ff;
tf.bold = true;
tf.url = "http://www.selteco.com";
EditField1.setTextFormat(0,15,tf);
54
CSS
TextField.StyleSheet
Class allows text field formatting using CSS code and cascade styles.
Style example:
.heading { font-family: Arial, Helvetica, sans-serif; font-size: 24px; font-weight: bold; }
.mainBody { font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: normal; }
TextField.StyleSheet.clear()
Removes formatting with styles
TextField.StyleSheet.getStyle(styleName:String) : Object
Returns style object with styleName and attributes e.g. fontWeight = bold
FontSize = 24px, fontFamily = Arial, Helvetica, sans-serif itd
Example
css = new TextField.StyleSheet();
css.parseCSS(".header { font-size:24pt; Color:#0000FF; font-family:times;}");
headerObject = css.getStyle(".header");
Edit1 = headerObject.fontSize;
TextField.StyleSheet.getStyleNames() : Array
Returns style name array, e.g. “heading”, “mainBody”
TextField.StyleSheet.load(url:String)
Downloads styles from internet address
TextField.StyleSheet. parseCSS(cssText:String) : Boolean
Creates style from the string, returns false in the case of an error
TextField.StyleSheet.setStyle(name:String, style:Object)
Adds style to the collection
my_styleSheet:TextField.StyleSheet = new TextField.StyleSheet();
styleObj = new Object();
styleObj.Color = "#000000";
styleObj.fontWeight = "bold";
my_styleSheet.setStyle("emphasized", styleObj);
TextField.StyleSheet.transform(style:Object) : TextFormat
Changes styleSheet type object to TextFormat
TextField.StyleSheet.onLoad : Function(success:Boolean)
Function called when style loaded from file, success is true, if the operation is finished successfully.
55
Example: creating style and adding it to the edit field.
Draw Edit1 field and paste the frame code
css = new TextField.StyleSheet();
css.parseCSS(".header { font-size:24pt; Color:#0000FF; font-family:times;}");
EditField1.styleSheet = css;
EditField1.html = true;
EditField1.multiline = true;
Edit1 = "The DogThe dog is brown";
56
XML
Class allows to load and use XML files
XML file consists of tags:
XML file example
<globe name="World">
<continent code="na">North America</continent>
<continent code="sa">South America</continent>
<continent code="eu">Europe</continent>
<continent code="af">Africa</continent>
<continent code="as">Asia</continent>
<continent code="au">Australia</continent>
</globe>
File contains main node (globe) and 6 child nodes (continents), each with a code attribute
XML.attributes : Array
Object with the attributes of a current node
XML.childNodes : Array
Child node array
XML.firstChild : XMLNode
Pointer to the first child node
XML.ignoreWhite : Boolean
If true, empty nodes are ignored
XML.lastChild : XMLNode
Pointer to the last child node
XML.loaded : Boolean
Specifies if the file is loaded
XML.nextSibling : XMLNode
Pointer to the next node on the same level
XML.nodeName : String
Node name in the brackets < >
XML.nodeType : Number
Node type, 1 node < >, 3 text node between < > a </ >
XML.nodeValue : String
Node value in the case of a text node (nodeType == 3)
XML.parentNode : XMLNode
Parent indicator
XML.previousSibling : XMLNode
Pointer to the previous node on the same level
57
XML.status : Number
XML file processing state
0 No error
-2 CDATA section without closing
-3 XML declaration without closing
-4 DOCTYPE declaration without closing
-5 Comment without closing
-6 Incorrect element
-7 No memory
-8 Attribute without closing
-9 No proper closing tag
-10 No proper opening tag
XML.xmlDecl : String
XML file declaration, if exists
XML.addRequestHeader(headerName:String, headerValue:String)
In case the file is downloaded from the internet, you can add additional headings and call parameters
XML.appendChild(childNode:XMLNode)
Adds child node to the end of the list
XML.cloneNode(deep:Boolean) : XMLNode
Clones and returns node with child nodes to the specific depth
XML.createElement(name:String) : XMLNode
Creates and returns new tree element with a specific name
XML.createTextNode(text:String) : XMLNode
Creates text node
XML.getBytesLoaded() : Number
Returns bytes downloaded when loading file
XML.getBytesTotal() : Number
Return XML file size
XML.hasChildNodes() : Boolean
Returns true, if the current node has child nodes
XML.insertBefore(childNode:XMLNode, beforeNode:XMLNode)
Add note through other node
XML.load(url:String)
Load XML file from the internet
XML.parseXML(source:String)
Process XML data from the string
XML.removeNode()
Removes node
XML.send(send(url:String, [target:String]))
Sends XML data to the file on www
58
XML.sendAndLoad(url:String, targetXMLobject:XML)
Sends XML file to the www address and downloads the server reply in XML format to the other XML object
XML.toString() : String
Returns XML data in text format
XML.docTypeDecl: String
XML file !DOCTYPE declaration
XML.onData : function ()
Function called when XML file download is completed
XML.onLoad : function (success:Boolean)
Function called during XML file download
Example 1
draw Edit1 field and paste the frame code
str = "<root><node/></root>";
xml = new XML(str);
rootNode = xml.firstChild;
Edit1 = rootNode.nodeName;
59
Example: XML tree traversal
draw Edit1 field and paste the following frame code:
str = "<globe name=\"World\">Continents<continent code=\"na\">North
America</continent><continent code=\"sa\">South America</continent><continent
code=\"eu\">Europe</continent><continent
code=\"af\">Africa</continent><continent
code=\"as\">Asia</continent><continent
code=\"au\">Australia</continent></globe>";
xml = new XML(str);
globeNode = xml.firstChild;
Edit1 = "Status: " + xml.status + "
";
Edit1 = Edit1 + globeNode.nodeName + ", " + globeNode.attributes.name + ":
";
continentNode = globeNode.firstChild;
while(continentNode!=null)
{
if(continentNode.nodeType==1)
{
Edit1 = Edit1 + continentNode.nodeName;
Edit1 = Edit1 + " [" + continentNode.attributes.code + "] ";
continentText = continentNode.firstChild;
Edit1 = Edit1 + continentText.nodeValue + ",
";
}
continentNode = continentNode.nextSibling;
}
Code creates the following result:
Status: 0 globe, World: continent [na] North America, continent [sa] South America, continent [eu]
Europe, continent [af] Africa, continent [as] Asia, continent [au] Australia,
60
LoadVars
Class allows to import parameters from the text file to SWF file Parameters in the text file:
param1=value1&param2=value2 .. etc.
Loaded variables can be referred to through an object attribute name LoadVars e.g. LoadVars.param1
new LoadVars()
Creates new object
LoadVars.addRequestHeader(headerName:String, headerValue:String)
Adds additional headings to the file call through the internet
LoadVars.decode(params:String)
Loads and processes string into variables as param1=value1&param2=value2
LoadVars.getBytesLoaded() : Number
Bytes loaded by LoadVars.load() or LoadVars.sendAndLoad() function
LoadVars.getBytesTotal() : Number
Total file size with variables
LoadVars.load(url:String) : Boolean
Loads variable data from the specific address, variable must have a text form:
param1=value1&param2=value2 .. etc.
LoadVars.send(url:String) : Boolean
Sends variables to the specific internet address as a string
url?param1=value1&param2=value2
LoadVars.sendAndLoad(url:String) : Boolean
Sends query to the specific www address and loads the server reply
LoadVars.toString() : String
Returns parameters as
param1=value1&param2=value2
LoadVars.contentType : String
MIME data type
LoadVars.loaded : Boolean
Returns true, if data download is completed
LoadVars.onData : function
Function called when data download is completed
LoadVars.onLoad : function
Function called during data download
61
Example:
lv = new LoadVars();
lv.decode("name=Pamela&age=25");
Edit1 = lv.name + " is " + lv.age + " old.";
62
Functions not supported by Alligator
Flash Designer
trace()
Trace function is not supported by the standard Flash plugin in the browser. Instead of trace(variable) use:
Edit1 = variable;
break, continue
Causes the loop to finish or start over, but are ignored
case
Use if function set
class
Custom classes cannot be defined
for in
Object attributes cannot be enumerated
?:
Conditional statement is not supported
{}
Object attribute initiator
Instead of
object = { attr1 : "value1", attr2 : "value2" }
Use
object = new Object();
object.attr1 = "value1";
object.attr2 = "value2";
63