多量の外部画像を、一気に読み込んで、それにスムージングをかけつつ Sprite などでラッピングしておいて、ボタンとして扱ったり伸縮させたり、あとからゴニョゴニョできるようにする、というよくあるやつ。
気づいたら毎回似たようなのイチから書いてるので自分用メモ。
並べ方がとか、ドラッグ機能とか、ローディングが無いとか、はサンプルなのでテキトー。ラッピングした Sprite に名前つけてるのは、getChildByName とかで、あとからどうにでも出来るように。
もっとこうすればいいじゃないか、アッタマ悪いなぁ、というコメントなんかいただけると感涙。
いいのが思いつかなかったので適当なエントリタイトルですが、Firefox で html に embed した swf を読んだとき、そのswf の stage.stageWidth や stage.stageHeight が正常に取得できてない時がちょこちょこありました。
その都度、変数宣言で直接 var sW:uint = 800、とかやっちゃってとりあえずその場を凌いでました。
で、さっき気がついたんですが、そう感じるときはいつも、先のエントリで雑感を述べた Center element plugin を使っている気がします。
ちょっと今検証する余裕がありませんが、おそらく embed した swf を囲っている <div> タグを、css でゴニョゴニョしているせいではないか、という仮説です。
同じ症状で悩んだ誰か、検証してくれないかなぁ。
Papervision3Dではじめる Flash3Dアニメーション
Papervision3D を扱う案件が舞い込んできて、久しぶりだしちょっと習作を、と思ってたんですが、よくよく考えたら pv3D 触るの１年ぶりくらいで、それ以降のアップデートもろくに追っておらず、お作法やら新しい内容とか埋め合わすのにWeb上をウロウロするのが面倒くさくなって、買っちゃいました。
ものすごく解りやすく書かれていて、復習・基礎固め目的は完全に満たされたし、Tweenerとの連携みたいなことやインタラクションな部分にも触れてくれてるので応用力も身に付くのでは。
著者さんの丁寧な人となりも感じられて、そういう点でも良書ではないかと思います。
ホントはこういう本が出るまでに、この本に載ってる内容を習得しときたかったんですけどね...。
とか読んだ人ならすらすら読めます。久々のエントリです。
ピーク抜けたり、色々と"端末の前に座ってられない状況"に遭ったりで実務から少し遠ざかってましたが、年始から水面下で進んでいた案件がやっと動き出し、1ヵ月ほどの実務ブランクにも『こんなに勘が鈍るモノなのか！』と驚きつつ、締め切り目前でブルってます。
昨夜ハマってたのが Sound まわり。
ムービー全体をコントロールする再生・停止ボタンから、ランダムに1ループだけ再生されるエフェクト音のために用意した SoundChannel に対して、一時停止機能をつけようとしてました。
ユーザーが任意に一時停止ボタンを押したとき、まだその SoundChannel で何も再生されてない場合、 SoundChannel を参照すると、当然ながら、 null にアクセスできない、と怒られる。けど、任意の SoundChannel にSoundデータを"再生させずに"保持しとくことができない。
さらに、 SoundChannel.position は読み取り専用なので、例えば
var _sndCh:SoundChannel; _sndCh.position = 0;みたいな真似は出来ない。
さーこまった、てことで無理くり編み出した方法は、無音で超短いダミーサウンドを一回再生しとく、て方法。
var _sndCh:SoundChannel; // ライブラリ内のリンケージよりダミーサウンドを読み込み var _dammy:Sound; _dammy = new Dammy(); _sndCh = _dammy.play(0,1);
これでひとまず、まだエフェクト音が再生されてない状態でも、SoundChannel.stop() しても怒られない。
でもこの方法だと、SoundChannel.position に、ダミーサウンドの長さ（ミリ秒）の値が格納されているので注意。（Soundデータって、再生が終わったら一番最後で停止してるんですね。先頭に戻るという先入観を勝手にもってて余計にハマった。）
でもって一時停止と、停止した時点からの再生は
// 再生するサウンド var _snd:Sound = new Sound(); // 停止位置を保存しておく変数 var pausePosition:Number; // 一時停止 _sndCh.stop(); pausePosition = _sndCh.position; // 再生 _sndCh = _snd.play(pausePosition);↑実際いま進めてる案件では、エフェクトサウンドが何種類もあるので、どのサウンドがなったか、みたいな条件分岐もあったりでもうちょっと複雑になると思いますが骨子はこんな。
確実に、もっと単純かつスマート方法があるんだろうとは思ってますよもちろん（無念）。
なんだかピークも過ぎ去った感がありまして。
まずいなぁ、例年はなんだかんだで春先まで忙しいんだけどなぁ。
不況の波、てやつですね。
そんな感じなんで、確定申告書類ももう作成し終えました。
来週の月曜日になったら、サクっと提出しに行こう。
e-taxというシステムを利用すると、オンラインで提出まですべて完了できるんですが、どうも信用がないというか、一生懸命作った書類なので自分の手でしっかり税務署に出したい、という感覚があって、自分はe-taxは使わない派です。でもオンラインの確定申告書類作成コーナーは使ってます。収支内訳書さえがんばれば、あとの計算などは全部自動でやってくれるのでこれは助かる。
まぁまぁ、そんな話はおいといて。
そんな感じで時間に余裕が出てきたので、ちょっと前にamazonでポチってたFlash Math & Physics Design:ActionScript 3.0による数学・物理学表現[入門編]
掲載されているサンプルはこちらで見ることが出来ます。
装丁というか表紙デザインがいい感じ。学術書チックでｗ
もちろん内容もいい感じですよ。ただ、一切合切をScriptで表現、つまりdrawとかbeginFillとかでオブジェクトもScriptで作る、というほどのガチガチScriptではなくて、あらかじめ作ったオブジェクトをリンケージ、といった設定まではFlaファイルでやっておいて、モーションの部分はクラスファイルを書いて、という形式です。その辺りは賛否両論あるかもね。
うれしいのは、practiceフォルダ。サポートサイトからダウンロードできるデータの中に、掲載されているサンプル達のソースファイルが収録されていて、各サンプル内のpracticeというフォルダの中に、前述のFlaファイルだけが格納されている。なので、写経なりカスタムしたクラスファイルを自分でこのフォルダの中に作って、自分の書いたクラスで動作確認ができる。そんな感じで、ActionScript 3.0 アニメーション
でもこういうのって反復が大事というか、個人的に、なかなか日々の業務がこういうタイプのスクリプトばっかり、というわけにはいかないので忘れがちです。何回も読み返して、写経しまくって、て感じで過ごしていこうと思う、まだまだ寒い冬の日。
AS3からJavaScriptを呼び出してウィンドウを開く、 というごくごくベタな連携でまたハマった。ちくしょう。
少し前の記事で、externalInterface.callを使うときは、swfを貼ってるdivのidに"external"を加えるといいみたい、みたいなことを書きましたが、それってSWFObject1.5系だけでしょ、てことで、SWFObjct2.xに乗り換えて以降は、好きなid名をつけてたんですが、『 W i n I E で の み 』、またウィンドウが開かない、という現象に見舞われた。
ということでwmode変えてみたり、swf貼ってるdivのid名変えてみたり、javascriptをhtmlじゃなくてもうASのハンドラ内に書いてみたり、いろいろやってみましたが、
「オブジェクトでサポートされていないプロパティまたはメソッドです」
とか怒られたり、そりゃまぁ怒りにうち震えながら、最後にwindow.openの第２引数に"_blank"と入れたらうまくいきやがった。
納得いかんから余計腹立つー！
そんなこんなでおさらい
// html
function hogelink()
{
window.open('http://www.hogehoge.com','_blank');
}
// AS
btn.addEventListener(MouseEvent.CLICK, onClick);
function onClick(e:MouseEvent):void
{
ExternalInterface.call("hogelink");
}
あとでじっくり読むメモ。
windowフィットとかwmodeとか。
web dimension makerさんのRSSをきっかけに、自分ももう一度ちゃんと理解を深めたいってことで。
続・swfobject で flash を Window 内に全画面表示
IEのFlash Playerが遅い件と、wmodeとの悩ましい関係
いったん自分なりに無難なとこに落ち着いちゃうと、ベストを模索するのを怠っちゃってだめだな。ここらでもう一度再構築。
ついつい忘れるのでメモ。
天地左右100%指定するとSWFが表示されないやつ。
body{
position: absolute;
width: 100%;
height: 100%;
}
な感じでCSSでbodyに天地左右100%を適用。
※もちろんSWFObjectでも100%指定
こんなWebサイトありますよー、なRSSフィードもちょろちょろと購読してるわけですが、さっきチョイ見したマッスルインパクトってサイトのナビゲーションで、ちょっと「うっ」てなった。
目新しいとかスゲーとかとはまた別の、自戒の話。
無防備に、「まぁ普通にロールオーバーで文字色変更するんでしょ」みたいなことを、【特に意識するわけでもなく当然そういうもんだ、と無意識に】思いながら、ナビゲーションボタンにマウスをもってったわけです。
と、フキダシが出る。プルプルっとなる。
ここまでは、「あ、そうきたの」くらいで、とはいえ「ちゃんとこういう処理もしてるのかー」と思ったわけですが、一旦そのボタンからマウスが離れてもう一度そのボタンにマウスを乗せたときに、冒頭の「うっ」てなったわけです。
プルプルっと出てくるフキダシの角度がランダム。
もっと動き方を詰めたり見せ方ののびしろはあるのかもしれないけど、それ以前にフキダシの出る角度まで変えよう、と発想した点について、「こりゃいかん、おれ最近そういうの横着してた」とちょっとガツンときました。
ちょっとハマったのでメモ。
表示リスト上のオブジェクトを一斉に削除しようとして↓みたいな感じで書いたら
function removeDisplayList(container:DisplayObjectContainer):void
{
for (var i:uint=0; i < container.numChildren; i++)
{
container.removeChildAt(numChildren - 1);
}
}
なんかへんな消え方する。
なんとなく規則性があるんで trace してみたら、リスト番号が一つ飛ばしにremoveされてる。なんでじゃー？と思って調べてみたら条件文に numChilren 直接いれちゃうと、削除していくそばから numChilren 自体が減ってっちゃうからだった。考えてみればそうだ、確かに。
ということでfor文の前で一旦総数を変数に保存しとけばいい、ていうまた素人な感じ。
function removeDisplayList(container:DisplayObjectContainer):void
{
var num:int = container.numChildren;
for (var i:uint = 0; i < num; i++)
{
container.removeChildAt(numChildren - 1);
}
}
リンケージ設定したライブラリ内のMovieClipを動的にドバッと生成した場合の、任意のMoveClipインスタンスを特定してやる方法。
意外に、ドンピシャで答えてくれてるブログとかが少ないのは、すなわち自分の理解度の低さを物語っているのだろうと涙目でエントリ。
仮にリンケージ名"Block"と名付けたMovieClipを、
横4列、縦3行に並べて、そのなかから特定のMoveClipを探すとする。
// "Block"の天地サイズ、縦横60
var w:uint = 60;
var h:uint = 60;
// 生成するインスタンス名
var block:MovieClip;
// 生成したインスタンスに割り振るID
var id:uint = 1;
for(var i:uint = 0; i <= 2; i++)
{
for(var j:uint = 0; j <= 3; j++)
{
block = new Block();
addChild(block);
block.x = j*w;
block.y = i*h;
block.name = String(id);
id++;
}
}
/*
blockのname変数に、1から始まるidが振られているのを手がかりに
例えば２段目の左から２番目、つまりidでいうと6にあたるMovieClipを特定
*/
var target:MovieClip = MovieClip(getChildByName("6"));
target.alpha = 0;
AS3になってから、hitAreaの扱い方がすこし面倒くさくなったなぁ。
設定したhitAreaよりも上のレイヤーにMovieClipが重なると、hitAreaのマウス反応が拒否されて、その瞬間に"MOUSE_OUT"な状態になる。
つまり、MOUSE_OVER時にそのMovieClipボタン内でMovieClipアニメーションをつけたりする場合、そのアニメーションの動きによっては前述のような具合でMOUSE_OVERが解除されてしまう。
てことで、MovieClipボタンが内包しているMovieClipたちに、マウス反応させなきゃいいので
btnMovieClip.mouseChildren = false;
としておけば、純粋に、設定したhitAreaにのみ反応するようになる（要するに内包するMCからのバブリングが一切なくなる）。
...というのをついこないだ突き止めて、AS3触り始めの頃の数案件について、悔しい気分になりました、という話。
"mouseChildren"の存在に気付いてなかったorz
小一時間はまったのでメモ。
親swfに外部swfを読み込んで、その外部swfから親に記述されている関数を呼び出すには、てことで。
外部swf読み込み系って、読み込んだ外部swf自体の消去を親にやってもらう、ていう考え方自体どうなんだろう、て常々思ってるけど検証はいずれ暇になったら。
というかこの外部swfから親swfの関数呼び出しにしたって、なかなかベストプラクティス的な情報がなくて苦労したよ、低知識者としては...。
/* ----- 読み込む親swf ----- */
//子swfから起動する関数
function oyaFunc():void
{
//処理
}
/* ----- 読み込まれる子swf ----- */
var ld:Loader = loaderInfo.loader;
var mainTimeline:MovieClip = ld.root as MovieClip;
//親で設定されている起動したい関数
function hogeChild():void
{
mainTimeline.oyaFunc();
}
子swfの中で loaderInfo.loader; でもって自分の立ち位置をはっきりさせつつ、親のタイムラインを参照してやるわけですか。一気に色んなFLASHerブログ漁っていつの間にかこう至った。
まだまだ不慣れだなぁ。メインのタイムラインに配置したmcの中から、メインのタイムラインで宣言した変数や関数を参照しようとして一瞬ハマった。
ActionScript2のクセで、
//メインタイムライン var hoge:uint = 0; //配置したmc内 trace(this.parent.hoge);
とかやったら、コンパイラに「型が違うのであーだこーだ」と怒られた。
一旦parentを変数として宣言してやればいいみたい。
//メインタイムライン var hoge:uint = 0; //配置したmc内 var _parent:Object = this.parent; trace(_parent.hoge);
関数についても同様。
//メインタイムライン
var hoge:uint = 0;
function hogehoge():void
{
trace(hoge);
}
//配置したmc内
var _parent:Object = this.parent;
_parent.hogehoge();
-------- 追記 -------
というかそんなことしなくてもキャストしてやればいいのか。
//メインタイムライン
var hoge:uint = 0;
function hogehoge():void
{
trace(hoge);
}
//配置したmc内
MovieClip(parent).hogehoge();
自分用にメモ。
ExternalInterfce.call やらなんやらで JavaScript といちゃいちゃする場合は、
embedするDIVのid名とSWFObjectの第2引数に"external"と先頭に記述。
※但しそれぞれexternalの後に続く文字列はユニークなもの。
＜div id="external◎"＞
＜script type="text/javascript"＞
var so = new SWFObject("hoge.swf", "external★", "300", "300", "9", "#ffffff");
so.addParam("allowScriptAccess","always");
so.addParam("wmode","transparent");
so.addParam('menu', 'false');
so.write("external◎");
＜/script＞
とりあえずWinのIEでデバッグ表示してるとスクリプトエラーに出られて困った時に これやったら止んだ。
初めての、なんて謳ってますが初めての人には若干敷居の高い内容じゃないかなぁこれ。というか逆に、ある程度学んできた人にとっても十分有用な本（だと思います）。若干小さい字、要するに情報量多め。大事なことが沢山詰め込まれてる。
てか要するに個人的には良書！買って損なし！
前回に続いて過去のAS2クラスをAS3に書き換えた。
整数を投げたらそれを配列にしてシャッフルして返すクラス。
理解が浅く、なぜextends MovieClipしないといけないのか分からない...。デバッガに怒られまくりながら、こんな感じになりました。有識者にご指摘頂ける日を待ち望みつつとりあえず晒しとく。
package com.nrd_studio
{
import flash.display.MovieClip;
public class OpArray extends MovieClip
{
private static var _max:uint;
private static var _a:Array = [];
public static function shuffle(n:uint)
{
_max = n;
_a = makeArray();
return xShuffleArray(_a);
}
private static function makeArray():Array
{
for( var i:uint = 0; i < _max; i++)
{
_a.push( i + 1);
}
return _a;
}
private static function xShuffleArray(arr:Array):Array
{
var i:uint = arr.length;
while(i--)
{
var j:uint = Math.floor(Math.random() * (i + 1));
var t:uint = arr[i];
arr[i] = arr[j];
arr[j] = t;
}
_a = [];
return arr;
}
}
}
オブジェクトをnew、とかしたりしなくてもサクっと結果が返せるので楽チンかと。
var a:Array = OpArray.shuffle(20); trace(a); //出力:3,16,14,19,5,8,2,7,6,20,9,15,10,4,18,11,17,12,1,13
AS2版をむかーし晒したんですがそれをAS3に作り替えた。
ただ単純にタイムラインを止めておいて、設定した秒数後にまた走らせるだけのクラス。世間ではいろんな高機能クラスライブラリを公開している方々が群雄割拠する中、どうなんだろう、これ。
でも気にしない。
package com.nrd_studio
{
import flash.utils.Timer;
import flash.events.TimerEvent;
import flash.events.MouseEvent;
import flash.display.MovieClip;
import flash.display.SimpleButton;
public class Staytime extends MovieClip
{
private static var _target:MovieClip;
private static var _counter:Number;
private static var timer:Timer = new Timer(0);
public static function wait(target:MovieClip, counter:Number):void
{
_target = target;
_counter = counter*1000;
_target.stop();
timer.delay = _counter;
timer.start();
timer.addEventListener(TimerEvent.TIMER, timerHandler);
}
static function timerHandler(e:TimerEvent):void
{
timer.reset();
_target.play();
}
public static function cancel():void
{
timer.stop();
timer.reset();
_target.play();
}
}
}
止めたいフレームで
Staytime.wait([止めたい対象],[止めたい秒数]); //example Staytime.wait(this,3);
強制的に停止を解除してタイムラインを走らせたい場合は別途ボタンとか使ってcancel()メソッドを呼び出す。
btn.addEventListener(MouseEvent.CLICK, clicked);
function clicked(e:MouseEvent):void
{
Staytime.cancel();
}
まだAS2案件が主で、CS2からCS3にアップデートもしてないんですが、いろんなところでAS3界隈の情報は購読してます。といいつつmxmlとかなんやねんとか、一応Flex SDK環境は構築したけど、実作業してないぶんイマイチ理解してないままになってた。んでもってこの「Flex3.0SDKで学ぶActionScript3.0入門―プログラミングの基礎からAIRアプリケーションの作り方まで
今ピークあたり、もうAS3でいっちゃって良さそうかな。この夏でとりあえず世間に追いつくことを目標にします。
埋め込みflvを配置したレイヤーよりも上の別レイヤーに、テキスト(未分解)をシンボル化したインスタンスを配置してたんだけど、そいつが何故か、as操作しようがトゥイーンしようが、移動もさせられないし透明にもならない。
ウィッシュリストに登録したまま、発売日が過ぎたのも忘れてた本が届いた。
これは、手元にあって損は無い本だと思います。
これまでエイヤー、と経験則と勘で作ってた部分も、「あ、やっぱこれであってた」と安心したりｗ、「あーこうれってこういう意味だったのか」てな具合で知識のスキマを埋めてくれます。ソースについても基本的な説明は割愛されているのでサクサク読めてグー。もうちょっと早く発売されてたら...と思う案件が数件あったな、そういや。。。
音素材集を買おうと訪れたヨドバシで、またレイアウト変更をしていてイライラしていたところ、１冊だけあった「ActionScript3.0 アニメーション」。一般書店で目にすることはあまり無さそうだな、Amazonで買うか、と思っていたところだったので脊髄反射で買いました。
はっきり言うと「Making Things Move!」の英書版を読み、かつ十分に理解をしている人には必要ない本かと。さらりとAS3.0の説明に触れつつ、各コードが"package{"で括られたくらいで、内容については同じです。英書で読み切れなかった、あるいは理解しきれなかったこまかい説明を、改めて日本語でしっかり読む、という作業にはもちろん最高。
とは言えそもそも神書なので「Making Things Move!」をまだ呼んでない人は必読でしょう。
意識してなかったけどActionScript関連のネタってエントリしたことなかったんだな...。いつも時間のない中、力業ですり抜けてきたんで公開できるようなコードとかモノも特に無いので当たり前か。
