Your SlideShare is downloading. ×
0
By Stanley Fok
    2009-06-11
   Part 1 – introducing Flash

   Part 2 – Flash Demo Tutorial
 Spherical Video Player
 2D Flash Physics Engine
 3D Isometric Engine – ffilmation
 Particle System
 MotionPortrait
...
   Yugo Nakamura
    中村勇吾

   The well-known God of
    Flash in Japan

 http://yugop.com/
 http://www.vcasmo.com/vide...
Some of his masterpieces

 http://uniqlo.archive.tha.jp/us/
 http://www.uniqlo.com/grid/
 Eye Project
 https://
  www....
   Usability

    › How user can accomplish a task effectively


   User Experience (UX)

    › The satisfaction and exp...
User experience


usability
Usability   UX
Image Source:
http://blogs.infragistics.com/ux/articles/text-treatment-and-user-experience.aspx
   Good RIA needs both UX and Usability!

                 Good             Happy Users
                  RIA



     Usa...
 A vector and raster graphic rendering
  engine
 Originally designed to create animations
 Frame-based (every frame has...
Examples:
 Flash
 Flex
 Silverlight
 JavaFx
 (AJAX)
Silverlight Deep Zoom
RIA                     HTML
Requires Plug-in         Yes                     No
Cross Platform Support   Most RIA are cro...
Macromedia Flash MX 2004
Flash was BORN!
                                                               - Actionscript 2.0...
Adobe acquired                       Adobe Flash CS3 Professional
        Marcomedia                           - Actionscr...
   AS 1.0
    › tellTarget(“/myMc”) {
       play();
      }
    › setProperty(“/myMc”,_y, 20);


   AS 2.0
    › myMc.p...
class MyBox extends Movieclip {
  public function MyBox() {
     …
  }

    private function onEnterFrame() {
       …
   ...
   AS 2.0
    this.attachMovie(“myMc”, “newName”);
    myMc.onPress = function(){…};


   AS 3.0
    var myMc:Movieclip ...
Flash
Source code                    Runtime




          .as
                             AIR (Desktop)
                      ...
Flash            Flex
Source file          .fla (binary),   .mxml (acsii),
                     .as (ascii)      .as (asci...
 Around 100 UI
  Components
 http://
  www.adobe.com/devnet/flex/tourdeflex/we
  /




          That is All for Flash…
Flash                      Flex
Banner Ad                 Application, such as online
                          Photoshop,...
   Don't Give Up on Vista Ad
← 阿貴




           ↑ Happy Tree Friends


       ← 小小動畫
http://www.teagames.com/        Facebook game – Restaurant City




                http://www.electrotank.com/
http://www.clubpenguin.com/
 Flash can connect Socket of Server
 Using through RTMP, port 1935
  (Real Time Messaging Protocol)
    › video / audio ...
Photoshop Express: https://www.photoshop.com/
Buzzword: https://buzzword.acrobat.com/
iCoke HK: http://www.icoke.hk/coke2009/
Redbull flightlab: http://www.redbull.com/flightlab/
Nike ID: http://nikeid.nike.com/nikeid/index.jsp
Worldwide Ubiquity of Adobe Flash Player by Version - March 2009


                          Flash Player 7        Flash P...
 FLA Basic Setup
 Flash Display Components
 Flash Basic Commands and Events
 Scene Planning Techniques
    › Display O...
 Frame rate
 Background Color
 Movie Dimension
 Publishing Setting
    › Class Path
    › Strict Mode, Warning Mode
  ...
 x, y
 scaleX, scaleY [1 means normal size]
 width, height
 alpha [0 to 1]
 rotation [in degree]
 visible [true / fa...
 play()
 stop()
 gotoAndPlay()
 gotoAndStop()
 .parent //get parent
 addChild(obj); //dynamic attach child
 addChil...
 flash.events.KeyboardEvent
 flash.events.MouseEvent
 flash.events.Event
 flash.events.TimerEvent
 flash.events.Focus...
   2 issues to consider when building the UI
    1. How to build a good UI tree
    2. Where (x, y) to place the UI




 ...
Stage                              Stage


                                          iconWheelMc
infoMc   iconContainerMc ...
   Advantages for deep
    tree:                                        Stage
    › Buffer for timeline,
      leave flex...
   2D system
    › X -> increase to right
    › Y -> increase downwards
   The center reference point
    › It affects m...
 SWFObject is an open source project
  which helps you to embed swf in html
 http://
  code.google.com/p/swfobject/wiki/...
   Static embed
    › Work on system which do not have well
     javascript support
   Dynamic embed
    › Avoid “click ...
   Building a Flash Site
    › OOP
    › Workflow
    › How to build a proj?


   Please let me know what you are
    in...
Flash 101
Flash 101
Flash 101
Upcoming SlideShare
Loading in...5
×

Flash 101

3,700

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
1 Comment
6 Likes
Statistics
Notes
No Downloads
Views
Total Views
3,700
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
111
Comments
1
Likes
6
Embeds 0
No embeds

No notes for slide
  • http://yugop.com/ver3/index.asp?id=32Quick time 0.0
  • http://www.luar.com.hk/flashbook/archives/001391.php
  • http://memorabilia.hardrock.com/
  • Talk about pros and cons about RIAAccessibilityNo resize in fontNo rollover tag for linksSEOSilverlight use XAML, which Is XML file to define interface14
  • 10 versions in 13 yearsWith AS2.0, more open source project, library starts to be developed!
  • Network speedHardware speed
  • Xml is good for:Source code managementSeparation of code logic with UIAIRSupport SQL LightAccess file systemSystem Alerthttp://www.adobe.com/products/air/Single Development, multiple platform//Ebay Desktop
  • Flex is open sourceWith eclipse as dev envFlex builder needs $, chart component also need $
  • over 12 million user accounts in 2007Acquire by Disney with 7億 USD
  • Flash has a very free UI structureUsually composed by many movieclip
  • Transcript of "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!
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×