Extension(JSFL)を使うとFlashがもっと便利になるよ

Flashを使い始めて間もない人の中には、Flash Extension(JSFL)というものがあることを知らない人がいるかもしれません。
Flash ExtensionはFlashの機能を拡張するプラグインのようなものです。自分で作ることができるので、多くの人が便利なExtensionをWeb上で公開されています。
Flashはデフォルトのままだと細かいところで融通が利かず、面倒くさい作業を繰り返しおこなわなければならないことが多々あります。そういった作業を自動的にやってくれるExtensionを見つけてインストールすれば、Flashの使い勝手が格段に良くなります。
 
まずは私が実際に使っていて、もうこれなしでは作業できないというExtensionをいくつかご紹介。(ExtensionをインストールするにはExtension Managerが必要です)
 

  • EachTransformer(Flash cs3のみ)
    illustratorでいうところの「個別に変形」を実現してくれるツールです。
    eachtransform.png
  • [JSFL] setInstanceNames
    キーフレームたくさんのアニメーションを付けてしまった後でもMovieClipに一発で名前を付けてくれるExtension。eachtransform.png
  • [JSFL] swap symbols in the same layer
    キーフレームたくさんのアニメーションを付けてしまった後でも、シンボルの置き換えが一発できるExtension。(実はこれ一番良く使ってたのですが、最近エラーが出て使えなくなってしまってとても困ってます。誰か似た機能で使い方シンプルなExtension知っていたら教えてください。
    [追記] どうやら置き換え先として指定するシンボルが、ライブラリのフォルダの中に入っている場合にエラーが出るようです。フォルダから出して指定すると使えました。(ちくわさん、教えていただいてありがとうございました。)

 
Read more »

クラスファイルを保存するフォルダ名について、あとWebDesigningとか

少し前に自作のasファイルを公開してみたりしたわけですが、その時に悩んだのがクラスファイルを保存するフォルダ名(パッケージとか言う)をどうしたらいいのかということ。

ライブラリとしてまとめられ一般に公開されているasファイルは、そのクラスが公開されているドメインの名前のフォルダに保存されているようです。
 
例えばAS2.0の有名なライブラリであるFuseKitは
http://www.mosessupposes.com/Fuse/で公開されているのでasファイルは
com/mosesSupposes/fuse/~

というフォルダ下に保存されています。

http://casaframework.org/で公開されているCasaFrameWorkは
org/casaframework/~

というフォルダ下に保存されています。このルールでいけば、どんなにたくさんのライブラリを使っても、同じ場所にまとめて保存した複数のファイルのフォルダ名がかぶることはありません。良く考えられています。
 
ということで私が作るクラスファイルは
jp/ne/sakura/chabudai/~

というフォルダ下に保存されるわけですが、これはなんかやたら階層深くていやです。クラスを公開するなら独自ドメインは必須ということなのか。
 
私はFuseKitなどのライブラリを使い始めて1年くらいになるのですが、このルールに気が付いたのはほんの少し前、それこそブログでasファイルを公開する時で、自分の鈍感さにほとほと嫌気が差したのですが、そんな話はどうでも良くて、WebDesigning8月号から始まった『Flash開発の新機軸「ActionScriptライブラリ」』という連載がすごいという話なんですよ。
これはtrick7のteraさんがFlashの便利なライブラリについて焦点を絞って書かれた記事なのですが、Flashをこつこつ勉強しながら使っている人間にとって、今!そこにある疑問!に届くように本当に丁寧に書かれているというか、現場に即しているというか、とにかくFlashのエキスパートではないけどFlashする人にとっては永久保存版みたいな記事だと思います。冒頭に書いたクラスファイルを保存するフォルダ名についても述べられていました。最近は必ずしもドメイン名をフォルダ名にするわけでもないこととか。

9月号ではTweenerの使い方についてこれ以上ないくらい詳しく解説されていて、ライブラリを使ったことのない人でもこれを読めば必ず使えるようになると思います。私も今まではFuseKit使ってきたのですが、次からはTweenerに変えようと思っています。

空きをゆったり使ったスマートなデザインを鼻で笑うかのように、ぎっちりと密度の濃い情報でページを埋め尽くした記事は見所が山のよう。来月号も楽しみです。

Flashとjavascriptでクッキー(Cookie)を扱う



 
最近仕事でイントロムービーがあるFlashを作ったのですが

・1回目に見ときはイントロムービーが流れるように
・2回目以降はイントロムービーは流れずにスキップ
・ブラウザを終了させてもう一度開いたら、またイントロムービーが見れるように

という要望がありました。

まあ良くありがちな要望なのですが、今回それをブラウザのクッキーを使って判定させようと思って『flash クッキー』などで検索したのですが、Flash版のクッキーであるSharedObjectに関する記事ばっかり引っかかって、なかなかそのものずばりのページにいきつかなかったので、メモとして残しておくことにします。

(昔はFlashでクッキー扱う記事よく見たような気がするんですが。今はFlashでクッキーみたいなの使いたいときはSharedObeject使えば良いということなんでしょうか。そもそもイントロムービーがあるようなFlashも最近はあまり見かけませんね。)

サンプルはこちら。(上に貼っているFlashと同じですが取得してるクッキーは別です)

上のページに最初にアクセスすると最初は背景が黄色い画面が表示されます(ここでクッキーが保存されます)、更新ボタンを押すと緑の画面が表示され、以降黄色い画面を見ることは出来ません。ブラウザを一度終了させてからアクセスすると、また黄色い画面に飛びます。

Read more »

Stageサイズが変わったときにMovieClipを動かすクラス [AS2]

クラスを書くのに少しずつ慣れてきたところで、拙いクラスを開き直って公開してみようと思います。※注意!AS2です。

横幅、縦幅が100%のFlashで、Stageサイズを変えたときにムービークリップの位置をアニメーションで移動させる効果を使うことがよくあると思います。
例えば有名なHYBRIDWORKSさんのサイトがそうですね。
やり方はStage.onResizeリスナーイベントを使って、リサイズされたときにムービークリップを動かすよう指示するだけで特に難しくないのですが、動かしたいムービークリップがひとつだけならともかく、何個ものムービークリップをそれぞれ左上、右上、左下、右下のような位置に動かしたいとき、いちいち計算して指定するのもなかなか面倒です。
 
そこでそれを簡単に指示するためのクラスを作りました。

サンプルはこちら。

flaファイルとソースファイル一式はこちら。
fusekitつかっています。)
 

使い方

ダウンロードして解凍したファイルの中から「stageresize_test.fla」を開いてください。srcフォルダにクラスパスを通してパブリッシュすれば動きます。

動かしたいムービークリップは、好きな場所に配置できます。
右上に置きたいものは右上をムービークリップの中心点に、左下は左下、右下は右下、その他は左上に設定してください。

タイムラインに書くスクリプトは「script」レイヤーの1フレーム目を参考に。
 

ACTIONSCRIPT:
  1. var stageObj:StageOnResize = new StageOnResize(_root, 800, 520);

StageOnResizeクラスのインスタンスを作ります。引数は1つ目が動かしたいムービークリップを置いているムービークリップ名(ここでは_root)、2つ目と3つ目はStageの横幅と縦幅です。
 

ACTIONSCRIPT:
  1. stageObj.addMovie({m:"right_mc", pos:"right"});

stageObj.addMovieで動かしたいムービークリップを登録してください。ムービークリップは何個でも登録できます。mはムービークリップの名前、posは置きたい場所。
・"right" 右付
・"bl" 左下
・"br" 右下
・"center" 横も縦も中央
・"cw" 横だけ中央
・"ch" 縦だけ中央
・"cr" 右付で縦の中央
・"cb" 下付で横の中央
左付のムービークリップはStageサイズが変わっても動かないので登録する必要はありません。
 

ACTIONSCRIPT:
  1. stageObj.setEase(0.7, "easeOutQuint");

移動スピードを設定します。省略するとデフォルトのスピードで動きます。
引数の1つ目は移動終了までの時間(秒)、ふたつめはイージングの種類です。FuseKitのPennerEasingです。イージングの違いは以下のページなどを参考にしてください。

にゃあプロジェクト - ウェブログ - FuseKitのイージング

一応、StageOnResize.asのソースは以下。
 
Read more »

AS3書けないけど、FLARToolkit使ってみようとする日記 3日目

[追記 09/01/26]
FLARToolKitもPapervision3Dも現在はバージョンアップされており、以下の記事とは変更されている部分があります。最新のFLARToolKitをFlash CS3で動かす記事を書いたので、こちらを参考にしてください。
 
ではFlexBuilder3を使ってFLARToolkitを動かす解説に入ります。
FlexBuilderを使う人にこんな解説は必要ないんじゃないかという、心の声が聞こえますが。一方で、AS初心者がAS3.0を始めてみるのにFlexBuilderは結構いいんじゃないかとも思っています。とりあえずインストールさえすればすぐに始められるので。

以下の記事の通りにすれば、誰でもFLARToolkitは動かせると思うので、AS初心者の方もぜひトライしてみてください。

FlexBuilder3でFLARToolkitを動かす

ポイントはタロタローグさんで解説されているFlashDevelopでの作業と同じ。

・必要なソースにパスを通す
・メインでコンパイルするasファイルを指定する

この2点です。
 

まず、「←ここ」って書いたとこにある大変押しにくい小さな三角をクリックして、新規ActionScriptプロジェクトを作成します。

Read more »