Flash Pro Getting Started Please note some of the screenshots and shortcuts may have changed slightly in the latest version of flash cs5

Flash Pro Overview –Flash provides a development environment for creating interactive multimedia web content that is multi/cross platform. –Enables authoring and publishing Flash.swf files that are playable through the Flash player included with most all browsers. –Official Adobe Flash webpage:

Flash Player –Flash.swf player available from Adobe as a free download:

Flash key features There are several significant new features:

Flash’s vector capabilities –Flash was originally designed to be a vector animation tool for creating small file size web animations. Flash animations are playable through the Flash player, now included with most browsers. –Flash enables the use of sound, text, images, video, bitmapped and vector graphics. –Vector graphic support and built in vector drawing tools make it ideal for creating vector based animations. –Vector is scalable (upsizeable) and typically creates a very small file size. –Flash has the ability to convert bitmaps to vector graphics, called “trace bitmap” in Flash.

Popular file formats and publishing supported –Flash incorporates popular file formats like: mp3 sound files, jpg image files, video files, native Photoshop.psd files and more. –Create animations, graphics, logos, buttons, interactive movies, text, and more all within Flash. –Flash publishing enables automating the embedding of the.swf movie into an html page –You can also create stand-alone “projector files” that do not require the Flash player. –Projector files are stand alone self executable files, useful for kiosks, cd, dvd, and non browser or non web environments.

Flash is the “de facto standard” –Flash is considered to be the “de facto” standard for web animation. –A mature and “Professional” Web Animation Authoring program. –Flash.swf movies are most commonly embedded into web pages and viewed on the Internet. –.swf movies are streamable, meaning their content can began playing while the rest of the file continues to be downloaded.

Flash player 98% penetration –Adobe claims Flash player is installed on 98% of desktops globally. –Multi platform player Pc, Mac, Linux. –Flash now viewed on most common devices that are web-enable. – iPhone, iPad, may be never? –Popular uses for Flash Embedded in a Web page Online Ads especially Banner ads Storyboarding and Animations/Cartoons Multimedia presentations As a stand alone application useful for Kiosks

ActionScript –Flash has its own scripting language called ActionScript. –ActionScript is a programming language that allows the development of complex web applications and games. –Flash, ActionScript 3.0 is now required for many of the new features. Recommended you use 3.0. –ActionScript 2.0 was the previous scripting version.

Flash’s key selling points which led to its widespread adoption Small file size Fast downloads speeds Visual feedback to users Interactive capabilities The ability to combine bitmaps, vectors, video, animation into scalable, streaming web content.

Flash does an optimal job compressing –Uses its own compression scheme. –Vectors and bitmaps are further optimized. –Does a good job delivering file intensive multimedia sites. –Audio and video are highly compressed. –Less time dedicated spent on trying to design since color, fonts and publishing is more consistent than html. –Since Flash has been around for over ten years, the player is mature and has little compatibility issues or support problems.

Library Panel –Flash’s Library panel stores the most important assets. –Library panel stores and organizes Symbols, imported files. Includes graphics, sound files, video fles, and more. –Flash allows you to easily import libraries from other projects. –Library items can even be organized into folders.

Library Panel –Library panel Window>Library (cmnd/cntrl + L) –Any object on stage can be added to the library by dragging item into the Library panel. –Flash will prompt you to pick the type of symbol, Graphic, Movie clip, or Button symbol and to provide a name for the symbol.

Multiple project editing –Flash allows you to open multiple.fla projects at once. –Tabs will appear at top of project window allowing you to toggle from project to project. –Once multiple projects are open, libraries from one project can be imported into the current project using the Library panel’s drop down menu, located at the top of its tab.

Actions panel –Actions panel allows you to add ActionScript to your project. –Scripts can be typed, copy and pasted into the panel, or written using the script assist mode. –Script Assist mode allows you to create scripts without detailed knowledge of programming, it writes the script for you, you simply pick options and add any required parameters.

Actions panel –You can apply ActionScript to an object like a movie clip symbol or button symbol, or it can be added to a frame. –When adding a script to a frame it is sometimes referred to as a frame script, and you should put the script in a blank layer using a blank keyframe wherever the script is desired. –Selecting a frame, button, or movie clip instance makes the Actions panel active.

17 Tweening in Flash Three major types of tweening in Flash, 1.Motion Tweening 2.Shape Tweening 3.Classic Tweening (Classic Tweening represents the old method of Motion Tweening)

18 Motion Tweening Updated in Flash Motion Tweening has changed significantly beginning in version CS4. When a motion tween has been created, a motion path appears on the Stage showing the path from the position in the first frame of the tween span to the new position. Optional, you can adjust motion path so object moves in a curving direction.

Adding ease to animations Easing makes animation look natural not constant Easing available for “Motion Tweens” find on Properties>Ease Motion Editor, new in, offers very advanced motion and animation controls Window>Motion Editor Motion Editor offers the ability to fully customize motion, transformation, colors, filters, easing, and more. Provides custom editing with fully adjustable curves.

Filters (drop shadow, glow, blur, etc) Filters let you add interesting visual effects to text, buttons, and movie clips. You can apply filters only to text, button, and movie clip objects. You can animate the filters you apply using motion tweens. You can apply multiple filters to an object, as well as remove filters that were previously applied.

Two drawing models if Flash Merge Drawing model The default drawing model automatically merges shapes when you draw a shape that overlaps with an existing shape. Once merged a shape cannot be un merged unless you undo that step (command+z). Object Drawing model Draws shapes as separate objects that do not merge together when overlapped.

Gradients You can apply complex gradients (up to 16 colors) to objects. Gradient is a multicolor fill in which one color gradually changes into another color. Linear gradients change color along a single axis (horizontal or vertical). Radial gradients change color in an outward direction starting from a central focal point. There is a tool called the “Gradient Transform Tool” that allows you to further customize an existing gradient.

Flash Help Press F1 or Help > Flash Help The Flash Help panel contains the full set of user-assistance information provided with the Flash application. To access table of contents in help, click the Table of Contents button Additional help Flash support website: Flash online forums available too

Types of Flash-Based Files: 1. Flash projects saved as a.fla project file. 2. Export a flash project to the.swf format. Flash Player, preinstalled in current Web browsers will play the.swf files. 3. You can also export a Flash project as a Flash Projector which is a stand-alone application or self executable file. File format created,.exe (windows).hqx (Mac). Distribute Flash projector via , CD, DVD, disk, etc. File>Publish Settings allows you to customize how you want your flash movie published

Runtime Bitmap Caching Advanced feature allows a symbol to be cached as a bitmap at runtime. Specify a static movie clip (for example, a background image) or button. Caching a movie clip as a bitmap prevents Flash Player from having to continually redraw the image, providing significant improvement in playback performance. Also enables you to create a gradient mask

Extended programming abilities In order to extend the programming capabilities of Flash other types of web scripting can be set up to communicate with Flash usually involving some custom Actionscript. Popular web scripting technologies: CGI, Common Gateway Interface “defines a standard way if exchanging information between a web browser and a web server.” XML, extensible markup language “ a standard developed to handle the description and exchange of data.” JavaScript is a popular client side scripting language supported by all common web browsers. PHP, free web development scripting language, useful for creating dynamic content, server side scripting.

Flash Pro Understanding the Interface

Starting Flash Find Flash Application icon available on dock in lab computers, looks like Fl, double click on icon When Flash Pro opens File>New …>Flash File (Actionscript 3.0) Actionscript 3.0 vs Actionscript 2.0 Actionscript 3.0 is the latest version (arrived in CS3) Rare to develop using 2.0 in

The Document Window Interface –Timeline –Stage –Stage pasteboard –Tools –Property inspector –Panels –etc. Panels such as Tools and the Properties inspector can be closed, moved, resized, docked and undocked

The Document Window Interface Timeline Stage Stage pasteboard Tools Property inspector Panels/Windows etc.

Window Menu Displays Panels Additional panels, contain tools and info that help when working on your project file. Use the panels to modify elements in your project: Change color, align, etc. Panels available are located under the Window menu and can be opened, closed, moved, resized, docked undocked. Workspace Layout is customizable Window>Workspace>Default (Resets to default layout)

Most commonly used windows 1.Timeline 2.Tools 3.Properties inspector 4.Library 5.Actions Additional panels available: Align, Color, Swatches, Info, Scene, Transform, Components, Component Inspector, Debug, Output, etc

Timeline The Timeline controls the static and moving elements (objects) in the Flash movie or project A frame represents a unit of time in the movie, 12fps = 1 second

Timeline consists of Frames and Layers The timeline controls and displays the elements of a project over time. The timeline can have infinite layers, top layer displays on top The Playhead, displayed as a red bar, identifies the current frame as it is displayed on the Stage. When the movie plays the playhead plays through the frames until all the frame content has been displayed.

Layers options Layers lets you separate and organize graphics, sounds and buttons. Each tween could go on its own layer allowing multiple tweens on stage at once. Status Bar displays info about the current frame, the number of frames per second, fps, and the elapsed time of movie. The Frame View (drop down menu) controls the appearance of the Timeline. Layer can be renamed - the default naming is Layer 1, 2, etc. Inserting layers - click the plus sign + to add a new layer

Layer Controls Ability to add, modify, delete and organize layers using the layer controls. From the layer controls area located under the timeline you can also hide, lock, and control the appearance of the layer contents. Here you can also rename layer names, change the viewing/stacking order, show layer contents as outlines, add folders for storing multiple layers, and more.

Layer Options Insert Layer Folder, creates a folder for storing layers Delete Layer, remove a layer by dragging to trash. Show/Hide all layers, click the eye icon to hide a layer. Lock/unlock all Layers, click to prevent the editing of a layer. Outline view, displays objects as outlines with no fill.

Layers Demo Create three dif layers Draw an object like a circle, square, or rectangle one on each layer Rename each layer to the shapes name, like circle or ? Changing the viewing/stacking order, top most layer=front or top of stacking order Show layer contents as outlines Add a folder for storing these layers, drag layers into.

Stage Where your animation, images, and movies content appear. Represents the visible area of your movie. Gray area is staging area, does not appear when published. The stage has properties such as size, color, and frame rate.

Toolbar Contains drawing and editing tools for creating and modifying objects

Color Panel Strokes Fills Gradients Flat color RGB combinations Hexadecimal values Alpha Settings

Swatches Select an object and then specify the predefined color swatch or gradient you desire.

Scene panel Displays all of the scenes in the project. By default a new flash project is called Scene 1. Not recommended you create multiple Scenes in one project however it is possible. Hard to find panel: Windows> Other Panels>Scene Edit bar, shown above, open via Windows>Toolbars> Edit bar …will display the current scene - the name of the scene (that is currently open on the stage)

Misc panels / windows Info panel Numerical information in reference to the size, position and color of a selected object Transform panel Rotate, scale and skew an object numerically Align panel Align selected objects Property inspector Displays the attributes of the current selection

Accessibility Panel Provides options to make a movie more accessible to those with disabilities. Flash is considered problematic to those with special accessibility needs. Most swf movies are not optimized for accessibility Accessibility panel, open via Window>Other Panels>Accessibility

About FLV and F4V video F4V is a newer video option in Flash The FLV and F4V video formats offer technological and creative benefits that allow designers to create immersive, rich experiences that fuse video together with data, graphics, sound, and dynamic interactive control.

Keyboard shortcuts Keyboard shortcuts can be created in Flash to match the shortcuts used in other applications. Edit>Keyboard shortcuts By default, Flash uses built-in keyboard shortcuts designed for the Flash application. You can select a built-in keyboard shortcut set from graphics applications, including Fireworks, Adobe Illustrator, and Adobe Photoshop.

Creating a keyboard shortcut To create a custom keyboard shortcut set. Open, Edit>Keyboard shortcuts First duplicate an existing set (click on the duplicate button), and then select a shortcut and add or delete the shortcut from the new set (use the + or – button). If you are adding a new shortcut, it must be different from a shortcut that is already assigned to a key, tool, etc. You can also delete custom shortcut sets.

To view current set of keyboard shortcuts: 1. Edit>Keyboard shortcuts. 2. In the Keyboard Shortcuts dialog box, select the shortcut set you wish to view from the Commands pop-up menu. 3. Click the Export Set as HTML button. 4. In the Save As dialog box that appears, select a name and location for the exported HTML file. The default file name is the name of the selected shortcut set. 5. Click Save. 6. Find the exported file in the folder you selected and open the file in a web browser. 7. To print the file, use the browser's Print command.

-end