ONE OP IXEL

2010-03-03(Wed) 13:08
【AS3.0】無限ループ移動する画像

読み込んだ複数の外部画像を右から左へと無限ループで移動させるFlashを作成してみます。
画像サイズを指定したり、正方形しか使えなかったり、とかなり使い勝手の悪い感じになってます。あとステージサイズより画像の横幅の合計サイズは大きくしてください。

外部XMLはこんな感じです。

<data>
    <photo>img/img01.gif</photo>
    <photo>img/img02.gif</photo>
    ・・・・
    <photo>img/img10.gif</photo>
</data>

package
{
	import flash.display.Sprite;
	import flash.display.Loader;
	import flash.net.URLLoader;
	import flash.net.URLRequest;
	import flash.events.Event;
	import XMLloader;

	public class Main extends Sprite
	{
		var _loaderList:Array = new Array();
		var _XMLLoader:XMLloader;
		var _XML:XML;
		//画像URL格納する配列
		var _imgList = new Array();	

		//画像のサイズ
		var _imgSize:uint = 40;
		//スクロールスピード
		var _dx:int = 3;
		//画像の間隔
		var _interval:uint = 20;

		public function Main() {
			_XMLLoader = new XMLloader("load.xml");
			_XMLLoader.addEventListener(XMLloader.LOAD_COMPLETE, onXMLloaded);
		}
		function onXMLloaded(event:Event):void{
			//ロードしたXMLを取得
			_XML = _XMLLoader.getXML();

			for each (var item:XML in _XML.photo) {
				//XMLの画像URLを_imgListに入れる
				_imgList.push(item.text());
			}

			for (var i = 0; i < _imgList.length; i++) {
				_loaderList[i] = new Loader();
				//読み込む画像の指定
				_loaderList[i].load(new URLRequest(_imgList[i]));
				this.addChild(_loaderList[i]);
				//_intervalだけ間隔を空けて配置
				_loaderList[i].x = i * (_imgSize + _interval);
				//画面縦の中心に配置（正方形じゃなかったら_imgSizeのところを変える）
				_loaderList[i].y = (this.stage.stageHeight / 2) - (_imgSize / 2);
				//個々の画像を識別るす番号（1番から）
				_loaderList[i].name = i + 1;
				//ループイベント
				_loaderList[i].addEventListener(Event.ENTER_FRAME, enterframeTimer);
			}
		}

		//ループ処理
		public function enterframeTimer(event:Event):void {
			event.target.x -= _dx;
			//左の画面外に出たら一番右に移動
			if (event.target.x < 0 - _imgSize) {
				//画像の最後の配列のｘから画像分プラス
				event.target.x = _loaderList[_loaderList.length - 1].x + (_imgSize + _interval) * event.target.name;
			}
		}
	}
}

画像のxが0以下（画面外）になったら配列の一番後ろの画像のi個の位置に移動して、再スタートさせるという感じになっています。
だいたい正方形じゃない画像がほとんでしょうから46行目の「_imgSize」は読み込む画像のHeightに変えてください。

category : ActionScript
tag : ActionScript XML 外部ファイル

Comments(0) ｜Trackbacks(0)

2010-02-09(Tue) 14:48
【AS3.0】Twitterの自分の発言を取得する。

FlashでTwitterの自分発言のRSSを取得して表示してみようと思います。
Flashオンリーでもできますが、クロスドメインの関係や、
将来的にBASIC認証が廃止になりOAouth認証になったときに
Flashだけでは厳しい面がありますので、今回はTwitterからRSSを取得するのにPHPを使用します。

1. まずはPHPの準備。
   といっても自分の発言を取得するのには認証は必要ないのでこれだけです。

   <?php
   $req = @file_get_contents('http://twitter.com/statuses/user_timeline/ユーザー名.xml');
   header("Content-Type: application/xml");
   echo $req;
   ?>
   

   アドレスのユーザー名の部分には自分のものを入れてください。
   適当な名前を付けて保存したらサーバーへアップするか、ローカルホストにいれます。
   今回は「load.php」としました。
   アドレスはこんな感じです。
   http://localhost/load.php

   他にフォローしている人の情報や発言なども取得できます。
   APIの日本語訳が公開されてますので、以下のアドレスを参考にしてください。

   http://watcher.moe-nifty.com/memo/docs/twitterAPI.txt

2. ActionScriptの部分です。
   RSSはXMLファイルですので、扱い方は同じです。
   自分の発言は「status -> text」で取得できます。

   package
   {
   	import flash.display.Sprite;
   	import flash.net.URLLoader;
   	import flash.net.URLRequest;
   	import flash.events.Event;
   	import flash.events.MouseEvent;
   	import flash.events.IOErrorEvent;
   	import flash.text.TextField;
   	import flash.text.TextFieldType;
   
   	public class Main extends Sprite
   	{
   		var xmlLoader:URLLoader;
   		var rss:XML;
   
   		public function Main()
   		{
   
   			//PHPファイルの指定
   			var xmlURL:String = "http://localhost/load.php";
   
   			xmlLoader = new URLLoader();
   			xmlLoader.load(new URLRequest(xmlURL));
   
   			//ロード完了時イベント
   			xmlLoader.addEventListener(Event.COMPLETE, loadComp);
   			//ロードエラー時イベント
   			xmlLoader.addEventListener(IOErrorEvent.IO_ERROR, ioError);
   
   		}
   		//RSS取得失敗時の処理
   		public function ioError(event:IOErrorEvent):void
   		{
   			var error_txt = new TextField();
   			error_txt.text = "RSSの取得に失敗しました。";
   			this.addChild(error_txt);
   		}
   
   		//RSSロード完了後の処理
   		public function loadComp(event:Event):void
   		{
   			//テキストを入れる配列
   			var textArray:Array = new Array();
   
   			//ロードしたXMLの配置
   			rss = new XML(xmlLoader.data);
   			//テキストの高さ合計
   			var allHeight:Number = 0;
   
   			for (var i:int = 0; i <= 4; i++) {
   				textArray[i] = new TextField();
   				textArray[i].text = rss.status[i].text;
   				//横幅設定
   				textArray[i].width = 200;
   				//折り返し設定ON
   				textArray[i].multiline = textArray[i].wordWrap = true;
   				//ステージに配置
   				this.addChild(textArray[i]);
   				//合計の高さに配置
   				textArray[i].y = allHeight;
   
   				//高さの合計に今の高さをプラス
   				allHeight += textArray[i].textHeight +15;
   			}
   		}
   	}
   }
   

   で、最新の5つまでの発言を取得し表示できるはずです。
   （テキストの配置でちょっとめんどうなことになってます……もっとスマートなやり方があると思うのでが）

category : ActionScript
tag : ActionScript PHP

Comments(0) ｜Trackbacks(0)

2010-02-06(Sat) 00:34
【AS3.0】トィーンライブラリTweensyを使ってみる

TweensyはTweenerよりも高速で軽量なトィーンライブラリです。
特徴としてエフェクトが簡単に作れるTweensy FXという機能があります。
今回はよく使いそうな機能をピックアップしていきたいと思います。

1. まずはダウンロード
   http://code.google.com/p/tweensy/
   「Tweensy 0.2.2.zip」をダウンロードします。
   解凍したら
   「releases」→「source」→「cs4」→「original」
   の中にある「com」フォルダをプロジェクトフォルダにコピーします。
   ちなみにcs3用のファイルも用意されているのでcs3の場合はそちらを使用してください。
2. ライブラリをインポートします。
   import com.flashdynamix.motion.Tweensy;
3. 最初は現在の位置から指定位置まで移動するという簡単なものからやってみます。

   package
   {
   	import flash.display.Sprite;
   	import com.flashdynamix.motion.Tweensy;
   	import flash.geom.Rectangle;
   
   	public class Main extends Sprite
   	{
   		function Main() {
   			//四角を作成
   			var rect:Sprite = new Sprite();
   			rect.graphics.beginFill(0x3299FF);
   			rect.graphics.drawRect(0, 0, 50, 50);
   			this.addChild(rect);
   
   			//現在の位置からx=500へ移動
   			Tweensy.to(rect, { x:500 } );
   		}
   	}
   }
   

   実際tweensyの設定は一行ですね。
   tweenerも一行だったので当然かもしれませんが……。
   今回のように指定位置に移動するには「to」メソッドを使用します。
   逆に指定位置からスタートしたい場合は「from」メソッドを、
   スタートもゴールも指定する場合は「fromTo」メソッドを使用します。

4. このままではあれなので色々やってきましょう。
   ちなみに「to」メソッドの設定はたぶんこんな感じになってます。
   （インスタンス, 目標座標, 秒数,イージング設定,遅延時間）
   なので、10秒後に5秒かけてx500,y200に移動したい場合、

   Tweensy.to(rect, { x:500, y:200 }, 10, null, 1 );
   

   と記述します。

5. 指定インスタンスの動作を停止させる「stop」メソッドと
   すべてのインスタンスを停止させる「stopAll」というメソッドもあります。

   インスタンスをクリックすると停止するというのを作成してみます。

   package
   {
   	import flash.display.Sprite;
   	import com.flashdynamix.motion.Tweensy;
   	import flash.events.MouseEvent;
   	import flash.geom.Rectangle;
   
   	public class Main extends Sprite
   	{
   		var rect:Sprite;
   
   		function Main() {
   
   			//四角を作成
   			rect = new Sprite();
   			rect.graphics.beginFill(0x3299FF);
   			rect.graphics.drawRect(0, 0, 50, 50);
   			this.addChild(rect);
   
   			//1秒後に10秒かけてx100,y50からx500,y200に移動
   			Tweensy.fromTo(rect, { x:100, y:50 }, { x:500, y:200 }, 10, null, 1 );   
   
   			//マウスイベント
   			rect.addEventListener(MouseEvent.MOUSE_DOWN, MCStop);
   		}
   		//四角をクリックしたとき
   		function MCStop(e:MouseEvent):void{
   			Tweensy.stop(rect);
   		}
   	}
   }
   




category : ActionScript
tag : ActionScript Tweensy ライブラリ

Comments(0) ｜Trackbacks(0)

2010-02-01(Mon) 15:41
【PHP】PhpThumでサムネイルを生成して表示

PHPで画像URLからサムネイルを生成して表示してみます。
標準のGDというライブラリでもできますが、ファイルの拡張子によって処理を変えたりとか意外とめんどうそうなので、今回は簡単に使用することができるPhpThumbというライブラリを使用ます。
htmlファイルから呼び出して使えるようにしておけば、あとあと便利なのではないかと思います。

1. 下記のアドレスの「Download」からライブラリをダウンロードします。
   http://phpthumb.gxdlabs.com/
   解凍したらlibフォルダにいれます。
2. 色々なことができるようですが、とりあえず画像のサイズだけ指定します。
   画像のサイズは「resize」という部分です。

   <?php
   require_once 'lib/ThumbLib.inc.php';  
   
   $fileName = (isset($_GET['file'])) ? urldecode($_GET['file']) : null;
   $thumb = PhpThumbFactory::create($fileName);  
   $thumb->resize(150, 150);  
   $thumb->show();
   ?>
   

   適当な名前で保存します。
   とりあえずcreate_img.phpにしてみました。

3. 次にhtmlから呼び出してみましょう。

   <img src="creat_img.php?file=<?php echo urlencode('test.jpg'); ?>" />
   

   「test.jpg」の部分は実際表示させたい画像を指定してください。

category : PHP
tag : PHP ライブラリ

Comments(0) ｜Trackbacks(0)

2010-01-13(Wed) 16:56
【AS3.0】外部XMLで作るシンプルなイメージギャラリー

外部XML＆イメージを使用した（若干）柔軟性のある簡単なイメージギャラリーを作成したいと思います。
完成イメージ図はこんな感じです。

左側の小さな水色の画像をクリックすると右側の大きな画像が切り替わるといういたってシンプルなつくりです。

1. まずは表示させるべき画像を作成します。
   名称は「m1.gif」～「m9.gif」（サムネイル）と、「b1.gif」～「b9.gif」（大きい画像）にしました。
   flaファイルと同階層に「img」という名前のフォルダを作成し、そこに表示させる画像を入れます。
2. XMLファイルも画像と同階層に作成します。
   こんな感じです。

   <?xml version="1.0" encoding="utf-8"?>  
   <data>  
       <img thum="img/m1.gif" src="img/b1.gif">画像1</img>  
       <img thum="img/m2.gif" src="img/b2.gif">画像2</img>  
       <img thum="img/m3.gif" src="img/b3.gif">画像3</img>  
       <img thum="img/m4.gif" src="img/b4.gif">画像4</img>  
       <img thum="img/m5.gif" src="img/b5.gif">画像5</img>  
       <img thum="img/m6.gif" src="img/b6.gif">画像6</img>  
       <img thum="img/m7.gif" src="img/b7.gif">画像7</img>
       <img thum="img/m8.gif" src="img/b8.gif">画像8</img>
       <img thum="img/m9.gif" src="img/b9.gif">画像9</img>
   </data>
   

   文字は表示されないのですが、あとあとのことを考えてとりあえず入れてあります。
   「load.xml」で保存します。

3. package
   {
   	import flash.display.Loader;
   	import flash.display.LoaderInfo;
   	import flash.display.Sprite;
   	import flash.events.MouseEvent;
   	import flash.net.URLLoader;
   	import flash.net.URLRequest;
   	import flash.events.Event;   
   
   	public class Main extends Sprite
       {
   		//サムネイルの並べる数
   		var _thumNum:uint;
   		//サムネイルの間隔
   		var _thumInterval:uint;
   
           //XMLから読み込んだデータを入れる配列
           var _imgList:Array = new Array();
   		var _thumList:Array = new Array();
   
           var _urlLoader:URLLoader;
   
   		//サムネイルが入る配列
   		var _thum:Array = new Array();
   		//全部のサムネイルを入れるコンテナ
   		var _thumContainer:Sprite = new Sprite();
   		//大きい画像を入れるコンテナ
   		var _imgContainer:Sprite = new Sprite();
   		//現在選択されている画像番号
   		var _currentNum:int = -1;
   
           public function Main() {
   			//初期設定
   			_thumNum = 3;
   			_thumInterval = 10;
   			_imgContainer.x = 200;
   
   			//外部XMLファイルの指定
               _urlLoader = new URLLoader(new URLRequest("img/load.xml"));
               // 読み込み完了時に呼び出されるイベント
               _urlLoader.addEventListener (Event.COMPLETE, XMLloadComp);
   			this.addChild(_thumContainer);
   			this.addChild(_imgContainer);
           }
   
           //XMLロード完了の処理
           function XMLloadComp (event:Event):void {
               var xml : XML = new XML(_urlLoader.data);
               //XMLのデータを配列に入れる
               for each (var xmlObj:Object in xml.img) {
                   _imgList.push (xmlObj.@src);
   				_thumList.push (xmlObj.@thum);
               }
               //配列の長さだけイメージをロード
               for (var i:uint = 0; i < _imgList.length; i++ ) {
   				_thum.push(new Sprite());
   				var thumLoader:Loader = new Loader();
   				thumLoader.load (new URLRequest(_thumList[i]));
   				_thum[i].addChild(thumLoader);
   				//nameに番号を入れる
   				_thum[i].name = String(i);
   				thumLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, thumImgloadComp);
               }
           }
   		//サムネイルロード完了
   		function thumImgloadComp(event:Event):void {
   			//該当するサムネイルの番号を取得
   			var imgNum:int = int(event.target.loader.parent.name);
   			//_thumInterval（間隔）だけ開けてサムネイルを配置
   			event.target.loader.x = (event.target.width + _thumInterval) * (imgNum % _thumNum);
   			event.target.loader.y = (event.target.height + _thumInterval ) * (int(imgNum / _thumNum));
   			_thumContainer.addChild(event.target.loader);
   
   			event.target.loader.name = imgNum;
   			event.target.loader.addEventListener(MouseEvent.CLICK, onThumImg);
   
   		}
   		//サムネイルクリック
   		function onThumImg(event:Event):void {
   			//クリックされた番号をnumに入れる
   			var num:uint = event.target.name;
   			//現在の画像以外の場合画像をロード
   			if (num != _currentNum) {
   				var imgLoader:Loader = new Loader();
   				imgLoader.load (new URLRequest(_imgList[num]));
   				imgLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, imgloadComp);
   				_currentNum = num;
   			}
   		}
   
   		//イメージロード完了
   		function imgloadComp(event:Event):void {
   			//古い画像の削除（imgContainerの子要素を全て削除）
   			while(_imgContainer.numChildren > 0){
   				_imgContainer.removeChildAt(0);
   			}
   			//新しい画像の配置
   			_imgContainer.addChild(event.target.loader);
   		}
       }
   }
   

   【13～30行目】
   プロパティ宣言です。
   「_imgList」「_thumList」XMLから読み込んだ文字列を入れる配列。
   「_thum」はサムネイルのローダーを入れる配列。
   「_imgContainer」大きい画像は一つなのでspriteです。
   「_currentNum」はサムネイルを押したときに現在の画像の番号を入れておく変数です。
   最初は何も選択されていないので-1にしてあります。
   【62行目】
   どのサムネイルがクリックされたか判別するためにnameプロパティに配列と同じ番号を入れておきます。
   【69行目】
   62行目で入れた番号をint型で取り出します。
   【56～63行目】
   サムネイルのロードです。
   一緒にサムネイルも並べてしまった方が簡単なのですが、画像の大きさなども動的取得したかったので、LoaderInfoイベント後に並べてます。
   【71～72行目】
   ここでサムネイルを並べてます。
   サムネイルの並び順などを変更したい場合はこの辺を変えてみてください。
   【84～89行目】
   クリックされた番号が現在の番号（_currentNum）以外だったらイメージをロードします。
   最後に「_currentNum」に現在の番号を入れます。
   【93～100行目】
   新しい画像を入れる前にいったん古い画像を削除します。
   また、画像をフェードして表示するなどのアニメーションをしたい場合この辺りに処理を書けばいいのではないかと思います。

category : ActionScript
tag : ActionScript XML 外部ファイル

Comments(0) ｜Trackbacks(0)