The history of Flash Flash 的發展與演進 講者： Maso Lin

大綱 Flash 的歷史演進 Flash 相關延伸技術 Flash 的發展潛力 Q & A

Flash 的歷史演進

Flash 相關延伸技術

Flash 的發展潛力

Q & A

Flash 的歷史演進

Flash Tenth Anniversary... Flashback Flash Future http:// www.adobe.com/go/flashtimeline ‧ 10years of Flash (from theFWA) http://www.thefwa.com/flash10/

Flashback Flash Future

http:// www.adobe.com/go/flashtimeline

‧ 10years of Flash (from theFWA)

http://www.thefwa.com/flash10/

源起… Jonathan Gay's dream FutureWave Software(1993) SmartSketch(1994~1995) SmartSketch Animator CelAnimator FutureSplash Animator (1995) Flash 1.0(1996/8/9)

Jonathan Gay's dream

FutureWave Software(1993)

SmartSketch(1994~1995)

SmartSketch Animator

CelAnimator

FutureSplash Animator

(1995)

Flash 1.0(1996/8/9)

Screenshot

Screenshot

一些 Logo Future Splash Flash1~5 FlashMX~2004 Flash8

版本演進 FutureSplash Animator (1995) Flash 1 (December 1996) +a Macromedia re-branded version Flash 2 (June 1997) +object library Flash 3 (31 May 1998) + movieclipm , Javascript plug-in integration, transparency, stand alone player Flash 4 (15 June 1999) + internal variables, input field, Actions , streaming MP3 Flash 5 (24 August 2000) + Actionscript , SmartClip, HTML text

FutureSplash Animator (1995)

Flash 1 (December 1996) +a Macromedia re-branded version

Flash 2 (June 1997) +object library

Flash 3 (31 May 1998) + movieclipm , Javascript plug-in integration, transparency, stand alone player

Flash 4 (15 June 1999) + internal variables, input field, Actions , streaming MP3

Flash 5 (24 August 2000) + Actionscript , SmartClip, HTML text

版本演進 Flash MX (15 March 2002) + FLV , UI Component , compression, AS Draw API Flash MX 2004 /Pro(10 September 2003) + AS2.0 , MediaPlayback components, Data components,… Flash 8/Pro (September 13, 2005) + BitmapData , On2 VP6 video codec , alpha transparency in video … Flash9 (Preview alpha) + AS 3.0

Flash MX (15 March 2002) + FLV , UI Component , compression, AS Draw API

Flash MX 2004 /Pro(10 September 2003) + AS2.0 , MediaPlayback components, Data components,…

Flash 8/Pro (September 13, 2005) + BitmapData , On2 VP6 video codec , alpha transparency in video …

Flash9 (Preview alpha) + AS 3.0

Actionscript Actionscript 之父 -Gary Grossman Flash Player 2: 首次 出現互動功能，當時只支援 gotoAndPlay, gotoAndStop, nextFrame and nextScene 等時間軸控制選項 Flash Player 3: 首次支援載入外部 swf 檔 (loadMovieNum) Flash Player 4: 正名為 Actions ，可寫入迴圈、運算、變數等基本程式，以 slash 語法為基礎

Actionscript 之父 -Gary Grossman

Flash Player 2: 首次 出現互動功能，當時只支援 gotoAndPlay, gotoAndStop, nextFrame and nextScene 等時間軸控制選項

Flash Player 3: 首次支援載入外部 swf 檔 (loadMovieNum)

Flash Player 4: 正名為 Actions ，可寫入迴圈、運算、變數等基本程式，以 slash 語法為基礎

Actionscript Flash Player 5 : 正名為 Actionscript ，以屬性為架構，以 ECMAScript 為基礎 ，開始有 dot 語法 。 Flash Player 6 : 加入 事件模式 Flash Player 7 : 正式出現 Actionscript2.0 ，可實作 OOP 架構。 Flash Player 8 : 支援 BitmapData Flash Player 9 : AS3.0/2.0 以下 雙 AVM 支援， 3.0 為 真實的 OOP 架構。

Flash Player 5 : 正名為 Actionscript ，以屬性為架構，以 ECMAScript 為基礎 ，開始有 dot 語法 。

Flash Player 6 : 加入 事件模式

Flash Player 7 : 正式出現 Actionscript2.0 ，可實作 OOP 架構。

Flash Player 8 : 支援 BitmapData

Flash Player 9 : AS3.0/2.0 以下 雙 AVM 支援， 3.0 為 真實的 OOP 架構。

Slash(4) VS. Dot (5) Slash tellTarget ( "/fallDetec" ) { play(); } Dot fallDetec.play();

Slash

tellTarget ( "/fallDetec" ) {

play();

}

Dot

fallDetec.play();

Slash(4) VS. Dot (5) Slash getProperty(params_mc, _x ) setProperty(params_mc, _y , 20); setProperty(params_mc, _x , getProperty(params_mc, _x )+20); Dot params_mc ._x params_mc. _y =20 params_mc. _x =params_mc. _x +20

Slash

getProperty(params_mc, _x )

setProperty(params_mc, _y , 20);

setProperty(params_mc, _x , getProperty(params_mc, _x )+20);

Dot

params_mc ._x

params_mc. _y =20

params_mc. _x =params_mc. _x +20

Non Event(5) VS Event(6) NonEvent on(press){ trace("Hello!") } Event Button_mc.onPress=function(){ trace("Hello!") }

NonEvent

on(press){

trace("Hello!")

}

Event

Button_mc.onPress=function(){

trace("Hello!")

}

AS2.0 (MX2004~8) class Box extends MovieClip { // declare class members var box_mc:MovieClip; // Constructor that takes mc as argument public function Box(passed_mc:MovieClip) { // assign passed mc to our class member box_mc = passed_mc; } // Methods public function moveUp() { box_mc._y -= 1; } public function moveDown() { box_mc._y += 20; } }

class Box extends MovieClip {

// declare class members

var box_mc:MovieClip;

// Constructor that takes mc as argument

public function Box(passed_mc:MovieClip) {

// assign passed mc to our class member

box_mc = passed_mc;

}

// Methods

public function moveUp() {

box_mc._y -= 1;

}

public function moveDown() {

box_mc._y += 20;

}

}

AS 3.0 (9~) package { import flash.display.TextField; import flash.display.MovieClip; import flash.filters.DropShadowFilter; public class HelloWorld extends MovieClip { public function HelloWorld() { var shad:DropShadowFilter = new DropShadowFilter(2, 45, 0x000000, 25, 3, 3, 2, 2); var txt:TextField = new TextField(); txt.textColor = 0xFFFFFF; txt.filters = [shad]; txt.width = 120; txt.x = Math.random()*300; txt.y = Math.random()*300; txt.selectable = false; txt.text = "Hello World! ["+Math.round(txt.x)+","+Math.round(txt.y)+"]"; addChild (txt); } } }

package {

import flash.display.TextField;

import flash.display.MovieClip;

import flash.filters.DropShadowFilter;

public class HelloWorld extends MovieClip {

public function HelloWorld() {

var shad:DropShadowFilter = new DropShadowFilter(2, 45, 0x000000, 25, 3, 3, 2, 2);

var txt:TextField = new TextField();

txt.textColor = 0xFFFFFF;

txt.filters = [shad];

txt.width = 120;

txt.x = Math.random()*300;

txt.y = Math.random()*300;

txt.selectable = false;

txt.text = "Hello World! ["+Math.round(txt.x)+","+Math.round(txt.y)+"]";

addChild (txt);

}

}

}

Flash 相關延伸技術

else... Flash Media Server Acrobat Connect Flex Flash Lite Apollo

Flash Media Server

Acrobat Connect

Flex

Flash Lite

Apollo

Flash Media Server Flash Communication Server Flash Com. 1.0 (2002-7-9 ) Flash Com. 1.5 (2003-3-27) Flash Media Server 2.0 (2005.9.8) 包括影音和數據廣播、共享電子白板、虛擬會議室、留言板、投票、即時交談、傳送訊息以及其他多樣化的通訊程式 http:// www.adobe.com/products/flashmediaserver /

Flash Communication Server

Flash Com. 1.0 (2002-7-9 )

Flash Com. 1.5 (2003-3-27)

Flash Media Server 2.0 (2005.9.8)

包括影音和數據廣播、共享電子白板、虛擬會議室、留言板、投票、即時交談、傳送訊息以及其他多樣化的通訊程式

http:// www.adobe.com/products/flashmediaserver /

Acrobat Connect Breeze Adobe Acrobat Connect Demo: http:// www.adobe.com/products/acrobatconnectpro/overview / http://adobechats.adobe.acrobat.com/p25782095/

Breeze

Adobe Acrobat Connect

Demo:

http:// www.adobe.com/products/acrobatconnectpro/overview /

http://adobechats.adobe.acrobat.com/p25782095/

Flex Flex 1.0 (2004-3-29) $120,000 Flex 1.5 (2004-11-2 ) $120,000 Flex2 (2006-6-28 ) $Free-20,000 RIA(rich internet applications) 由於 Flash 是以動畫製作為基礎的一套工具軟體，因此傳統程式設計師要從中開發程式是相當困難的。於是 FLEX 試圖提供一個程式設計師們熟知的工作流程和開發模型來改善這個問題。 http://www.adobe.com/products/flex/ http:// www.adobe.com/devnet/flex /

Flex 1.0 (2004-3-29) $120,000

Flex 1.5 (2004-11-2 ) $120,000

Flex2 (2006-6-28 ) $Free-20,000

RIA(rich internet applications)

由於 Flash 是以動畫製作為基礎的一套工具軟體，因此傳統程式設計師要從中開發程式是相當困難的。於是 FLEX 試圖提供一個程式設計師們熟知的工作流程和開發模型來改善這個問題。

http://www.adobe.com/products/flex/

http:// www.adobe.com/devnet/flex /

Flash Lite Flash Lite 1.0 and 1.1 : Flash Lite is the Flash technology specifically developed for mobile phones and consumer electronics devices. Flash Lite 1.1 supports Flash 4 ActionScript. Flash Lite 2.0 : Added support for Flash 7 ActionScript 2.0. Flash Lite 2.1: XML sockets , inline input… http:// www.adobe.com/products/flashlite /

Flash Lite 1.0 and 1.1 : Flash Lite is the Flash technology specifically developed for mobile phones and consumer electronics devices. Flash Lite 1.1 supports Flash 4 ActionScript.

Flash Lite 2.0 : Added support for Flash 7 ActionScript 2.0.

Flash Lite 2.1: XML sockets , inline input…

http:// www.adobe.com/products/flashlite /

Apollo Central Apollo http:// labs.adobe.com/wiki/index.php/Apollo

Central

Apollo

http:// labs.adobe.com/wiki/index.php/Apollo

Flash 的發展潛力

Animations Brackenwood http://www.biteycastle.com/content/animation_brk.php My Beautiful Girl, Mari http://en.wikipedia.org/wiki/My_Beautiful_Girl,_Mari http:// www.youtube.com/watch?v =giTyVci6CPg

Brackenwood

http://www.biteycastle.com/content/animation_brk.php

My Beautiful Girl, Mari

http://en.wikipedia.org/wiki/My_Beautiful_Girl,_Mari

http:// www.youtube.com/watch?v =giTyVci6CPg

Games Alien Hominid http:// www.newgrounds.com/portal/view.php?id =59593 http:// www.alienhominid.co.uk / Line Rider http://www.official-linerider.com / flOw http:// intihuatani.usc.edu /cloud/flowing/ http:// us.playstation.com /flow/

Alien Hominid

http:// www.newgrounds.com/portal/view.php?id =59593

http:// www.alienhominid.co.uk /

Line Rider

http://www.official-linerider.com /

flOw

http:// intihuatani.usc.edu /cloud/flowing/

http:// us.playstation.com /flow/

3D

Applications Flex Apollo http:// www.fauxto.com / http:// shop.orange.co.uk/shop/phonetrainer http:// www.yourminis.com /

Flex

Apollo

http:// www.fauxto.com /

http:// shop.orange.co.uk/shop/phonetrainer

http:// www.yourminis.com /

User Interface Flash Lite Apollo http://blog.masolin.com/cool_mobile_ui/ http:// labs.adobe.com/wiki/index.php/Apollo#Videos

Flash Lite

Apollo

http://blog.masolin.com/cool_mobile_ui/

http:// labs.adobe.com/wiki/index.php/Apollo#Videos

參考資料 http:// www.adobe.com http:// labs.adobe.com http:// en.wikipedia.org/wiki/Adobe_Flash http://www.luar.com.hk/flashbook/archives/000790.php http:// blog.masolin.com/history_of_flash /

http:// www.adobe.com

http:// labs.adobe.com

http:// en.wikipedia.org/wiki/Adobe_Flash

http://www.luar.com.hk/flashbook/archives/000790.php

http:// blog.masolin.com/history_of_flash /

Q & A