「Flash」カテゴリーアーカイブ

Flashのタイムラインを伸ばしたり縮めたりするJSFL


もはやFlashという名前は消えつつありますが、一時期は仕事でかなり使っていたので、思い入れはあります。Flash。

とある長めのFlashのムービーを作っていたんですが、ほとんど作り終わってから、ちょっとムービーが短い、もうちょっと全体的に表示時間を長く、としたい時に、「タイムラインを1.5倍にしたい」と思いました。

が、そんな機能はFlashにはありませんでした…。

そういう時はJSFLがある!ということで探してみましたが、案外いいJSFLは見つからず、2倍にはできるんですが、細かい調整はできないものでした。

仕方がないので、自分で作ってみました。以下になります。

(※場合によってファイルが壊れることもあるので、バックアップはお忘れなく。)

端数が出ることがあるので、最終的に細かい調整は必要ですが、手でタイムラインを伸ばすよりは数十倍楽かと思います。

Flashを使うこともだいぶ減りましたが、こういう自分でなんとかできる感が好きだったりします。標準で用意して欲しい機能ですけれどね。。

wmodeのもたらす不具合


Flashで背景を透過させるときにHTMLのSWFObject部分にwmode=”transparent”;と書くこともあると思いますが、これが結構不具合(仕様?)が多く、安易に使えません。

さっと確認した感じではwmodeをきちんと設定しないと、以下のような不具合が出たり出なかったりします。(FlashPlayerのバージョンによって変わるものもあります。)

  • ブラウザによってポップアップブロックに引っかかったり引っかからなかったりする
  • 文字入力がブラウザによってインライン入力できたりできなかったりする
  • ブラウザによって日本語入力ができたりできなかったりする
  • CSSのz-indexがwmode=windowでは無視される(Flashが最前面に表示される)

などなど

このできたりできなかったりする、というのが曲者です。ブラウザによってFlashが違う動作をするときはまずwmodeを疑うと良い気がします。
Flashは全部のブラウザで動くんだぜーとかやってると返り討ちにあいます。wmodeの設定によってはちゃんと動くようになる場合がありますが、こいつがやっかいなのは、ブラウザごとに動作を分ける必要があって、

  • wmode=transparent
  • wmode=window
  • wmode=opaque
  • wmode=direct
  • wmode=gpu

のどれが適切かはFlashとブラウザとOSによって異なるので、ブラウザごとに適切なwmodeを選んでいく必要がある場合があるということです。

以前にWindows7のChromeで日本語入力ができない、というのに悩まされました。これは一時wmodeを設定しないか、windowに設定すれば動くものの、それ以外だと動かない、という状況だったんですが、あとになって、逆にopaqueかtransparentにすると動くという風になったりでもうちんぷんかんぷんです。(検証が不十分だったのかもしれないですけれど。)

さきほど確認したところではWindowsで以下の不具合はまだあるようでした。

  • Windows + Firefoxだとopaque/transparentで日本語インライン入力ができない(Win7 + Firefox + FlashPlayer11.3で確認)
  • Windows + Operaだとopaque/transparentで日本語が入力できない(WinXP7 + Opera12 + FlashPlayer11.3で確認)

Flashのバージョンによりけりの可能性もあるので、transparent/opaqueを使う場合はいつもより念入りにチェックする必要がありますね。特に文字入力がある場合は。

Macではインライン入力ができない…というのがありますが、もともとどのブラウザでも、どのwmodeでもできないのであんまり関係ないですね。(どこかで、仕様なのでインライン入力できるようにはならない、と言われていた気がする。)

ちなみにwmode=window / direct / gpuはそれぞれ動作に違いはなさそうでした。検証が不十分なので、実際に使われる場合はFlashといえどブラウザのチェックは必要かと思います。特に日本語入力は一切できないものもあるので。

2次元Vectorの初期値設定


1次元Vectorの書き方は覚えたけど、2次元Vectorに初期値を入れたい時ってどうするんだろ?って思ったのでメモ。

以下のようにすればできる。

var vec2:Vector.<Vector.<int>> = new <Vector.<int>>[new <int>[0, 1, 1], new <int>[1, 0, 0]];

少し見やすくすると、

var vec2:Vector.<Vector.<int>> = new <Vector.<int>>[
    new <int>[0, 1, 1],
    new <int>[1, 0, 0]
];

こう。

CS5からの書き方で、CS4以前では違う書き方をすることになります。

全部にnew <int>を書く、というのと、最初のnew <Vector.<int>>がハマりどころでした。考えて見れば、確かにそうですねという所。流石に3次元Vectorまではやりたくない感じがしますね。

参考:FN0902001 – Vectorクラス – Flash : テクニカルノート

ライブラリの選択中のアイテムをフレームに配分するJSFL


Flashで数字入りの画像をタイムラインに並べたい時に、一気に並べられたら便利だなーと思って作ってみた。

正確にはどっかにあるかなーと思って探してみたら、Kayacのブログが出てきたけれど、ファイルをDLできなかったので作ってみたという感じです。

/**
 * 選択中のアイテムをフレームに分配
 */
var _doc = fl.getDocumentDOM();
var _timeline = _doc.getTimeline();
var _lib = _doc.library;

function main(){
     fl.outputPanel.clear();

     var selectedItems = _lib.getSelectedItems();
     var numItem = selectedItems.length;

     if(numItem == 0){
          fl.trace('何も選択されていません');
     }
     else{
          _timeline.convertToKeyframes(0, numItem);
          fl.trace(numItem);
          for(var i = 0; i < numItem; i++){
               var item = selectedItems[i];
               var name = item.name;
               name.match(/[0-9]+/g);
               var num = parseInt(RegExp.lastMatch);
               if(selectedItems.length == 10 && num == 0){
                    num = 10;
               }
               setNumFrame(item, num);
          }
          fl.trace("処理が完了しました");
     }
}

/**
 * 指定したフレームに配置
 */
function setNumFrame(item, frame){
     _timeline.currentFrame = frame - 1;
     _doc.addItem({x:0, y:0},item);
     _doc.selectNone();
     _doc.selectAll();
     var elem = _doc.selection[0];
     var mat = elem.matrix;
     mat.tx = 0;
     mat.ty = 0;
     elem.matrix = mat;
}

main();

使い方

  1. 空のムービークリップを作成、編集モードに入る
  2. ライブラリのアイテムを選択(ライブラリアイテムは数値があるものとする)
  3. コマンドを実行

数値がフレーム番号になります。中を見れば分かるかと思いますが、0~9の時のみ、0番は10フレーム目に置きます(数値を画像にしたとき用)。数字のないものはうまく配置できません。

上をコピペすれば動くと思いますが一応ファイル

使用の際はバックアップなど行ったほうが良いかと思います。あんまり多いとフリーズするかもしれません。50程度は問題なく動きました。(WinXP+CS5で確認)

参考

倉庫番とTenorionを合わせたらどうなるか?


タイトルのようなものを、年末あたりに思いついたんですが、途中まで作って完成させていませんでした。

Tenorionは正確にはTENORI-ONと書く、ヤマハの電子楽器です。→詳しくはこちら

これをFlashで再現されたのがこのFlashで、SiONというライブラリを使って実装されています。

SiON Tenorion

面白いですよね。

これを何かと合わせて別のものができないか、と考えたのがこちらになります。

倉庫番+Tenorion実験(音注意!)

倉庫番 + Tenorion 実験 – wonderfl build flash online

緑が自機。青が箱、黄色がターゲットで箱が重なってる時は薄い青になります。倉庫番のルールはそのままで、緑の人を動かして、青い箱を黄色の所に全て配置すればクリアです。箱の位置によって、音が変わります。全て配置すると・・・?

普段作成するコンテンツがPlayer9ばかりだったもので、Vector型をまともに使うのが初めてで、ちょっと混乱しました。

これで音がうまいこと作られたら楽しいことになりそうです。しかしそうなるとステージを作るのが難しくなるので、両立は難しそうですが。まあ実験でした。