BUILDING RICH MEDIA ELEMENTS

Design Decisions Based on Design Specification Following the design specification will ensure that the application is developed correctly

SWF files created are link image files, they can be any size

Important that you understand the dimensions and colour palette required for the presentation

Be aware which type of device your presentation will be viewed on Mobile device Old or new OS

Industry Standard Design Specifications Always use the 216 color web safe palette to avoid dithering and banding

Layouts for full screen presentations should be no larger than 800 X 600

Always use common font faces; if you require an uncommon font make sure you break the text apart to an ungrouped shape

An ideal Frame Rate is 12 fps; animations will be fairly smooth and the file will be of a decent size ensuring reasonable download times

Adjust document properties To change document properties, access the option to modify in the Properties inspector or use the Edit button for more options

Adjust document properties

Adding File Information

File information can be added select File > File Info

Using Flash Guides and Rulers Guides help to align and resize elements on the stage

They can be either vertical or horizontal guide

Adding a Vertical guide Using Selection tool Place cursor over vertical ruler, click and drag to where you want the ruler

The line will appear black when you drag it and turn to green when you release the mouse

Using Flash Guides and Rulers Adding a Horizontal Guide Using Selection tool

Place cursor over horizontal ruler, click and drag to where you want the guide

The line will appear black when you drag it and turn to green when you release the mouse

Using Flash Guides and Rulers To move a guide

Click and drag the guide A resize symbol will appear when you move the guide

Delete a guide Click and drag the guide to the ruler, then release

Objects can be aligned using guides to arrange content on the stage

Use Snap to Guides will ensure that objects automatically snap in place on the stage to the guide lines

Guides can be locked in order to preserve their placement View > Guides > Lock Guides

Using Tools Panel to select, create and manipulate text and objects on stage Tools panel contains all tools necessary to edit and manipulate vector objects

If you point to a tool, it’s tooltip will appear describing the tool

For accessibility, the letter in () is the letter on the keyboard you can use instead of using the mouse

Using Tools Panel to select, create and manipulate text and objects on stage Some tools have small black triangles at the bottom right-hand corner, indicating there are hidden tools

To access these tools, take the selection tool, click and hold down the cursor on the required tool

Using Tools Panel to select, create and manipulate text and objects on stage Some tools have additional options which appear at the bottom of the toolbar

The example (right) shows the modifiers for the zoom tool

Importing and Modifying Graphics Flash has limited bitmap creation and editing ability

Bitmaps can be imported using File > Import > Import to Stage

Importing and Modifying Graphics Converting Bitmaps into Ungrouped Vector Shapes Select a bitmap, then:

Select Modify > Bitmap > Trace Bitmap

The default settings will produce an accurate representation of the original

Edit the settings in the Trace dialog box where necessary

Importing and Modifying Graphics Trace bitmap options Colour Threshold

Increasing will decrease number of colours and quality, while increasing file size

Minimum Area Number of surrounding pixels to consider when assigning a colour to a pixel

The larger the number the larger the file size

Importing and Modifying Graphics Trace bitmap options Curve Fit

Specifies how smoothly the bitmap shapes are traced

Corner threshold Specifies if edges are sharp or smooth

A Dynamic Textbox

A dynamic textbox is created using the Text Tool.

Place the text tool on the stage and click, the result is a dynamic textbox

Text box expands as you type

The dynamic textbox is distinguished from the fixed width textbox by a circle in the top right hand corner

A Fixed Width Textbox A fixed width textbox is

created using the Text Tool.

Place the text tool on the stage and drag it to the desired width, the result is a fixed width textbox

Textbox adds lines when the text reaches the limit of the box

The fixed width textbox is distinguished from the dynamic textbox by a square in the top right hand corner

To change a fixed width to a dynamic textbox, place the cursor over the box and double click it

Adjusting Text Properties Formatting Text at the Block Level

Select the text using the selection tool Choose the required properties in the properties pane

Formatting Text at the Character Level Change the text properties by selecting a single character and changing it’s properties in the properties panel

Paragraph Properties Properties need to be changed for each paragraph as required

Creating Symbols

Symbols can be either Graphic Buttons Movie Clips

Creating Symbols

Graphic Symbols Can contain any type of object Can have any number of frames or layers If a graphic has more frames than the main timeline it will only play the maximum number of frames in the main timeline

Blending Modes and Filters cannot be applied to graphic symbols

Creating a Graphic Symbol Select the graphic, then either:

Right click and Choose Convert to Symbol > Graphic

Modify > Convert to Symbol > Graphic

Creating Symbols Button Symbol Has a special timeline

Three states related to mouse activity Up, over and down

One related to a hotspot Hit

Layers can be added to add more interactivity

Creating a Button Symbol Select the graphic, then either: Right click and Choose Convert to Symbol > Button

Modify > Convert to Symbol > Button

Creating Symbols

Movie Clip Symbol A movie clip is similar to a graphic symbol

Can contain a number of objects, layers and frames

Has a timeline independent of the main timeline

All frames will be played even if the main timeline has less frames than the movie clip

Blend Modes and Filters can be applied to a movie clip

The Library

Once a symbol has been created it will be found in the library

Symbols can be created and edited from the Library Panel

Libraries external to your flash file can be accessed via the library panel and assets added from there into your project

Editing Symbols and Instances Adding an instance of a symbol to your work, will not increase the file size of your exported SWF

If you copy grouped or ungrouped shapes on the stage, your file size will increase

More efficient use of resources to use instances of symbols

Editing Symbols and Instances Break a Symbol Apart

It is possible to remove an object from a symbol

Editing a Button or Movie Clip Symbol Open a symbol by double clicking it When you open the symbol you are editing it on it’s own timeline

Creating a Mask

Objects on a mask layer define the visible area of the objects below the mask layer

To create a mask layer Right click on the chosen layer, choose Mask

To mask text Select the layer and then click Modify > Timeline >Layer Properties > Mask

Then select the text and select Modify > Timeline > Properties > Masked

Create Animations (change shape, position, size, colour and transparency) Tweening

A method used to change the location, shape, size, colour or transparency of a symbol using frames and a keyframe

Shape Tween This feature allows you to morph one shape into another using the timeline

Motion Tween Can be used to move objects across the stage, fading objects, rotating, changing colours etc

Adding simple controls through ActionScript 3.0 ActonScript is Flash’s programming language Can be used to control simple animations

Be used for complex interactive applications

ActionScript can be added to the timeline inside the flash file or can be referred to as part of an external ActionScript file (.as)

Importing Sound

Sound can be imported into flash and used on the timeline

A sound is a property of a keyframe

A sound must be imported to the library and then applied to a keyframe

Add and Export Video

There are 3 ways to implement video into flash

Progressive Download from a Web Server

Requires Flash Player 7+ Streams using HTTP streaming Converts your video file into FLV Adds a configurable component to the SWF to play the video

Add and Export Video

Stream from Flash Video Streaming Service or Stream from Flash Media Server

Requires Flash Player 7+

Files must be uploaded to the Flash Media Service

Files must be in the FLV format Adds a configurable component to the SWF to play the video

Publish your Flash documents When you publish your flash presentation, flash creates An SWF A HTML file A JavaScript File

These files will be created in the same location as the FLA file

Publish your Flash documents The SWF is the final working version of the published FLA file

The HTML file contains the HTML code required to display the SWF in a browser

The JavaScript ensures that the SWF plays with no action required by the user

All these files must be uploaded to the same director on the web server

Making a document accessible Flash includes functions which makes content accessible for users with disabilities

From Flash CS4 onwards most components have been designed to allow for accessibility for visually impaired users, using screen readers

Users can use the keyboard rather than a mouse

There are accessibility features in actionscript 3 which increase accessibility

To view accessibility features select Windows > Other Panels > Accessibility