flickr on FLASH!?

LINEで送る
[`evernote` not found]

還在想說可以不行再FLASH中透過API存取FLICKR的照片?
這麼一來起不可以省很多空間ㄋ?
GOOGLE一下發現這個網站:Flappr就是一個蠻成功的例子
不過在玩的時候有點卡卡的(難到是我的NB的問題@@)

後來又在ActionScript 3:resources:apis:libraries – Adobe Labs中看到了FLICKR的API
不過連到下載頁面as3flickrlib中才發現她最後一次更新是在2007年5月的事了
真的在這一年中有好多東西都沒跟上的感覺 = =
有位Maso在他的BLOG還有它的測試作品
不過看起來跟Flappr不一樣
預覽圖中帶的是超連結
都會開出新的視窗連到FLICKR…跟我想的不一樣 = =
不過既然有預覽徒難道做不到在自己的FLASH中展開原圖嗎?
再繼續GOOGLE…
又看到這一篇:Make your own Flickr search engine with Flash and AS3
光看到標題就開心了^^
而且他是直接連到FLICKR的API做出來的
還好她的英文說明不是很難拉
照著做了一下也算是成功了拉:
搜尋

結果
簡單筆記一下:
總共兩個影格(第二格取名:search)
root第一個影格只有一個MC:search_mc
search_mc包涵一個輸入文字框:tags_txt
一個按鈕:search_btn
root第一個影格的AS:

stop();
 
//===================================
// get the tag to search
//===================================
 
var tag:String;
 
search_mc.search_btn.addEventListener(MouseEvent.CLICK, searchListener);
function searchListener(e:MouseEvent):void
{
	if(search_mc.tags_txt.text != "")
	{
		tag = search_mc.tags_txt.text;
		gotoAndStop("search");
	}
}

root第二個影格有一個MC:container_mc
一個BTN(我自己加的^^”):back_btn
container_mc包涵一個只有感應區的按鈕:go_btn
一個空MC:holder_mc
在”原件屬性”中”類型”取名為:Square
第一格的AS:

//first we import the necessary class to work
import flash.display.*;
import flash.net.URLRequest;
import flash.events.*;
import caurina.transitions.*;
 
function loadImage(img_src:String)
{
	var loader:Loader = new Loader();
	var img_url:String = img_src;
	var request_url:URLRequest = new URLRequest(img_url);
	loader.load(request_url);
	loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, progressListener);
	loader.contentLoaderInfo.addEventListener(Event.COMPLETE, completeListener);
 
	function progressListener(e:ProgressEvent)
	{
		var bl:int = e.bytesLoaded;
		var bt:int = e.bytesTotal;
		var percent:int = Math.ceil((bl*100)/bt);
	}
	function completeListener(e:Event)
	{
		holder_mc.addChild(loader.content);
		holder_mc.alpha = 0;
		Tweener.addTween(holder_mc, {alpha:1, time:1, transition:"linear"});
	}
}
 
//================================
// flickr photo page
//================================
var photo_id:String;
var photo_owner:String;
var photo_url:String = "http://www.flickr.com/photos/";
//================================
//add evento to the button
//================================
go_btn.addEventListener(MouseEvent.CLICK, goListener);
function goListener(e:MouseEvent):void
{
	var url:String = photo_url+"/"+photo_owner+"/"+photo_id;
	var req:URLRequest = new URLRequest(url);
	navigateToURL(req, "_blank");
}

root第二個影格的AS:

//=================
//import the neccesary classes
//=================
import flash.display.*;
import flash.events.*;
import flash.net.*;
//=================
//allow domains
//=================
Security.allowDomain("*", "api.flickr.com");
 
//=================
//ini variables
//=================
var xpos:Number = 0;
var ypos:Number = 0;
var dif:Number = 75;
var totalCols:int = 10;
var count:int = 1;
var i:int = 0;
var squares_arr:Array = [];
 
//=================
//flickr variable
//=================
var key:String = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"; //your flickr api key
var per_page:int = 50;
var page:int = 1;
var xml_url:String = "http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key="+key+"&tags="+tag+"&per_page="+per_page+"&page="+page;
 
//=================
//XML
//=================
var pics:XML = new XML();
var pics_url:URLRequest = new URLRequest(xml_url);
var picsLoader:URLLoader = new URLLoader(pics_url);
picsLoader.addEventListener(Event.COMPLETE, picsLoaded);
function picsLoaded(e:Event):void
{
	pics = XML(picsLoader.data);
 
	var stat:String = pics.@stat.toString();
	var totalPages:int = pics.photos.@pages;
	var totalPics:int = pics.photos.@total;
 
	/*
	trace("status: "+stat);
	trace("Total pages: "+totalPages);
	trace("Total pics: "+totalPics);
	trace("-=-=-=-=-=-=-=-=-=-=-=");
	*/
 
	var allPics:XMLList = pics.photos.*;
	for each (var photo:XML in allPics)
	{
		var pic_src:String = "http://farm"+photo.@farm+".static.flickr.com/"+photo.@server+"/"+photo.@id+"_"+photo.@secret+"_s.jpg";
		/*
		trace("title: "+photo.@title+" owner: "+photo.@owner);
		trace("Source: "+pic_src);
		trace("-=-=-=-=-=-=-=-=-=-=-=");
		*/
		//
		var newName:String = "square_"+i;
		var my_square:Square = new Square();
		my_square.name = newName;
		my_square.x = xpos;
		my_square.y = ypos;
		my_square.loadImage(pic_src);
		//
		my_square.photo_id = photo.@id;
		my_square.photo_owner = photo.@owner;
		//
		squares_arr.push(my_square);
		container_mc.addChild(my_square);
		//
		if (count < totalCols)
		{
			xpos += dif;
			count++;
		}
		else
		{
			xpos = 0;
			ypos += dif;
			count = 1;
		}
		i++;
	}
}
 
back_btn.addEventListener(MouseEvent.CLICK,back);
function back(e:MouseEvent){
	gotoAndPlay(1);
	}

結果一樣是只有帶超連結的預覽圖
不過算是踏出一步了
再研究看看吧~~

5 則迴響於《flickr on FLASH!?

  1. 後來找到的原因cross-domain的問題,已解決,謝謝你

    不會不會…
    昨天也試試看寫了一個來用
    也是有類似問題…
    都過都解決了就好..good job!

  2. 您好,我原本是把圖片全都上傳至flickr後
    再另寫一個flash網頁去讀取xml的圖片在flickr的url
    eg.
    xxx.xml

    去年都可以正常運作,但是這幾個月
    圖片會顯示不出來,我檢查過url沒有錯誤,但是好像無法透過flash去載入flickr上的圖片

    無意看到您這篇文章
    想請教您的這個方式
    是否可以取得flickr上的原圖?
    因為您最後一句說”結果一樣是只有帶超連結的預覽圖”

    謝謝您

    這個方式是先透過flickr的api(flickr.photos.search)讀入xml後
    拼成
    pic_src:String = “http://farm”+photo.@farm+”.static.flickr.com/”+photo.@server+”/”+photo.@id+”_”+photo.@secret+”_s.jpg”;
    然後再用moviceclip讀近來
    所以..如果拼出來的連結是一樣的
    可能要看一下你的moviceclip是怎麼load的囉

  3. 不好意思唷!我有看了原作者的作法跟你的作法,你的第二段程式碼有稍微改過,但我不太瞭解耶!可以提供原始檔借我研究嗎?我想你應該是想要改進原作者只能搜尋一次的問題吧!感謝^^

    • 嗯 有點久遠的事勒@@
      那個go_btn如果我沒記錯只是連到該圖片用的連結按鈕
      你留一下email我在找找看原始檔給你…(如果我沒在上次重灌時清掉的話….)

  4. 請問一下唷!!我看了一下你的寫法與原作的作者,不懂為甚麼你第二段程式碼,應該要放哪呢?且為甚麼你多放了一個go_btn,可以請你說明一下嗎?感謝^^

回應已關閉。