1. By Stanley Fok 2009-06-11

2. Part 1 introducing Flash Part 2 Flash Demo Tutorial 3. Spherical Video Player 2D Flash Physics Engine 3D Isometric Engine ffilmation Particle System MotionPortrait Pictaps http://ecodazoo.com/ 4. Yugo Nakamura The well-known God of Flash in Japan http://yugop.com/ http://www.vcasmo.com/video/flash/202 5. Some of his masterpieces http://uniqlo.archive.tha.jp/us/ http://www.uniqlo.com/grid/ Eye Project https:// www.ecotonoha.com/ecotonoha.html 6. Usability How user can accomplish a task effectively User Experience (UX) The satisfaction and experience of a user when using the product 7. User experience usability 8. Usability UX 9. Image Source: http://blogs.infragistics.com/ux/articles/text-treatment-and-user-experience.aspx 10. Good RIA needs both UX and Usability! Good Happy Users RIA Usability UX 11. A vector and raster graphic rendering engine Originally designed to create animations Frame-based (every frame has to be drawn) Event Driven Audio Video Support With scripting language called Actionscript 12. Examples: Flash Flex Silverlight JavaFx (AJAX) 13. Silverlight Deep Zoom 14. RIA HTML Requires Plug-in Yes No Cross Platform Support Most RIA are crossNeed more effortborwser & OS, such asFlash Player Canvas Yes in HTML5 onlyAudio and VideoYes In HTML 5 only Support Asynchronous Yes Only with AJAX Interactivity / UX RicherPoorer AccessibilityPoorerBetter SEOPoorer (exceptBettersilvlight) Development time longershorter 15. Macromedia Flash MX 2004 Flash was BORN!- Actionscript 2.0 with OOP Named FutureSplash Animator- FLV support Actionscript 1.0 Launched With Flash 4 Stanleyfirst touch Flash! Apr 10, 1996 Jun 15, 1999Sep 9, 2003 19961997 19981999 2000 200120022003 Nov 1996 Jun 1997 May 31, 1998 Aug 24, 2000 Mar 15, 2002Flash 1Flash 2Flash 3Flash 5Flash MX 16. Adobe acquired Adobe Flash CS3 Professional Marcomedia - Actionscript 3.0 improved OOP- Performance imporved- Integrated with Adobe ProductsMarcomedia Flash Professional 8- Bitmap Data supportAdobe Flash CS4- Start to have 3D open source library Professionalsuch as Sandy3D, Papervision3D - Build in 3D functions - inverse kinemetics Sep 13, 2005 Apr 18, 2005Apr 16, 2007Oct 15, 2008 200420052006200720082009 17. AS 1.0 tellTarget(/myMc) {play(); } setProperty(/myMc,_y, 20); AS 2.0 myMc.play(); myMc._y = 20; 18. class MyBox extends Movieclip { public function MyBox() { }private function onEnterFrame() { } } 19. AS 2.0 this.attachMovie(myMc, newName); myMc.onPress = function(){}; AS 3.0 var myMc:Movieclip = new Movieclip(); this.addChild(myMc); myMc.addEventListener(MouseEvent.Click, function(){}); 20. Flash 21. Source codeRuntime .asAIR (Desktop).air installation file Compile Flash Player (Browser).swf file 22. FlashFlex Source file.fla (binary), .mxml (acsii),.as (ascii).as (ascii) Target userDesigner,ProgrammerProgrammer UsageMultimedia ApplicationWith timelineyesnoReusable modules Lack ofA lot, such as Chart, Window Panel, color picker, etcLayout flexibility More flexibleLess flexible, but support CSS 23. Around 100 UI Components http:// www.adobe.com/devnet/flex/tourdeflex/we / That is All for Flash 24. FlashFlex Banner Ad Application, such as online Photoshop, Word, etc Animation / Short Movie Dashboard, Report GamesVideo PlayerCampaign website 25. Don't Give Up on Vista Ad 26. Happy Tree Friends 27. http://www.teagames.com/Facebook game Restaurant City http://www.electrotank.com/ 28. http://www.clubpenguin.com/ 29. Flash can connect Socket of Server Using through RTMP, port 1935 (Real Time Messaging Protocol) video / audio streaming video conference real-time game Server Adobe FMS (Flash Media Server) HKD$40,000 / server SmartFoxServer HKD$20,000 / server 30. Photoshop Express: https://www.photoshop.com/ 31. Buzzword: https://buzzword.acrobat.com/ 32. iCoke HK: http://www.icoke.hk/coke2009/ 33. Redbull flightlab: http://www.redbull.com/flightlab/ 34. Nike ID: http://nikeid.nike.com/nikeid/index.jsp 35. Worldwide Ubiquity of Adobe Flash Player by Version - March 2009 FlashPlayer7FlashPlayer8 FlashPlayer9FlashPlayer10 Mature Markets1 99.3% 99.1%98.9% 74.2%US/Canada 99.2% 99.0%98.8% 74.5%Europe2 99.1% 98.9%98.6% 75.3%Japan 99.8% 99.5%99.3% 72.0% Emerging Not surveyed in this wave Markets3Notes3.Mature markets include US, Canada, UK, Germany, France, Japan. 4.Europe includes UK, Germany, France. 5.The Emerging markets are surveyed every other wave. They include China, S. Korea, Russia, India and Taiwan. Percentages are carried over from the previous wave when emerging markets are not surveyed. 36. FLA Basic Setup Flash Display Components Flash Basic Commands and Events Scene Planning Techniques Display Object Tree Structure Object co-ordinate system Embed SWF to html SWFObject 37. Frame rate Background Color Movie Dimension Publishing Setting Class Path Strict Mode, Warning Mode Size Report Image / audio / video compression 38. x, y scaleX, scaleY [1 means normal size] width, height alpha [0 to 1] rotation [in degree] visible [true / false] 39. play() stop() gotoAndPlay() gotoAndStop() .parent //get parent addChild(obj); //dynamic attach child addChildAt(obj,depth); 40. flash.events.KeyboardEvent flash.events.MouseEvent flash.events.Event flash.events.TimerEvent flash.events.FocusEvent 41. 2 issues to consider when building the UI 1. How to build a good UI tree 2. Where (x, y) to place the UI (x,y) 42. StageStage iconWheelMc infoMc iconContainerMc coverMcinfoMciconContainerMccoverMc 43. Advantages for deep tree:Stage Buffer for timeline, leave flexibility for iconWheelMcdesigners Make movieclip PluginfoMciconContainerMc and Play Inherit co-oridnatecoverMc (x,y) ModuleModule 44. 2D system X -> increase to right Y -> increase downwards The center reference point It affects mcs scaling, rotation with script Best Practice Choose the correct point which make your program more as dynamic as possible and less variables 45. SWFObject is an open source project which helps you to embed swf in html http:// code.google.com/p/swfobject/wiki/docume Single javascript file (9.5Kb / GZIPed: 3.8Kb) 46. Static embed Work on system which do not have welljavascript support Dynamic embed Avoid click to activate mechanism Easy syntax Enhance SEO (How?) 47. Building a Flash Site OOP Workflow How to build a proj? Please let me know what you are interested too!