最近はベイスターズ観戦日記と化しております

さぶれの日記
http://flex91.blog19.fc2.com/  presented by さぶれ@

プロフィール


さぶれ@

Author:さぶれ@
Webアプリなんぞ作っている会社に勤めるサラリーマン。自分の技術力のなさを嘆きつつ、日々勉強中。


最近の記事



カテゴリー



月別アーカイブ



スポンサーサイト

--/--/-- --:--|スポンサー広告
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

mx.effects.Moveを使って画像一覧を作ってみた。

2008/06/05 09:02|FlexTB:0CM:0
せっかくFlexを勉強しているので、effectsを使った何かをやってみようと思いました。
そこで、作ったのが以下のFlexアプリ。
スライドバーで列数を変えると、画像の表示位置がアニメーションしながら変化します。
作ったアプリはこんな感じになりました。
ImageSlideShow.html

ソースとしては、ImageBoxという自作クラスをCanvas上に並べて、ImageBoxで実装したmoveImageを呼び出す、という動作になります。
ImageBox
<?xml version="1.0" encoding="utf-8"?>
<mx:Module xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal" width="400" height="300">
<mx:Image id="myImage" width="100%" height="100%" source="http://fc2.com/ad/200805/mob.gif"/>
<mx:Move id="myMove" target="{this}" duration="500"/>
<mx:Script>
<![CDATA[
public function moveImage(xTo:int, yTo:int) : void {
myMove.stop();
myMove.xTo = xTo;
myMove.yTo = yTo;
myMove.play();
}

public function set sourceURL(value:String) : void {
myImage.source = value;
}
]]>
</mx:Script>
</mx:Module>

mainのmxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="*" creationComplete="init(event)">
<mx:VBox width="100%" height="100%">
<mx:HSlider id="columnSlider" height="24" minimum="1" maximum="10" snapInterval="1"
width="501" value="3" change="chnageNumOfCol(event)"/>
<mx:Canvas width="100%" height="100%" id="imageListCanvas">
</mx:Canvas>
</mx:VBox>

<mx:Script>
<![CDATA[
import mx.events.SliderEvent;
import mx.events.FlexEvent;

private var numOfImage:int = 20;
private function init(event:FlexEvent) : void {
var w:int = 100;
var h:int = 100;
for (var i:int = 0; i < numOfImage; i++) {
var box:ImageBox = new ImageBox();
imageListCanvas.addChild(box);
box.width = w;
box.height = h;
var location:Point = getLocation(i, box.width, box.height);
box.x = location.x;
box.y = location.y;
}
}

private function getLocation(num:int, w:int, h:int) : Point {
var numOfCol:int = columnSlider.value;
var x:int = (num % numOfCol) * w;
var y:int = int(num / numOfCol) * h;
return new Point(x, y);
}

private function chnageNumOfCol(event:SliderEvent) : void {
var images:Array = imageListCanvas.getChildren();
var num:int = 0;
for each(var box:ImageBox in images) {
var location:Point = getLocation(num, box.width, box.height);
num += 1;
//移動先の場所を指定して、Moveを実行する。
box.moveImage(location.x, location.y);
}
}
]]>
</mx:Script>

</mx:Application>

スポンサーサイト

コメントの投稿

管理者にだけ表示を許可する

トラックバック
トラックバックURLはこちら
http://flex91.blog19.fc2.com/tb.php/11-d118b3dc

Amazon



ブログ内検索



RSSフィード



 |  未分類 | Flex | ActionScript3 | BlazeDS | Silverlight | 読書 | Javascript | Java読書会 | 横浜ベイスターズ | 
Copyright(C) 2008All Rights Reserved. さぶれの日記
Powered by FC2ブログ.  template designed by 遥かなるわらしべ長者への軌跡.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。