Paul Trani

Adobe Certified Instructor/Expert

www.paultrani.com paul@paultrani.com

Resources:

www.designupdate.com/flashtraining

www.designupdate.com

FlashAnd other mysteries of the web…

An Introduction

• What is Flash?• How do I make Flash content?• What is the Flash Player?• What is Flash Video?• Where can I play my Flash content?• Who uses Flash?• Is Flash the only tool out there?

1-5

What is Flash?

Seamless video integration: http://www.nike.com/nikeair/

Video delivery: http://www.youtube.com

Streaming Video: http://www.nbc.com

Flash is everything that’s cool about the web.

Receive/record video:http://www.webcamtastic.com

TV

Desktop Browser Wireless Handhelds

iTV & Consoles

And everything cool about other platforms as well…

But technically, what is it?

• Flash is the development environment that is used to design, develop and publish SWF documents. The flash “source” file is an FLA file.

• The published Flash document is an SWF file (small web format). This is what goes on “the web”.

• Flash video (FLV) files can also be created from flash.

• In order to view Flash content, users need to have the appropriate version of the Adobe Flash Player installed on their computer because a Flash file is not composed of HTML. The Flash Player reads and interprets SWF content.

2-2

Interface

Web Server

How is it most commonly delivered?

Source File

.AVI, .MOV, .WMV, .DV, .MPEG

http://www.flashcomguru.com

What is the Flash Player?

• Flash Player is a lightweight client with near 100 percent market acceptance

• Version 7 supports streaming and download video, faster playback, rendering of elements

• Version 8 supports the video with transparency, layer blend modes, layer effects

• Flash Player eliminates browser/platform compatibility issues.

• Flash Player can be supported on browser and non-browser devices.

• Flash Player supports mobile devices and handhelds.• Create once, deploy everywhere.• Flash Player provides more capabilities to developers

and users than HTML does.• http://www.thefwa.com

1-5

What is Flash Video?

Flash Video - video files compressed into FLV format

• The Flash Player is used to send/receive video

• Custom video players are built using

• Flash Professional 8

• Dreamweaver 8 makes it easy to embed Flash video

• Video in Flash can be embedded, progressively downloaded or streamed using a Flash Video streaming service.

• Video can be integrated seamlessly

• Live and pre-recorded video are supported

Another slide the marketers like…

• Higher availability• 23% more than Apple QuickTime• 39% more than Real Media• 12% more than Windows Media Player

• If it works in Flash, it works everywhere

• No unwanted player controls/interface Starz Edge

• No “backdoor” communication

• Embed video in context with content

• Easily control playback with ActionScript

• Video can be made “interactive” JCOnline.com

• http://www.flashstreamworks.com

Who uses it?

Designers

• Use it to create enhanced user experiences giving them total creative control

Developers

• Use it to create robust internet applications.

www.bacardiflavors.com

1-5

Who uses it?

A couple of realizations:

• Web and Instructional Designers were using it to create training and demos, including importing screen recordings.

• Web Developers didn’t care for the timeline or drawing tools uneccesary for their job.

1-5

Related Adobe Software

Adobe created two new programs that also produce swf files:

• Captivate

• Flex

1-5

Captivate

Introducing Captivate

• Easy way to create professional-quality, interactive simulations and software demonstrations in Flash format

• Automatically record onscreen actions, including

•Editable mouse movements

•Text captions

•Scored click boxes

• Add e-learning interactions like data-entry fields and customizable quizzes

• Ideal for rapid application training, user support tutorials, and online product demonstrations 2-2

Using the Edit View

• Contains the Filmstrip which shows all the slides while you edit an individual slide

• This is the view in which you add project objects such as text captions and images

2-10

Introducing the Captivate Interface Elements

• Use the Menu Bar to access menu commands, such as File Open

• Use the Context menu to select a command from the menu• Use the Toolbar access Captivate functions, such as Preview or

Save• Use the Timeline to view all the objects on a slide and their

relationship to each other• Use the Filmstrip to see all the slides in your project

Menu Bar

Toolbar

Timeline

Filmstrip

2-11

Flex

Flex Strengths

• Relatively easy to create form based applications and heavy data entry interfaces providing it’s own layout engine with a seperation of code from graphics, giving mostly a code view for creating ActionScript and MXML code.

• Outputs SWF files for Flash Player 9

• Programmers like itimport Character;var a:Character = new Character();addChild(a);

Flex Isn’t Flash

• Flex has no timeline

• Flex has no library

• Flex has no drawing tools

• Flex can look boring

http://examples.adobe.com/flex2/consulting/styleexplorer/Flex2StyleExplorer.html

Flex with Flash

• Applications look the way your designers want

• Better animations

• Better integration & modifications of video and sound

• Better user experience

• Less compromise

Flex with Flash

Dissecting the Design

• Background? Definitely Flash. Load a SWF.

• Buttons? Custom component or SWF skin.

Flex

• Flash makes Flex better, through graphics, sound, animation, and video

• More design control

• Better design = more usable app

26

But is Flash always the answer?

27

DREAMWEAVER 8

• Use Dreamweaver to generate HTML tags for page formatting and view the resulting HTML source code

• Create and link style sheets for a consistent look and feel of your web pages

• Use graphics to make your website attractive and link to other pages

• Create links between and within pages, as well as links to email addresses

28

Windows Designer Workspace

29

Using Development Views

• Three views:

• Design view

• Code view

• Split view

30

(But Flash is cooler…)