# flickr on FLASH!?

- URL: https://justfly.idv.tw/flickr-on-flash/
- 日期: 2008-09-27
- 分類: WEB&RIA
- 標籤: api, flash, flickr

還在想說可以不行再FLASH中透過API存取FLICKR的照片?

這麼一來起不可以省很多空間ㄋ?

GOOGLE一下發現這個網站:[Flappr](http://www.bcdef.org/flappr/)就是一個蠻成功的例子

不過在玩的時候有點卡卡的(難到是我的NB的問題@@)

後來又在[ActionScript 3:resources:apis:libraries – Adobe Labs](http://labs.adobe.com/wiki/index.php/ActionScript_3:resources:apis:libraries)中看到了FLICKR的API

不過連到下載頁面[as3flickrlib](http://code.google.com/p/as3flickrlib/downloads/list)中才發現她最後一次更新是在2007年5月的事了

真的在這一年中有好多東西都沒跟上的感覺 = =

有位Maso在他的[BLOG](http://masolin.blogspot.com/2007/08/flickr-api-library.html)還有它的測試作品

不過看起來跟[Flappr](http://www.bcdef.org/flappr/)不一樣

預覽圖中帶的是超連結

都會開出新的視窗連到FLICKR…跟我想的不一樣 = =

不過既然有預覽徒難道做不到在自己的FLASH中展開原圖嗎?

再繼續GOOGLE…

又看到這一篇:[Make your own Flickr search engine with Flash and AS3](http://www.thetechlabs.com/xml/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);
	}
```

結果一樣是只有帶超連結的預覽圖

不過算是踏出一步了

再研究看看吧~~