AS3.0實(shí)例學(xué)習(xí) 熟悉xml的運(yùn)用
更新時(shí)間:2007年12月12日 21:58:14 作者:
案例4:熟悉xml的運(yùn)用
說明:一個(gè)簡(jiǎn)單的相冊(cè),先載入xml,然后載入xml列表里的images縮略圖,點(diǎn)擊縮略圖出現(xiàn)大圖以及大圖的說明。這個(gè)案例較前面幾個(gè)復(fù)雜了一些,不過如果熟悉了AS3的語法,還是比較容易理解的。
演示:http://www.live-my-life-with-yuyi.com/as3_cases/gallery_tween/
代碼:
import fl.transitions.Tween;
import fl.transitions.easing.*;
var imageText:TextField = new TextField();
var fadeTween:Tween;
var imageLoader:Loader;
var xml:XML;
var xmlList:XMLList;
var xmlLoader:URLLoader = new URLLoader();
xmlLoader.load(new URLRequest("data/images.xml"));
xmlLoader.addEventListener(Event.COMPLETE, xmlLoaded);
跟之前的一樣,先導(dǎo)入幾個(gè)包,這是為了實(shí)現(xiàn)圖片的漸入漸出效果。然后是定義幾個(gè)變量,這里xmlList可能比較陌生,這個(gè)變量的作用主要是獲得xml的child列表,下面具體運(yùn)用的時(shí)候,它的作用就一目了然了。
通過URLLoader載入xml,然后監(jiān)聽xml,一旦載入完成,就觸發(fā)xmlLoaded函數(shù)。
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("thumb")));
imageLoader.x = 25;
imageLoader.y = i * 150 + 25;
imageLoader.name = xmlList[i].attribute("source");
addChild(imageLoader);
imageLoader.addEventListener(MouseEvent.CLICK, showPicture);
}
}
這里有一些地方需要注意,比如第一句
xml = XML(event.target.data);
如果直接
xml = event.target.data
會(huì)報(bào)錯(cuò),因?yàn)閮蓚€(gè)變量的類型不一樣。
這里可以看到xmlList,它是取得xml的children,對(duì)于使用xml非常方便。
然后實(shí)例化imageLoader,并載入xmlList里定義的縮略圖,注意這里的寫法。
調(diào)整一下坐標(biāo),并給imageLoader添加了一個(gè)name屬性,這個(gè)屬性的值就是xml文件里的圖片地址,這有利于下面的showPicture函數(shù)。
然后將縮略圖放到舞臺(tái)上,并監(jiān)聽它的鼠標(biāo)點(diǎn)擊事件。
function showPicture(event:MouseEvent):void
{
imageLoader = new Loader();
imageLoader.load(new URLRequest(event.target.name));
imageLoader.x = 200;
imageLoader.y = 25;
addChild(imageLoader);
imageText.x = imageLoader.x;
imageText.y = 351;
for(var j:int = 0; j < xmlList.length(); j++)
{
if(xmlList[j].attribute("source") == event.target.name)
{
imageText.text = xmlList[j];
}
}
fadeTween = new Tween(imageLoader,"alpha",None.easeNone,0,1,1,true);
}
imageText.autoSize = TextFieldAutoSize.LEFT;
addChild(imageText);
這個(gè)點(diǎn)擊后顯示大圖的函數(shù),由于前面已經(jīng)給name屬性添加了圖片地址,所以這里直接拿來用就可以了。
大圖載入后分配一下坐標(biāo),添加到舞臺(tái)上,接下來就該顯示圖片的說明了。
這里的做法是循環(huán)xmlList,然后比較xml里source是否與這里的name相等,是的話,將該xml的值賦予imageText,不過顯然有更簡(jiǎn)單的做法,就是在上面的xmlLoaded函數(shù)中為imageLoader添加一個(gè)text屬性,然后在showPicture里直接拿來用就可以了。
然后給圖片來一個(gè)漸入效果,這個(gè)之前已經(jīng)講過了。
最后兩行是定義imageText的對(duì)齊方式,這里是左對(duì)齊,然后放到舞臺(tái)上。
整個(gè)案例到此結(jié)束。
打包文件
說明:一個(gè)簡(jiǎn)單的相冊(cè),先載入xml,然后載入xml列表里的images縮略圖,點(diǎn)擊縮略圖出現(xiàn)大圖以及大圖的說明。這個(gè)案例較前面幾個(gè)復(fù)雜了一些,不過如果熟悉了AS3的語法,還是比較容易理解的。
演示:http://www.live-my-life-with-yuyi.com/as3_cases/gallery_tween/
代碼:
復(fù)制代碼 代碼如下:
import fl.transitions.Tween;
import fl.transitions.easing.*;
var imageText:TextField = new TextField();
var fadeTween:Tween;
var imageLoader:Loader;
var xml:XML;
var xmlList:XMLList;
var xmlLoader:URLLoader = new URLLoader();
xmlLoader.load(new URLRequest("data/images.xml"));
xmlLoader.addEventListener(Event.COMPLETE, xmlLoaded);
跟之前的一樣,先導(dǎo)入幾個(gè)包,這是為了實(shí)現(xiàn)圖片的漸入漸出效果。然后是定義幾個(gè)變量,這里xmlList可能比較陌生,這個(gè)變量的作用主要是獲得xml的child列表,下面具體運(yùn)用的時(shí)候,它的作用就一目了然了。
通過URLLoader載入xml,然后監(jiān)聽xml,一旦載入完成,就觸發(fā)xmlLoaded函數(shù)。
復(fù)制代碼 代碼如下:
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("thumb")));
imageLoader.x = 25;
imageLoader.y = i * 150 + 25;
imageLoader.name = xmlList[i].attribute("source");
addChild(imageLoader);
imageLoader.addEventListener(MouseEvent.CLICK, showPicture);
}
}
xml = XML(event.target.data);
如果直接
xml = event.target.data
會(huì)報(bào)錯(cuò),因?yàn)閮蓚€(gè)變量的類型不一樣。
這里可以看到xmlList,它是取得xml的children,對(duì)于使用xml非常方便。
然后實(shí)例化imageLoader,并載入xmlList里定義的縮略圖,注意這里的寫法。
調(diào)整一下坐標(biāo),并給imageLoader添加了一個(gè)name屬性,這個(gè)屬性的值就是xml文件里的圖片地址,這有利于下面的showPicture函數(shù)。
然后將縮略圖放到舞臺(tái)上,并監(jiān)聽它的鼠標(biāo)點(diǎn)擊事件。
復(fù)制代碼 代碼如下:
function showPicture(event:MouseEvent):void
{
imageLoader = new Loader();
imageLoader.load(new URLRequest(event.target.name));
imageLoader.x = 200;
imageLoader.y = 25;
addChild(imageLoader);
imageText.x = imageLoader.x;
imageText.y = 351;
for(var j:int = 0; j < xmlList.length(); j++)
{
if(xmlList[j].attribute("source") == event.target.name)
{
imageText.text = xmlList[j];
}
}
fadeTween = new Tween(imageLoader,"alpha",None.easeNone,0,1,1,true);
}
imageText.autoSize = TextFieldAutoSize.LEFT;
addChild(imageText);
這個(gè)點(diǎn)擊后顯示大圖的函數(shù),由于前面已經(jīng)給name屬性添加了圖片地址,所以這里直接拿來用就可以了。
大圖載入后分配一下坐標(biāo),添加到舞臺(tái)上,接下來就該顯示圖片的說明了。
這里的做法是循環(huán)xmlList,然后比較xml里source是否與這里的name相等,是的話,將該xml的值賦予imageText,不過顯然有更簡(jiǎn)單的做法,就是在上面的xmlLoaded函數(shù)中為imageLoader添加一個(gè)text屬性,然后在showPicture里直接拿來用就可以了。
然后給圖片來一個(gè)漸入效果,這個(gè)之前已經(jīng)講過了。
最后兩行是定義imageText的對(duì)齊方式,這里是左對(duì)齊,然后放到舞臺(tái)上。
整個(gè)案例到此結(jié)束。
打包文件
相關(guān)文章
高手寫的Tracer-Flash代碼調(diào)試類代碼下載
高手寫的Tracer-Flash代碼調(diào)試類代碼下載...2007-12-12項(xiàng)目需要,開始學(xué)習(xí)flash
項(xiàng)目需要,開始學(xué)習(xí)flash...2007-04-04