AS 3.0の実例はxmlの運用に詳しいです。
3051 ワード
実例4:xmlの運用説明を熟知しています。簡単なアルバムを先にxmlに載せて、xmlリストのイメージマップを読み込み、サムネイルをクリックして大図と大図の説明があります。このケースは前のいくつかより複雑になりましたが、AS 3の文法に慣れたら、分かりやすいです。プレゼンテーション:http://www.live-my-life-with-yuyi.com/as3_cases/ギャラリー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);
は前と同じように、いくつかのパケットを先に導入して、これはピクチャの漸進的効果を実現するためです。次に、いくつかの変数を定義します。ここではxmlListはよく知らないかもしれません。この変数の役割は主にxmlのchildリストを獲得します。以下の具体的な運用の時、その作用は一目瞭然です。URLLoaderを通してxmlをロードし、xmlを待ち受け、一旦ロードが完了すると、xml Loaded関数をトリガします。
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.ta)直接xmlの場合 = event.target.dataは、2つの変数のタイプが異なるため、エラーを報告します。ここではxmlListが見られます。xmlのチルドレンを取得していますので、xmlを使うにはとても便利です。そして、image Loaderを実例化し、xmlListで定義されているサムネイルをロードします。ここの書き方に注意してください。座標を調整し、imagLoaderにname属性を追加しました。この属性の値はxmlファイルの画像アドレスです。これは以下のshow Picture関数に有利です。サムネイルを舞台に置いて、マウスクリックのイベントをモニターします。
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);
これをクリックして、大図の関数が表示されます。前の写真の住所がname属性に追加されていますので、ここで直接持ってきて使えばいいです。大図を載せて座標を割り当てて、舞台に追加します。これからは写真を表示するべきです。ここのやり方は循環xml Listで、xmlの中でsourceがここのnameと同じかどうかを比較します。そうすれば、このxmlの値をimage Textに与えますが、明らかにもっと簡単なやり方があります。上のxml Loaded関数にimagLoaderのためにtext属性を追加して、showPictureの中で直接使ってもいいです。そして画像に漸進的な効果を与えるということは前にも話しました。最後の2行はイマゲンTextの配置を定義しています。ここは左揃えで、舞台に置いてください。これでケース全体が終了します。ファイルを包む