第2章 ActionScript教程 - 顯示

• 顯示編程 
• 使用幾何結構
• 使用繪圖 API
• 使用位圖
• 過濾顯示對象
• 使用 Pixel Bender 着色器
• 使用影片剪輯
• 使用補間動畫
• 使用反向運動
• 在三維 (3D) 環境中工作

 

2.0 顯示編程

* 顯示編程API提供添加、移動、刪除並對顯示對象排序、應用濾鏡和蒙版、繪制矢量和位圖圖形以及執行三維轉換。顯示編程使用的主類是 flash.display 包的一部分。

* 核心顯示類

某些類,如StaticText、TextField 和Video 類，不在flash.display 包中，但它們仍然是從DisplayObject 類繼承。

AVM1Movie:在ActionScript 1.0 和2.0 中創作的已加載SWF 文件.

SimpleButton:flash創作工具創建的按鈕元件的ActionScript形式，有彈起、按下、指針經過和點擊測試4種狀態。

MorphShape:flash創作工具創建補間形狀時創建的。無法使用ActionScript 實例化這些對象，但可以從顯示列表中訪問它們

 

* AS3中的顯示列表

1）不同類型的顯示對象有不同的類

有效且減少了內存使用,改進了深度管理,完整遍歷顯示列表,列表外的顯示對象,更便於創建顯示對象的子類。

2）呈示方式更有效且文件較小

在AS1,AS2中，可在MovieClip中繪制對象，AS3中可以更簡單的顯示對象（不包括MovieClip中的全部屬性和方法）繪制。MovieClip 對象都包括用於影片剪輯時間軸的屬性，而Shape 對象則不包括。用於管理時間軸的屬性會使用大量的內存和處理器資源。

3）改進深度管理

DisplayObjectContainer 實例的numChildren 屬性，為子級的索引列表，列出顯示對象容器中的子級數。從索引位置0 到最后一個索引位置(numChildren - 1) 的所有對象深度由深到淺（下到上）。

 

* DisplayObject類的屬性和方法

• addChild
• addChiledAt
• contains()：確定顯示對象是否是DisplayObjectContainer 的子級。
• getChildByName()：按名稱檢索顯示對象。
• getChildIndex()：返回顯示對象的索引位置。
• setChildIndex()：更改子顯示對象的位置。
• removeChildren()：刪除多個子顯示對象。
• swapChildren()：交換兩個顯示對象的前后順序。
• swapChildrenAt()：交換兩個顯示對象的前后順序 （由其索引值指定）。

 

* stage

1) frameRate設置swf幀速率

2) scaleMode設置縮放模式，包含4個值flash.display.StageScaleMode

.StageScaleMode.EXACT_FIT  縮放SWF 以填滿新舞台尺寸，而不考慮原來的內容高寬比，可能會壓扁或拉長

.StageScaleMode.SHOW_ALL  會在保持內容高寬比的前提下，縮放SWF 以適應新舞台，可能會有黑色邊框

.StageScaleMode.NO_BORDER 會在保持內容高寬比的前提下，縮放SWF 以填滿新舞台，可能會有裁剪

.StageScaleMode.NO_SCALE— 不縮放SWF，可能會有裁剪或者邊框空白

3) displayState設置全屏模式，值flash.display.StageDisplayState

.StageDisplayState.FULL_SCREEN

.StageDisplayState.FULL_SCREEN_INTERACTIVE:(FP11.3)鼠標單擊或按鍵來啟動全屏模式

.StageDisplayState.NORMAL

退出全屏：Esc 鍵 （所有平台）、Ctrl-W (Windows)、Command-W (Mac) 或Alt-F4 (Windows)

嵌在html中flashplayer中的swf要啟用全屏，需添加以下屬性：

<object> 
 <param name="allowFullScreen" value="true" /> 
 <embed allowFullScreen="true" /> 
</object>

4)width,height,scaleX,scaleY來處理大小和縮放

控制縮放時的扭曲可以用9切片(disObj.scale9Grid)縮放來生成3X3類似於井字的網格(圖3.png)。4個角不縮放，上中、下中矩形水平縮放，左中，右中矩形垂直縮放，中心矩形水平垂直均縮放。

myButton.scale9Grid = new Rectangle(32, 27, 71, 64); //圖4.png

 * 緩存顯示對象

disObj.cacheAsBitmap屬性設置為true,可以緩存指定顯示對象實例（表面）提高性能，避免矩形位置變更時重繪整個顯示對象實例。位圖是矢量數據，矢量數據是swf中不需要進行太多更改的數據，打開緩存實例不會隨swf播放而不斷重繪，可以快速呈現swf文件。

DisplayObject 類的 opaqueBackground 屬性和 scrollRect 屬性與使用 cacheAsBitmap 屬性的位圖緩存有關。這三個屬性彼
此互相獨立，但當對象緩存為位圖時，opaqueBackground 和 scrollRect 屬性的作用最佳。

啟用位圖緩存的場景：(page152)

. 復雜背景圖像

. 滾動文本字段：應用程序在滾動文本字段中顯示大量的文本，將文本放置在可滾動的具有滾動框 （使用scrollRect 屬性）的顯示對象中，可以使文本進行快速像素滾動，而非重新生成整個字段。

. 窗口排列秩序

. Alpha 通道遮罩

 

禁用位圖緩存場景：

• 不要過度使用表面

• 避免放大緩存的表面

• 將表面用於通常為靜態 （非動畫）的顯示對象實例

• 如果將表面與矢量數據混在一起，將增加Flash Player 和AIR（有時還包括計算機）的工作量

• 請不要緩存圖形更改頻繁的對象

 

* 設置不透明背景顏色

* 啟用混合模式

disObj.blendMode

• BlendMode.ADD("add")：通常用於創建兩個圖像之間的動畫變亮模糊效果。
• BlendMode.ALPHA("alpha")：通常用於在背景上應用前景的透明度。（在GPU 呈現下不支持。）
• BlendMode.DARKEN("darken")：通常用於重疊類型。（在GPU 呈現下不支持。）
• BlendMode.DIFFERENCE("difference")：通常用於創建更多變動的顏色。
• BlendMode.ERASE("erase")：通常用於使用前景Alpha 剪掉 （擦除）背景的一部分。（在GPU 呈現下不支持。）
• BlendMode.HARDLIGHT("hardlight")：通常用於創建陰影效果。（在GPU 呈現下不支持。）
• BlendMode.INVERT("invert")：用於反轉背景。
• BlendMode.LAYER("layer")：用於強制為特定顯示對象的預構成創建臨時緩沖區。（在GPU 呈現下不支持。）
• BlendMode.LIGHTEN("lighten")：通常用於重疊類型。（在GPU 呈現下不支持。）
• BlendMode.MULTIPLY("multiply")：通常用於創建陰影和深度效果。
• BlendMode.NORMAL("normal")：用於指定混合圖像的像素值覆蓋基本圖像的像素值。
• BlendMode.OVERLAY("overlay")：通常用於創建陰影效果。（在GPU 呈現下不支持。）
• BlendMode.SCREEN("screen")：通常用於創建亮點和鏡頭眩光。
• BlendMode.SHADER("shader")：用於指定用於創建自定義混合效果的Pixel Bender 着色器。有關使用着色器的詳細信息，
• BlendMode.SUBTRACT("subtract")：通常用於創建兩個圖像之間的動畫變暗模糊效果

 

* 調整DisplayObject顏色 (page155)

* 旋轉對象

disObj.rotation = 45;

* 淡化對象

disObj.alpha = .5;

* 遮罩顯示對象

通過將一個顯示對象用作遮罩來創建一個孔洞，透過該孔洞使另一個顯示對象的內容可見。

disObj.mask = maskSpriteObj;

 

* 對象動畫

1) 顯示對象的enterFrame事件來創建隨時間重復的動作而生成動畫效果

2) 用Timer類過指定時間 ，觸發期timer事件來執行相應動作而生成動畫效果

 

* 舞台方向 

Stage 類報告方向的屬性：
• Stage.deviceOrientation — 報告設備相對於默認位置的物理方向。注： 在某些情況下，deviceOrientation 可能會不可用，例如應用程序初次啟動或設備平放時。在這些情況下，設備方向將報告為未知。
• Stage.orientation — 報告舞台相對於默認方向的方向。啟用自動方向后，當設備保持垂直時，舞台將向相反方向旋轉。

• Stage.autoOrients  設置舞台自動方向

• Stage.setOrientation() ，• Stage.setAspectRatio() 手動設置方向

  

* 動態加載顯示內容

Loader是DisplayObjectContainer 類的子類,用於將SWF 文件和圖形文件加載到應用程序中。

var imgUrl:String = "http://www.test.com/apple.jpg";
var imgReq:URLRequest = new URLRequest(imgUrl);
var loader:Loader = new loader();
loader.load(imgReq);
loader.contentLoaderInfo.addEventListener(Event.COMPLETE,imgLoaded);

function imgLoaded(event:Event):void
{
    this.addChild(loader.content);
}

 

* 監視加載進度

LoaderInfo 對象用於提供加載進度、加載者和被加載者的URL、媒體的字節總數及媒體的標稱高度和寬度，調度用於監視加載進度的事件。

 

* 指定加載上下文

Loader 類的 load() 或 loadBytes() 方法加載外部文件時，可指定 context 參數（LoaderContext 對象），LoaderContext包括三個屬性：

• checkPolicyFile：僅當加載圖像文件時才會使用此屬性

• securityDomain：僅當加載SWF 文件時才會使用此屬性

• applicationDomain：僅當加載使用ActionScript 3.0 編寫的SWF 文件時才會使用此屬性

var context:LoaderContext = new LoaderContext(); 
context.securityDomain = SecurityDomain.currentDomain;  //從另一個域加載SWF 時檢查策略文件，以便將該文件與Loader 對象放在同一個安全沙箱中
context.applicationDomain = ApplicationDomain.currentDomain; //加載的SWF 文件中的類添加到與Loader 對象的類相同的應用程序域 var urlReq:URLRequest = new URLRequest("http://www.test.com/library.swf"); 
var ldr:Loader = new Loader(); 
ldr.load(urlReq, context);

  

* ProLoader類與ProLoaderInfo 類（FP10.2)

這兩個類會鏡像Loader類與LoaderInfo類，與Loader和LoaderInfo不同的是，ProLoader幫助加載使用Text Layout Framework (TLF) 執行RSL 預加載的SWF 文件，在運行時，預加載其他SWF 文件或SWZ 文件（例如TLF）的SWF 文件需要僅供內部使用的SWF 包裝文件。SWF 包裝文件會增加調用結構的復雜性，並可能產生不必要的行為。ProLoader 可以消除這種復雜關系。

ProLoader能解決的問題：

• 加載文件和被加載文件之間的腳本處理無法按預期方式執行。ProLoader 類會自動將加載SWF 文件設置為被加載SWF 文件的父項。因此，來自加載SWF 文件的通信會直接轉到被加載SWF 文件。
• SWF 應用程序必須主動管理加載過程。要進行主動管理，需要實現額外的事件，例如 added、removed、addedToStage 和removedFromStage。如果您的應用程序是面向Flash Player 10.2 或更高版本，則ProLoader 可消除這些額外的工作。

  

---

  

2.1 使用幾何結構

flash.geom 包中包含用於定義幾何對象 （如，點、矩形和轉換矩陣）的類。

概念與術語：

笛卡：爾坐標坐標通常寫為一對數字 （例如5, 12 或17, -23）。兩個數字分別是x 坐標和y 坐標。
坐標空間：包含在顯示對象中的坐標的圖形，顯示對象的子元素位於該坐標位置處。
原點：坐標空間中位於X 軸和Y 軸相交處的點。該點的坐標為0, 0。
點：坐標空間中的一個位置。在AS使用的二維坐標系中，沿X 軸和Y 軸的位置 （點的坐標）定義點。

注冊點：顯示對象中，坐標空間的原點 （0, 0 坐標）。
縮放：對象的大小，相對於其原始大小。用作動詞時，對象縮放是指伸展或縮小對象以更改其大小。
轉換：將點的坐標從一個坐標空間更改到另一個坐標空間。
轉換：對圖形的視覺特性的調整，例如旋轉對象、更改其比例、傾斜或扭曲其形狀或改變其顏色。

X 軸：ActionScript 中使用的二維坐標系中的橫軸。
Y 軸：ActionScript 中使用的二維坐標系中的縱軸

 

 

* Point對象

Point.distance(p1,p2) 計算兩坐標點的距離

import flash.geom.*; 
var pt1:Point = new Point(circle1.x, circle1.y); 
var pt2:Point = new Point(circle2.x, circle2.y); 
var distance:Number = Point.distance(pt1, pt2);

 

* 平移坐標空間

兩個顯示對象位於不同顯示對象容器中，可能處在不同的坐標空間中。

DisplayObject.localToGlobal() 將顯示對象坐標平移到舞台相同全局坐標。

import flash.geom.*; 
var stageCenter:Point = new Point(); 
stageCenter.x = this.stage.stageWidth / 2; 
stageCenter.y = this.stage.stageHeight / 2; 
var targetCenter:Point = new Point(target.x, target.y); 
targetCenter = target.localToGlobal(targetCenter); 
var distance:Number = Point.distance(stageCenter, targetCenter);

  

* 按指定角度及距離移動顯示對象

Point.polar(distance,angle) 

import flash.geom.*; 
var distance:Number = 100; 
var angle:Number = 2 * Math.PI * (90 / 360); 
var translatePoint:Point = Point.polar(distance, angle); 
myDisplayObject.x += translatePoint.x; 
myDisplayObject.y += translatePoint.y;

  

* Point類的其它用法

DisplayObjectContainer

• areInaccessibleObjectsUnderPoint()  用於返回顯示對象容器中某個點下的對象的列表。
• getObjectsUnderPoint() 

 BitmapData

• hitTest() 用於定義BitmapData 對象中的像素以及要檢查點擊的點。
• applyFilter() 用於定義那些定義操作的矩形的位置。
• copyChannel()
• merge()
• paletteMap()
• pixelDissolve()
• threshold()

Matrix

• deltaTransformPoint()  
• transformPoint()

Rectangle

• bottomRight用於定義您要對其應用變形的點。
• size
• topLeft

  

* Rectangle對象

改變位置和大小

• 更改x,y屬性，不會影響對象的寬高
• 更改left,top屬性，右下角位置不變，寬高變化
• 更改right,bottom屬性，左上角位置不變，寬高變化
• offset(x,y) 平移，寬高不變化，坐標變化
• offsetPt(point) 平移，寬高不變化，坐標變化
• inflate(dx,dy) 寬高變化，坐標不變
• inflatePt(point) 寬高變化，坐標不變

 

* Rectangle對象的並集和交集

rect1.union(rect2); //並集

rect1.intersection(rect2); //交集,看區域是否有重疊

 

* Rectangel的其它用法 

BitmapData

用作某些參數的類型以定義BitmapData 對象的區域。

applyFilter()、colorTransform()、copyChannel()、copyPixels()、draw()、drawWithQuality()、encode()、fillRect()、generateFilterRect()、getColorBoundsRect()、getPixels()、merge()、paletteMap()、pixelDissolve()、setPixels() 和threshold()

DisplayObject

getBounds()、getRect()、scrollRect、scale9Grid 用作屬性的數據類型或返回的數據類型

PrintJob

addPage() 用於定義 printArea 參數。

Sprite

startDrag() 用於定義 bounds 參數。

TextField

getCharBoundaries() 用作返回值類型。

Transform

pixelBounds 用作數據類型。

 

* Matrix

Matrix 類表示一個轉換矩陣，它確定如何將點從一個坐標空間映射到另一個坐標空間。可以對一個顯示對象執行不同的圖形轉換（平移、旋轉、縮放和傾斜）。

矩陣定義：

1）直接調整Matrix 對象的屬性（a、b、c、d、tx 和 ty）

2）使用 createBox(scaleX, scaleY, rotation, tx, ty) 方法

var matrix:Matrix = new Matrix(); 
var scaleX:Number = 2.0; 
var scaleY:Number = 3.0; 
var rotation:Number = 2 * Math.PI * (45 / 360); 
var tx:Number = 10; 
var ty:Number = 20; 
matrix.createBox(scaleX, scaleY, rotation, tx, ty);

縮放、旋轉和平移：

scale()、rotate() 和 translate() 方法

var matrix:Matrix = new Matrix(); 
//var matrix:Matrix = myDisplayObject.transform.matrix; var rotation:Number = 2 * Math.PI * (30 / 360); // 30° 
var scaleFactor:Number = 2; 
matrix.scale(scaleFactor, scaleFactor); 
matrix.rotate(rotation); 
matrix.scale(scaleX, scaleY); 
matrix.rotate(rotation); 
myDisplayObject.transform.matrix = matrix; 

傾斜

調整 b 屬性將矩陣垂直傾斜，並調整 c 屬性將矩陣水平傾斜。

var skewMatrix:Matrix = new Matrix(); 
skewMatrix.b = Math.tan(2); 
myMatrix.concat(skewMatrix);

  

---

 

2.2 使用繪圖API

包名flash.display.Graphics， 創建矢量圖形 （直線、曲線、形狀、填充和漸變），在畫布中創建繪圖程序、制作交互的動畫效果，或以編程方式創建您自己的用戶界面元素。可以用Shape、Sprite 或MovieClip中的graphics屬性（Graphics 類的實例）進行繪制。

概念和術語

錨點：二次貝塞爾曲線的兩個端點之一。
控制點：該點定義二次貝塞爾曲線的彎曲方向和彎曲量。彎曲的線絕不會到達控制點；但曲線就好像朝着控制點方向進行繪制的。
坐標空間：包含在顯示對象中的坐標的圖形，顯示對象的子元素位於該坐標位置處。
填充：用顏色填充了線條的形狀的內部實體部分，或沒有外框的整個形狀。

漸變：此顏色是指從一種顏色逐漸過渡到一種或多種其他顏色 （與純色相對）。
點：坐標空間中的一個位置。在ActionScript 使用的二維坐標系中，點是按其x 軸和y 軸位置 （點坐標）來定義的。
二次貝塞爾曲線：由特定的數學公式定義的曲線類型。在這種類型的曲線中，曲線形狀根據錨點 （曲線端點）和控制點 （定義曲線的彎曲方向和彎曲量）的位置來計算。
縮放：對象的大小，相對於其原始大小。用作動詞時，對象縮放是指伸展或縮小對象以更改其大小。

筆觸：用顏色填充了線條的形狀的外框部分，或未填充形狀的線條。
轉換：將點的坐標從一個坐標空間更改到另一個坐標空間

 

* Graphics類

dispObj僅用作畫布時，可用Shape實例，其性能優於其它繪制對象，不會產生Sprite,MovieClip附加功能的開銷。

dispObj用作畫布，且包含其它顯示對象，可用Sprite實例。

 

Graphics實例進行的繪制都基於線條和曲線的基本繪制，其類似的步驟為： 

• 定義線條和填充樣式
• 設置初始繪制位置
• 繪制線條、曲線和形狀 （可選擇移動繪制點）
• 如有必要，完成創建填充

API：http://help.adobe.com/zh_CN/FlashPlatform/reference/actionscript/3/flash/display/Graphics.html

 

筆觸：

• Graphics.lineStyle(thickness:Number, rgb:Number, alpha:Number,pixelHinting:Boolean, noScale:String, capsStyle:String, jointStyle:String, miterLimit:Number) //純色線條
• Graphics.lineGradientStyle(type:String, colors:Array, alphas:Array, ratios:Array, matrix:Matrix = null, spreadMethod:String = "pad", interpolationMethod:String = "rgb", focalPointRatio:Number = 0)  //漸變色線條

填充：

• beginFill()
• beginGradientFill()
• beginBitmapFill()
• beginShaderFill() 

起始點：

• 默認原點(0,0)為起始點
• 設置其它點,moveTo(x,y)方法

繪制：

• lineTo() - 繪制直線
• curveTo() - 繪制曲線

關閉填充：

• endFill() - 形狀未閉合時，自動繪制當前繪制點到最近一次moveTo指定的坐標點之間的直線使形狀閉合。
• 新的beginFill() - 將關閉當前填充且開始新的填充

 

* 繪制直線 

var triangleHeight:uint = 100; 
var triangle:Shape = new Shape(); 
// red triangle, starting at point 0, 0 
triangle.graphics.beginFill(0xFF0000); 
triangle.graphics.moveTo(triangleHeight / 2, 0); 
triangle.graphics.lineTo(triangleHeight, triangleHeight); 
triangle.graphics.lineTo(0, triangleHeight); 
triangle.graphics.lineTo(triangleHeight / 2, 0); 
// green triangle, starting at point 200, 0 
triangle.graphics.beginFill(0x00FF00); 
triangle.graphics.moveTo(200 + triangleHeight / 2, 0); 
triangle.graphics.lineTo(200 + triangleHeight, triangleHeight); 
triangle.graphics.lineTo(200, triangleHeight); 
triangle.graphics.lineTo(200 + triangleHeight / 2, 0); 
this.addChild(triangle);

 

 

* 繪制曲線

var size:uint = 100; 
var roundObject:Shape = new Shape(); 
// red circular shape 
roundObject.graphics.beginFill(0xFF0000); 
roundObject.graphics.moveTo(size / 2, 0); 
roundObject.graphics.curveTo(size, 0, size, size / 2); 
roundObject.graphics.curveTo(size, size, size / 2, size); 
roundObject.graphics.curveTo(0, size, 0, size / 2); 
roundObject.graphics.curveTo(0, 0, size / 2, 0); 
// green circular shape 
roundObject.graphics.beginFill(0x00FF00); 
roundObject.graphics.moveTo(200 + size / 2, 0); 
roundObject.graphics.curveTo(200 + size, 0, 200 + size, size / 2); 
roundObject.graphics.curveTo(200 + size, size, 200 + size / 2, size); 
roundObject.graphics.curveTo(200, size, 200, size / 2); 
roundObject.graphics.curveTo(200, 0, 200 + size / 2, 0); 
this.addChild(roundObject);

 

 

* 內置方法繪制形狀

• drawCircle() - 繪制圓
• drawEllipse() - 繪制橢圓
• drawRect() - 繪制矩形
• drawRoundRect()  - 繪制圓角矩形

* 漸變線條及填充

•  lineGradientStyle()
•  beginGradientFill()

var myShape:Shape = new Shape(); 
var gradientBoxMatrix:Matrix = new Matrix(); 
gradientBoxMatrix.createGradientBox(100, 40, 0, 0, 0); 
myShape.graphics.beginGradientFill(GradientType.LINEAR, [0xFF0000, 0x00FF00, 0x0000FF], [1, 1, 1], [0, 128, 
255], gradientBoxMatrix); 
myShape.graphics.drawRect(0, 0, 50, 40); 
myShape.graphics.drawRect(0, 50, 100, 40); 
myShape.graphics.drawRect(0, 100, 150, 40); 
myShape.graphics.endFill(); 
this.addChild(myShape);

 

 

* Math類與繪制方法結合使用 

var sinWavePosition = 100; 
var cosWavePosition = 200; 
var sinWaveColor:uint = 0xFF0000; 
var cosWaveColor:uint = 0x00FF00; 
var waveMultiplier:Number = 10; 
var waveStretcher:Number = 5; 
var i:uint; 
for(i = 1; i < stage.stageWidth; i++) 
{ 
 var sinPosY:Number = Math.sin(i / waveStretcher) * waveMultiplier; 
 var cosPosY:Number = Math.cos(i / waveStretcher) * waveMultiplier; 
graphics.beginFill(sinWaveColor); 
 graphics.drawRect(i, sinWavePosition + sinPosY, 2, 2); 
graphics.beginFill(cosWaveColor); 
 graphics.drawRect(i, cosWavePosition + cosPosY, 2, 2); 
}

 

 

* 使用繪圖API 進行動畫處理

用基於幀進入或者計時器的機制調用繪圖API清除clear()，繪制圖形達到動畫的效果。

 

* 繪圖API高級用法 

• 使用Vector 對象存儲繪制方法的數據
• 以編程方式定義用於繪制形狀的路徑 （用單個操作）
• 定義纏繞規則，以確定如何填充重疊形狀
• 讀取顯示對象的矢量圖形內容，如序列化並保存圖形數據、在運行時生成Sprite 表以及繪制矢量圖形內容的副本
• 使用三角形和繪制方法實現三維效果

 

概念與術語：

• 矢量：數據類型完全相同的值組成的數組。Vector 對象可存儲繪制方法使用單個命令構建線條和形狀時所用值的數組。
• 路徑：路徑由一條或多條直線段或曲線段組成。每個線段的起點和終點都由坐標標記，就像用於固定線的針。
• 纏繞：由渲染器解釋的路徑方向，包括正向 （順時針）或負向 （逆時針）。
• GraphicsStroke：用於設置線條樣式的類。雖然“筆觸”並非繪圖API 增強功能中的術語，但使用類以線條樣式自身的填充屬性來指定該線條樣式卻是新繪圖API 功能的一部分。您可以使用GraphicsStroke 類動態調整線條的樣式。
• Fill 對象：使用flash.display.GraphicsBitmapFill 和flash.display.GraphicsGradientFill 等傳遞給繪圖命令
Graphics.drawGraphicsData() 的顯示類所創建的對象。Fill 對象和增強的繪圖命令引入了一種面向對象程度更高的編程方法，用於復現 Graphics.beginBitmapFill() 和 Graphics.beginGradientFill() 的效果

 

 

* 繪制路徑

1) Graphics.drawPath(commands:Vector.<int>, data:Vector.<Number>, winding:String = "evenOdd"):void

• GraphicsPathWinding.EVEN_ODD - 奇偶纏繞規則，任何相交路徑都交替使用開放填充與閉合填充
• GraphicsPathWinding.NON_ZERO - 非零纏繞規則，相反纏繞的路徑相交時，不填充所定義的區域，對於相同纏繞的路徑，將填充本來不填充的區域。

package 
{ 
import flash.display.*; 
public class DrawPathExample extends Sprite 
{ 
public function DrawPathExample(){ 
var squareCommands:Vector.<int> = new Vector.<int>(5, true); 
squareCommands[0] = GraphicsPathCommand.MOVE_TO; 
squareCommands[1] = GraphicsPathCommand.LINE_TO; 
squareCommands[2] = GraphicsPathCommand.LINE_TO; 
squareCommands[3] = GraphicsPathCommand.LINE_TO; 
squareCommands[4] = GraphicsPathCommand.LINE_TO; 
var squareCoord:Vector.<Number> = new Vector.<Number>(10, true); 
squareCoord[0] = 20; //x 
squareCoord[1] = 10; //y 
squareCoord[2] = 50; 
squareCoord[3] = 10; 
squareCoord[4] = 50; 
squareCoord[5] = 40; 
squareCoord[6] = 20; 
squareCoord[7] = 40; 
squareCoord[8] = 20; 
squareCoord[9] = 10; 
graphics.beginFill(0x442266);//set the color 
graphics.drawPath(squareCommands, squareCoord); 
} 
} 
}

 

奇偶纏繞與非零纏繞：

• 奇偶纏繞：以形狀上閉合區域中的一點為起點，繪制一個從該點向外無限延伸的線條，該線條與路徑相交的次數如果計數為奇數，則填充相交區域。如果計數為偶數，則不填充相交區域。

如下圖A，藍色區域中的點向外的線條與路徑相交次數為1，為奇數，填充藍色;相交區域中的點向外的線條與路徑相交次數為2，為偶數，不填充藍色。

• 非零纏繞：正向（順時針）纏繞路徑將得到賦值+1；負向（逆時針）纏繞路徑將得到賦值-1，路徑的組合值（和）不為0，則填充相交區域。如果組合值為0，則不填充相交區域。

如下圖B，藍色區域賦值不為0，填充藍色，相交區域（上圖-1+1=0、下圖+1+1=2）分別為0值和非0值，所以分別為不填充與填充。

 

使用纏繞規則

填充纏繞規則選擇正確與否決定所需路徑的多少，如果對圖像進行了動畫處理，或圖像用作三維對象上的紋理且發生重疊，則纏繞規則會變得更為重要。

 

 

使用矢量圖形數據繪圖

IGraphicsData  (page200)

// stroke object 
var stroke:GraphicsStroke = new GraphicsStroke(3); 
stroke.joints = JointStyle.MITER; 
stroke.fill = new GraphicsSolidFill(0x102020);// solid stroke 
// fill object 
var fill:GraphicsGradientFill = new GraphicsGradientFill(); 
fill.colors = [0x0000FF, 0xEEFFEE]; 
fill.matrix = new Matrix(); 
fill.matrix.createGradientBox(70, 70, Math.PI/2); 
// path object 
var path:GraphicsPath = new GraphicsPath(new Vector.<int>(), new Vector.<Number>()); 
path.commands.push(GraphicsPathCommand.MOVE_TO, GraphicsPathCommand.LINE_TO, GraphicsPathCommand.LINE_TO); 
path.data.push(125,0, 50,100, 175,0); 
// combine objects for complete drawing 
var drawing:Vector.<IGraphicsData> = new Vector.<IGraphicsData>(); 
drawing.push(stroke, fill, path); 
// draw the drawing 
graphics.drawGraphicsData(drawing);

 

修改值多次重繪：

// draw the drawing multiple times 
// change one value to modify each variation 
graphics.drawGraphicsData(drawing); 
path.data[2] += 200; 
graphics.drawGraphicsData(drawing); 
path.data[2] -= 150; 
graphics.drawGraphicsData(drawing); 
path.data[2] += 100; 
graphics.drawGraphicsData(drawing); 
path.data[2] -= 50;graphicsS.drawGraphicsData(drawing);

 

 

讀取矢量圖形數據

Graphics.readGraphicsData()  - 獲取顯示對象的矢量圖形內容的數據表示,返回一個包含IGraphicsData 對象的Vector 實例。

 

2) drawTriangles()

與 Graphics.drawPath() 方法相似，同樣使用Vector.<Number> 對象指定用於繪制路徑的點位置，用來實現實現三維效果。

 

---

 

 

2.3 使用位圖

位圖圖形：光柵圖形，由排列為矩形網格形式的小方塊 （像素）組成。

矢量圖形：由以數學方式生成的幾何形狀 （如直線、曲線和多邊形）組成。

 

位圖

以寬高定義，像素為單位。每個像素包含的位數表示像素包含的顏色數。在使用RGB 顏色模型的位圖圖像中，像素由三個字節組成：紅、綠和藍。每個字節包含一個0 至255 之間的值。將字節與像素合並時，它們可以產生與藝術混合繪畫顏色相似的顏色。例如，一個包含紅色字節值255、綠色字節值102 和藍色字節值0 的像素可以形成明快的橙色。

• 位圖圖像品質：由圖像分辨率和顏色深度位值共同確定。分辨率與圖像中包含的像素數有關。像素數越大，分辨率越高，圖像也就越精確。
• 顏色深度：與像素可包含的信息量有關。例如，顏色深度值為每像素16 位的圖像無法顯示顏色深度為48 位的圖像所具有顏色數。因此，48 位圖像與16 位圖像相比，其陰影具有更高的平滑度。由於位圖圖形與分辨率有關，因此不能很好地進行縮放。當放大位圖圖像時，這一特性顯得尤為突出。通常，放大位圖有損其細節和品質。

位圖文件格式
位圖圖像可分為幾種常見的文件格式。這些格式使用不同類型的壓縮算法減小文件大小，並基於圖像的最終用途優化圖像品質。Adobe 運行時支持的位圖圖像格式包括BMP、GIF、JPG、PNG 和TIFF。

BMP
BMP（位映射）格式是Microsoft Windows 操作系統使用的默認圖像格式。這種格式不使用任何形式的壓縮算法，因此文件大小通常較大。

GIF
圖形交換格式(GIF) 最初由CompuServe 於1987 年開發，作為一種傳送256 色（8 位顏色）圖像的方式。此格式提供較小的文件大小，是基於Web 的圖像的理想格式。受此格式的調色板所限，GIF 圖像通常不適用於照片，照片通常需要高度的陰影和顏色漸變。GIF 圖像允許產生一位透明度，允許將顏色映射為清晰 （或透明）。這可以使網頁的背景顏色通過已映射透明度的圖像顯示出來。

JPEG
由聯合圖像專家組(JPEG) 開發，JPEG（通常寫成JPG）圖像格式使用有損壓縮算法允許24 位顏色深度具有很小的文件大小。有損壓縮意味着每次保存圖像，都會損失圖像品質和數據，但會生成更小的文件大小。由於JPEG 能夠顯示數百萬計的顏色，因此它是照片的理想格式。控制應用於圖像的壓縮程度的功能使您能夠控制圖像品質和文件大小。

PNG
可移植網絡圖形(PNG) 格式是作為受專利保護的GIF 文件格式的開放源替代格式而開發的。PNG 最多支持64 位顏色深度，允許使用最多1600 萬種顏色。由於PNG 是一種比較新的格式，因此一些舊版本瀏覽器不支持PNG 文件。與JPG 不同，PNG 使用無損壓縮，這意味着保存圖像時不會丟失圖像數據。PNG 文件還支持Alpha 透明度，允許使用最多256 級透明度。

TIFF
標簽圖像文件格式(TIFF) 是在引入PNG 之前的首選跨平台格式。TIFF 格式的缺點是，因為TIFF 有多種不同變體，但沒有一種閱讀器能夠處理所有版本。此外，所有Web 瀏覽器當前均不支持這種格式。TIFF 可以使用有損或無損壓縮，能夠處理特定於設備的顏色空間 （如CMYK）。

透明位圖和不透明位圖
使用GIF 或PNG 格式的位圖圖像可以對每個像素添加一個額外字節（Alpha 通道）。此額外像素字節表示像素的透明度值。GIF 圖像允許使用一位透明度，這意味着您可以在256 色調色板中指定一種透明的顏色。而PNG 圖像最多可以有256 級透明度。當需要將圖像或文本混合到背景中時，此功能特別有用。
ActionScript 3.0 在BitmapData 類中復制了此額外透明度像素字節。與PNG 透明度模型類似，ActionScript 最多提供256 級透明度。

 

* 概念與術語

• Alpha：顏色或圖像中的透明度級別 （更准確地說是指不透明度）。Alpha 量通常稱為“Alpha 通道”值。
• ARGB：顏色一種配色方案，其中每個像素的顏色都是紅、綠和藍色值的混合顏色，並且其透明度被指定為一個Alpha 值。
• 顏色通道：通常將顏色表示為幾種基本顏色的混合顏色；對於計算機圖形來說，基本顏色通常是紅色、綠色和藍色。每種基本顏色都視為一個顏色通道；每個顏色通道中的顏色量混合在一起可確定最終顏色。
• 顏色深度：也稱為“位深度”，指專門用於每個像素的計算機內存量，因而可以確定圖像中可以顯示的可能顏色數。
• 像素：位圖圖像中的最小信息單位，實際上就是顏色點。
• 分辨率：圖像的像素尺寸，它決定圖像中包含的精細細節的級別。分辨率通常表示為用像素數表示的寬度和高度。
• RGB 顏色：一種配色方案，其中每個像素的顏色均表示為紅、綠和藍色值的混合顏色

 

* Bitmap類與BitmapData類

位於flash.display包中，為DisplayObject的子類，Bitmap用於在屏幕上顯示位圖圖像，BitmapData用於訪問和處理位圖的原始圖像數據。

Bitmap

myBitmap.pixelSnapping = PixelSnapping.ALWAYS; //確定Bitmap 對象是否貼緊最近的像素
myBitmap.smoothing = true; //縮放位圖圖像時圖像會變得模糊或扭曲，smoothing使像素平滑或消除鋸齒

 

BitmapData

var myBitmapDataObject:BitmapData = new BitmapData(150, 150, false, 0xFF0000); 
var myImage:Bitmap = new Bitmap(myBitmapDataObject); 
addChild(myImage);

 

 

* 處理像素

• 獲取單個像素值

getPixel()

getPixel32

• 設置單個像素值

setPixel()

setPixel32()

import flash.display.Bitmap; 
import flash.display.BitmapData; 
var myBitmapData:BitmapData = new BitmapData(100, 100, false, 0x009900); 
for (var i:uint = 0; i < 100; i++) 
{ 
 var red:uint = 0xFF0000; 
 myBitmapData.setPixel(50, i, red); 
 myBitmapData.setPixel(i, 50, red); 
} 
var myBitmapImage:Bitmap = new Bitmap(myBitmapData); 
addChild(myBitmapImage); 
var pixelValue:uint = myBitmapData.getPixel(50, 50); 
trace(pixelValue.toString(16));

 

 

• 獲取或設置一組像素值

getPixels() 

setPixels()

import flash.display.Bitmap; 
import flash.display.BitmapData; 
import flash.utils.ByteArray; 
import flash.geom.Rectangle; 
var bitmapDataObject1:BitmapData = new BitmapData(100, 100, false, 0x006666FF); 
var bitmapDataObject2:BitmapData = new BitmapData(100, 100, false, 0x00FF0000); 
var rect:Rectangle = new Rectangle(0, 0, 100, 100); 
var bytes:ByteArray = bitmapDataObject1.getPixels(rect); 
bytes.position = 0; 
bitmapDataObject2.setPixels(rect, bytes); 

var bitmapImage1:Bitmap = new Bitmap(bitmapDataObject1); 
addChild(bitmapImage1); 
var bitmapImage2:Bitmap = new Bitmap(bitmapDataObject2); 
addChild(bitmapImage2); 
bitmapImage2.x = 110;

 

 

* 像素級別沖突檢測

BitmapData.hitTest() 方法可以在位圖數據和另一個對象或點之間執行像素級別沖突檢測。

import flash.display.Bitmap; 
import flash.display.BitmapData; 
import flash.geom.Point; 
var bmd1:BitmapData = new BitmapData(100, 100, false, 0x000000FF); 
var bmd2:BitmapData = new BitmapData(20, 20, false, 0x00FF3300); 
var bm1:Bitmap = new Bitmap(bmd1); 
this.addChild(bm1); 
// Create a red square. 
var redSquare1:Bitmap = new Bitmap(bmd2); 
this.addChild(redSquare1); 
redSquare1.x = 0; 
// Create a second red square. 
var redSquare2:Bitmap = new Bitmap(bmd2); 
this.addChild(redSquare2); 
redSquare2.x = 150; 
redSquare2.y = 150; 
// Define the point at the top-left corner of the bitmap. 
var pt1:Point = new Point(0, 0); 
// Define the point at the center of redSquare1. 
var pt2:Point = new Point(20, 20); 
// Define the point at the center of redSquare2. 
var pt3:Point = new Point(160, 160); 
trace(bmd1.hitTest(pt1, 0xFF, pt2)); // true 
trace(bmd1.hitTest(pt1, 0xFF, pt3)); // false

 

 

* 復制位圖數據

• clone() 方法允許您將位圖數據從一個BitmapData 對象克隆或采樣到另一個對象。調用此方法時，此方法返回一個新的BitmapData 對象，它是與被復制的原始實例完全一樣的克隆。
• copyPixels() 方法是一種將像素從一個BitmapData 對象復制到另一個BitmapData 對象的快速且簡便的方法。該方法會拍攝源圖像的矩形快照 （由 sourceRect 參數定義），並將其復制到另一個矩形區域 （大小相等）。新“粘貼”的矩形的位置在destPoint 參數中定義。
• copyChannel() 方法從源BitmapData 對象中采集預定義的顏色通道值 （Alpha、紅、綠或藍），並將此值復制到目標BitmapData 對象的通道中。調用此方法不會影響目標BitmapData 對象中的其他通道。
• draw() 和 drawWithQuality() 方法將源子畫面、影片剪輯或其他顯示對象中的圖形內容繪制或呈現在新位圖上。使用 matrix、colorTransform、blendMode 和目標 clipRect 參數，可以修改新位圖的呈示方式。方法使用Flash Player 和AIR 中的矢量渲染器生成數據。調用 draw() 或 drawWithQuality() 時，需要將源對象 （子畫面、影片剪輯或其他顯示對象）作為第一個參數傳遞

 

* 壓縮位圖數據

flash.display.BitmapData.encode() 方法允許您將位圖數據本機壓縮為以下圖像壓縮格式之一。

• PNG- 使用PNG 壓縮，可以選擇使用快速壓縮，它強調的是壓縮速度而不是文件大小。若要使用PNG 壓縮，請將新的flash.display.PNGEncoderOptions 對象作為 BitmapData.encode() 方法的第二個參數傳遞。
• JPEG- 使用JPEG 壓縮，可以選擇指定圖像品質。若要使用JPEG 壓縮，請將新的 flash.display.JPEGEncoderOptions 對象作為 BitmapData.encode() 方法的第二個參數傳遞。
• JPEGXR- 使用JPEG 擴展范圍(XR) 壓縮，可以選擇指定顏色通道、損耗和熵(entropy) 編碼設置。若要使用JPEGXR壓縮，請將新的 flash.display.JPEGXREncoderOptions 對象作為 BitmapData.encode() 方法的第二個參數傳遞

// Compress a BitmapData object as a JPEG file. 
var bitmapData:BitmapData = new BitmapData(640,480,false,0x00FF00); 
var byteArray:ByteArray = new ByteArray(); 
bitmapData.encode(new Rectangle(0,0,640,480), new flash.display.JPEGEncoderOptions(), byteArray);

 

 

* 使用雜點功能制作紋理

noise() 對位圖應用雜點效果

package 
{ 
import flash.display.Sprite; 
import flash.display.Bitmap; 
import flash.display.BitmapData; 
import flash.display.BitmapDataChannel; 
public class BitmapNoise1 extends Sprite 
{ 
public function BitmapNoise1() 
{ 
var myBitmap:BitmapData = new BitmapData(250, 250,false, 0xff000000); 
myBitmap.noise(500, 0, 255, BitmapDataChannel.BLUE,false); 
var image:Bitmap = new Bitmap(myBitmap); 
addChild(image); 
} 
} 
}

 

 

perlinNoise() 創建更好的有機外觀紋理，可生成逼真、有機的紋理，是用於煙霧、雲彩、水、火或爆炸的理想圖案。

package 
{ 
import flash.display.Sprite; 
import flash.display.Bitmap; 
import flash.display.BitmapData; 
import flash.display.BitmapDataChannel; 
public class BitmapNoise2 extends Sprite 
{ 
public function BitmapNoise2() 
{ 
var myBitmapDataObject:BitmapData = 
new BitmapData(150, 150, false, 0x00FF0000); 
var seed:Number = Math.floor(Math.random() * 100); 
var channels:uint = BitmapDataChannel.GREEN | BitmapDataChannel.BLUE 
myBitmapDataObject.perlinNoise(100, 80, 6, seed, false, true, channels, false, null); 
var myBitmap:Bitmap = new Bitmap(myBitmapDataObject); 
addChild(myBitmap); 
} 
} 
}

 

 

* 滾動位圖

每次移動位圖時，都需要更新視圖。用位圖scroll()方法可以復制屏幕上的位圖，然后將它粘貼到由(x, y) 參數指定的新偏移位置。如果位圖的一部分恰巧在舞台以外，則會產生圖像發生移位的效果。

import flash.display.Bitmap; 
import flash.display.BitmapData; 
var myBitmapDataObject:BitmapData = new BitmapData(1000, 1000, false, 0x00FF0000); 
var seed:Number = Math.floor(Math.random() * 100); 
var channels:uint = BitmapDataChannel.GREEN | BitmapDataChannel.BLUE; 
myBitmapDataObject.perlinNoise(100, 80, 6, seed, false, true, channels, false, null); 
var myBitmap:Bitmap = new Bitmap(myBitmapDataObject); 
myBitmap.x = -750; 
myBitmap.y = -750; 
addChild(myBitmap); 
addEventListener(Event.ENTER_FRAME, scrollBitmap); 
function scrollBitmap(event:Event):void 
{ 
myBitmapDataObject.scroll(1, 1); 
}

  

* 利用mipmap 處理

 組合在一起並與紋理關聯的位圖，可改善運行時呈示品質和性能。MIP map 中的每個位圖圖像分別是主位圖圖像的一個版本，但與主圖像相比，其詳細程度有所降低。“紋理流式處理”是首先加載最低品質的位圖，然后在加載位圖時逐漸顯示較高品質的位圖的功能。因為較低品質的位圖較小，所以它們的加載速度比主圖像快。因此，應用程序用戶可以在高品質的主位圖加載之前，在應用程序中查看圖像。

使用紋理壓縮可以將紋理圖像以壓縮格式直接存儲在GPU 中，從而節省GPU 內存和內存帶寬。通常，紋理的壓縮是脫機進行的，且壓縮后的紋理以壓縮格式上傳到GPU。

Context3D.createCubeTexture()

Context3D.createTexture()

 

可以為以下位圖類型創建MIP映射

• 使用AS3 Loader 類顯示的位圖 （JPEG、GIF 或PNG 文件）
• Flash Professional 文檔庫中的位圖
• BitmapData 對象
• 使用AS2 loadMovie() 函數顯示的位圖

Mipmap 處理是自動執行的，但需要遵循以下准則來確保圖像利用此優化技術

• 視頻Video.smoothing = true
• 位圖smoothinging = true時品質改善比false更顯著
• 二維圖像，用可被4或8整除的位圖尺寸。（如640 X 128 ，320 x 64 ， 160 x 32 ， 80 x 16 ， 40 x 8 ， 20 x 4 ， 10 x 2 ， 5 x 1）
• 三維紋理，使用圖像分辨率為2的冪（2^n）。（如1024 x 1024，512 x 512，256 x 256，128 x 128，..，1 X 1）

 

* 位圖圖像的異步解碼(page221)

 

---

 

 

2.4 過濾顯示對象

flash.filters 包包含位圖效果濾鏡類。 

* 概念及術語 

斜面：通過在兩個面變使像素變亮並在相對兩個面使像素變暗創建的一個邊緣。此效果可產生三維邊框的外觀。該效果常用於凸起或凹進按鈕和類似圖形。
卷積：通過使用各種比率將每個像素的值與其周圍的某些像素或全部像素的值合並，使圖像中的像素發生扭曲。
置換：將圖像中的像素偏移或移動到新位置。
Matrix：用於通過將網格中的數字應用到多個值然后合並這些結果來執行某些數學計算的數字網格。

 

* 創建並應用濾鏡

flash.display.DisplayObject.filters 數組屬性
flash.display.BitmapData.applyFilter()

import flash.filters.BevelFilter; 
import flash.filters.GlowFilter; 
// Create the filters and add them to an array. 
var bevel:BevelFilter = new BevelFilter(); 
var glow:GlowFilter = new GlowFilter(); 
var filtersArray:Array = new Array(bevel, glow); 
// Assign the filters array to the display object to apply the filter. 
myDisplayObject.filters = filtersArray;

 

 

var rect:Rectangle = new Rectangle(); 
var origin:Point = new Point(); 
myBitmapData.applyFilter(sourceBitmapData, rect, origin, new BlurFilter());

 

 

* 濾鏡的工作原理

顯示對象過濾是通過將原始對象的副本緩存為透明位圖來工作的。將濾鏡應用於顯示對象后，只要此對象具有有效的濾鏡列表，運行時會將該對象緩存為位圖。然后，將此位圖用作所有后續應用的濾鏡效果的原始圖像。每個顯示對象通常包含兩個位圖：一個包含原始未過濾的源顯示對象，另一個用於過濾后的最終圖像。呈示時使用最終圖像。只要顯示對象不發生更改，最終圖像就不需要更新。

 

* 使用濾鏡的潛在問題

1）應用濾鏡須啟用對象的位圖緩存cacheAsBitmap （應用時自動設置為true,取消自動重置為上次值）

2）運行時更改（新增、刪除、修改）濾鏡，不能直接修改dispObj.filters屬性，而須先取得dispObj.filters的值到一個數組變量， 通過操作變量數組，再賦值到dispObj.filters屬性才能應用新的濾鏡。

3）顯示對象邊框矩形之外的任何過濾區域都不能進行點擊檢測

4）濾鏡不支持縮放、旋轉和傾斜

 

* 可用的顯示濾鏡

• 斜角濾鏡 （BevelFilter 類）
• 模糊濾鏡 （BlurFilter 類）
• 投影濾鏡 （DropShadowFilter 類）
• 發光濾鏡 （GlowFilter 類）
• 漸變斜角濾鏡 （GradientBevelFilter 類）
• 漸變發光濾鏡 （GradientGlowFilter 類）

• 顏色矩陣濾鏡 （ColorMatrixFilter 類） - 飽和度更改、色相旋轉，將亮度更改為Alpha，以及生成其他顏色操作效果
• 卷積濾鏡 （ConvolutionFilter 類） - 模糊、邊緣檢測、銳化、浮雕和斜角
• 置換圖濾鏡 （DisplacementMapFilter 類）- 產生移位、扭曲或斑點效果
• 着色器濾鏡 （ShaderFilter 類）

 

如下設置發光字：

import flash.filters.BitmapFilterQuality;
import flash.filters.GlowFilter;
import flash.text.TextField;


var glow:GlowFilter = new GlowFilter();
glow.color = 0x009922;
glow.alpha = 1;
glow.blurX = 2;
glow.blurY = 2;
glow.quality = BitmapFilterQuality.MEDIUM;

var txt:TextField = new TextField();
txt.text = "中國abcdefg1234567,..";
txt.width = 400;
txt.x = 50;
txt.y = 50;
addChild(txt);

var formatter:TextFormat = new TextFormat();
formatter.size = 60;
txt.setTextFormat(formatter);

txt.filters = [glow];

 

 

綜合示例見page244示例。

 

---

 

2.5 使用Pixel Bender着色器

page251

---

 

2.6 使用影片剪輯

flash.display.MovieClip類

• frameRate
• play()
• stop()
• nextFrame()
• prevFrame()
• gotoAndPlay()
• gotoAndStop()

AS3代碼可以加載使用AS1 或AS2 編寫的SWF 文件。如果AS1 或AS2 SWF 文件成功加載，加載的對象（Loader.content 屬性）是AVM1Movie 對象。AVM1Movie 實例不同於MovieClip 實例。而是顯示對象，但不同於影片剪輯，它不包括與時間軸相關的方法或屬性。父AVM2 SWF 文件無法訪問加載的AVM1Movie 對象的屬性、方法或對象。

---

 

2.7 使用補間動畫

flash.motion包中定義，

一種構造，它生成顯示對象在不同時間不同狀態下的中間幀；提供使第一個狀態平滑過渡到第二個狀態的外觀。用於在舞台上移動顯示對象，並使顯示對象隨時間而增大、縮小、旋轉、淡化或更改顏色。

Flash Professional在幀上創建補間后，點右鍵“ 將動畫復制為ActionScript 3.0 腳本”命令復制創建補間動畫的ActionScript。

 

* 補間動畫類

• flash.motion.AnimatorFactory
• flash.motion.MotionBase
• flash.motion.Motion -  存儲可應用於可視對象的關鍵幀動畫序列。動畫數據包括位置、縮放、旋轉、傾斜、顏色、濾鏡和緩動
• flash.geom - 補間變形旋轉
• flash.filter - 補間濾鏡

MotionBase類

• motionObj.duration - 補間的總幀數
• motionObj.addPropertyArray(propertyName:String,valueArray:Array)  - 添加動畫屬性

支持的屬性有：

x 對象的變形點在其父級的坐標空間中的水平位置
y 對象的變形點在其父級的坐標空間中的垂直位置
z 對象的變形點在其父級的坐標空間中的深度 （z 軸）位置
scaleX 從變形點開始應用的對象的水平縮放比例 （百分比）
scaleY 從變形點開始應用的對象的垂直縮放比例 （百分比）
skewX 從變形點開始應用的對象的水平傾斜角度 （以度為單位）
skewY 從變形點開始應用的對象的垂直傾斜角度 （以度為單位）
rotationX 對象相對於其原始方向圍繞x 軸的旋轉
rotationY 對象相對於其原始方向圍繞y 軸的旋轉
rotationConcat 動畫中的對象的旋轉 （z 軸）值，相對於前一個方向且從變形點開始應用
useRotationConcat 如果設置此屬性，則會在 addPropertyArray() 提供動畫數據時導致目標對象旋轉
blendMode BlendMode 類值，指定對象的顏色與底層圖形的混合
matrix3D matrix3D 屬性 （如果對於關鍵幀存在此屬性）；用於3D 補間；如果使用，則會忽略以前所有的變形屬性
rotationZ 對象相對於3D 父容器從其原始方向開始的z 軸旋轉 （以度為單位）；用於3D 補間 （而不是rotationConcat）

 

補間濾鏡

motionObj.initFilters()

motionObj.addFilterPropertyArray()

motionObj.initFilters(["flash.filters.DropShadowFilter", "flash.filters.GlowFilter", "flash.filters.BevelFilter"], [0, 0, 0]);

motionObj.addFilterPropertyArray(0, "blurX", [5]); 
motionObj.addFilterPropertyArray(0, "blurY", [5]);

motionObj.addFilterPropertyArray(1, "quality", [BitmapFilterQuality.LOW]); 
motionObj.addFilterPropertyArray(1, "alpha", [1.00]); 
motionObj.addFilterPropertyArray(1, "color", [0xff0000]);


motionObj.addFilterPropertyArray(2, "shadowAlpha", [1.00]); 
motionObj.addFilterPropertyArray(2, "shadowColor", [0x000000]); 
motionObj.addFilterPropertyArray(2, "highlightAlpha", [1.00]); 
motionObj.addFilterPropertyArray(2, "highlightColor", [0xffffff]);

 

 

補間動畫與其顯示對象關聯

AnimatorFactory 類管理補間動畫與其目標顯示對象之間的關聯

 

 

 

 

 

 

 

 

 

 

 

聲明：本站未注明轉載的文章均屬本人原創文章，文中所涉及文字、圖片、圖表、Logo、頁面版式以及其他信息等內容均受版權、標簽和其它財產所有權法律的保護，請勿用於任何形式的商業用途，轉載請保留該聲明，並注明出處。茶沫：http://www.cnblogs.com/janas/ 歡迎溝通交流：[e-mail]