推薦：電子雜志設(shè)計(jì)制作常用Flash技術(shù)
在 電子雜志設(shè)計(jì)制作 過程中，需要使用 Flash 等專業(yè)動(dòng)畫軟件以及相關(guān)ActionScript腳本編程技術(shù)，通過這些專業(yè)技術(shù)的使用，我們可以制作出更加絢麗多彩的電子雜志。 今天我們就講講電子雜志設(shè)計(jì)制作中常用的Flash技術(shù)。 在編寫Flash ActionScript代碼時(shí)，應(yīng)使用“動(dòng)作

首先聲明：本人大菜鳥一個(gè)，剛接觸AS3不久，許多理念還沒來得及灌輸，這些case都是從網(wǎng)上down的，但因?yàn)榻庹f是英文的，不利我們學(xué)習(xí)，我就充當(dāng)一個(gè)translater，順便可以讓自己鞏固一下知識(shí)。

水平有限，錯(cuò)誤難免，歡迎大蝦小蝦，大鳥小鳥指正。

下面進(jìn)入正題：

案例6：通過類來實(shí)現(xiàn)一個(gè)gallery

說明：一個(gè)比較簡(jiǎn)單的相冊(cè)，通過類來實(shí)現(xiàn)。

演示：http://www.live-my-life-with-yuyi.com/as3_cases/gallery_class/

預(yù)備工作：打開源文件class_final.fla，點(diǎn)擊屬性里的發(fā)布設(shè)置，點(diǎn)擊Actionscript3旁邊的設(shè)置，在最下面的classpath里，引入classes_final的文件夾的路徑，然后點(diǎn)擊確定，前期工作就預(yù)備完了。

代碼：

唯一的一個(gè)類文件：ImageGallery.as

package interactive.gallery
{
import flash.display.*;
import flash.events.*;
import fl.transitions.*;
import fl.transitions.easing.*;
import flash.filters.*;
import flash.net.*;
public class ImageGallery extends MovieClip
{
var xml:XML;
var xmlList:XMLList;
var xmlLoader:URLLoader = new URLLoader();
var container:MovieClip = new MovieClip();
var imageLoader:Loader;
var segments:Number;
var currentSegment:int;
var fullLoader:Loader = new Loader();
var xmlPath:String;
var thumbAtt:String;
var fullAtt:String
public function ImageGallery(path:String,thumb:String, full:String)
{
section1
}
function xmlLoaded(event:Event):void
{
section2
}
function changeThumb(event:MouseEvent):void
{
section3
}
function showPicture(event:MouseEvent):void
{
section4
}
}
}

section1代碼：

xmlPath = path;
thumbAtt = thumb;
fullAtt = full;
container.x = 25;
container.y = 25;
fullLoader.x = 200;
fullLoader.y = 25;
container.addEventListener(MouseEvent.MOUSE_MOVE, changeThumb);
container.addEventListener(MouseEvent.CLICK, showPicture);
xmlLoader.load(new URLRequest(xmlPath));
xmlLoader.addEventListener(Event.COMPLETE, xmlLoaded);
container.filters = [new DropShadowFilter()];
addChild(container);
addChild(fullLoader);

這段代碼的功能就是在初始化類時(shí)，給一些以后會(huì)用到的變量賦值，因?yàn)檫@些變量是全局變量，所以后面的function都能用。
對(duì)container添加了監(jiān)聽事件，監(jiān)聽鼠標(biāo)移動(dòng)和點(diǎn)擊。
然后載入xml文件，當(dāng)xml載入完成后，執(zhí)行xmlLoaded函數(shù)
然后對(duì)container應(yīng)用了陰影濾鏡，這個(gè)container就是將來我們要載入圖片的mc。
然后將container和fullLaoder放到舞臺(tái)上，fullLoader將來會(huì)載入大圖。

section2

xml = XML(event.target.data);
xmlList = xml.children();
for (var i:int = 0; i < xmlList.length(); i )
{
imageLoader = new Loader();
imageLoader.load(new URLRequest(xmlList[i].attribute(thumbAtt)));
container.addChild(imageLoader);
}

當(dāng)xml載入完成后就會(huì)執(zhí)行這個(gè)函數(shù)，先是獲取xml對(duì)象列表，然后獲取xml的子元素。這個(gè)在前面的教程提及過。
遍歷子元素，然后通過Loader載入圖片，并將imageLoader添加到container里。

section3

segments = container.width / container.numChildren;
currentSegment = Math.floor(container.mouseX / segments);
if (currentSegment <= container.numChildren - 1)
{
for (var j:int = 0; j < container.numChildren; j )
{
container.getChildAt(j).visible = false;
}
container.getChildAt(currentSegment).visible = true;
}

這個(gè)函數(shù)是響應(yīng)鼠標(biāo)在縮略圖上移動(dòng)的事件，有一個(gè)算法在里面。
將mc的寬除以載入的縮略圖的數(shù)量，得到一個(gè)平均數(shù)。
然后將當(dāng)前鼠標(biāo)的x位移除以剛剛得到的平均數(shù)就得到了當(dāng)前鼠標(biāo)所在的圖片（聽著有點(diǎn)別扭）
然后先將所有container里的child隱藏起來，再顯示當(dāng)前的圖片。

section4

fullLoader.unload();
fullLoader.load(new URLRequest(xmlList[currentSegment].attribute(fullAtt)));
這個(gè)是響應(yīng)縮略圖點(diǎn)擊事件，當(dāng)點(diǎn)擊后先去掉先前載入的大圖，然后再去載入縮略圖對(duì)應(yīng)的大圖。
其實(shí)也不難，不是嗎？

再拉看一下完整的代碼

package interactive.gallery
{
import flash.display.*;
import flash.events.*;
import fl.transitions.*;
import fl.transitions.easing.*;
import flash.filters.*;
import flash.net.*;
public class ImageGallery extends MovieClip
{
var xml:XML;
var xmlList:XMLList;
var xmlLoader:URLLoader = new URLLoader();
var container:MovieClip = new MovieClip();
var imageLoader:Loader;
var segments:Number;
var currentSegment:int;
var fullLoader:Loader = new Loader();
var xmlPath:String;
var thumbAtt:String;
var fullAtt:String
public function ImageGallery(path:String,thumb:String, full:String)
{
xmlPath = path;
thumbAtt = thumb;
fullAtt = full;
container.x = 25;
container.y = 25;
fullLoader.x = 200;
fullLoader.y = 25;
container.addEventListener(MouseEvent.MOUSE_MOVE, changeThumb);
container.addEventListener(MouseEvent.CLICK, showPicture);
xmlLoader.load(new URLRequest(xmlPath));
xmlLoader.addEventListener(Event.COMPLETE, xmlLoaded);
container.filters = [new DropShadowFilter()];
addChild(container);
addChild(fullLoader);
}
function xmlLoaded(event:Event):void
{
xml = XML(event.target.data);
xmlList = xml.children();
for (var i:int = 0; i < xmlList.length(); i )
{
imageLoader = new Loader();
imageLoader.load(new URLRequest(xmlList[i].attribute(thumbAtt)));
container.addChild(imageLoader);
}
}
function changeThumb(event:MouseEvent):void
{
segments = container.width / container.numChildren;
currentSegment = Math.floor(container.mouseX / segments);
if (currentSegment <= container.numChildren - 1)
{
for (var j:int = 0; j < container.numChildren; j )
{
container.getChildAt(j).visible = false;
}
container.getChildAt(currentSegment).visible = true;
}
}
function showPicture(event:MouseEvent):void
{
fullLoader.unload();
fullLoader.load(new URLRequest(xmlList[currentSegment].attribute(fullAtt)));
}
}
}

類說完了，接下來就來看看fla里面都是怎么寫的。
這個(gè)就簡(jiǎn)單多了

import interactive.gallery.ImageGallery;
var gallery:ImageGallery = new ImageGallery("data/images.xml","thumb","full");
addChild(gallery);

我不說了，聰明的你一看就明白了。

案例分析到此結(jié)束。

源文件下載

分享：Flash8實(shí)例教程：繪制中國(guó)風(fēng)荷塘風(fēng)景(1)
我們先看看效果： 效果圖 總 結(jié) ：整體感覺要把握好中國(guó)風(fēng)格作品的表達(dá)還有些難度。不是難于如何繪畫，而是如何把握我們的傳統(tǒng)風(fēng)格，加以后現(xiàn)代思想表現(xiàn)出一種新定位。 繪畫技法的討論在鼠繪版都有。整體感覺這張作品問題太多，僅做為中國(guó)風(fēng)（格）的了解、探討、深入，