畢業(yè)設(shè)計(jì)（論文）-Flash-3D動畫和濾鏡效果

PAGEPAGE1Flash動畫設(shè)計(jì)論文論文關(guān)鍵詞：flash動畫flash10中的3D動畫濾鏡效果論文摘要：Flash是美國的一家公司（MACROMEDIA公司）于1996年6月推出的優(yōu)秀網(wǎng)頁動畫設(shè)計(jì)軟件，在中國經(jīng)歷了9年的發(fā)展時(shí)間。曾經(jīng)在中國風(fēng)云一時(shí)，出現(xiàn)了FALSH熱。由于動漫也成為一種時(shí)尚的藝術(shù)，而且最直接簡單的動畫創(chuàng)作是就FLASH。我認(rèn)為它可以自成體系，有它自己獨(dú)特的表現(xiàn)方法.手段和流通方式及“閃客”生活。甚至我認(rèn)為它是現(xiàn)代文明的一種符號，新新藝術(shù)創(chuàng)作方式，是一種流行于網(wǎng)絡(luò)的網(wǎng)絡(luò)文化。電腦替代了傳統(tǒng)的筆墨，移動的圖象和聲音同樣表達(dá)了動畫藝術(shù)家的情感，所以我把FLASH作為獨(dú)立的動畫來談。我這種論述不論對與錯(cuò)，但是他始終代表了我對FLASH認(rèn)識的觀點(diǎn)和理解。今天讓我們共同來探討FLASH，我的觀點(diǎn)是FLASH不可否認(rèn)已經(jīng)成為了一種新的藝術(shù)表現(xiàn)形式，作為新的事物它的應(yīng)用非常廣泛，主要用于網(wǎng)絡(luò)，F(xiàn)LASH網(wǎng)站片頭，F(xiàn)LASH演示動畫，F(xiàn)LASH網(wǎng)站，F(xiàn)LASH商業(yè)廣告，電視，掌上電腦，游戲，MTV，手機(jī)屏保，手機(jī)彩信，家用電器等等！這些表示FLASH的確是一個(gè)非常好的傳播載體。它能夠引申出非常多的商業(yè)機(jī)會。能夠以多樣的效果和形式來充分體現(xiàn)產(chǎn)品或企業(yè)形象?，F(xiàn)在電腦，網(wǎng)絡(luò)，手機(jī)用戶等等都是在不斷的增加，網(wǎng)絡(luò)的發(fā)展壯大和完美，電腦更加普及，上網(wǎng)的人更多。正因?yàn)樗性趺炊嗟挠脩簦瑦酆谜?，?chuàng)作者和發(fā)展平臺，使用價(jià)值和欣賞價(jià)值。它現(xiàn)在雖然不能和我們的中國畫，油畫，版畫等藝術(shù)創(chuàng)作相提并論，但是它可以滿足社會藝術(shù)欣賞的需要和商業(yè)價(jià)值的需要，通過介紹論證FLASH是具有廣闊的天空，它是在不斷的發(fā)展和成熟中，我認(rèn)為FLASH真正的價(jià)值是其未來！它是一種新新事物，是一種新的藝術(shù)創(chuàng)作和文化。本文從對Flash的發(fā)展及其技術(shù)上的操作，和一些動畫理念結(jié)合起來。大家了以共同學(xué)習(xí)學(xué)習(xí)，互補(bǔ)互助。1緒論1.1flash概敘

Flash

由macromedia公司推出的交互式矢量圖和

Web

動畫的標(biāo)準(zhǔn)。網(wǎng)頁設(shè)計(jì)者使用

Flash

創(chuàng)作出既漂亮又可改變尺寸的導(dǎo)航界面以及其他奇特的效果。flash涉及到的領(lǐng)域:動畫游戲制作，網(wǎng)絡(luò)構(gòu)件，學(xué)習(xí)課件，網(wǎng)站廣告設(shè)計(jì)及全flash網(wǎng)站，工控界面等等。主要特點(diǎn)是制作簡單，通用性比較大，涉及的領(lǐng)域多，制作出的東西效果都可以做到非常精致。缺點(diǎn)在于有些效果需要別的軟件輔助制作等等，不是所有效果都能制作出來。（比如些3d效果，flash就很難制作，只能通過導(dǎo)入的方式或者針并針的方式）

FLASH有三重意義:1)

FLASH英文本意為“閃光”;2)它是全球流行的電腦動畫設(shè)計(jì)軟件;3)它代表用上述軟件制作的流行于網(wǎng)絡(luò)的動畫作品。Flash是一種交互式矢量多媒體技術(shù)，他的前身是Futureplash，早期網(wǎng)上流行的矢量動畫插件。后來由于Macromedia公司收購了Future

Splash以后便將其改名為

Flash2，到現(xiàn)在最新的flashcs3?，F(xiàn)在網(wǎng)上已經(jīng)有成千上萬個(gè)Flash站點(diǎn)，著名的如Macromedia專門ShockRave站點(diǎn)，全部采用了Shockwave

Flash

和Director?？梢哉fFlash已經(jīng)漸漸成為交互式知量的標(biāo)準(zhǔn)，未來網(wǎng)頁的一大主流。

Flash

最早期的版本稱為Future

Splash

Animator，當(dāng)時(shí)Future

Splash

Animator最大的兩個(gè)用戶是微軟（Microsoft）和迪斯尼（Disney）。1996年11月，F(xiàn)uture

Splash

Animator賣給了MM（M），同時(shí)改名為Flash1.0

。

Macromedia

公司在1997年6月推出了

Flash

2.0

，1998年5月推出了Flash3.0。但是這些早期版本的Flash所使用的都是Shockwave

播放器。自

Flash

進(jìn)入4.0

版以后，原來所使用的

Shockwave

播放器便僅供

Director

使用。Flash

4.0開始有了自己專用的播放器，稱為“Flash

Player”，但是為了保持向下相容性，F(xiàn)lash仍然沿用了原有的擴(kuò)展名：.SWF（Shockwave

Flash）。

2000年8月Macromedia

推出了Flash5.0

，它所支持的播放器為

Flash

Player

5。Flash

5.0中的ActionScript已有了長足的進(jìn)步，并且開始了對XML和Smart

Clip（智能影片剪輯）的支持。ActionScript的語法已經(jīng)開始定位為發(fā)展成為一種完整的面向?qū)ο蟮恼Z言，并且遵循ECMAScript的標(biāo)準(zhǔn)，就像javascript那樣。

2002年3月

Macromedia

推出了Flash

MX支持的播放器為

Flash

Player

6。Flash

6開始了對外部jpg和MP3調(diào)入的支持，同時(shí)也增加了更多的內(nèi)建對象，提供了對HTML文本更精確的控制，并引如SetInterval

超頻幀的概念。同時(shí)也改進(jìn)了swf文件的壓縮技術(shù)。之后Macromedia有相繼推出了Flash8，F(xiàn)lash9及現(xiàn)在的FlashCS3。相信Flash的軟件以后還會在不斷的更新，使其更加完美。1.2Flash的特點(diǎn)1.2.1它是基于矢量的圖形系統(tǒng)，各元素都是矢量的，只要用少量向量數(shù)據(jù)就可以描述一個(gè)復(fù)雜的對象，占用的存儲空間只是位圖的幾千分之一，非常適合在網(wǎng)絡(luò)上使用。同時(shí)，矢量圖像可以做到真正的無級放大。這樣，無論用戶的瀏覽器使用多大的窗口，圖像始終可以完全顯示，并且不會降低畫面質(zhì)量。1.2.2它使用插件方式工作。用戶只要安裝一次插件，以后就可以快速啟動并觀看動畫，而不必像：Java那樣每次都要啟動虛擬機(jī)。由于Flash生成的動畫一般都很小，所以，調(diào)用的時(shí)候速度很快。Flashplug-in也不大，只有150KB左右，很容易下載并安裝。1.2.3它還提供其他的一些增強(qiáng)功能。比如，支持位圖、聲音、漸變色、Alpha、透明等。擁有了這些功能，完全可以建立一個(gè)全部由Flash制作的站點(diǎn)。1.2.4Flash影片其實(shí)是一種“準(zhǔn)”流（stream）形式文件。這就是說，在觀看一個(gè)大動畫的時(shí)候，可以不必等到影片全部下載到本地再觀看，而是隨時(shí)可以觀看，哪怕后面的內(nèi)容還沒有完全下載到硬盤，也可以開始欣賞動畫。1.3.1Flash的功能Flash的編輯界面非常友好，并且提供非常詳細(xì)和完整的教程，很多基本的操作（比如畫線、變形以及移動等）一看便會，而一些高級的技巧則可以通過附帶的例子來學(xué)習(xí)。只要細(xì)心，完全可以成為Flash高手。當(dāng)然，這里所說的“高手”只是初級水平的，想成為真正的高手，還要看創(chuàng)意和手法，那就不是一朝一夕能辦到的。在這里僅對Flash中的幾個(gè)要點(diǎn)作些說明：在Flash中，一般的動畫都是依靠關(guān)鍵幀來實(shí)現(xiàn)的，方便又快捷。用戶只需給出一個(gè)對象的幾個(gè)關(guān)鍵動作，生成關(guān)鍵幀，系統(tǒng)就會根據(jù)需要在各個(gè)關(guān)鍵幀之間自動插入平滑的動畫。因此，一個(gè)簡單的動畫可以在幾分鐘之內(nèi)自動生成。1.3.2Flash使用了“層”（Layer）的概念。不同的角色可以出現(xiàn)在不同的層面上，互相掩映，但是不會互相干擾?？梢詥为?dú)對某一個(gè)層面進(jìn)行操作，并且可以看見效果。這樣，即使動畫已經(jīng)生成完畢，需要修改的時(shí)候也不會遇到任何困難。1.3.3Flash對按鈕（Button）的處理非常出色?？梢灾付ㄒ粋€(gè)按鈕的各種屬性，包括正常時(shí)的畫面、鼠標(biāo)掠過時(shí)的畫面、按下時(shí)的畫面以及熱區(qū)（可點(diǎn)擊區(qū)域）的范圍。這樣很容易生成一個(gè)反應(yīng)靈敏的動態(tài)按鈕。Flash現(xiàn)在增加了動畫效果，使得按鈕動態(tài)感極強(qiáng)，完全超出一般按鈕所能帶給人的感覺。1.3.4Flash動畫可以分成多個(gè)場景（Scene），在制作復(fù)雜動畫的時(shí)候，可以借助多個(gè)Scene，而不只使用一個(gè)屏幕，而且Scene之間可以自由切換，更換場景易如反掌。在制作多場景動畫的時(shí)候，應(yīng)該盡量考慮Scene的使用。1.3.5Flash與HTML聯(lián)系緊密，這就為Flash在網(wǎng)絡(luò)上的應(yīng)用創(chuàng)造了良好的條件?？梢灾付ㄒ粋€(gè)按鈕點(diǎn)擊以后要請求的鏈接，直接寫入鏈接的URL。1.3.6還可以使用Flash生成AVI或者GIF動畫文件。這樣，沒有安裝Flash插件的用戶也可以看到動畫。2開發(fā)環(huán)境2.1.1系統(tǒng)平臺Windowxp由于其具有最出色的穩(wěn)定性,所以選擇它作為操作系統(tǒng)2.1.2硬件環(huán)境計(jì)算機(jī)硬件配置如下:Cpu:AMDAthlonXP3800+X2內(nèi)存:1024MB硬盤:160GB(sataII接口)硬件平臺選擇方面,cpu采用Athlonxp,其主頻高達(dá)3.6GB,主內(nèi)存容量也達(dá)到1GB,足夠流暢運(yùn)行windowsxp操作系統(tǒng)且能快速響應(yīng)客戶機(jī)的請求,硬盤采用160GB超大容量且為最新的sataII接口,為整個(gè)網(wǎng)絡(luò)信息的存儲提供叻足夠的空間的高速的存儲速度。2.1.3開發(fā)工具AdobephotoshopcsMacromediaflashcs53.1什么是flash動畫動畫是將靜止的畫面變?yōu)閯討B(tài)的藝術(shù)．實(shí)現(xiàn)由靜止到動態(tài)，主要是靠人眼的視覺殘留效應(yīng)．利用人的這種視覺生理特性可制作出具有高度想象力和表現(xiàn)力的動畫影片。動畫以人類視覺的原理為基礎(chǔ)。如果快速查看一系列相關(guān)的靜態(tài)圖像，那么我們會感覺到這是一個(gè)連續(xù)的運(yùn)動。每一個(gè)單獨(dú)圖像稱之為幀。幀是動畫電影中的單個(gè)圖像。4

flash動畫的概念4.1什么是動畫與動畫設(shè)計(jì)動畫與動畫設(shè)計(jì)(即原畫)是不同的概念，原畫設(shè)計(jì)是動畫影片的基礎(chǔ)工作．原畫設(shè)計(jì)的每一鏡頭的角色、動作、表情，相當(dāng)於影片中的演員．所不同的是設(shè)計(jì)者不是將演員的形體動作直接拍攝到膠片上，而是通過設(shè)計(jì)者的畫筆來塑造各類角色的形象并賦予他們生命、性格和感情。4.2什么是動畫片中的動畫

動畫片中的動畫一般也稱為"中間畫"．這是指兩張?jiān)嫷闹虚g過程而言的．動畫片動作的流暢、生動，關(guān)鍵要靠"中間畫"的完善．一般先由原畫設(shè)計(jì)者繪制出原畫，然后動畫設(shè)計(jì)者根據(jù)原畫規(guī)定的動作要求以及幀數(shù)繪制中間畫．原畫設(shè)計(jì)者與動畫設(shè)計(jì)者必須有良好的配合才能順利完成動畫片的制作。4.3動畫繪制時(shí)需要的一些工具動畫繪制需要的工具一般有：拷貝箱工作臺、定位器、鉛筆、橡皮、顏料、曲線尺等．方法是：按原畫順序?qū)⑶昂髢蓮埉嬅嫣自诙ㄎ黄魃?，然后再覆蓋一張同樣規(guī)格的動畫紙，通過臺下拷貝箱的燈光，在兩張?jiān)媱幼髦g先畫出第一張中間畫(稱為第一動畫)，然后再將第一動畫與第一張?jiān)嫰B起來套在定位器上，覆蓋另一張空白動畫紙畫出第二動畫．依此方法，繪制出兩張?jiān)嬛g的全部動作。5flash中的3D動畫在FLASH中引入3D這次我們來討論制作有3D效果的Flash動畫，朋友們可能在其他一些網(wǎng)站上見過包含3D效果的FLASH，這是如何實(shí)現(xiàn)的呢？能不能用Flash自的繪畫功能畫出來呢？答案是肯定的，但是未免有些牽強(qiáng)，我們不得不承認(rèn)，在新版的Flash4.0中還不具備對3D的支持，雖然你也可以用足夠的間和很好的耐心來繪出在Flash中繪出一個(gè)"3D"物件，但和專業(yè)的3D建模軟件比起來效果可能很糟糕。5.1flash3D效果效果圖5.1.1效果圖5.1.2效果圖建立一個(gè)flv5.3建立ActionScript3.0.類5.4.13D容器代碼package{ importflash.display.Sprite; importflash.display.StageAlign; importflash.display.StageScaleMode; importflash.events.Event; importflash.text.TextField; importflash.text.TextFormat; [SWF(width=800,height=800,backgroundColor=0xffffff)] publicclassContainer3DextendsSprite { privatevar_sprite:Sprite; privatevar_n:Number=0; publicfunctionContainer3D() { stage.align=StageAlign.TOP_LEFT; stage.scaleMode=StageScaleMode.NO_SCALE; _sprite=newSprite() _sprite.y=stage.stageHeight/2; for(vari:int=0;i<100;i++) { vartf:TextField=newTextField(); tf.defaultTextFormat=newTextFormat("Arial",40); tf.text=String.fromCharCode(65+Math.floor(Math.random()*25)); tf.selectable=false; tf.x=Math.random()*300-150; tf.y=Math.random()*300-150; tf.z=Math.random()*1000; _sprite.addChild(tf); } addChild(_sprite); addEventListener(Event.ENTER_FRAME,onEnterFrame); //constructorcode } privatefunctiononEnterFrame(event:Event):void { _sprite.x=stage.stageWidth/2+Math.cos(_n)*200; _n+=.05; } } }5.4.23D旋轉(zhuǎn)代碼package{ importflash.display.Shape; importflash.display.Sprite; importflash.events.Event; [SWF(width=800,height=800,backgroundColor=0xffffff)] publicclassRotateAndPositionextendsSprite { privatevar_holder:Sprite; privatevar_shapes:Array; publicfunctionRotateAndPosition() { _holder=newSprite(); _holder.x=stage.stageWidth/2; _holder.y=stage.stageHeight/2; addChild(_holder); varshape1:Shape=makeShape(); shape1.z=200; varshape2:Shape=makeShape(); shape2.z=-200; varshape3:Shape=makeShape(); shape3.x=200; shape3.rotationY=90; varshape4:Shape=makeShape(); shape4.x=-200; shape4.rotationY=-90; varshape5:Shape=makeShape(); shape5.y=200; shape5.rotationX=90; varshape6:Shape=makeShape(); shape6.y=-200; shape6.rotationX=-90; _shapes=[shape1,shape2,shape3,shape4,shape5,shape6]; sortShapes(); addEventListener(Event.ENTER_FRAME,onEnterFrame); } privatefunctionmakeShape():Shape { varshape:Shape=newShape(); shape.graphics.beginFill(Math.random()*0xff0000); shape.graphics.drawRect(-100,-100,200,200); _holder.addChild(shape); returnshape; } privatefunctionsortShapes():void { _shapes.sortOn("z",Array.NUMERIC|Array.DESCENDING); for(vari:int=0;i<_shapes.length;i++) { _holder.addChildAt(_shapes[i]asShape,i); } } privatefunctiononEnterFrame(event:Event):void { _holder.rotationY+=2; _holder.rotationX+=1.5; sortShapes(); } } }5.4.3旋轉(zhuǎn)式布局代碼package{ importflash.display.Sprite; importflash.events.Event; importflash.display.DisplayObject; importflash.geom.Vector3D; [SWF(width=800,height=800,background=0xffffff)] publicclassCarouselextendsSprite { privatevar_holder:Sprite; privatevar_items:Array; privatevar_radius:Number=200; privatevar_numItems:int=7; publicfunctionCarousel() { _holder=newSprite(); _holder.x=stage.stageWidth/2; _holder.y=stage.stageHeight/2; _holder.z=0; addChild(_holder); _items=newArray(); for(vari:int=0;i<_numItems;i++) { varangle:Number=Math.PI*2/_numItems*i; varitem:Sprite=makeItem(); item.x=Math.cos(angle)*_radius; item.z=Math.sin(angle)*_radius; item.rotationY=-360/_numItems*i+90; _items.push(item); } sortItems(); addEventListener(Event.ENTER_FRAME,onEnterFrame); } privatefunctionmakeItem():Sprite { varitem:Sprite=newSprite(); item.graphics.beginFill(Math.random()*0xffffff); item.graphics.drawRect(-50,-50,100,100); _holder.addChild(item); returnitem; } privatefunctionsortItems():void { _items.sort(depthSort); for(vari:int=0;i<_items.length;i++) { _holder.addChildAt(_items[i]asSprite,i); } } privatefunctiondepthSort(objA:DisplayObject,objB:DisplayObject):int { varposA:Vector3D=objA.transform.matrix3D.position; posA=_holder.transform.matrix3D.deltaTransformVector(posA); varposB:Vector3D=objB.transform.matrix3D.position; posB=_holder.transform.matrix3D.deltaTransformVector(posB); returnposB.z-posA.z; } privatefunctiononEnterFrame(event:Event):void { _holder.rotationY+=(stage.stageWidth/2-mouseX)*.01; _holder.y+=(mouseY-_holder.y)*.1; sortItems(); } }}6FlashAS5中的濾鏡ConvolutionFilter在ActionScript3.0中加入了濾鏡類，用來在像素級別上對位圖進(jìn)行控制，可以實(shí)現(xiàn)改變顏色，形狀，大小，旋轉(zhuǎn)或其它顯示效果。在濾鏡包中有flash.filters.ConvolutionFilter（卷積濾鏡）。ConvolutionFilter將位圖中的像素?cái)?shù)據(jù)與它周圍的數(shù)據(jù)進(jìn)行混合（疊加），從而達(dá)到特定的效果。圖像的像素級的控制方式，使得我們可以在位圖上創(chuàng)造一些非常豐富的效果。比如模糊（blurring）、斜角（beveling）、浮雕（embossing）、銳化（sharpening）以及更多的效果，在使用了卷積濾鏡之后，一切成為可能。與矩陣類（Matrix）和顏色矩陣（ColorMatrixFilter）不同的是，卷積濾鏡（ConvolutionFilter）的矩陣沒有固定的行和列，在卷積濾鏡中所使用的行數(shù)和列數(shù)取決于你希望的最終效果的類型和強(qiáng)度（比如：模糊度越大，周邊受影響的像素就越多，需要用到的行列數(shù)就越大）。6.1flash中的濾鏡效果圖圖6.1.1濾鏡效果圖6.2建立一個(gè)flv6.3建立一個(gè)ActionScript3.0.類建立一個(gè)BenderToolkit6.5建立untitled.pbk文件用到的原圖片圖6.5.1input1.jpg圖6.5.2input2.jpg6.6BenderToolkit中的代碼<languageVersion:1.0;>kernelChannelBlend<namespace:"com.frinedsofed";vendor:"AdvanceedActionScript3.0Animation";version:1;description:"blendsthechannelsoftwoimages";>{inputimage4back;inputimage4fore;outputpixel4dst;parameterfloat3amt;voidevaluatePixel(){pixel4bg=sampleNearest(back,outCoord());pixel4fg=sampleNearest(fore,outCoord());dst.r=fg.r*amt.r+bg.r*(1.0-amt.r);dst.g=fg.g*amt.g+bg.g*(1.0-amt.g);dst.b=fg.b*amt.b+bg.b*(1.0-amt.b);dst.a=1.0;}}6.7ActionScript3.0.類中的代碼package{ importflash.display.Bitmap; importflash.display.Shader; importflash.display.Sprite; importflash.display.StageAlign; importflash.display.StageScaleMode; publicclassShaderBlendModeextendsSprite { [Embed(source="untitled.pbj",mimeType="application/octet-stream")] privatevarShaderClass:Class; [Embed(source="input1.jpg")] privatevarinput1:Class; [Embed(source="input2.jpg")] privatevarinput2:Class; publicfunctionShaderBlendMode() { stage.align=StageAlign.TOP_LEFT; stage.scaleMode=StageScaleMode.NO_SCALE; varback:Bitmap=newin