300 likes | 380 Views
Flash And other mysteries of the web…. Paul Trani Adobe Certified Instructor/Expert www.paultrani.com paul@paultrani.com Resources: www.designupdate.com/flashtraining www.designupdate.com. An Introduction. What is Flash? How do I make Flash content? What is the Flash Player?
E N D
FlashAnd other mysteries of the web… Paul Trani Adobe Certified Instructor/Expert www.paultrani.com paul@paultrani.com Resources: www.designupdate.com/flashtraining www.designupdate.com
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/ Flash is everything that’s cool about the web. Receive/record video:http://www.webcamtastic.com Video delivery: http://www.youtube.com Streaming Video: http://www.nbc.com
TV And everything cool about other platforms as well… Wireless Handhelds iTV & Consoles Desktop Browser
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
How is it most commonly delivered? Source File .AVI, .MOV, .WMV, .DV, .MPEG Web Server 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
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 Menu Bar Toolbar Timeline Filmstrip • 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 2-11
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 it import 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.htmlhttp://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
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
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
Using Development Views • Three views: • Design view • Code view • Split view