カテゴリー : Flash

フレームラベル名入力でジャンプする jsfl

タイムラインアニメーションやってると、フレームの行き来がめんどくさいですよね。
フレームラベル名入力でジャンプできる jsfl とかないかなーとググッたんですが、見つからなかったので作りました。

【使い方】
1. 下記のコードをテキストエディタにコピペして、 “jumpToFrameLabel.jsfl” という名前で保存。


// タイムラインを取得
var timeline = fl.getDocumentDOM().getTimeline();
// 選択中のレイヤーを取得
var selectedLayer = timeline.getSelectedLayers();
// ジャンプ先のフレームラベル名を入力
var targetLabel = prompt("input jump to frame label", "");
// 入力されたフレームラベルが存在するかどうかの判定用
var found = false;
// 走査するフレーム数
var l = timeline.layers[selectedLayer].frames.length;
// 目的地のフレーム番号
var n = 0;

// フレームラベルを 1 フレームずつ走査
for(var i = 0; i < l; i++) {
	if(targetLabel == timeline.layers[selectedLayer].frames[i].name) {
		n = i;
		found = true;
		break;
	}
}

if(found) {
	// 目的地へジャンプ
	timeline.setSelectedFrames([0, n, n + 1]);
}else {
	// エラー処理
	fl.trace("not found");
}


2. /Users/ユーザー名/Library/Application Support/Adobe/Flash CS4/language/Configuration/Commands に入れる。
( win は Document and Setting\Application Data とかそんな感じのとこに同じような階層があります )

3. 以下実行手順
・フレームラベルのレイヤー選択
ss1

・コマンド実行
ss2

・フレームラベル名入力
ss3

・ジャンプ!
ss4


以上!
注意点は 1 フレームずつ走査するので、数 1000 フレーム超えたりしてると処理が重くなります。最悪 Flash が落ちるかも?
改善案あったら教えてくださいー。

MovieClip のインスタンス名を一括設定する jsfl

こういう jsfl があるのを教えてもらいました。
Instance_setMcName.jsfl

これの機能はレイヤーに配置してある MovieClip のインスタンス名をライブラリのシンボル名に一括変更してくれるという優れものです。キーフレームがあろうがなかろうが関係ないので便利だなーと思ったのも束の間、ライブラリをフォルダ分けしてある場合はインスタンス名に “フォルダ名 / シンボル名” というように階層まで書かれてしまいます。

これではあまり使えないなと思い、少し改造してみることにしました。シンボル名に置き換えるのではなく、自分で入力した文字列に置き換えるようにすればいいんじゃねと思って調べる内に下記のメソッドを発見しました。

prompt("", "")

これを実行すると、ポップアップでテキスト入力フィールドが出てきます。第 1 引数はポップアップウィンドウに表示する説明文、第 2 引数はテキスト入力フィールドの初期値です。例えば以下を実行すると画像のようになります。

prompt("input instance name", "hogehoge")

ss1
ではこれを Instance_setMcName.jsfl に組み込みます。

//=====================================================	
// Instance : setMcName1.0
// hisayuki takagi | www.wildcard.jp.org
//=====================================================	
var cur_doc = fl.getDocumentDOM();
var str = prompt("input instance name", "");
for(var i1=0; i1<cur_doc.selection.length; i1++){
	if(cur_doc.selection[i1].elementType == "instance"){
		cur_doc.selection[i1].name = str;
		//cur_doc.selection[i1].name = cur_doc.selection[i1].libraryItem.name
	}
}

【使い方】
/Users/ユーザー名/Library/Application\ Support/Adobe/Flash\ CS4/ja/Configuration/Commands/ に入れます。
そして画像のように設定したあと、レイヤー名のところをクリックし、コマンド -> Instance_setMcName を実行すると、レイヤーに配置されたインスタンス名を一括変更できます。
ss2

以上!

trace をターミナルで見るときの文字化け解消

ずっと悩まされ続けていた問題をとうとう解決できました!

ターミナル > 環境設定 > 設定 > 詳細タブ > 言語環境設定 > 日本語 (Mac OS)

ss

trace 文の出力の仕方はコチラ
※デバッグ版の Flash Player 必須

trace をターミナルで出力

ターミナルを起動し、以下を入力すると flashlog.txt の中身がズラズラっと出力されます。

tail -f ~/Library/Preferences/Macromedia/Flash\ Player/Logs/flashlog.txt

ただ毎回毎回これを入力するのは非常にめんどうなので、シェル使って短縮化しました。(今回は .bash_profile を直接編集します)
1. ターミナルに以下を入力(emacs でも vim でも vi でもお好きなのでどうぞ)
emacs .bash_profile

2. エイリアスを追加
alias trace='tail -f ~/Library/Preferences/Macromedia/Flash\ Player/Logs/flashlog.txt'

3. control + x + c で「保存しますか?」みたいなの出るので y で決定

4. ターミナルを再起動し、trace と入力する

以上!

TweetCard

marker_for_iPhone

FLARToolKit を使ったコンテンツを作ってみました。
まだまだ完成ではないですが、とりあえず見れるようにはなったので暫定的にリリースします。
今後ちょっとずつ色を付けていこうかなと思います。
ちなみに作品名は「名刺にマーカー印刷して Twitter の発言表示させたら面白いかも」というところから名付けました。

では簡単に機能説明を。
Twitter の最新発言20件を拾ってきて、それをランダムに表示します。
アイコンの貼付けられた Cube がぐるぐる回ります。
以上です(笑)
そのうちテキストにアニメーションつけます・・・。

ソースファイルは下記リンク先に公開しています。(Flex Builder)
http://boondockradio.net/TweetCard/


■ ソース説明
Twitter の発言は、getTweet.php で取得しています。(PHP5)
(新たに xml 出力するほうがスマートかなとふと思ったので、あとで書き直します。)

<?php
// xml ロード
$article = simplexml_load_file('http://twitter.com/statuses/user_timeline/ユーザー ID 番号.xml');
/*
 * status の数だけ text を出力。
 * その際、あとで Flash 側で split() する為に末尾に '%split%' と足してやる。
 */
foreach($article->status as $status) {
	$tweet = $status->text;
	echo convert($tweet).'%split%';
}

function convert($str) {
	return mb_convert_encoding($str, "UTF-8", "UTF-8");
}
?>

■ TweetCard.as 60行目
org.nbhd.loadUtil.PHPLoader.as で getTweet.php のデータを取得する。
_php = new PHPLoader();
_php.reqURL = "http://boondockradio.net/TweetCard/Data/getTweet.php";
_php.init();
_php.addEventListener(PHPLoader.LOAD_COMPLETE, _onCmp);

private function _onCmp(e:Event):void {
	// データを発言ごとに配列に入れる
	var tweet:String = _php.data;
	_tweet_arr = tweet.split("%split%");
	
	//配列の最後に空っぽのんが入るので消してやる
	for(var i:int = 0; i < _tweet_arr.length; i++) {
		if(_tweet_arr[i] == "") _tweet_arr.splice(i, 1);
	}
	
	- 略 -
}

ひじょーーーにざっくりですがこんな感じです。
ライセンスは自動的に GPL になるんでしたっけ?
色々作りが甘い部分があるので、マイペースに煮詰めていきます・・・。
では!


参考リンク
FLARToolKit
ARToolKit Marker Generator Online


追記
---------------------
iPhone な方は、このエントリに iPhone でアクセスするとマーカー画像を保存する必要も印刷する必要なくコンテンツを見ることができます。
こちらにアクセスして、iPhone の画面を webcam にかざしてみてください!

JSFL について

さて、表題の JSFL なんですが、よく使う機能の JSFL 作ってショートカットに登録すればめちゃくちゃ便利ですね。

今回は円をステージのセンターに配置する簡単な JSFL の作り方を紹介します。

1. ヒストリパネルを開く (ウィンドウ→他のパネル→ヒストリ)
2. 楕円ツールで適当に円を描く
3. ステージの中心に整列させる
4. ヒストリパネルの 2,3 に該当するコマンドを選択して保存する

これで JSFL が出来ました。
新規ファイルを開いて、コマンドメニューから保存したヒストリを選択するとステージの中心に円が描かれます。

ちなみに JSFL の中身を見たいときは下記のディレクトリを参照します。
※隠しファイルになってます

■win (CS3の場合)
\Documents and Settings\user\Local Settings\Application Data\Adobe\Flash CS3\ja\Configuration\Commands

■mac (CS3の場合)
/Users/ユーザ名/Library/Application Support/Adobe/Flash CS3/ja/Configuration/Commands/

レイヤーの削除やトゥイーンの作成、アルファの設定など、色々作っとくと作業効率あがります!
以上!

shadowbox入れた

このblogにshadowbox入れてみた。
jpg,png,flv,swf,youtube,googleMap等、マルチメディアに対応してるからいいね。
しかもWordpressのpluginとして用意されているという。
headerに追加記述しなくてよく、aタグの中にrel=”shadowbox”と記述するだけ。
Wordpress使っててよかった!

[sample]
swf

puzzle cube

puzzle_cube_img

パズルゲーム作ったよ。
作ったはいいけど、まだ一度もクリアできてないという。
誰かクリアして動作確認しておくれ(笑)

あとswfObject2.0使って100%表示しようとしたら、firefoxでのみflashが表示されない現象が。
調べてみたら相性がものすっごい悪いみたい。
解決策ないのかな。

Flash CS4

Flash CS4の新機能 日本語でまとめました

アニメーション周りが強化されるみたい。
After Effectsと統合される日もそう遠くないのでは。
個人的にはエディタも強化して欲しい・・・。

TERACO

20日に「大阪てら子 17」行ってきました。
Flashの勉強会で、今回のテーマは「時計」。

せっかくなので僕もなんか作って発表しようと思いました。
でもただの時計作っていくのは面白くない。
というわけで数字を廃止。
既存の時計の形を打ち崩そうと思い、出来上がったのがコチラ

上から時間、分、秒となっています。
左から0,1,2,3,・・・と数えます。
この時計の特徴はパッと見では時間が分からないところ。
むしろ知らなければこれが時計ということすら分からない。

時間はすぐ分かった方がいいという意見が大多数でしょうが、少し考えてみてください。
何をそんなに急ぐ必要があるのかと。
そんなメッセージを込めました。
まあ後付けですが(笑)

反省点は、使い道がまったくないところ^^;
あとボールがバウンドするアクションはTweener使った方が楽だったかな、と。

一応ソース。(TeraClockはコチラ)
※クラスパスに注意。

○ドキュメントクラス

package myAs{
	import myAs.Bounds;
	import myAs.TeraClock;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.text.TextField;
	
	public class Clock extends Sprite{
		private var tClk:TeraClock;
		private var b_arr:Array = new Array();
		private var mb_arr:Array = new Array();
		private var hb_arr:Array = new Array();
		
		function Clock(){
			tClk = new TeraClock();
			//addEventListener(Event.ENTER_FRAME, entF);
			init();
		}
		
		private function init(){
			
			//ball
			for(var i=0;i<60;i++){
				var ball:Sprite = new Sprite();
				if(i%5 == 0){
					ball.graphics.beginFill(0x00ffff);
				}else {
					ball.graphics.beginFill(0xffffff);
				}
				ball.graphics.drawCircle(0, 0, stage.stageWidth/60/2);
				ball.graphics.endFill();
				ball.y = stage.stageHeight - ball.height/2;
				b_arr[i] = ball;
				
				if(i != 0){
					b_arr[i].x = b_arr[i-1].x + b_arr[i].width;
				}else {
					b_arr[i].x = b_arr[i].x + b_arr[i].width/2;
				}
				addChild(b_arr[i]);
			}
			for(var v=0;v<60;v++){
				var mball:Sprite = new Sprite();
				if(v%5 == 0){
					mball.graphics.beginFill(0x00ffff);
				}else {
					mball.graphics.beginFill(0xffffff);
				}
				mball.graphics.drawCircle(0, 0, stage.stageWidth/60/2);
				mball.graphics.endFill();
				mball.y = stage.stageHeight*2/3 - mball.height/2;
				mb_arr[v] = mball;
				
				if(v != 0){
					mb_arr[v].x = mb_arr[v-1].x + mb_arr[v].width;
				}else {
					mb_arr[v].x = mb_arr[v].x + mb_arr[v].width/2;
				}
				addChild(mb_arr[v]);
			}
			for(var k=0;k<24;k++){
				var hball:Sprite = new Sprite();
				if(k%5 == 0){
					hball.graphics.beginFill(0x00ffff);
				}else {
					hball.graphics.beginFill(0xffffff);
				}
				hball.graphics.drawCircle(0, 0, stage.stageWidth/24/2);
				hball.graphics.endFill();
				hball.y = stage.stageHeight/3 - hball.height/2;
				hb_arr[k] = hball;
				
				if(k != 0){
					hb_arr[k].x = hb_arr[k-1].x + hb_arr[k].width;
				}else {
					hb_arr[k].x = hb_arr[k].x + hb_arr[k].width/2;
				}
				addChild(hb_arr[k]);
			}
			
			tClk.addEventListener(TeraClock.SECONDS_CHANGED, secChg);
		}
		
		private function entF(e:Event):void{
			hour.text = tClk.hours2;
			min.text = tClk.minutes2;
			sec.text = tClk.seconds2;
		}
		
		private function secChg(e:Event):void {
			var sh:uint = stage.stageHeight;
			var num:uint = tClk.seconds;
			var mNum:uint = tClk.minutes;
			var hNum:uint = tClk.hours;
			var bObj:Bounds = new Bounds(b_arr[num], sh);
			
			if(tClk.seconds%5==0){
				var mbObj:Bounds = new Bounds(mb_arr[mNum], sh*2/3);
				var hbObj:Bounds = new Bounds(hb_arr[hNum], sh/3);
			}
		}
	}
}

○Boundsクラス
package myAs{
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.TimerEvent;
	import flash.utils.Timer;
	
	public class Bounds extends Sprite{
		private var sp:Sprite;
		private var vy:Number = 28;
		private var g:Number = 3;
		private var f:Number = 0.7;
		private var sh:uint;
		
		private var timer:Timer = new Timer(5000, 1);
		
		function Bounds(sp:Sprite, sh:uint){
			this.sp = sp;
			this.sh = sh;
			
			this.sp.addEventListener(Event.ENTER_FRAME, bounds);
			timer.addEventListener(TimerEvent.TIMER_COMPLETE, timerF);
			timer.start();
		}
		private function bounds(e:Event):void{
			vy -= g;
			sp.y -= vy;
			if(sp.y > sh-sp.height/2){
				sp.y = sh-sp.height/2;
				vy *= f;
				vy = -vy;
			}
		}
		private function timerF(e:TimerEvent):void{
			this.sp.removeEventListener(Event.ENTER_FRAME, bounds);
			timer.removeEventListener(TimerEvent.TIMER_COMPLETE, timerF);
		}
	}
}



勉強会の詳細はきっとここの中の人がキレイにレポートしてくれるはず!
個人的に一番面白いなと思ったのは↑の人の作品です。
タイムラインアニメーションすげえ。

んでFlashDevelopを体験させてもらったんだけど、めちゃくちゃ便利すぎて感動しました。
少し文字打つだけでサクサクコーディングができるという。
今までFlashのエディタでシコシコ頑張っていたのがアホらしくなりました(笑)
Mac版が無いのが悔やまれるけど、Flex Builderでも似たような感じみたいなので購入リスト入り。

さあそして飲み会にも参加したんですが、このブログにはってあるブロブパーツのとこの人がもうすごいのなんの。
もう勉強会であったことなんて忘れるぐらい色々貴重な話が聞けました。

総括してかなーり面白い勉強会でした。
以上!

Return top