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.

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 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. 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. 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.  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 code Runtime
.as
AIR (Desktop)
.air installation file
Compile
Flash Player (Browser)
.swf file

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.  Around 100 UI
Components
 http://
www.adobe.com/devnet/flex/tourdeflex/we
/
That is All for Flash…

24. Flash Flex
Banner Ad Application, such as online
Photoshop, Word, etc
Animation / Short Movie
Dashboard, Report
Games
Video Player
Campaign 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
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.

38.  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

39.  Frame rate
 Background Color
 Movie Dimension
 Publishing Setting
› Class Path
› Strict Mode, Warning Mode
› Size Report
› Image / audio / video compression

41.  x, y
 scaleX, scaleY [1 means normal size]
 width, height
 alpha [0 to 1]
 rotation [in degree]
 visible [true / false]

42.  play()
 stop()
 gotoAndPlay()
 gotoAndStop()
 .parent //get parent
 addChild(obj); //dynamic attach child
 addChildAt(obj,depth);

43.  flash.events.KeyboardEvent
 flash.events.MouseEvent
 flash.events.Event
 flash.events.TimerEvent
 flash.events.FocusEvent

44.  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)

45. Stage Stage
iconWheelMc
infoMc iconContainerMc coverMc
infoMc iconContainerMc
coverMc

46.  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

47.  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

48.  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)

49.  Static embed
› Work on system which do not have well
javascript support
 Dynamic embed
› Avoid “click to activate” mechanism
› Easy syntax
› Enhance SEO (How?)

50.  Building a Flash Site
› OOP
› Workflow
› How to build a proj?
 Please let me know what you are
interested too!