Flash 101

4,047 views

Published on

It is an introduction to the Adobe Flash technology and others RIA, such as Flex and Silverlight.

It also provides some of my golden rules on creating Flash.

Published in: Technology

Flash 101

  1. 1. By Stanley Fok 2009-06-11
  2. 2.  Part 1 – introducing Flash  Part 2 – Flash Demo Tutorial
  3. 3.  Spherical Video Player  2D Flash Physics Engine  3D Isometric Engine – ffilmation  Particle System  MotionPortrait  Pictaps  http://ecodazoo.com/
  4. 4.  Yugo Nakamura 中村勇吾  The well-known God of Flash in Japan  http://yugop.com/  http://www.vcasmo.com/video/flash/202
  5. 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. 6.  Usability › How user can accomplish a task effectively  User Experience (UX) › The satisfaction and experience of a user when using the product
  7. 7. User experience usability
  8. 8. Usability UX
  9. 9. Image Source: http://blogs.infragistics.com/ux/articles/text-treatment-and-user-experience.aspx
  10. 10.  Good RIA needs both UX and Usability! Good Happy Users RIA Usability UX
  11. 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. 12. Examples:  Flash  Flex  Silverlight  JavaFx  (AJAX)
  13. 13. Silverlight Deep Zoom
  14. 14. RIA HTML Requires Plug-in Yes No Cross Platform Support Most RIA are cross Need more effort borwser & OS, such as Flash Player Canvas Yes in HTML5 only Audio and Video Yes In HTML 5 only Support Asynchronous Yes Only with AJAX Interactivity / UX Richer Poorer Accessibility Poorer Better SEO Poorer (except Better silvlight) Development time longer shorter
  15. 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 Stanley first touch Flash! Apr 10, 1996 Jun 15, 1999 Sep 9, 2003 1996 1997 1998 1999 2000 2001 2002 2003 Nov 1996 Jun 1997 May 31, 1998 Aug 24, 2000 Mar 15, 2002 Flash 1 Flash 2 Flash 3 Flash 5 Flash MX
  16. 16. Adobe acquired Adobe Flash CS3 Professional Marcomedia - Actionscript 3.0 improved OOP - Performance imporved - Integrated with Adobe Products Marcomedia Flash Professional 8 - Bitmap Data support Adobe Flash CS4 - Start to have 3D open source library Professional such as Sandy3D, Papervision3D - Build in 3D functions - inverse kinemetics Sep 13, 2005 Apr 18, 2005 Apr 16, 2007 Oct 15, 2008 2004 2005 2006 2007 2008 2009
  17. 17.  AS 1.0 › tellTarget(“/myMc”) { play(); } › setProperty(“/myMc”,_y, 20);  AS 2.0 › myMc.play(); › myMc._y = 20;
  18. 18. class MyBox extends Movieclip { public function MyBox() { … } private function onEnterFrame() { … } }
  19. 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. 20. Flash
  21. 21. Source code Runtime .as AIR (Desktop) .air installation file Compile Flash Player (Browser) .swf file
  22. 22. Flash Flex Source file .fla (binary), .mxml (acsii), .as (ascii) .as (ascii) Target user Designer, Programmer Programmer Usage Multimedia Application With timeline yes no Reusable modules Lack of A lot, such as Chart, Window Panel, color picker, etc Layout flexibility More flexible Less flexible, but support CSS
  23. 23.  Around 100 UI Components  http:// www.adobe.com/devnet/flex/tourdeflex/we / That is All for Flash…
  24. 24. Flash Flex Banner Ad Application, such as online Photoshop, Word, etc Animation / Short Movie Dashboard, Report Games Video Player Campaign website
  25. 25.  Don't Give Up on Vista Ad
  26. 26. ← 阿貴 ↑ Happy Tree Friends ← 小小動畫
  27. 27. http://www.teagames.com/ Facebook game – Restaurant City http://www.electrotank.com/
  28. 28. http://www.clubpenguin.com/
  29. 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. 30. Photoshop Express: https://www.photoshop.com/
  31. 31. Buzzword: https://buzzword.acrobat.com/
  32. 32. iCoke HK: http://www.icoke.hk/coke2009/
  33. 33. Redbull flightlab: http://www.redbull.com/flightlab/
  34. 34. Nike ID: http://nikeid.nike.com/nikeid/index.jsp
  35. 35. Worldwide Ubiquity of Adobe Flash Player by Version - March 2009   Flash Player 7 Flash Player 8 Flash Player 9 Flash Player 10 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 Markets3 Notes 3.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. 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. 37.  Frame rate  Background Color  Movie Dimension  Publishing Setting › Class Path › Strict Mode, Warning Mode › Size Report › Image / audio / video compression
  38. 38.  x, y  scaleX, scaleY [1 means normal size]  width, height  alpha [0 to 1]  rotation [in degree]  visible [true / false]
  39. 39.  play()  stop()  gotoAndPlay()  gotoAndStop()  .parent //get parent  addChild(obj); //dynamic attach child  addChildAt(obj,depth);
  40. 40.  flash.events.KeyboardEvent  flash.events.MouseEvent  flash.events.Event  flash.events.TimerEvent  flash.events.FocusEvent
  41. 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. 42. Stage Stage iconWheelMc infoMc iconContainerMc coverMc infoMc iconContainerMc coverMc
  43. 43.  Advantages for deep tree: Stage › Buffer for timeline, leave flexibility for iconWheelMc designers › Make movieclip Plug infoMc iconContainerMc and Play › Inherit co-oridnate coverMc (x,y) Module Module
  44. 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. 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. 46.  Static embed › Work on system which do not have well javascript support  Dynamic embed › Avoid “click to activate” mechanism › Easy syntax › Enhance SEO (How?)
  47. 47.  Building a Flash Site › OOP › Workflow › How to build a proj?  Please let me know what you are interested too!

×