前回は読み込んだ複数の画像を左方向に永遠と移動するということをやってみましたが、
今回はFlashらしくマウスの位置によって画像の動きをコントロールできるようにしてみたいと思います。
完成イメージはこんな感じです。
[demo]
で、ソースコードです。
ちなみにXMLファイルと画像ファイルは前回のものを流用します。
package
{
import flash.display.Sprite;
import flash.display.Loader;
import flash.events.TimerEvent;
import flash.net.URLLoader;
import flash.net.URLRequest;
import flash.events.Event;
import flash.utils.Timer;
import XMLloader;
public class Main extends Sprite
{
//画像のサイズ
var _imgSize:uint = 40;
//スクロールスピード
var _dx:Number = 15;
//画像の間隔
var _interval:uint = 20;
//ステージサイズ
var _stageW:uint;
//ステージの中心
var _stageCenter:Number;
//外部読み込みの関係
var _loaderList:Array = new Array();
var _XMLLoader:XMLloader;
var _XML:XML;
//画像URL格納する配列
var _imgList = new Array();
public function Main() {
//XMLを読み込む
_XMLLoader = new XMLloader("load.xml");
_XMLLoader.addEventListener(XMLloader.LOAD_COMPLETE, onXMLloaded);
}
function onXMLloaded(event:Event):void {
//ステージサイズを入れる
_stageW = this.stage.stageWidth;
//ステージの中心までのサイズ
_stageCenter = _stageW / 2;
//ロードしたXMLを取得
_XML = _XMLLoader.getXML();
//XMLの画像URLを_imgListに入れる
for each (var item:XML in _XML.photo) {
_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);
}
//ループ用タイマー
var timer:Timer = new Timer(33);
timer.addEventListener(TimerEvent.TIMER, loop);
timer.start(); //タイマー開始
}
//ループ処理
public function loop(event:Event):void {
//xvec（移動する方向）マウスがステージの中心より左だったらマイナス、右だったらプラス
var xvec:Number = (_stageCenter - mouseX) / _dx;
//画像の数分繰り返し
for (var i:uint = 0; i < _loaderList.length; i++) {
//xvec方向に移動
_loaderList[i].x += xvec;
//左の画面外に出たら一番右に移動
if (_loaderList[i].x < -(_imgSize + _interval) && xvec < 0) {
_loaderList[i].x += (_imgSize + _interval) * _loaderList.length;
}
//右の画面外に出たら一番左に移動
if (_loaderList[i].x >= (_imgSize + _interval) * (_loaderList.length - 1) && xvec >= 0) {
_loaderList[i].x -= (_imgSize + _interval) * _loaderList.length;
}
}
}
}
}
【14～29行目】
画像サイズとか間隔とかをここで指定してます。
ちなみにスクロールスピードは小さいほど速くなります。
【38～41行目】
ステージサイズの取得と半分にしてステージの中心を取得しています。
コンストラクタでやるとIEではなぜか取得できないのでXMLの読み込み後に取得しています。
【70行目】
ここで移動方向とスピードを決めてます。
ステージの中心から現在のマウスの位置を引けば、プラスかマイナスが出ますね。
そのままでは速すぎるので適当な数字で割ってます。
【78～80行目】
画面左から外に出たら配列の一番後ろに移動させています。
0にすると画像が見えている状態で消えてしまうので-（画像サイズ+間隔）で完全にステージから出たら処理するようにします。
またこのままだと、右画面に出たときのの処理とバッティングしておかしな動作になってしまうので
「xvec」がマイナス（左方向）だった場合のみ動作するようにします。
【83～85行目】
今度は右方向です。
これは逆にするだけですね。
ただ左は0を基準にすればよかったのに対し、右端は画像の数によって変ってきます。
画像の数分だけ「画像サイズ+間隔」を掛ければ全体のサイズが出ますね。
category : ActionScript
tag : ActionScript XML
Comments(0)
｜Trackbacks(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)
FlashでTwitterの自分発言のRSSを取得して表示してみようと思います。
Flashオンリーでもできますが、クロスドメインの関係や、
将来的にBASIC認証が廃止になりOAouth認証になったときに
Flashだけでは厳しい面がありますので、今回はTwitterからRSSを取得するのにPHPを使用します。
-
まずは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
-
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(8)
｜Trackbacks(1)
TweensyはTweenerよりも高速で軽量なトィーンライブラリです。
特徴としてエフェクトが簡単に作れるTweensy FXという機能があります。
今回はよく使いそうな機能をピックアップしていきたいと思います。
-
まずはダウンロード
http://code.google.com/p/tweensy/
「Tweensy 0.2.2.zip」をダウンロードします。
解凍したら
「releases」→「source」→「cs4」→「original」
の中にある「com」フォルダをプロジェクトフォルダにコピーします。
ちなみにcs3用のファイルも用意されているのでcs3の場合はそちらを使用してください。
-
ライブラリをインポートします。
import com.flashdynamix.motion.Tweensy;
-
最初は現在の位置から指定位置まで移動するという簡単なものからやってみます。
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」メソッドを使用します。
-
このままではあれなので色々やってきましょう。
ちなみに「to」メソッドの設定はたぶんこんな感じになってます。
（インスタンス, 目標座標, 秒数,イージング設定,遅延時間）
なので、10秒後に5秒かけてx500,y200に移動したい場合、
Tweensy.to(rect, { x:500, y:200 }, 10, null, 1 );
と記述します。
-
指定インスタンスの動作を停止させる「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)
PHPで画像URLからサムネイルを生成して表示してみます。
標準のGDというライブラリでもできますが、ファイルの拡張子によって処理を変えたりとか意外とめんどうそうなので、今回は簡単に使用することができるPhpThumbというライブラリを使用ます。
htmlファイルから呼び出して使えるようにしておけば、あとあと便利なのではないかと思います。
-
下記のアドレスの「Download」からライブラリをダウンロードします。
http://phpthumb.gxdlabs.com/
解凍したらlibフォルダにいれます。
-
色々なことができるようですが、とりあえず画像のサイズだけ指定します。
画像のサイズは「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にしてみました。
-
次にhtmlから呼び出してみましょう。
<img src="creat_img.php?file=<?php echo urlencode('test.jpg'); ?>" />
「test.jpg」の部分は実際表示させたい画像を指定してください。
category : PHP
tag : PHP ライブラリ
Comments(0)
｜Trackbacks(0)
Next Page »
