goo blog サービス終了のお知らせ 

雨と風と快晴と 2.0

個人の勉強とPCライフに役立つツールをめざすブログ。
個人としてはWebクリエイターとして活躍中(?)。

ActionScript3.0 LocalConnectionで2つのSwfを連携させたい。

2010年05月21日 | プログラミング
進行中の開発案件で、2つのSwfを連携させたいという要望があった。

実現させる方法の1つとして、以前ブログパーツを作った時に利用した ExternalInterface.call()でJavaScriptの関数を呼び出し、別のSwfをキックする方法があるが、今回は噂に聞いたことのあるローカルコネクションによる連携を行ってみた。


簡単なサンプルとして、マウスの動きをトレースするSwfを作ってみた。
2つのSWFに"objMc"というちっちゃいMcを配置し、それがマウスと一緒に動くというだけ。


まずは、呼び出し側(A.swf)に記述するActionScript。
オブジェクトがマウスにくっついて移動する。
// マウスイベントを設定
stage.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMoveFnc);
// ローカルコネクションを使うよ。
var localConn = new LocalConnection();

// マウスにくっつく&別のSwfに指示を出す
function onMouseMoveFnc(Event){
  objMc.x = stage.mouseX;
  objMc.y = stage.mouseY;
  // 接続状況のイベントリスナーを追加しておく。
  localConn.addEventListener(StatusEvent.STATUS,endFnc);
  // 実際に接続先のSwfの関数を呼び出す。引数も渡せる。
  localConn.send("CONNECT","moveObject",objMc.x ,objMc.y);
  
  // 接続状況のイベントリスナーの結果。
  function endFnc(stat){
    //trace(stat);
  }
}


続いて、受け側(B.swf)に記述するActionScript。
オブジェクトを呼び出し側のオブジェクトと同じ位置にする。
// ローカルコネクションを使うよ。
var localConn:LocalConnection = new LocalConnection();
// 何だろう?おまじない?(未調査)
localConn.client = this;
// 自分は"CONNECT"で待ってるよ。
localConn.connect("CONNECT");

// 私を呼び出して!!
function moveObject ( _x, _y ) {
  objMc.x = _x;
  objMc.y = _y;
}


呼び出し側のaddEventListenerがミソなのだが、受け側のSwfがない場合があるとエラーが出てしまう。これを止めたかったので、イベントリスナーを追加して制御してみた。本当はエラーイベントをちゃんととるべきだと思うが、そこまで余裕がなかった・・・。
また、多くのサイトのサンプルの中で、受け側のSwfの関数の定義の仕方が以下のようになっていた。

  localConn.moveObject = function():void{}


自分の所だとうまく動かないのはなぜ?
まぁ、ちゃんとクラスにしてあげると public指定もしなければならないため、しっかり関数として独立させておくべきだと自分に言い聞かせて闇に葬る。

うーん、やってみるとJavaScriptより断然楽だな。
ただ気になったのは、これを配置したHTMLを2つ以上開くと、以下のようなエラーが出てしまう点。

ArgumentError: Error #2082: このオブジェクトは既に接続されているため、接続できません。
  at flash.net::LocalConnection/connect()
  at B/frame1()


なるほど。同じコネクション名は同一PC上で1つしか利用できないということか。(ブラウザでなくPCね)
ここの回避方法は別途考慮しなければならない。頑張ろう。

ActionScript3.0 mouseEnabled で画像の透明部分だけをマウス無効にしたい

2010年05月05日 | プログラミング

2つの透明部分を含む画像をそれぞれMovieClip化し、マウスイベントで何らかの処理をしたい。

とっても簡単なことなのだが、ここにちょっとした問題が潜んでいた。


画像が重なりあった時、下のMCをクリックしたいのに、上にあるMCの透明部分が邪魔でクリックできないのだ。
オブジェクトを動かしている場合、画像が重なりあうのは必至。
これって結構迷惑な話である。

その対応として、mc.mouseEnabled = false; を利用してみる。

ただし、そう単純な話ではない。
上のMCにこれを設定してしまうと、上のMCをクリックしたつもりでも、下のMCをクリックしてしまう。そう、透明部分を無効にするのではなく、MC自体のマウスイベントを無効にするのだ。(あたりまえだけど)

なので、MCの構造自体を全くの別物に変えてあげる必要がある。


準備するものとしては、透明画像:Aの他に、Aを「ビットマップのトレース」したもの:B。
それらを以下のようなレイヤーでMovieClip化する。
 注:Aに半透明な部分が含まれる場合は、Bのアルファを0にしておく必要がある。

  targetMc
  ├ pngMc
  | └ 透明画像:A
  └ bitmapMc
    └ 「ビットマップのトレース」をしたもの:B

で、ActionScriptでは以下のように指定する。

targetMc.mouseEnabled = false;
targetMc.pngMc.mouseEnabled = false;

targetMc.bitmapMc.addEventListener( MouseEvent.MOUSE_UP, onClick );

function onClick(e){
  trace("targetMc Clicked");
}


解る人には当たり前の話だが、実際にクリックされているのは、bitmapMcなわけで、実際の画像はマウス操作ができない状態で表示されているだけ。
合わせて targetMcを mouseEnabled = false することで、bitmapMc のみをクリックのターゲットとする。

ちなみに、カーソルを指にする buttonMode = true; の指定については、targetMc でも targetMc.bitmapMc でも同じ結果になるようだ。(個人的には、addEventListener するターゲットと同じにした方が分かりやすいと思う)


また、単純に透明画像を含むMCが重なりあっていて、下のMCだけクリックしたいが、絵が重なっているところはクリックさせたくない場合にも使えるはず。


ActionScript3.0 1つのSWFでローディング

2010年04月25日 | プログラミング

ローディング処理で悩んでいたが、やっと解決。

AS2の時は普通に1フレーム目(シーン1とか)にローディングのスクリプトを書いて、gotoAndStop(2)で2フレーム目に飛ばす方法で1つのFlash内でローディングを行っていた。タイムラインベースで処理をしていたからできた技。

しかし、AS3を始めてからはクラス定義をして.asファイルで何でもやろうとしているため、ローディングはプリローダswfを用意して読み込ませる方法や、自分自身をローダーと最小限のコンテンツに抑え、別途外部のSWFや画像を子としてロードしてやる方法で対応していた。

で、どうしてもちょっと重めのコンテンツを1つのSWFで実装しなければならなかったため、悩んだ末、ある方法を思いついた。


まずは、Flash自体のドキュメントクラス定義はここでは設定しない。
そして、1フレーム目にローディングのスクリプトを書いてしまう。
ローディングが完了したらgotoAndStop(2) で2フレーム目に。(ここはAS2の時と一緒)


this.stop();
var info : LoaderInfo = root.loaderInfo;
info.addEventListener(ProgressEvent.PROGRESS, updateLoadingBar);
info.addEventListener(Event.COMPLETE, displayContent);

function updateLoadingBar(event){
  // ローディングバーを動かす処理
}

function displayContent(event){
  this.gotoAndStop(2);
}



続いて、2フレーム目にはコンテンツを配置。この時、ばらばらに配置するのではなく、すべてのコンテンツをMovieClipとしてラップし、リンケージのクラスで、Flash自体に定義する予定だったクラスを割り当てる。
重要なのは「1フレーム目に書き出し」のチェックを外すこと。これをしないと、文字通り1フレーム目に書き出されるため、ローディングバーの表示タイミングが遅れ、表示と同時にローディング終了という意味のない結果に・・・。



あとは通常通りにasファイルにスクリプトを記述するだけでよい。
他のクラスの読み込みなども、多分、問題ないはず。

っていうか、良く見たらAS2の時とやり方としては同じだった。
だとすると、みんな当たり前にこの方法でやっているってこと?実は今さらな感じかも。

書いていて気付いたが、1フレーム目のローディング中のスクリプトも、別にFlash内に書かなくてもFlash自体のドキュメントクラス定義のas(コンテンツとは別のas)に記述しても良いかも。全てasで管理した方が分かりやすいかな?後でやってみよう。


ActionScript3.0 トゥイーン系ライブラリ BetweenAS3

2010年03月15日 | プログラミング
動きのあるFlashを作成する場合、AS2の頃はFuse Kitを使っていたのだが、残念ながらAS3バージョンはあるのかないのか判らない。
そのため、制約がない場合はAS2にて開発を行っていた1年以上前。
また、もっとも有名であろうTweenerも半年くらい前には開発が終了してしまい、同時に複雑なトゥイーンも必要としていなかったこともあってずっとそのままにしていた。

だが、新しく頂いた案件で、トゥイーンが必要となったため改めて調べてみた。

で、見つかったのが BetweenAS3
使い勝手はFuse Kitなどとほとんど変わらないので違和感なし。
開発中のアルファ版とのことだが、自分のレベルでは十分すぎる完成度。


で、使い方は以下の通り。

import org.libspark.betweenas3.BetweenAS3;
import org.libspark.betweenas3.tweens.ITween;
import org.libspark.betweenas3.easing.*

// 一番簡単なトゥイーンの方法。
BetweenAS3.tween( square1Mc, { x:450 },{x:50}, 1.0).play();

// 順番に動かす場合はこんな感じ
var serialTween1:ITween = BetweenAS3.tween( square2Mc, { x:150 },{x:50,y:150}, 0.25);
var serialTween2:ITween = BetweenAS3.tween( square2Mc, { y:100 }, null, 0.2);
var serialTween3:ITween = BetweenAS3.tween( square2Mc, { x:250 },null, 0.25);
var serialTween4:ITween = BetweenAS3.tween( square2Mc, { y:150 },null, 0.2);
var serialTween5:ITween = BetweenAS3.tween( square2Mc, { x:450 },null, 0.5);
BetweenAS3.serial(serialTween1,serialTween2,serialTween3,serialTween4,serialTween5).play();

// 並行処理の場合はこんな感じ。イージングも可能。
var parallelTween1:ITween = BetweenAS3.tween( square3Mc, { x:450 },{x:50}, 1, Back.easeInOut);
var parallelTween2:ITween = BetweenAS3.tween( square4Mc, { x:450 },{x:50}, 1, Quint.easeInOut);
BetweenAS3.parallel(parallelTween1,parallelTween2).play();


考え方もシンプルで好きかも。
イージングの種類も多岐に渡っているからじっくり見てみたい。


ActionScript3.0 タイマー処理

2010年03月14日 | プログラミング

ASにはSleep関数が存在しないため、タイマーによる疑似的なスリープを設定する必要がある。


var timer:Timer = new Timer(1000 ,1); // 1000ミリ秒 = 1秒
timer.addEventListener(TimerEvent.TIMER, timerFunc);
timer.addEventListener(TimerEvent.TIMER_COMPLETE, timerCompFunc);
timer.start();

function timerFunc(Event){
trace("予定する繰り返し回数:"+timer.repeatCount);
trace("現在の繰り返し回数 :"+timer.currentCount);
}

function timerCompFunc(Event){
trace("タイマーが完了");
}


1回だけ動かす場合(Sleepとして使う場合も)、TIMER、TIMER_COMPLETE のどちらを使っても同じ結果になる。
まぁ、1回だけならTIMERでやっちゃうかな。

repeatCount、currentCountプロパティを使うことで、繰り返し全体の何回目かを取得することができる。
これによって、偶数、奇数の場合で処理を分けたりもできるようだ。

注意点としては、タイマーに指定した処理間隔にズレが生じる場合があるらしい。
これは、呼び出された関数で処理が完了してからの間隔であるため、関数内で時間がかかると、その分、次の処理に遅れが出るとのこと。
 # どこかの記事で読んだだけで、自分は未確認・・・。



ActionScript3.0 文字列操作のいろいろ

2010年03月14日 | プログラミング

AS3に染まりきっている今日この頃。
毎回同じようなことを調べていてウザいので、まずは文字列操作についてここにまとめておく。
 # 何度も調べるってことは身についていないということか・・・。

まず、変数定義。


var targetStr:String ;
var targetStr1:String ;
var targetStr2:String ;
var pattern:RegExp;
var resultObject:Object;


最初に、邪魔な文字列を削除する場合。
ずっと1つ目のやり方でやっていたのだけど、replace関数があることを発見!!(←遅いよ・・・)
入れ替えだけならかなり便利だ。


// "target006SubMc" の "Sub" を削除して "target006Mc" としたい場合(その1)
targetStr = "target006SubMc";
targetStr1 = targetStr.split("Sub").join("");

trace(targetStr,targetStr1); // →出力結果: target006SubMc target006Mc

// "target006SubMc" の "Sub" を削除して "target006Mc" としたい場合(その2)
targetStr = "target006SubMc";
targetStr1 = targetStr.replace("Sub","");

trace(targetStr,targetStr1); // →出力結果: target006SubMc target006Mc



続いて、文字列の中の一部を取り出す方法。
とりあえず3つ用意したが、「その2」は「その1」の発展形。
「その3」は正規表現を利用してみたが、数字が含まれない場合は戻り値がないからエラー処理も必要になるはず。
どれが一番よいのかは不明。
ベンチマークする予定はなし。



// "target006Mc" の "006" だけ取り出したい(その1)
targetStr = "target006Mc";
targetStr1 = targetStr.substr("target".length);
targetStr2 = targetStr1.substr(0,targetStr1.indexOf("Mc")) ;

trace(targetStr,targetStr1,targetStr2); // →出力結果: target006Mc 006Mc 006


// "target006Mc" の "006" だけ取り出したい(その2)
間違っていたので削除しました


// "target006Mc" の "006" だけ取り出したい(その3)
// AS3.0から正規表現が使えるようになった!!
targetStr = "target006Mc";
pattern = /(d+)/;
resultObject = pattern.exec(targetStr);

trace(targetStr,resultObject[0]); // →出力結果: target006Mc 006




AS3.0から正規表現が使えるようになったことは、かなり使えると思う。
でも、PerlとかPHPとかとちょっとお作法が違うので戸惑ってます。
まぁ、使えることには間違いない。


で、もうひとつ、正規表現を使った数字の金額へ補正するプログラム。



// 正規表現を使って、数字を金額用のカンマ付きの文字列として返す
var price:int = 10000000; // 1千万
trace(getPriceString( price )); // →出力結果: 10,000,000


function getPriceString( price ){
var pattern:RegExp = /(d)(?=(d{3})+(?!d))/g;
return String(price).replace(pattern, "$1,");
}



とりあえずこの位は押さえておきたい・・・。