Flash/ActionScript｜link-log powered by fullsizeimage.inc

いろいろとFlashにも便利な拡張機能があるようなので、
mxpとかjsflとか簡単にまとめておきました。
どんどん便利になりますね。

ライブラリ整理
きたないライブラリを一発で整理整頓

FuseKit2.1: Custom Easing Tool
fusekitのトゥイーンの設定が簡単にできるようにする

フレーム番号を指定して再生ヘッドを移動
文字通り、フレーム番号で移動
とてつもなく長いムービーをつくるとき便利かも

Photoshopレイヤースタイル風MXP
クリアボタン風なボタンが一発で作成できる

BitMapの設定を簡単にできるようにする
スムージングや圧縮設定（ロスレスとか）を設定できる
これ、おすすめ。

Flash コマンド「SwapInstances」
複数の選択中のインスタンスをライブラリ内のアイテムといれかえれます。

フィルタ拡張機能 TraceFilter
flashで設定したフィルターの値をAS用に書き出ししてくれる

数フレーム毎にキーフレームを挿入する
そのまんまです。

シンボルをボタン一発で環状に整列する
円状に整列してくれるJSFL（FlashCS3 対応）

レイヤーを追加してthis.stop();と書く
便利かも、意外とこういうところに時間を取られている気がしないでもないので。

前後のキーフレームにジャンプする
これいれておくとすごい便利。重宝してます。

現在位置より1つ上もしくは下のレイヤーを選択する
上のコマンドと一緒に使うと便利

swap symbols in the same layer
レイヤー上の全てのインスタンスシンボルを置き換える／
タイムラインでアニメーションとかつくっているときに。

選択したＭＣを一気にリンケージ書出しする
面倒くさいリンゲージの書き出しを一発で。

Kawata ： 7:25 AM

Flashのバージョンを切り替えるFirefoxアドオン「Flash Switcher extension」

Flash playerの古いバージョンで確認をしなきゃいかんと思って、
いろいろ探してたら、あった！
最近は便利なものがいっぱいあって助かります。

インストールすると下記のように、
Flashのバージョンを切り替えられます。
Flash Switcher extension for Firefox

Kawata ： 2:51 AM

GAINER買った

trick7さんのセミナー見てからどうしてもやりたくなったので、
新宿の打合せの帰りに
新宿ICCに行って
E君とGAINER買いにいってきました。
組み立て済みのGAINERキットが売ってるし、売店のお姉さんいい人そうだし、
よいとこでした。
E君は買うつもりもなかったのに、衝動買いしてました（笑）

とりあえず、夏休みの自由研究ということで、
遊んでみようと思います。

こんなことが出来るんですね〜。。
楽しそうです。
GAINERを使う:GAINER v.1

とりあえず、MASHUP++に掲載されてたチョロQ動かすことからやってみたいと。。。

ちなみにチョロQはこれ買いました。
HAMMERですよ、ハマー。

ちなみにWEB標準の日の復習はtrick7さんが詳しく、
そして親切なビデオチュートリアルをあげてくださっているので、
そちらで勉強した方が100倍早いので割愛します。すんません。

Kawata ： 1:39 AM

javascriptからFlashを操作する方法

使わないと忘れそうなのでメモです。
javascript側に下記の記述。
var gTheMovie; if(navigator.appName=="Netscape"){ gTheMovie = document;}else{ gTheMovie=window; } function swfl_gotofr(frnum) { gTheMovie.swfl.GotoFrame(frnum); }
で、ボタン側に
onclick="swfl_gotofr(飛ばしたいフレーム)"
てな感じで記述。

詳しくはこちらで「Javascriptでムービーを制御する」

Kawata ： 4:43 AM

swfobject.jsを使ってHTMLからswfに変数を渡す方法

以前、HTMLからswfに変数渡すのってどうすればいいのと
質問をされたので、
先日yamada君がFlashを呼び出すJSで書いていたswfobject.jsを使って
変数を渡すのをやってみました。簡単です。
HTMLからswfを渡す方法は2つあって、
<param name="movie" value="009_1.swf?testNum=linklog" /> <embed src="009_1.swf?testNum=linklog"...
○○○.swf?変数名=値と書く方法（サンプル1）と、

<param name="FlashVars" value="testNum=linklog" /> <embed src="009_2.swf" FlashVars="testNum=linklog"...
のようにFlashVarsを使って、
param name="FlashVars" value="変数名=値"のように書く方法（サンプル2）と
2つあります。
○○○.swf?変数名=値と書くのは昔のやり方なのかな。

続きはこちら

Kawata ： 3:51 AM

Web標準の日　Ajax/Flashでらくらくワクワクマッシュアップ　casaframeworkで簡単にXMLを読み込む方法

Web標準の日のエントリーが続いていますが、
いろいろ覚えたことを吐き出していかないと逆に忘れそうなので、
メモ＆復習です。

僕の3つ目のセッションは元たたみラボ？の「メディアテクノロジーラボ」さんの
のセッションでした。

事前登録していなかったので、立ち見になるかと、
超早めにいっていたので、無事席をゲットできて一安心。

しかしおもしろかったです。
マグカップやらステッカーももらったし。
内容があまりにも濃すぎて1回のエントリで
まとめてきれないので、復習できた箇所から断片的に紹介していきます。
ちなみに順不同です。

■受けた講義
Ajax/FlashでわくわくらくらくMashup
メディアテクノロジーラボさん
trick7さんのブログではいつも勉強させてもらってます。

■内容
1．Ajax編
主にJQueryのクールさについて
2．Flash編
いかにしてリアルドム（DOM）のプラモデルを動かすか？（笑）
じゃらんAPIをつかったMashup実例
（casaFrameworkとFusekitをつかったFlashライブコーディング）

Kawata ： 1:51 AM

よくありがちなランダムな文字のアニメーション

とってもありがちなんですが、
結構使われているので、作ってみました。
ランダムで表示されている数字が
端から止まっていくアニメーションです。
アルファベットでやった方がかっこいいかな。。。

サンプル
 flaファイル

//STOPしたときの文字 var stoptxt:String = "14194147568979646232"; //文字列の長さ var txtLeng:Number = stoptxt.length; //文字がストップする間隔 var stopTime:Number = 10; //配列 stoptxtArray = new Array(); ramdamTxt = new Array(); //文字列を1文字ずつ配列に格納 for (i=0; i<txtLeng; i++) { stoptxtArray[i] = stoptxt.substr(i, 1); } //文字の動き var countNum:Number = 0; this.onEnterFrame = function() { for (i=0; i<txtLeng; i++) { if (countNum<i*stopTime) { ramdamTxt[i] = Math.floor(Math.random()*10); } else { ramdamTxt[i] = stoptxtArray[i]; } numbertxt.text = ramdamTxt.join(""); } countNum++; };

Kawata ： 1:02 PM

XPath4AS2クラスを利用した簡単なXMLの読み込み方

FLASHのactionscriptでXMLを読み込む際には、
firstChild.firstChild.childNodes
なんかを書いて、読み込んでいたのですが、
正直、すごいわかりにくいし、面倒くさい。

xfactorstudioというサイトで、
「XPath」で簡単にXMLを読み込めるクラスが配布されているようで、
試してみました。
ちなみにXpathというのは、下記で詳しく説明されてます。
XPathによるノードの指定法を理解する

このクラスを使うと、XMLの読み込みが超簡単、しかもわかりやすい。
すごい便利！！かも。。
下記、サンプルです。
（読み込んでいるのはこのブログXMLです。）
単純にブログのエントリだけ読み込んで表示してます。
import com.xfactorstudio.xml.xpath.*; var blogXml:XML = new XML(); blogXml.ignoreWhite = true; blogXml.onLoad = function(success:Boolean) { if (success) { XMLLoaded(); } else { trace("XMLのロードに失敗しました。"); } }; blogXml.load("../test.xml"); //------------------------------------- //XMLオブジェクトからデータを取り出す //------------------------------------- function XMLLoaded(){ //ノードから配列に値を格納 var titleAr:Array=XPath.selectNodes(blogXml,"blogentries/item/title/text()"); //配列の長さを取得 arrayNum=titleAr.length; //配列の中身を表示 for (i = 0; i < arrayNum; i++) { //エントリーのタイトルのインスタンス名を決定 entryBox = "entry" + i; //エントリーのタイトルを生成 _root.attachMovie("entryName", entryBox, i); _root[entryBox]._x = 20; _root[entryBox]._y = 20*i+10; _root[entryBox].entryName.text = titleAr[i]; } }
サンプル
 flaファイル
XPath4AS2はダウンロード後解凍してできたcomフォルダを、
flaファイルと同じフォルダにおいて作業してください。

ちなみに、こちらでもっと丁寧に解説してくださってます。
xfactorstudioのXPath4AS2の使い方
 XPath4AS2のダウンロードはこちら

Kawata ： 5:56 AM

AS基本編：actionscriptでマスクをかける時のcacheAsBitmap

actionscriptでマスクをかける時は
マスクをかける方のムービクリップとかけられる方のムービークリップの
両方にcacheAsBitmap = trueを設定します。
すると、ぼかしの部分やダイナミックテキストにも
きちんとマスクがかけられます。
サンプルのscriptは以下の通り //マウスに追随するマスクの動き onEnterFrame = function () { maskMC._x = maskMC._x+(_xmouse-maskMC._x)/8; maskMC._y = maskMC._y+(_ymouse-maskMC._y)/8; }; //マスクMCとフォトMCの双方にcacheAsBitmap=trueを設定 maskMC.cacheAsBitmap = true; photoMC.cacheAsBitmap = true; //マスクするMCのパス.setMask(引数にマスクの範囲MC); photoMC.setMask(maskMC);
サンプル
 flaファイル

Kawata ： 5:44 AM

配列の中の最大値、最小値を取り出す

actionscriptで配列から最大値や最小値、平均値を取り出します。
この前、XMLからデータを取り込んで、
グラフを生成する際に多用したので、
書いておきます。
グラフを作成するサンプルはヒマがあったら整理して
アップしておきます。

var myValue:Array = [1 , 2, 5, 3, 10, 99, 99, 95, 91]; var arrayNum:Number=myValue.length; //初期値 var numMax:Number=myValue[0]; var numMin:Number=myValue[0]; var numSum:Number=0; var numAv:Number; //最大値の算出 for (i=0; i<arrayNum; i++) { if (myValue[i] != "") { num = myValue[i]; //最大値 _root.numMax = Math.max(_root.numMax, num); //最小値 _root.numMin = Math.min(_root.numMin, num); //合計値 _root.numSum = _root.numSum+myValue[i]; //平均値 _root.numAv =_root.numSum / arrayNum; } }

サンプル
 flaファイル

Kawata ： 9:54 PM

配列の要素をランダムに並び替える方法

Flashのスライドショーでxmlファイルから読み込んだ写真をランダムに表示したいという依頼があり、それまでのスライドショーは配列に格納した画像のパスを先頭から順番に読み込んでいたので作りを少し修正しました。

配列の要素をランダムに抽出したいと思った時にパッと思いつくのがMath.random()を使ったやり方だと思いますが、それだと同じ要素を繰り返し抽出されてしまう場合があります。
重複なく要素を取り出したい場合は以下のスクリプトを使ってみてください

var i = array_name.length;//array_nameというのは任意に作成された配列名です
while (i--) {
var j = Math.floor(Math.random()*(i+1));
var t = array_name[i];
array_name[i] = array_name[j];
array_name[j] = t;
}

考え方としては配列からランダムに要素を抜き出すのではなく、
配列を生成した後にその配列をランダムに並び替える、という感じです。
なので画像を先頭から読み込む処理自体は変更していません。

割といろんなところで使える処理だと思います。

このエントリーの情報はほぼ野中さんの「非公式テクニカルノート一覧」の転用です。
もっと詳しく知りたい方は以下のURLへどうぞ。
▼配列を偏りなくランダムに並替える

yamada ：10:04 AM

Flashのアクションをアクセス解析

先日のCSSniteでのBASEMENT FACTORYさんのセミナーで
「Flash上でのユーザーのアクションを取得＆解析している」
と聞いて、ふとどうやっているんだろうと思ったので、
調べてみました。

Google Analyticsで意外と簡単にできるらしい。
知らんかった。。

on (release) { getURL("javascript:urchinTracker('eventid');"); }

eventidの部分は自分の好きな値をいれればOKです。
イベントがとれれば、どこにでも設定できるので、
かなり細かいとこまで、トラックできるそうです。

詳しくはfladdict.netさんに書いてあります。（2005年に・・・）
AjaxもFlashもトラックできる！？　Google Analyticsの脅威
 Google Analyticsを制御するクラスを作ってみたよ

Kawata ： 3:58 AM

外部swf読み込み時に_parentと書くめんどくさいときのlockrootプロパティ

外部のswfをloadする際に、_rootと記載しておくと、
読み込んだ際にパスがおかしくなってうまく動かないときがあります。
そんなときは_parent（相対パス）回避をするのですが、
よく間違えて_rootで書いてしまった！ということがあります。

そういうときは、lockrootプロパティを使います。
外部swfに
_root.lockroot=true;
と書くと、強制的に外部swfの_rootを読みにいってくれます。

意外と知らない？（ていうか僕は最近知った。。。）
知らなくても問題なかったりするのですが、知っていると助かるときも
あるかと思います。

サンプル
 flaファイル

Kawata ： 1:09 AM

スクリーンサイズに応じて、動くムービークリップ

いまさら！？というのもありますが、
いちいち一から書いたり、探したりしていると面倒なので、
仕事で使えそうなサンプルをアップしておきます。
フルスクリーンのサイトなんかを制作するときに、
常に画面中央にあるロゴや、常に画面左端にあるCLOSEボタンをつくりたいときは、
こういう感じです。
よかったら参考にしてください。

//初期設定 var windowW:Number; var windowH:Number; //Windowサイズを取得して、各変数に代入 function moveMC() { windowW = Stage.width; windowH = Stage.height; logoW = _root.logoMC._width; logoH = _root.logoMC._height; logoX = (windowW-logoW)/2; logoY = (windowH-logoH)/2; closeX = windowW-_root.closeMC._width; closeY = windowH-_root.closeMC._height; } //scaleModeプロパティの設定 Stage.scaleMode = "noScale"; Stage.align = "TL"; moveMC(); //Windowリサイズ時に実行 stageListener = new Object(); stageListener.onResize = function() { moveMC(); }; Stage.addListener(stageListener); //動きの処理 this.onEnterFrame = function() { _root.closeMC._x += (closeX-_root.closeMC._x)/5; _root.closeMC._y += (closeY-_root.closeMC._y)/5; _root.logoMC._x += (logoX-_root.logoMC._x)/5; _root.logoMC._y += (logoY-_root.logoMC._y)/5; };

サンプル
 flaファイル
※微妙に書き方とか変なところがあるかもしれませんが、ご容赦ください。

さらに詳しく知りたい方はこちら(fumiononaka.com)を参考にしてください。
Stage.onResizeリスナーイベントについて詳しく説明がしてあります。

Kawata ： 5:19 PM

FLASHからPHPへPOSTでデータを渡す

簡単なことなのですが、
仕事で使ったので、復習と備忘録。
FLASHからPOSTでデータを受け渡し。

on (release) { sendData = new LoadVars(); sendData.testnum = sendTxt; sendData.send("test.php", "_self", "POST"); }
って書くだけ。

サンプル
 flaファイル

Kawata ： 5:00 PM

Blurフィルタ

今さら、な話題でもありますがFlash8から追加になったムービークリップのフィルタについてサンプル付きで分かりやすく解説してあります。
http://www.project-nya.jp/modules/weblog/details.php?blog_id=355

下の方にある「関連記事」をたどると色々なフィルタのサンプルが見られます。
「ベベルなんか使うか!?」と思ったりもしますが、これを見るとやりかた次第のような気もしますね。

何かで使ってみようと思います。

yamada ：12:51 AM

MacのDock風のFlashの作成方法

ちょうどこの前、こんな感じのやつを作っているスタッフがいたので。
flaファイルもダウンロードできるので、
参考に。

Apple style OS X Dock in Macromedia Flash MX 2004

Kawata ： 2:35 AM

FLASHのサンプルソースがダウンロードできたりするサイト

FLASHをいろいろ調べる機会が最近多くなってきましたので、
知っているサイトをまとめておきました。
自分メモ＆参考エントリです。

■日本語のサイト
基本のおさらいをしたい人用
FLASHゲーム＆AS講座
 FlashのつぼCD-ROMサンプル集
 Flash ActionScript Helper

F-site
有名なサイトです。役に立ちまくりです。

FLASH-jpフォーラム
昔わからないことがあったらここで質問しまくってました。
上記のサイトの中でプリローダーのサンプルがあります

faces
バスキュールさんの貴重な情報が見れちゃいます。

fumiononaka.com
有名な野中さんのページ（勉強になります。）

ヘテムルマガジン
Flash Media Serverを利用したサンプルソースなど

■海外のサイト
flash kit
老舗なサイト。昔お世話になりました。

flashmagazine
右下のTUTRIALからサンプルソースが見れたり、ダウンロードできたり。

ultrashock.com
膨大な数のflaファイルがダウンロードできます。
メニューのFLA SOURCE FILEから

levitated.net
FLASHの実験サイト。アーティスティックな感じです。

bit101
http://www.bit-101.com/の実験用のサンプルスクリプトがダウンロードできます。
すごい貴重です。

enricolai.com
制作会社？実際に仕事で役に立ちそうなのがあります。

こんなもんでしょうか。他にもあるけど、それはまた。

Kawata ： 2:14 AM

fpsが低いときの滑らかなアニメーション

ちょっと備忘録的な書き込みをば。
Flashでfpsが低い時にアニメーションをさせると動きがカクカクしてしまうことがあります。
（特にゆっくり動かしたい時）

そんな時に使える関数が
updateAfterEvent();
フレーム位置とは関係なく任意のタイミング（イベントとか）で強制的に描画を更新できるようです。

これで色々な問題、課題が解消できそうですね。

yamada ：10:55 AM

PAGE TOP

フルサイズイメージ スタッフの覚え書き＆WEBデザイン最新情報

Mar 08, 2008

Jan 08, 2008

Nov 13, 2007

Aug 26, 2007

Aug 14, 2007

Aug 07, 2007

Jul 30, 2007

Jul 23, 2007

Jul 22, 2007

May 26, 2007

May 20, 2007

May 20, 2007

May 13, 2007

May 09, 2007

May 05, 2007

Apr 24, 2007

Apr 21, 2007

Apr 14, 2007

Apr 12, 2007

Apr 11, 2007

Apr 07, 2007

Mar 17, 2007

CATEGORY

ARCHIVE

フルサイズイメージ　スタッフの覚え書き＆WEBデザイン最新情報