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
 Pictaps
 http://ecodazoo.com/

 Yugo Nakamura
中村勇吾
 The well-known God of
Flash in Japan
 http://yugop.com/
 http://www.vcasmo.com/video/flash/202

Some of his masterpieces
 http://uniqlo.archive.tha.jp/us/
 http://www.uniqlo.com/grid/
 Eye Project
 https://
www.ecotonoha.com/ecotonoha.html

 Usability
› How user can accomplish a task effectively
 User Experience (UX)
› The satisfaction and experience of a user
when using the product

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
Usability UX

 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

Examples:
 Flash
 Flex
 Silverlight
 JavaFx
 (AJAX)

Silverlight Deep Zoom

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

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

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

 AS 1.0
› tellTarget(“/myMc”) {
play();
}
› setProperty(“/myMc”,_y, 20);
 AS 2.0
› myMc.play();
› myMc._y = 20;

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 = new Movieclip();
this.addChild(myMc);
myMc.addEventListener(MouseEvent.Click,
function(){…});

Flash

Source code Runtime
.as
AIR (Desktop)
.air installation file
Compile
Flash Player (Browser)
.swf file

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

 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, Word, etc
Animation / Short Movie
Dashboard, Report
Games
Video Player
Campaign website

 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 streaming
› video conference
› real-time game
 Server
› Adobe FMS (Flash Media Server)
HKD$40,000 / server
› SmartFoxServer HKD$20,000 / server

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

 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

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

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

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

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

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

Stage Stage
iconWheelMc
infoMc iconContainerMc coverMc
infoMc iconContainerMc
coverMc

 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

 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

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

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

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