Flash Presentation 25.11.10
- 1. Client side technologies Flash Marvin Hoffmann, Sven Middelberg, Dennis Guck, Marius Klein Web Technologies – Prof. Dr. Ulrik Schroeder – WS 2010/111 The slides are licensed under a Creative Commons Attribution 3.0 License
- 2. Overview 1. History 2. Format and Requirement 3. Applications 4. Flash Basics 5. Actionscript 6. Demo 7. Security 8. Conclusion Web Technologies2
- 3. History 1995 1996 1997 1999 2003 2005 2006 2008 2009 Precursor of Flash: Smart Sketch First introduction of Flash by Macromedia Release of Flash and Shockwave Player Integration of Actionscript Actionscript 2 Takeover of Macromedia by Adobe Actionscript 3 Adobe opens Flash specifications Flash player for Smartphones Web Technologies3
- 4. Formats & Requirement Formats .swf (Shockwave Format) Flash Movies and Flash Games .flv (Flash Video Files) Display videos on a webpage Requirements No native support Necessary to install a plugin No support on all platforms e.g. iOS Web Technologies4
- 5. Applications Intros Games Videos eLearning Standard application in the beginning Games can be played directly in the Browser Stream of videos via Flash (e.g. Youtube) Use Flash as an interaction technique for eLearning (e.g. WebTech Slide Cast) Web Technologies5
- 6. Flash Basics Web Technologies6 Timeline Frames Playhead Keyframes Flash movies are animated Animation controlled via the timeline Consists of single frames Playhead moves over the frames to create animation Keyframes are frames in which the animation changes
- 7. Symbols Web Technologies7 Symbols Graphics Buttons Movieclips Symbols are reusable objects Each Symbol has its own timeline Three kinds of symbols: Static graphics to create animations Buttons for timeline animation Movie clips to add Flash movies to your Flash movie
- 8. Layers Web Technologies8 Layers are a way to organize your Flash animation in a hierarchical structure Each layer has its own content and can be configured and animated seperatly Eases the creation of complex movies consisting of many independent symbols Symbols in lower levels are concealed by objects in higher levels
- 9. Adobe Flash Professional CS5 Web Technologies9 Authoring tool to create presentations or applications with Flash Most popular tool for working with Flash Features Prebuilt drag-and-drop UI components Built-in motion effects Special effects for media data Full support for ActionScript Source code saved in XML-based FLA files
- 10. Adobe Flash Professional CS5 Web Technologies10 Demo Motion Tween
- 11. Actionscript Web Technologies11 Scripting language that allows for interactive Flash animations Java-similar syntax Fully event-driven No typing Object-oriented
- 12. User-Generated Events Web Technologies12 Mouse movement, pressing/releasing a button, keyboard input, … Events: press, release, rollOver, keyPress“K“, … Example (Stop-Button): on(press) { _parent.movieclip.stop(); _parent.movieclip.gotoAndPlay(1); }
- 13. Self-Releasing Events Web Technologies13 Keyframe and movieclip events Movieclip events: load, unload, enterFrame, … Example: onClipEvent(load) { this.stop(); }
- 14. Adobe Flash Professional CS5 Web Technologies14 Demo Motion Tween ActionScript
- 15. Security Web Technologies15 Three security levels Programmer Webhoster User Every Flash program has its per domain sandbox Cross site scripting is possible But can be disabled Access to webcam, microphone, flash cookies
- 16. Pros Web Technologies16 More flexible than HTML Effects and animation ActionScript Video playback supported Eventbased sound Vector animation Closed source Hardware support
- 17. Cons Web Technologies17 Flash plug-in required Content and layout are not separated Closed source Requires additional programming knowledge Not barrier-free Not scalable, e.g. mobile devices
- 18. Conclusion Web Technologies18 Flash is dominating in several areas: Advertisement (YouTube-) Videos Browser-games in real-time But: Websites that are completely based on Flash are rather rare HTML 5 and JavaScript are able to replace parts of Flash