Yahoo画像検索でアプリ
こういうの私もflashでやりてえー！と思ったものの、ほぼ思うままのサンプル
があったので、丸パク…ではちょっとバツが悪いので自分なりにエフェクトをかけてみた。
写真が出る時トランジション使ってます。これが簡単な記述でワイプやフェードなんかの効果を派手にできちゃんだなー。
http://help.adobe.com/ja_JP/AS3LCR/Flash_10.0/fl/transitions/TransitionManager.html
またひとつ覚えたぜ！
さっそくwebアプリにして…と思ったんだが、サーバに上げるとうまくいかない。
違うドメインのXMLは参照出来ないと言う「クロスドメイン」の問題らしい。
crossdomain.xmlを使うだとか、Security.allowDomain("*");を記述するだとかどれもうまく行かず、断念。ローカル再生でも同じ。
ただ、AIRアプリにすると問題なく動く。せっかく作ったので物好きな方はDLして下さい。
画像検索AIRアプリをDL!
実はAIRも最近になってようやくわかってきた。FlashCS3の有難さが身にしみる。OSなんでも動くし。
しかしクロスドメインは本当にまいった。Flickrとか、APIかなりいいらしいんだが日本語通らないとねえ…
phpを使って解決してる人もいるみたいだけど、それもうまくいかなくて。今後の課題にしよう。
ソース。
//※がついている部分は自分の書き足した要素
import fl.transitions.*;
import fl.transitions.easing.*;
//↑でトランジションのライブラリ読み込み
//※エフェクト用のムービークリップを作る
var mc1 :MovieClip = new MovieClip();
addChild(mc1);
//Yahoo!画像検索のWebサービスのURLを登録
var request:URLRequest =
new URLRequest("http://api.search.yahoo.co.jp/ImageSearchService/V1/imageSearch")
//Webサービスに送るパラメータを管理するインスタンスを生成
var val:URLVariables = new URLVariables();
val.appid = "ひみつ"; //取得したアプリケーションIDを指定してください
//URLVariablesをURLRequestにセット
request.data = val;
//検索結果を表示するLoaderをあらかじめ10個用意しておく
var loaderList:Array=[];
for(var i:int=0;i<10;i++)loaderList.push(new Loader());
//loaderを表示する際の位置情報の配列
var posList:Array = [
new Point(30,70), new Point(100,120),
new Point(180,80), new Point(240,130),
new Point(310,70), new Point(30,190),
new Point(100,240), new Point(170,180),
new Point(250,240), new Point(320,180)
]
//Webサービスと通信するURLLoaderの準備
var loader:URLLoader = new URLLoader();
loader.addEventListener(Event.COMPLETE,checkData);
loader.addEventListener(IOErrorEvent.IO_ERROR,checkData);
loader.addEventListener(SecurityErrorEvent.SECURITY_ERROR,checkData);
//読み込みの判定処理
function checkData(event){
if(event.type=="complete"){
//成功時の処理
infoText.text = "xmlデータの受信に成功。画像を読み込みます"
loadPicture(new XML(event.target.data))
}else{
//失敗時の処理
infoText.text = "xmlデータの受信に失敗しました。";
}
}
//読み込み判定成功時に呼ばれる，xmlを解析して読み込む処理
function loadPicture(xml:XML){
/*結果セットのResultSet(ルートのエレメント)のtotalResultsAvailable属性の
値を使って，マッチする画像があったかどうかをチェック*/
if(int(xml.@totalResultsAvailable)<1){
infoText.text ="キーワードにマッチする画像がありませんでした";
return;
}
//返却された画像の数を取得
var count:int = int(xml.@totalResultsReturned);
infoText.text=
xml.@totalResultsAvailable + "件中，" + count +
"件のサムネイルを表示しています";
//サムネイル画像のURL，制限事項のリストを取得
var ns:Namespace = new Namespace("urn:yahoo:jp:srchmi");
var thumbQN:QName = new QName(ns,"Thumbnail");
var urlQN:QName = new QName(ns,"Url");
var resultQN:QName = new QName(ns,"Result");
//QNameを使って，2段階に分けて抽出
var urlList:XMLList = xml.descendants(thumbQN).descendants(urlQN);
var resultList:XMLList = xml.descendants(resultQN);
//取得したサムネイル画像のURLを指定して，画像の読み込みを開始
for (var i:int=0;i<urlList.length();i++){
var picLoader:Loader = loaderList[i];
var pos:Point = posList[i];
//if(picLoader.root)removeChild(picLoader);
picLoader.transform.matrix = new Matrix(1,0,0,1, pos.x,pos.y);
//Restrictionsをチェックし，表示OKの画像であれば表示
if(resultList[i].ns::Restrictions.length()<1){
picLoader.contentLoaderInfo.addEventListener(Event.COMPLETE,showPicture)
picLoader.load(new URLRequest(urlList[i]));
}else{
picLoader.unload();
}
}
}
//サムネイル画像読み込み完了時に，画像のサイズ等を調整する処理
function showPicture(event){
var currentLoader=event.target.loader;
var ds:DropShadowFilter=new DropShadowFilter();
//サムネイルの大きさを(w:62,h:50)に調整
var _scaleX:Number = 120/currentLoader.width;
var _scaleY:Number = 100/currentLoader.height;
//縦長の場合は，縦の倍率に合わせ，横長の場合はヨコの倍率に合わせる
var _scale:Number = (currentLoader.width>=currentLoader.height) ? _scaleX : _scaleY;
currentLoader.scaleX = currentLoader.scaleY = _scale;
//フィルタで飾り付けて，位置や角度をちょっと変更
ds.color=0x333300;
with(currentLoader){
filters=[ds];
x+=int(Math.random()*10-5);
y+=int(Math.random()*10-5);
rotation+=int(Math.random()*30-15);
}
//表示
//※バサッとばらまくようなエフェクトにしました
mc1.addChild(currentLoader);
TransitionManager.start(mc1,{type:Zoom, direction:Transition.IN, duration:4, easing:Elastic.easeOut});
}
//ボタンを押したら検索開始
sendButton.addEventListener(MouseEvent.CLICK,sendRequest);
function sendRequest(e:MouseEvent){
val.query = queryText.text;
loader.load(request);
}
//※クリアボタンを押したらクリア
clearButton.addEventListener(MouseEvent.CLICK,clearHandler);
function clearHandler(e:MouseEvent){
//※画像もエフェクト付きで消しちゃう
TransitionManager.start(mc1, {type:Fly, direction:Transition.OUT, duration:2, easing:Elastic.easeOut, startPoint:9});
queryText.text="";
}
