前回までで、基本的なデータのロードと表示のループの仕組みができたので、今回は演出的な要素をつけて、このシリーズは終わり。
追加する要素は以下。
・表示するサムネイルをフェードイン・フェードアウトさせる。
・サムネイルの撮影日付を表示する。
・サムネイルの枚数をグラフ表示する。
・座標情報がある場合はそれを地図上に表示する。
やることは。
enterframeイベントを使ってcolortransformの値を変更してフェードイン・アウトさせる。
colortransformの変更は以下のような感じでできる。
package com.kishineshiki.motion{
import flash.display.*;
import flash.events.Event;
import flash.geom.*;
public class FadeInOut{
private var mybase:Sprite;
private var mytarget:Bitmap;
private var mybitmapdata:BitmapData;
private var mytransform:ColorTransform;
private var addnum:Number;
public function FadeInOut(base:Sprite,mt:Bitmap){
mybase=base;
mytarget=mt;
mybase.addChild(mytarget);
mytransform=new ColorTransform();
mytransform.alphaOffset=-255;
mytarget.transform.colorTransform=mytransform;
addnum=2;
mybase.addEventListener(Event.ENTER_FRAME,onEnterFrame);
}
private function onEnterFrame(event:Event):void{
mytransform.alphaOffset+=addnum;
mytarget.transform.colorTransform=mytransform;
if(mytransform.alphaOffset>=0){
addnum=-addnum;
}else if(mytransform.alphaOffset<=-255){
event.target.removeEventListener(Event.ENTER_FRAME,onEnterFrame);
mybase.removeChild(mytarget);
mytarget=null;
}
}
}
}
RESTのURLにextrasオプションを追加して、値を"date_taken,geo"と設定すると、写真を撮った日付情報と、座標情報がある場合はその経度・緯度情報がXMLデータに追加されて帰ってくるので、それを抽出して表示する。
座標情報は、longitudeとlatitudeという属性名で帰ってくる。
longitudeが経度で、グリニッジ天文台のところが0度で、そこから東へ180度、西へ-180度で位置を示す。
latitudeが緯度で、赤道のところが0度で、そこから北へ90度、南へ-90度で位置を示す。
地図サービスならそのまま渡せばいいだろうし、今回みたいに自分の地図上で場所を示す場合は、自分の地図のピクセル数を360で割って度対ピクセルの比率をだせば、大体位置を表示することができる。
ポイント用の四角はSpriteのgraphicsプロパティのメソッドで描画することができる。
var sq:Sprite=new Sprite(); sq.graphics.lineStyle(1,0xCCCCCC,1,false,LineScaleMode.NORMAL,CapsStyle.SQUARE,JointStyle.MITER,3); sq.graphics.drawRect(0,0,4,4);
flash.display.*パッケージのインポートが必要。
lineStyleはデフォルトでよい場合は、lineStyle()だけでよい。
サンプルは以下。
（Flash CS3 の英語版の体験版で作成。AS3.0 player9）
上のサンプルをアップロードしたところ以下のようなアラーとが出て処理が停止した。
SecurityError: Error #2122: セキュリティサンドボックス侵害 : Loader.content:http://www.bongo.ne.jp/~gankon/blog/swf/flickrdatesearchmap.swf は http://farm1.static.flickr.com/249/451552472_ccf96ecafe_s.jpg にアクセスできません。ポリシーファイルが必要ですが、このメディアがロードされたとき、checkPolicyFile フラグが設定されませんでした。 at flash.display::Loader/get content() at Main/::onDisplayLoop() at flash.utils::Timer/flash.utils:Timer::_timerDispatch() at flash.utils::Timer/flash.utils:Timer::tick()
セキュリティサンドボックス侵害について調べたところ、AS3.0では、loaderでロードするのと、それをBitmapデータに変換するのとではセキュリティのレベルが異なるということらしい。
loaderでロードするのはかまわないjpegファイルでも、ビットマップに変換しようとすると、ポリシーファイルの許可が必要になる。
そこで、1部コードを修正しなければならくなった。
ローダの画像はビットマップデータにコピーするのではなく、アニメーション用の新しいローダを準備しそれに再度ロードする形式にした。
幸い、ローダでも同じようにcolortransformの修正アニメーションを実施できたので、すぐに書き直すことができた。
修正コードについては後日記述。
（上のサンプルはとりあえずエラーの出ないものに差し替え済みです。）