フラッシュによる画像ギャラリーの作り方メモ（例）。
フラッシュのフォトライブラリ２
Flex 3 SDK
1. 次のソ－スをコピペして、例えば「gallery.mxml」という名前でローカルディスク（C:\）直下に保存。
MXML（1）のソース
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white"
backgroundGradientColors="white, white">
<mx:Style>
global {
modal-transparency: 0.7;
modal-transparency-color: black;
modal-transparency-blur: 9;
}
</mx:Style>
<mx:Script>
<![CDATA[
import mx.effects.Resize;
import mx.events.ResizeEvent;
import mx.events.ListEvent;
import mx.controls.Image;
import mx.events.ItemClickEvent;
import mx.managers.PopUpManager;
private var img:Image;
private function tileList_itemClick(evt:ListEvent):void {
img = new Image();
img.maintainAspectRatio = true;
img.addEventListener(Event.COMPLETE, image_complete);
img.addEventListener(ResizeEvent.RESIZE, image_resize);
img.addEventListener(MouseEvent.CLICK, image_click);
img.source = evt.itemRenderer.data.@fullImage;
img.toolTip = "Click to close";
img.setStyle("addedEffect", image_addedEffect);
img.setStyle("removedEffect", image_removedEffect);
PopUpManager.addPopUp(img, this, true);
}
private function image_click(evt:MouseEvent):void {
PopUpManager.removePopUp(evt.currentTarget as Image);
}
private function image_resize(evt:ResizeEvent):void {
PopUpManager.centerPopUp(evt.currentTarget as Image);
}
private function image_complete(evt:Event):void {
PopUpManager.centerPopUp(evt.currentTarget as Image);
}
]]>
</mx:Script>
<mx:WipeDown id="image_addedEffect" startDelay="100" />
<mx:Parallel id="image_removedEffect">
<mx:Zoom />
<mx:Fade />
</mx:Parallel>
<mx:XML id="xml" source="gallery.xml" />
<mx:XMLListCollection id="xmlListColl" source="{xml.image}" />
<mx:TileList id="tileList"
dataProvider="{xmlListColl}"
itemRenderer="renderer"
columnCount="3"
columnWidth="100"
rowCount="2"
rowHeight="100"
themeColor="haloSilver"
verticalScrollPolicy="on"
itemClick="tileList_itemClick(event);" />
</mx:Application>
2. 次のソ－スもコピペして、「renderer.mxml」という名前でローカルディスク（C:\）直下に保存。
MXML（2）のソース
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
horizontalAlign="center"
verticalAlign="middle">
<mx:Image source="{data.@thumbnailImage}" />
<mx:Label text="{data.@title}" />
</mx:VBox>
3. ソース中のXML（gallery.xml）は、別途以下の例のように用意しローカルディスク（C:\）直下に保存。
<?xml version="1.0" encoding="utf-8"?>
<gallery>
<image title="SR400 メーター類"
thumbnailImage="http://hogehoge.com/path/images/th1.jpg"
fullImage="http://hogehoge.com/path/images/1.jpg" />
<image title="SR400 シリンダー"
thumbnailImage="http://hogehoge.com/path/images/th2.jpg"
fullImage="http://hogehoge.com/path/images/2.jpg" />
</gallery>
4. 無償の「FREE ADOBE FLEX 3 SDK」をダウンロード（「Download the Flex 3.0 SDK for all Platforms (ZIP, 38 MB)」のところ）。
例えばローカルディスク（C:\）直下に「flex」というフォルダを作り、この中に解凍。
5. コマンドプロンプトで、上記の構成例の場合なら
C:\flex\bin\mxmlc C:\gallery.mxml
とすると、数秒後フラッシュ（SWF）ファイルが次のように出来上がる。
C:\gallery.swf (245428bytes)
原文はコチラ。ActionScript とか理屈とかサッパリ難しくて理解できないけれど、文系の勘とキアイで何とかなるらしい。段数、列数、サイズ等は適宜変更しましょう。
※追記 上記の方法は、いったんフラッシュをコンパイルすると画像を追加できない（追加する場合は、また作り直し）。
XML の修正（画像追加）のみで更新できる Dynamic なタイプは、こちらからダウンロード（FGallery.zip 426k）
コメント
※Sign in または Sign up しなくてもコメントできます