<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>ActionScript &#8211; Mach3.laBlog</title>
	<atom:link href="https://blog.mach3.jp/tag/actionscript/feed" rel="self" type="application/rss+xml" />
	<link>https://blog.mach3.jp</link>
	<description></description>
	<lastBuildDate>Tue, 11 Jan 2011 02:11:08 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.9</generator>
	<item>
		<title>どう書いていますか？JavaScriptのクラス</title>
		<link>https://blog.mach3.jp/2011/01/11/class-for-javascript.html</link>
		
		<dc:creator><![CDATA[mach3]]></dc:creator>
		<pubDate>Tue, 11 Jan 2011 02:11:08 +0000</pubDate>
				<category><![CDATA[Laboratory]]></category>
		<category><![CDATA[ActionScript]]></category>
		<category><![CDATA[Class]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[Tips]]></category>
		<guid isPermaLink="false">http://blog.mach3.jp/?p=1375</guid>

					<description><![CDATA[JavaScriptでのクラスの話は定期的に書いているネタな気がしますが、 自分でもなかなかスタイルが定まらないので、ちょっとメモなど。 基本的な形 プラグインとか書いた事もありましたが、 結局今は、こんなオーソドックス [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p>JavaScriptでのクラスの話は定期的に書いているネタな気がしますが、<br />
自分でもなかなかスタイルが定まらないので、ちょっとメモなど。</p>



<figure class="wp-block-image"><img decoding="async" src="http://lh5.ggpht.com/_JJkNs5Ixl70/TSs4NcUMq2I/AAAAAAAABJM/i5baOC0RKck/201101110145.png" alt="どう書いていますか？JavaScriptのクラス"/></figure>



<p></p>



<span id="more-1375"></span>



<h2 class="wp-block-heading">基本的な形</h2>



<p><a href="/2010/09/jquery-class-js.html">プラグインとか書いた</a>事もありましたが、<br />
結局今は、こんなオーソドックスな形に収まっています。</p>


<pre class="wp-block-code"><span><code class="hljs language-javascript"><span class="hljs-keyword">var</span> Person = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"> name </span>)</span>{
    <span class="hljs-comment">/* コンストラクタ */</span>
    <span class="hljs-keyword">this</span>.name = name;
};
Person.prototype = {
    <span class="hljs-attr">name</span> : <span class="hljs-literal">null</span>,
    <span class="hljs-attr">sayHello</span> : <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
        <span class="hljs-built_in">console</span>.log( <span class="hljs-string">"こんにちは！"</span> + <span class="hljs-keyword">this</span>.name + <span class="hljs-string">"です！"</span> );
    }
};
<span class="hljs-keyword">var</span> john = <span class="hljs-keyword">new</span> Person( <span class="hljs-string">"まっは"</span> );
john.sayHello(); <span class="hljs-comment">// "こんにちは！まっはです！"</span>
</code></span></pre>


<h2 class="wp-block-heading">プロパティにオブジェクトを使う</h2>



<p>オブジェクトに設定値をまとめてコンストラクタに引数で渡して～っていうのは結構頻出ですが、<br />
プロパティにオブジェクトを使いつつ、インスタンスを複数作りたい場合は注意が必要。<br />
普通に書いてしまうと、どのインスタンスもprototypeのメンバを参照してしまい、<br />
或るインスタンスで値を変えると、他のインスタンスでも変わってしまうという困った事になります。</p>



<p>こちらの記事がわかりやすかったです。</p>



<ul class="wp-block-list">
<li><a href="http://zudolab.net/blog/?p=536">zudolog » prototypeでメンバにオブジェクト指定してるとハマるかも</a></li>
</ul>



<p>そこで、上の記事を参考にこんな感じ書いておきます。</p>


<pre class="wp-block-code"><span><code class="hljs language-javascript"><span class="hljs-keyword">var</span> Person = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"> option </span>)</span>{
    <span class="hljs-keyword">this</span>.option = $.extend( {}, <span class="hljs-keyword">this</span>.option ); <span class="hljs-comment">// 重要！</span>
    <span class="hljs-keyword">this</span>.setOption( option );
};
</code></span></pre>


<p>コンストラクタ一行目、optionを空のオブジェクトに格納しなおして代入しています。<br />
こうすることで、インスタンス毎に別のオブジェクトを扱えるという寸法。なるほどなるほど。</p>


<pre class="wp-block-code"><span><code class="hljs language-javascript">Person.prototype = {
    <span class="hljs-attr">option</span> : {
        <span class="hljs-attr">name</span> : <span class="hljs-literal">null</span>,
        <span class="hljs-attr">age</span> : <span class="hljs-literal">null</span>
    },
    <span class="hljs-attr">setOption</span> : <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"> option </span>)</span>{
        $.extend( <span class="hljs-keyword">this</span>.option, option );
    },
    <span class="hljs-attr">sayHello</span> : <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
        <span class="hljs-built_in">console</span>.log(
            <span class="hljs-string">"こんにちは！"</span> + <span class="hljs-keyword">this</span>.option.name + <span class="hljs-string">"です！"</span> +
            <span class="hljs-string">"永遠の"</span> + <span class="hljs-keyword">this</span>.option.age + <span class="hljs-string">"歳です！"</span>
        );
    }
};

<span class="hljs-keyword">var</span> john = <span class="hljs-keyword">new</span> Person( { <span class="hljs-attr">name</span> : <span class="hljs-string">"ジョン"</span>, <span class="hljs-attr">age</span> : <span class="hljs-number">29</span> } ),
    tom = <span class="hljs-keyword">new</span> Person( { <span class="hljs-attr">name</span> : <span class="hljs-string">"トム"</span>, <span class="hljs-attr">age</span> : <span class="hljs-number">16</span> } );

john.sayHello(); <span class="hljs-comment">// "こんにちは！ジョンです！永遠の29歳です！"</span>
tom.sayHello(); <span class="hljs-comment">// "こんにちは！トムです！永遠の16歳です！"</span>
</code></span></pre>


<p>コンストラクタの一行目の処理がない場合、<br />
上の出力結果はどちらもトム16歳になってしまいます。</p>



<h2 class="wp-block-heading">カスタムイベントを使う</h2>



<p>AS3のdispatchEventみたくカスタムイベントを利用してみます。<br />
<a href="/2010/07/jquery-trigger-eventdispatcher.html">同じ内容を確か以前書きました</a>が、まとめの為、一応。</p>


<pre class="wp-block-code"><span><code class="hljs language-javascript"><span class="hljs-keyword">var</span> Items = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"> data </span>)</span>{
    <span class="hljs-keyword">this</span>.data = $.extend( &#91;], <span class="hljs-keyword">this</span>.data, data );
};
Items.prototype = {
    <span class="hljs-attr">EVENT_ADDED</span> : <span class="hljs-string">"added"</span>,
    <span class="hljs-attr">data</span> : &#91;],
    <span class="hljs-attr">add</span> : <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"> value </span>)</span>{
        <span class="hljs-keyword">this</span>.data.push( value );
        $(<span class="hljs-keyword">this</span>).trigger( <span class="hljs-keyword">this</span>.EVENT_ADDED );
    },
    <span class="hljs-attr">bind</span> : <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"> type, handler </span>)</span>{
        $(<span class="hljs-keyword">this</span>).bind( type, handler );
    }
};
</code></span></pre>


<p>といっても、自身を格納したjQueryオブジェクトからbind/triggerを呼び出してるだけですが…。</p>


<pre class="wp-block-code"><span><code class="hljs language-javascript"><span class="hljs-keyword">var</span> MyItems = <span class="hljs-keyword">new</span> Items;
MyItems.bind( MyItems.EVENT_ADDED, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
    <span class="hljs-built_in">console</span>.log( <span class="hljs-keyword">this</span>.data );
});

MyItems.add( <span class="hljs-string">"foobar"</span> ); <span class="hljs-comment">// &#91;"foobar"]</span>
</code></span></pre>


<p>イベントリスナの登録はbindを使います。<br />
addメソッドで値を追加すると、&#8221;added&#8221;イベントに着火される仕組み。</p>



<p>あまり頻繁に使う事もない気がしますが。</p>



<hr class="wp-block-separator has-alpha-channel-opacity"/>



<p>と、こんな感じで書いておりますが、<br />
他の方がどのように書いているのかも知りたいところですね！</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>JavaScriptでAS風のEnterFrameの実装を考えてみる</title>
		<link>https://blog.mach3.jp/2010/11/09/js-enterframe-like-as.html</link>
		
		<dc:creator><![CDATA[mach3]]></dc:creator>
		<pubDate>Tue, 09 Nov 2010 02:44:18 +0000</pubDate>
				<category><![CDATA[Laboratory]]></category>
		<category><![CDATA[ActionScript]]></category>
		<category><![CDATA[Flash]]></category>
		<category><![CDATA[GitHub]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[jsdoit]]></category>
		<guid isPermaLink="false">http://blog.mach3.jp/?p=1068</guid>

					<description><![CDATA[jQueryのアニメーション機能はあまりにも便利ですが、 刻々と位置情報などを更新していくタイプの処理には向いていません。 こういうのが得意なのは、例えばASにおけるEnterFrameイベントなのですが、 似たような実 [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p>jQueryのアニメーション機能はあまりにも便利ですが、<br />
刻々と位置情報などを更新していくタイプの処理には向いていません。<br />
こういうのが得意なのは、例えばASにおけるEnterFrameイベントなのですが、<br />
似たような実装をJavaScriptで出来ないだろうか、というのが今回の趣旨です。</p>



<figure class="wp-block-image"><img decoding="async" src="http://lh6.ggpht.com/_JJkNs5Ixl70/TNi0gYIE9NI/AAAAAAAABFU/aHSbRQxDMUM/201011091137.png" alt="EnterFrame on JavaScript"/></figure>



<p></p>



<span id="more-1068"></span>



<h2 class="wp-block-heading">生のsetInterval/setTimeoutでいいんじゃない？</h2>



<p>ごもっとも。そんなに複雑にはなりませんしね。<br />
ただ、もうちょっと直感的に扱いたかったり、管理し易いクラスが欲しかった。<br />
さらに強いて言えば、「書いてみたかった」のです。</p>



<p>以下に、2通りのパターンをライブラリにしてみました。<br />
さりげなくjsdo.itデビューも果たしてみましたよ！</p>



<p>※いずれもjQueryを使用</p>



<h2 class="wp-block-heading">Timeline.js</h2>



<p>jQueryのbind/triggerを使ってイベントを拾っていくタイプです。<br />
AS3のaddEventListenerに最も近くて馴染み易いのではないでしょうか。<br />
…相変わらずコメントのほうが長い！</p>



<dl>
<dt>Source</dt>
<dd><a href="https://github.com/mach3/js-timeline-enterframe/blob/master/timeline.js">timeline.js at master from mach3&#8217;s js-timeline-enterframe &#8211; GitHub</a></dd>
<dt>Demo</dt>
<dd><a href="http://jsdo.it/mach3/wvRl">JavaScriptでEnterFrame：(1) Timeline.js &#8211; jsdo.it</a></dd>
</dl>



<h3 class="wp-block-heading">使い方</h3>


<pre class="wp-block-code"><span><code class="hljs language-javascript"><span class="hljs-keyword">var</span> tl = <span class="hljs-keyword">new</span> Timeline( <span class="hljs-number">30</span> ); <span class="hljs-comment">// 引数はfps</span>
tl.bind( <span class="hljs-string">"enterFrame"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{ <span class="hljs-comment">/* do something */</span> } );
tl.start(); <span class="hljs-comment">// タイムライン開始</span>
</code></span></pre>


<p>コンストラクタの引数は省略可能。FPSの初期値は30です。</p>


<pre class="wp-block-code"><span><code class="hljs language-javascript"><span class="hljs-keyword">var</span> func = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{ <span class="hljs-comment">/* do something */</span> };
tl.bind( tl.EVENT_ENTER_FRAME, func ); <span class="hljs-comment">// イベントリスナの追加</span>
tl.unbind( tl.EVENT_ENTER_FRAME, func ); <span class="hljs-comment">// イベントリスナの削除</span>
</code></span></pre>


<p>イベントリスナを削除したい時用に、unbindのwrapperも用意してございます。<br />
また、イベント名（enterFrame）は定数<em>EVENT_ENTER_FRAME</em>に格納してあります。</p>



<h2 class="wp-block-heading">EnterFrame.js</h2>



<p>こちらはもう少し簡略化したタイプで、わざわざjQueryのbind/triggerを介しません。<br />
若干のパフォーマンス向上が見込めるのではないかと予想。<br />
ただ、ActionScriptの実装とはだいぶかけ離れてしまった…</p>



<dl>
<dt>Source</dt>
<dd><a href="https://github.com/mach3/js-timeline-enterframe/blob/master/enterframe.js">enterframe.js at master from mach3&#8217;s js-timeline-enterframe &#8211; GitHub</a></dd>
<dt>Demo</dt>
<dd><a href="http://jsdo.it/mach3/9pRA">JavaScriptでEnterFrame：(2) EnterFrame.js &#8211; jsdo.it</a></dd>
</dl>



<h3 class="wp-block-heading">使い方</h3>


<pre class="wp-block-code"><span><code class="hljs language-javascript"><span class="hljs-keyword">var</span> ef = <span class="hljs-keyword">new</span> EnterFrame( <span class="hljs-number">30</span> ); <span class="hljs-comment">// インスタンス生成</span>
ef.add( <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{ <span class="hljs-comment">/* do something */</span> });
ef.start();
</code></span></pre>


<p>addメソッドでイベントリスナを追加。その他はTimelineと同様です。</p>


<pre class="wp-block-code"><span><code class="hljs language-javascript"><span class="hljs-keyword">var</span> func = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{ <span class="hljs-comment">/* do something */</span> } );
ef.add( func ); <span class="hljs-comment">// イベントリスナの追加</span>
ef.remove( func ); <span class="hljs-comment">// イベントリスナの削除</span>
</code></span></pre>


<p>削除にはremoveメソッドを使用します。</p>



<h2 class="wp-block-heading">まとめ</h2>



<p>画面いっぱい使ってヌルヌル動くギャラリーなんかは、<br />
いがいと作り易いかもしれないですね。</p>



<h2 class="wp-block-heading">追記 : 2013/10/13</h2>



<p>今なら requestAnimationFrameとかもあるので、setTimeout等を使うより<br />
こちらがある場合は利用した方がよさそうですね。<br />
そのうち記事になると思います。</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>様々な言葉でJSONを弄ってみるメモ</title>
		<link>https://blog.mach3.jp/2010/10/22/json-on-various-lang.html</link>
		
		<dc:creator><![CDATA[mach3]]></dc:creator>
		<pubDate>Fri, 22 Oct 2010 05:35:23 +0000</pubDate>
				<category><![CDATA[Laboratory]]></category>
		<category><![CDATA[ActionScript]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[JSON]]></category>
		<category><![CDATA[Python]]></category>
		<category><![CDATA[Ruby]]></category>
		<guid isPermaLink="false">http://blog.mach3.jp/?p=913</guid>

					<description><![CDATA[引き続きJSONのお話ですが、 連携に向いているフォーマットだ、という事はつまり 他の言語でを扱う方法を知っておかねばならないという事。 という訳で、軽くメモっておきます。 次のようなJSONフォーマットの文字列が 「s [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p>引き続きJSONのお話ですが、<br />
連携に向いているフォーマットだ、という事はつまり<br />
他の言語でを扱う方法を知っておかねばならないという事。<br />
という訳で、軽くメモっておきます。</p>



<span id="more-913"></span>



<p>次のようなJSONフォーマットの文字列が<br />
「<em>str</em>」に格納されていると想定します。</p>


<pre class="wp-block-code"><span><code class="hljs language-json">{
    <span class="hljs-attr">"status"</span> : <span class="hljs-string">"success"</span>,
    <span class="hljs-attr">"content"</span> : &#91;
        { <span class="hljs-attr">"id"</span> : <span class="hljs-number">1</span> , <span class="hljs-attr">"message"</span> : <span class="hljs-string">"Nice to meet you, world !"</span> },
        { <span class="hljs-attr">"id"</span> : <span class="hljs-number">2</span> , <span class="hljs-attr">"message"</span> : <span class="hljs-string">"Hello, world !"</span> },
        { <span class="hljs-attr">"id"</span> : <span class="hljs-number">3</span> , <span class="hljs-attr">"message"</span> : <span class="hljs-string">"Hello again, world !"</span> }
    ]
}
</code></span></pre>


<p>この文字列をオブジェクトとしてロードし、<br />
それをもう一度JSON文字列として出力するテストです。</p>



<h2 class="wp-block-heading">PHP</h2>


<pre class="wp-block-code"><span><code class="hljs language-php">$php_obj = json_decode( $str ); <span class="hljs-comment">// JSONからPHPオブジェクトを生成</span>
$json_string = json_encode( $php_obj ); <span class="hljs-comment">// PHPオブジェクトからJSONを生成</span>
</code></span></pre>


<p>さすが関数から生まれてきたような言語のPHP。<br />
JSONだって関数一発です。</p>



<h2 class="wp-block-heading">Ruby</h2>



<p>Rubyは1.9からjsonライブラリが標準搭載されているそうです。<br />
当方の環境も1.9だったのでそのままそれを利用させて頂きます。</p>



<p><a href="http://doc.ruby-lang.org/ja/1.9.1/library/json.html">library json</a></p>


<pre class="wp-block-code"><span><code class="hljs language-php"><span class="hljs-keyword">require</span> <span class="hljs-string">"json"</span> <span class="hljs-comment"># jsonライブラリが必要</span>
ruby_obj = JSON.load( str ) <span class="hljs-comment"># JSONからRubyオブジェクトを生成</span>
json_string = JSON.generate( ruby_obj ) <span class="hljs-comment"># RubyオブジェクトからJSONを生成</span>
</code></span></pre>


<p>1.9未満だと他のライブラリに依存する事になります。<br />
面倒なので（!?）ここでは割愛。</p>



<h2 class="wp-block-heading">ActionScript3</h2>



<p>AS3はJSONのパーサが標準装備されていないので、<br />
<em>as3corelib</em>を使わせていただきます。</p>



<p><a href="http://github.com/mikechambers/as3corelib">mikechambers&#8217;s as3corelib at master &#8211; GitHub</a></p>


<pre class="wp-block-code"><span><code class="hljs language-javascript"><span class="hljs-keyword">import</span> com.adobe.serialization.json.JSON; <span class="hljs-comment">// as3corelibからインポート</span>

<span class="hljs-comment">// 中略</span>

<span class="hljs-keyword">var</span> as3_obj:<span class="hljs-built_in">Object</span> = <span class="hljs-built_in">JSON</span>.decode( str ); <span class="hljs-comment">// JSONからAS3オブジェクトを生成</span>
<span class="hljs-keyword">var</span> json_string:<span class="hljs-built_in">String</span> = <span class="hljs-built_in">JSON</span>.encode( as3_obj ); <span class="hljs-comment">// AS3オブジェクトからJSONを生成</span>
</code></span></pre>


<p>AS3というとXMLと相性も良いのでそちらをチョイスする事が多かったですが、<br />
データ量によっては帯域節約の為にJSONを使うのも大いにありですね。その後も楽ですし。</p>



<hr class="wp-block-separator has-alpha-channel-opacity"/>



<p>XMLとかYAMLとか色々ありますが、JavaScriptの隆盛もあって<br />
最近はJSONフォーマットがもてはやされている感じですね。<br />
学習コストも極めて少なくて済むので、今後とも重宝されそうです。</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>備忘録： Flashライブラリ内のビットマップを表示しようとして困った （～CS4）</title>
		<link>https://blog.mach3.jp/2010/08/04/display-bitmap-in-flashlibrary.html</link>
		
		<dc:creator><![CDATA[mach3]]></dc:creator>
		<pubDate>Wed, 04 Aug 2010 21:49:00 +0000</pubDate>
				<category><![CDATA[Laboratory]]></category>
		<category><![CDATA[ActionScript]]></category>
		<category><![CDATA[Flash]]></category>
		<guid isPermaLink="false">http://lab.mach3.jp/2010/08/04/%e5%82%99%e5%bf%98%e9%8c%b2%ef%bc%9a-flash%e3%83%a9%e3%82%a4%e3%83%96%e3%83%a9%e3%83%aa%e5%86%85%e3%81%ae%e3%83%93%e3%83%83%e3%83%88%e3%83%9e%e3%83%83%e3%83%97%e3%82%92%e8%a1%a8%e7%a4%ba%e3%81%97.html</guid>

					<description><![CDATA[タイトルの通りですが、ちょっとつまづいたポイントがあったのでメモ。 Flashの「ライブラリ」に登録したビットマップデータの表示の仕方です。 そんなに頻繁にやる事ではなさそうですが…。 リンケージを設定 まずライブラリ内 [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p>タイトルの通りですが、ちょっとつまづいたポイントがあったのでメモ。<br />
Flashの「ライブラリ」に登録したビットマップデータの表示の仕方です。<br />
そんなに頻繁にやる事ではなさそうですが…。</p>



<span id="more-2254"></span>



<h2 class="wp-block-heading">リンケージを設定</h2>



<p>まずライブラリ内でリンケージを設定します。</p>



<figure class="wp-block-image"><img decoding="async" src="http://lh5.ggpht.com/_JJkNs5Ixl70/TFlftVVmqOI/AAAAAAAAA_o/qOEPN-x0UI4/s800/201008042139.png" alt="リンケージの設定"/></figure>



<p></p>



<p>お好きなクラス名を入力。<br />
基本クラスは自動的にBitmapDataに設定されます。</p>



<h2 class="wp-block-heading">クラス化→配置</h2>


<pre class="wp-block-code"><span><code class="hljs language-javascript"><span class="hljs-keyword">var</span> cls:Class = getDefinitionByName(<span class="hljs-string">"MyImage"</span>) <span class="hljs-keyword">as</span> Class;
addChild( <span class="hljs-keyword">new</span> Bitmap( <span class="hljs-keyword">new</span> cls() ) );
</code></span></pre>


<p>ライブラリにあるクラスを呼び出すには<a href="http://livedocs.adobe.com/flash/9.0_jp/ActionScriptLangRefV3/flash/utils/package.html#getDefinitionByName()">getDefinitionByName</a>を使います。<br />
MyImageはBitmapDataを継承しているので、<br />
Bitmapのコンストラクタにぶん投げてステージに配置します。</p>



<h2 class="wp-block-heading">FlashCS4以下ではエラーになる</h2>



<p>ここで困った事に、CS3でパブリッシュ中に下記のエラーが表示されました。<br />
（後述のリンク先に記載されてますが、CS4迄は同じ症状のようです。）</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
<p>myimage$iinit() の引数の数が一致していません。2 が必要ですが、0 が指定されました。</p>
</blockquote>



<p>どうやらコンストラクタに引数を二つ渡さなければならない様子。<br />
継承元のBitmapDataにあわせてwidth/heightを渡すのかな？と思いましたが<br />
それだとスクリプト上で一々画像の縦横サイズを記述しておかなければならない。<br />
これは、大変美しくない。</p>



<p>が、調べている内に余計な心配だったことが発覚しました。</p>



<p><a href="http://www.fumiononaka.com/TechNotes/Flash/FN1005003.html">N1005003 &#8211; [ライブラリ]のビットマップに自動設定したクラスに渡す引数 &#8211; Flash : テクニカルノート</a></p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
<p>ふたつの引数というのはインスタンスの幅と高さです。これは、「自動生成された」クラスの継承するBitmapDataクラスのコンストラクタメソッドが、同じふたつの引数を必須としていることに対応していると考えられます。もっとも、その数値は実際のビットマップの幅と高さでなくて構いません。引数にどんな数値を指定しようが、結果として値はビットマップの実際の幅と高さになます[*1]。また、後から変えられません(読取り専用)。したがって、引数には0をふたつ渡せば結構です。</p>
</blockquote>



<p>つまり、引数に何を突っ込もうが<br />
ちゃんと画像サイズはオリジナルの物が使用されるという事ですね。安心。<br />
したがって引数には適当な物をつっこんでおきましょう。</p>


<pre class="wp-block-code"><span><code class="hljs language-javascript"><span class="hljs-keyword">var</span> cls:Class = getDefinitionByName(<span class="hljs-string">"MyImage"</span>) <span class="hljs-keyword">as</span> Class;
addChild( <span class="hljs-keyword">new</span> Bitmap( <span class="hljs-keyword">new</span> cls( <span class="hljs-number">0</span>, <span class="hljs-number">0</span> ) ) );
</code></span></pre>


<p>尚、引数の型には縛りがないようで、<br />
文字列や配列等いろいろ突っ込んでみましたが正常に動作します。</p>


<pre class="wp-block-code"><span><code class="hljs language-javascript">addChild( <span class="hljs-keyword">new</span> Bitmap( <span class="hljs-keyword">new</span> cls( <span class="hljs-string">"しごと"</span>, <span class="hljs-string">"めんどい"</span> ) ) );
</code></span></pre>


<p>お好みで彩りを添えてあげてください。</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>実験室: jQuery.triggerを使ってEventDispatcher(AS3)のような事をしてみる</title>
		<link>https://blog.mach3.jp/2010/07/01/jquery-trigger-eventdispatcher.html</link>
		
		<dc:creator><![CDATA[mach3]]></dc:creator>
		<pubDate>Thu, 01 Jul 2010 01:05:00 +0000</pubDate>
				<category><![CDATA[Laboratory]]></category>
		<category><![CDATA[ActionScript]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[Prototype.js]]></category>
		<guid isPermaLink="false">http://lab.mach3.jp/2010/07/01/%e5%ae%9f%e9%a8%93%e5%ae%a4-jquery-trigger%e3%82%92%e4%bd%bf%e3%81%a3%e3%81%a6eventdispatcheras3%e3%81%ae%e3%82%88%e3%81%86%e3%81%aa%e4%ba%8b%e3%82%92%e3%81%97%e3%81%a6%e3%81%bf%e3%82%8b.html</guid>

					<description><![CDATA[AS3にある多くのクラスの中でもお世話になる事が多いのが、EventDispatcher。 カスタムイベントを登録して送出したり出来るので大変便利。 本稿は、JavaScriptでも似た事が出来ないかなぁと試行錯誤してみ [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p>AS3にある多くのクラスの中でもお世話になる事が多いのが、EventDispatcher。<br />
カスタムイベントを登録して送出したり出来るので大変便利。<br />
本稿は、JavaScriptでも似た事が出来ないかなぁと試行錯誤してみたログです。</p>



<span id="more-2249"></span>



<h2 class="wp-block-heading">AS3のEventDispatcher</h2>



<p>まず、AS3のEventDispatcherはどのような代物なのか。<br />
<a href="http://livedocs.adobe.com/flash/9.0_jp/ActionScriptLangRefV3/flash/events/EventDispatcher.html">EventDispatcher &#8211; ActionScript 3.0 コンポーネントリファレンスガイド</a></p>


<pre class="wp-block-code"><span><code class="hljs language-php"><span class="hljs-keyword">public</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Example</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">EventDispatcher</span> </span>{

    <span class="hljs-keyword">public</span> <span class="hljs-keyword">static</span> <span class="hljs-keyword">const</span> EVENT_CHANGE:String = <span class="hljs-string">"change"</span>;
    <span class="hljs-keyword">private</span> <span class="hljs-keyword">var</span> value:String = <span class="hljs-string">"Hello, World!"</span>;

    <span class="hljs-comment">/* 中略 */</span>

    <span class="hljs-keyword">public</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">setValue</span><span class="hljs-params">( str:String )</span> : <span class="hljs-title">void</span> </span>{
        <span class="hljs-keyword">if</span> ( str !== value ){
            value = str;
            dispatchEvent( <span class="hljs-keyword">new</span> Event( EVENT_CHANGE ) );
        }
    }
}
</code></span></pre>


<p>EventDispatcherは、<em>dispatchEvent</em>メソッドを使うことで、<br />
任意のタイミングで、任意のイベントを送出（着火）する事が出来ます。<br />
イベントを受けとるのは、ご存知<em>addEventListener</em>です。</p>


<pre class="wp-block-code"><span><code class="hljs language-javascript"><span class="hljs-keyword">var</span> obj:Example = <span class="hljs-keyword">new</span> Example();
obj.addEventListener( Example.EVENT_CAHNGE, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"> e:Event </span>)</span>{
    trace( <span class="hljs-string">"値が変更されました"</span> );
});
obj.setValue(<span class="hljs-string">"Hello, ActionScript!"</span>);
</code></span></pre>


<p>この例では、Example.value の値が変更された時に<br />
「change」イベントが送出（dispatch）されます。<br />
なかなか便利で、重宝しています。</p>



<h2 class="wp-block-heading">jQueryのtriggerを使ってみる</h2>



<p>このdispatchEventに値する物が、jQueryの<em>trigger</em>です。<br />
<a href="http://api.jquery.com/trigger/">.trigger() – jQuery API</a><br />
clickやsubmit等の既存のイベントは勿論、カスタムイベントの送出も出来ます。</p>


<pre class="wp-block-code"><span><code class="hljs language-javascript">$( element ).bind( <span class="hljs-string">"myevent"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">e</span>)</span>{
    alert(<span class="hljs-string">"My Event Fired !"</span>);
});
$( element ).trigger(<span class="hljs-string">"myevent"</span>);
</code></span></pre>


<p>せっかくなので（？）、AS3風味に一例書いてみたいと思います。</p>


<pre class="wp-block-code"><span><code class="hljs language-javascript"><span class="hljs-keyword">var</span> obj = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{};
obj.prototype = {

    <span class="hljs-attr">EVENT_CHANGE</span>: <span class="hljs-string">"change"</span>,
    <span class="hljs-attr">jq</span>:$(<span class="hljs-keyword">this</span>),
    <span class="hljs-attr">value</span> : <span class="hljs-string">"Hello, World !"</span>,

    <span class="hljs-attr">create</span> : <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
        <span class="hljs-comment">// do something</span>
        <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>;
    },
    <span class="hljs-attr">setValue</span> : <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"> str </span>)</span>{
        <span class="hljs-keyword">if</span>( str !== <span class="hljs-keyword">this</span>.value ){
            <span class="hljs-keyword">this</span>.value = str;
            <span class="hljs-comment">// 値が変更された場合に"change"イベント送出</span>
            <span class="hljs-keyword">this</span>.trigger( <span class="hljs-keyword">this</span>.EVENT_CHANGE );
        }
    },
    <span class="hljs-attr">bind</span> : <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"> evt, func </span>)</span>{
        <span class="hljs-keyword">this</span>.jq.bind( evt, func );
    },
    <span class="hljs-attr">trigger</span> : <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"> evt </span>)</span>{
        <span class="hljs-keyword">this</span>.jq.trigger( evt );
    }
};
</code></span></pre>


<p>やっている事は基本的に上のASの例と同様で、<br />
保持している値（value）が変更された時に、<em>trigger</em>メソッドでイベントに着火する仕組みです。</p>



<p>「jq:$(this)」の所がちょっと気持ち悪いです…。<br />
jQuery.prototypeを継承してしまおうかとも思ったのですが、<br />
余計なものがボンボコ引き継がれてしまって把握するのが大変なので、このような形に。<br />
もう少しスマートな方法は無いものでしょうか（募集！）。</p>



<p>イベントハンドラの登録は、bindで普通に行ないます。</p>


<pre class="wp-block-code"><span><code class="hljs language-javascript"><span class="hljs-keyword">var</span> myObj = <span class="hljs-keyword">new</span> obj().create();
myObj.bind( myObj.EVENT_CHANGE, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">e</span>)</span>{
    alert(<span class="hljs-string">"値が変更されました。"</span>);
});
myObj.setValue(<span class="hljs-string">"Hello, JavaScript !"</span>);
</code></span></pre>


<p>カスタムイベントが上手く使えれば、<br />
オブジェクト同士の連携等も見通しの良いソースで実現できそう。<br />
例えば、外部データと通信・監視させて、データに変更があった時にイベントハンドラを呼ぶ<br />
みたいな実装が、分かりやすく書けそうです。<br />
（そういうのはWebWorkersが得意そうではありますが）</p>



<p>が、やっぱりこういう書き方をするのならPrototype.jsの方が使い勝手は良いですね。</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>AS3実験室: SimpleButtonクラスをトグル出来るように拡張した「SimpleToggleButton」</title>
		<link>https://blog.mach3.jp/2010/05/24/as3-simpletogglebutton.html</link>
		
		<dc:creator><![CDATA[mach3]]></dc:creator>
		<pubDate>Mon, 24 May 2010 00:20:00 +0000</pubDate>
				<category><![CDATA[Laboratory]]></category>
		<category><![CDATA[ActionScript]]></category>
		<category><![CDATA[Flash]]></category>
		<category><![CDATA[SimpleButton]]></category>
		<guid isPermaLink="false">http://lab.mach3.jp/2010/05/24/as3%e5%ae%9f%e9%a8%93%e5%ae%a4-simplebutton%e3%82%af%e3%83%a9%e3%82%b9%e3%82%92%e3%83%88%e3%82%b0%e3%83%ab%e5%87%ba%e6%9d%a5%e3%82%8b%e3%82%88%e3%81%86%e3%81%ab%e6%8b%a1%e5%bc%b5%e3%81%97%e3%81%9f.html</guid>

					<description><![CDATA[AS3実験室: 画像を読み込んでボタンにする～SimpleButtonの巻 AS3実験室: 画像を読み込んでボタンにするに続いて、 もういい加減にしなさいというテーマですが、書いてみちゃいました。 今回は、SimpleB [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p><a href="/2010/05/as3-simplebutton-with-bitmap.html">AS3実験室: 画像を読み込んでボタンにする～SimpleButtonの巻</a><br />
<a href="/2010/05/as3-bitmapbutton.html">AS3実験室: 画像を読み込んでボタンにする</a>に続いて、<br />
もういい加減にしなさいというテーマですが、書いてみちゃいました。<br />
今回は、SimpleButtonクラスを拡張してselectedプロパティを追加してトグル出来るようにしました。</p>



<figure class="wp-block-image"><img decoding="async" src="http://lh3.ggpht.com/_JJkNs5Ixl70/S_lHhjin2OI/AAAAAAAAA6c/LrhVY9HeUuY/s800/201005232315.png" alt="SimpleToggleButton"/></figure>



<p></p>



<span id="more-33"></span>



<p><a href="https://docs.google.com/uc?id=0B7k6jIWYcmkLYmVmMzBhNjktNjcxYi00MTg3LWExNDUtZjY0NGRjNjVmMDk3&amp;export=download&amp;hl=ja">Download : simpletogglebutton.as3.zip</a></p>



<p>大した行数はないので貼りつけておきます。</p>


<pre class="wp-block-code"><span><code class="hljs language-php">package jp.mach3.ui
{
    import flash.display.DisplayObject;
    import flash.display.SimpleButton;

    <span class="hljs-keyword">public</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">SimpleToggleButton</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">SimpleButton</span>
    </span>{
        <span class="hljs-keyword">private</span> <span class="hljs-keyword">var</span> _upState:DisplayObject;
        <span class="hljs-keyword">private</span> <span class="hljs-keyword">var</span> _selectedState:DisplayObject;
        <span class="hljs-keyword">private</span> <span class="hljs-keyword">var</span> _selected:Boolean = <span class="hljs-keyword">false</span>;

        <span class="hljs-keyword">public</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">SimpleToggleButton</span><span class="hljs-params">( upState:DisplayObject = null,
        overState:DisplayObject = null, downState:DisplayObject = null,
        hitTestState:DisplayObject = null, selectedState:DisplayObject = null )</span>
        </span>{
            super(upState, overState, downState, hitTestState);
            _selectedState = selectedState;
            render();
        }

        <span class="hljs-keyword">public</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">render</span><span class="hljs-params">(n:* = null)</span>:<span class="hljs-title">void</span>
        </span>{
            _upState = upState;
        }

        <span class="hljs-keyword">public</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">set</span> <span class="hljs-title">selected</span><span class="hljs-params">( selected:Boolean )</span>:<span class="hljs-title">void</span>
        </span>{
            <span class="hljs-keyword">if</span> (selected) {
                upState = _selectedState;
                mouseEnabled = <span class="hljs-keyword">false</span>;
            } <span class="hljs-keyword">else</span> {
                upState = _upState;
                mouseEnabled = <span class="hljs-keyword">true</span>;
            }
            _selected = selected;
        }

        <span class="hljs-keyword">public</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">get</span> <span class="hljs-title">selected</span><span class="hljs-params">()</span>:<span class="hljs-title">Boolean</span>
        </span>{
            <span class="hljs-keyword">return</span> _selected;
        }

        <span class="hljs-keyword">public</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">set</span> <span class="hljs-title">selectedState</span><span class="hljs-params">( selectedState:DisplayObject )</span>:<span class="hljs-title">void</span>
        </span>{
            _selectedState = selectedState;
        }

        <span class="hljs-keyword">public</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">get</span> <span class="hljs-title">selectedState</span><span class="hljs-params">()</span>:<span class="hljs-title">DisplayObject</span>
        </span>{
            <span class="hljs-keyword">return</span> _selectedState;
        }

    }
}
</code></span></pre>


<h2 class="wp-block-heading">SimpleButtonと違う点</h2>



<p><a href="http://livedocs.adobe.com/flash/9.0_jp/ActionScriptLangRefV3/flash/display/SimpleButton.html">SimpleButton &#8211; ActionScript 3.0 コンポーネントリファレンスガイド</a><br />
基本的な使い方はSimpleButtonと同じですが、<br />
SimpleToggleButtonクラスには以下の二つのメンバが追加されています。</p>



<dl>
<dt>selectedState : DisplayObject</dt>
<dd>選択状態を表示する為のDisplayObjectを、upStateやoverState等と同様に設定します。</dd>
<dt>selected : Boolean</dt>
<dd>トグルに使用するBool値。trueにする事でselectedStateが表示され、マウスイベントが効かなくなります。falseにすると元に戻ります。</dd>
<dt>render()</dt>
<dd>コンストラクタではなく、プロパティアクセスでDisplayObjectを設定した場合に、これを呼ぶ必要があります。苦し紛れのメソッド。後述。</dd>
</dl>



<p>また、コンストラクタの引数が一つ追加されています。</p>


<pre class="wp-block-code"><span><code class="hljs language-javascript">SimpleToggleButton( upState:DisplayObject = <span class="hljs-literal">null</span>, <span class="hljs-attr">overState</span>:DisplayObject = <span class="hljs-literal">null</span>, <span class="hljs-attr">downState</span>:DisplayObject = <span class="hljs-literal">null</span>, <span class="hljs-attr">hitTestState</span>:DisplayObject = <span class="hljs-literal">null</span>, <span class="hljs-attr">selectedState</span>:DisplayObject = <span class="hljs-literal">null</span> )
</code></span></pre>


<dl>
<dt>selectedState</dt>
<dd>選択状態のDisplayObjectを格納します。</dd>
</dl>



<h2 class="wp-block-heading">簡単な使い方(1)</h2>



<p>myUpState、myOverState、myDownState、myHitTestState、mySelectedStateには<br />
それぞれの状態に使用するDisplayObjectが格納されていると想定します。</p>


<pre class="wp-block-code"><span><code class="hljs language-php"><span class="hljs-keyword">var</span> myButton:SimpleToggleButton = <span class="hljs-keyword">new</span> SimpleToggleButton();

myButton.upState = myUpState;
myButton.overState = myOverState
myButton.downState = myDownState;
myButton.hitTestState = myHitTestState;
myButton.selectedState = mySelectedState;
myButton.render(); <span class="hljs-comment">// Don't miss it !</span>

addChild( myButton );
</code></span></pre>


<p>選択状態にトグルする場合は、プロパティアクセスでselectedをtrueにします。</p>


<pre class="wp-block-code"><span><code class="hljs language-javascript">myButton.selected = <span class="hljs-literal">true</span>;
</code></span></pre>


<h2 class="wp-block-heading">簡単な使い方(2)</h2>



<p>SimpleButton同様、プロパティアクセスでDisplayObjectを設定する事も出来ますが、<br />
その場合、格納し終えた後にrender()を呼ぶ必要があります。</p>


<pre class="wp-block-code"><span><code class="hljs language-php"><span class="hljs-keyword">var</span> myButton:SimpleToggleButton = <span class="hljs-keyword">new</span> SimpleToggleButton();

myButton.upState = myUpState;
myButton.overState = myOverState
myButton.downState = myDownState;
myButton.hitTestState = myHitTestState;
myButton.selectedState = mySelectedState;
myButton.render(); <span class="hljs-comment">// Don't miss it !</span>

addChild( myButton );
</code></span></pre>


<p>render()は、upStateをプライベートメンバの_upStateにコピーするだけのメソッドです。<br />
このクラスは、upStateをselectedStateで上書きする事でトグルを実現しているので<br />
この処理がないとselectedが再びtrueにされた場合に表示するためのDisplayObjectが見つからなくなります。</p>



<p>本来であれば、upStateのセッターで記述すべきものなのですが…<br />
元祖SimpleButtonのupStateが内部でどのように処理されているかがわからなかった為、<br />
このようなスマートではない方法を取ることになりました。</p>



<p>もっと良い方法はないだろうか…<br />
（え、まだつづくの！？）</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>AS3備忘録: 設定用のXMLファイルへのパスをflashvarsで指定する</title>
		<link>https://blog.mach3.jp/2010/05/16/as3-xml-on-flashvars.html</link>
		
		<dc:creator><![CDATA[mach3]]></dc:creator>
		<pubDate>Sun, 16 May 2010 23:58:00 +0000</pubDate>
				<category><![CDATA[Laboratory]]></category>
		<category><![CDATA[ActionScript]]></category>
		<category><![CDATA[Flash]]></category>
		<category><![CDATA[XML]]></category>
		<guid isPermaLink="false">http://lab.mach3.jp/2010/05/16/as3%e5%82%99%e5%bf%98%e9%8c%b2-%e8%a8%ad%e5%ae%9a%e7%94%a8%e3%81%aexml%e3%83%95%e3%82%a1%e3%82%a4%e3%83%ab%e3%81%b8%e3%81%ae%e3%83%91%e3%82%b9%e3%82%92flashvars%e3%81%a7%e6%8c%87%e5%ae%9a%e3%81%99.html</guid>

					<description><![CDATA[先日取引先から、納品したFlashについて問い合わせがありまして、 「設定用のXMLファイルの場所をswfと一緒に移動したら動かなくなった」とのこと。 XMLファイルへのパスをスタティックに指定してしまうと、 こういう事 [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p>先日取引先から、納品したFlashについて問い合わせがありまして、<br />
<em>「設定用のXMLファイルの場所をswfと一緒に移動したら動かなくなった」</em>とのこと。</p>



<p>XMLファイルへのパスをスタティックに指定してしまうと、<br />
こういう事態に対処出来なくなり、メンテナンス性を欠くのでは？<br />
という事でflashvarsでXMLファイルへのパスを渡す方式にして解決しました。</p>



<span id="more-37"></span>



<p>こんな感じでflashvarsは渡してあげます。</p>


<pre class="wp-block-code"><span><code class="hljs language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">param</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"flashvars"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"xmlpath=/the/path/to/"</span> /&gt;</span>
</code></span></pre>


<p>AS3で受け取ります。</p>


<pre class="wp-block-code"><span><code class="hljs language-php"><span class="hljs-keyword">public</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Main</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">MovieClip</span></span>{
    <span class="hljs-keyword">public</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Main</span><span class="hljs-params">()</span> </span>{
        <span class="hljs-keyword">var</span> xmlpath = loaderInfo.parameters&#91;<span class="hljs-string">"xmlpath"</span>];
        <span class="hljs-keyword">var</span> ul:URLLoader = <span class="hljs-keyword">new</span> URLLoader;
        ul.addEventListener(Event.COMPLETE, onXmlLoaded);
        ul.load( <span class="hljs-keyword">new</span> URLRequest( xmlpath + <span class="hljs-string">"config.xml"</span> ) );
    }
    <span class="hljs-keyword">private</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">onXmlLoaded</span><span class="hljs-params">(e:Event)</span>:<span class="hljs-title">void</span></span>{
        <span class="hljs-comment">// do something</span>
    }
}
</code></span></pre>


<p>モノによってはそうすべきではないケースもあるかもしれませんが、<br />
お客さんが直接手作業で更新するようなローテーションバナー等は<br />
こういう仕様にしてあげたほうが安心ですね。</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>AS3実験室: 画像を読み込んでボタンにする～SimpleButtonの巻</title>
		<link>https://blog.mach3.jp/2010/05/03/as3-simplebutton-with-bitmap.html</link>
		
		<dc:creator><![CDATA[mach3]]></dc:creator>
		<pubDate>Mon, 03 May 2010 21:56:00 +0000</pubDate>
				<category><![CDATA[Laboratory]]></category>
		<category><![CDATA[ActionScript]]></category>
		<category><![CDATA[Adobe]]></category>
		<category><![CDATA[Bitmap]]></category>
		<category><![CDATA[Flash]]></category>
		<category><![CDATA[SimpleButton]]></category>
		<guid isPermaLink="false">http://lab.mach3.jp/2010/05/03/as3%e5%ae%9f%e9%a8%93%e5%ae%a4-%e7%94%bb%e5%83%8f%e3%82%92%e8%aa%ad%e3%81%bf%e8%be%bc%e3%82%93%e3%81%a7%e3%83%9c%e3%82%bf%e3%83%b3%e3%81%ab%e3%81%99%e3%82%8b%ef%bd%9esimplebutton%e3%81%ae%e5%b7%bb.html</guid>

					<description><![CDATA[AS3実験室: 画像を読み込んでボタンにするを書いたあとに気付いたのですが、 SimpleButtonという便利なクラスが存在しておりまして、 これを使った方がより簡単にボタン化出来るので、フォローとしてログっておきます [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p><a href="/2010/05/as3-bitmapbutton.html">AS3実験室: 画像を読み込んでボタンにする</a>を書いたあとに気付いたのですが、<br />
SimpleButtonという便利なクラスが存在しておりまして、<br />
これを使った方がより簡単にボタン化出来るので、フォローとしてログっておきます。</p>



<figure class="wp-block-image"><img decoding="async" src="http://lh4.ggpht.com/_JJkNs5Ixl70/S97GN4U-B4I/AAAAAAAAA4A/kJzsGboyxdg/s800/201005032149.png" alt="SimpleButton"/></figure>



<p></p>



<span id="more-44"></span>



<p>途中までは前記事と似たような処理なのでちょっと割愛してるところもあるのでご注意。</p>



<h2 class="wp-block-heading">1. 画像の読み込み</h2>


<pre class="wp-block-code"><span><code class="hljs language-php"><span class="hljs-keyword">private</span> <span class="hljs-keyword">var</span> bl:BulkLoader = <span class="hljs-keyword">new</span> BulkLoader(<span class="hljs-string">"imageloader"</span>);

<span class="hljs-comment">/* 中略 */</span>

bl.add( <span class="hljs-string">"images/button_normal.png"</span> );
bl.add( <span class="hljs-string">"images/button_over.png"</span> );
bl.add( <span class="hljs-string">"images/button_down.png"</span> );
bl.addEventListener( BulkProgressEvent.COMPLETE, initialize );
bl.start();
</code></span></pre>


<h2 class="wp-block-heading">2. SimpleButtonをつくる</h2>


<pre class="wp-block-code"><span><code class="hljs language-javascript"><span class="hljs-keyword">var</span> btn:SimpleButton = <span class="hljs-keyword">new</span> SimpleButton(
    <span class="hljs-keyword">new</span> Bitmap(bl.getBitmapData(<span class="hljs-string">"images/button_normal.png"</span>)),
    <span class="hljs-keyword">new</span> Bitmap(bl.getBitmapData(<span class="hljs-string">"images/button_over.png"</span>)),
    <span class="hljs-keyword">new</span> Bitmap(bl.getBitmapData(<span class="hljs-string">"images/button_down.png"</span>)),
    <span class="hljs-keyword">new</span> Bitmap(bl.getBitmapData(<span class="hljs-string">"images/button_normal.png"</span>))
);
addChild(btn);
</code></span></pre>


<p><a href="http://livedocs.adobe.com/flash/9.0_jp/ActionScriptLangRefV3/flash/display/SimpleButton.html">SimpleButton &#8211; ActionScript 3.0</a></p>



<p>使い方は上記リンク参照。余計なもの（!?）をimportしなくていい分心地よいです。</p>



<p>ただし、このままでは<a href="/2010/05/as3-bitmapbutton.html">BitmapButton</a>にはあった「選択時」の状態が使用できません。<br />
この点は今頭を悩ましているところですね。</p>



<hr class="wp-block-separator has-alpha-channel-opacity"/>



<dl>
<dt>2010/05/17</dt>
<dd>さすがに端折りすぎたのでコードを追記</dd>
<dt>2010/05/24</dt>
<dd>フォロー記事書きました。<br />
<a href="/2010/05/as3-simpletogglebutton.html">AS3実験室: SimpleButtonクラスをトグル出来るように拡張した「SimpleToggleButton」</a></dd>
</dl>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>AS3実験室: 画像を読み込んでボタンにする</title>
		<link>https://blog.mach3.jp/2010/05/02/as3-bitmapbutton.html</link>
		
		<dc:creator><![CDATA[mach3]]></dc:creator>
		<pubDate>Sun, 02 May 2010 02:34:00 +0000</pubDate>
				<category><![CDATA[Laboratory]]></category>
		<category><![CDATA[ActionScript]]></category>
		<category><![CDATA[Bitmap]]></category>
		<category><![CDATA[Flash]]></category>
		<category><![CDATA[SimpleButton]]></category>
		<guid isPermaLink="false">http://lab.mach3.jp/2010/05/02/as3%e5%ae%9f%e9%a8%93%e5%ae%a4-%e7%94%bb%e5%83%8f%e3%82%92%e8%aa%ad%e3%81%bf%e8%be%bc%e3%82%93%e3%81%a7%e3%83%9c%e3%82%bf%e3%83%b3%e3%81%ab%e3%81%99%e3%82%8b.html</guid>

					<description><![CDATA[これも意外と頻出する処理ではないでしょうか。 読み込んだビットマップデータをボタン化する処理を、面倒なのでクラス化してみました。 BitmapButton Download : BitmapButton パブリック プロ [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p>これも意外と頻出する処理ではないでしょうか。<br />
読み込んだビットマップデータをボタン化する処理を、面倒なのでクラス化してみました。</p>



<figure class="wp-block-image"><img decoding="async" src="http://lh5.ggpht.com/_JJkNs5Ixl70/S9xgPZSz5aI/AAAAAAAAA34/nVejL_S7M5E/s800/201005020105.png" alt="BitmapButton"/></figure>



<p></p>



<span id="more-45"></span>



<h2 class="wp-block-heading">BitmapButton</h2>



<p><a href="https://docs.google.com/uc?id=0B7k6jIWYcmkLMGViNTBmYWEtY2UwMC00NmJiLTk4NjctYjk4Y2VhM2Y0OTRm&amp;export=download&amp;hl=ja">Download : BitmapButton</a></p>



<h3 class="wp-block-heading">パブリック プロパティ</h3>



<dl>
<dt>hitRect : Rectangle = null</dt>
<dd>ヒット領域をRectangleで設定。 nullの場合は画像にあわせたヒット領域になります。</dd>
<dt>selected : Boolean = false</dt>
<dd>ボタンの選択状態を示すBoolean値。</dd>
</dl>



<h3 class="wp-block-heading">パブリック メソッド</h3>



<dl>
<dt>render() : void</dt>
<dd>setImagesで渡されたBitmapDataを元にボタンを生成します。</dd>
<dt>setImages( _config : Object ) : void</dt>
<dd>normalImage（通常時）、overImage（マウスオーバー時）、downImage（マウスダウン時）、selectedImage（選択時）の画像をBitmapDataで格納したオブジェクトを渡します。</dd>
</dl>



<h2 class="wp-block-heading">簡単な使い方</h2>



<p>インポートをお忘れなく。</p>


<pre class="wp-block-code"><span><code class="hljs language-css"><span class="hljs-selector-tag">import</span> <span class="hljs-selector-tag">jp</span><span class="hljs-selector-class">.mach3</span><span class="hljs-selector-class">.ui</span><span class="hljs-selector-class">.BitmapButton</span>
</code></span></pre>


<h3 class="wp-block-heading">1. 画像の用意</h3>



<figure class="wp-block-image"><img decoding="async" src="http://lh5.ggpht.com/_JJkNs5Ixl70/S9xgPSD3G5I/AAAAAAAAA38/I4Amwnf9qek/s800/201005020107.png" alt="各ステータス画像の用意"/></figure>



<p></p>



<p>こんな感じで画像を用意しましょう。</p>



<h3 class="wp-block-heading">2. 画像の読み込み</h3>



<p><a href="/2010/04/as3-bulkloader.html">以前記事で紹介</a>した<a href="http://code.google.com/p/bulk-loader/">BulkLoader</a>を使ってみます。</p>


<pre class="wp-block-code"><span><code class="hljs language-php"><span class="hljs-keyword">private</span> <span class="hljs-keyword">var</span> bl:BulkLoader = <span class="hljs-keyword">new</span> BulkLoader( <span class="hljs-string">"imageloader"</span> );

<span class="hljs-comment">/* 中略 */</span>

bl.add( <span class="hljs-string">"images/button_normal.png"</span> );
bl.add( <span class="hljs-string">"images/button_over.png"</span> );
bl.add( <span class="hljs-string">"images/button_down.png"</span> );
bl.add( <span class="hljs-string">"images/button_selected.png"</span> );
bl.addEventListener( BulkProgressEvent.COMPLETE, initialize );
bl.start();
</code></span></pre>


<h3 class="wp-block-heading">3. BitmapButtonインスタンスの生成</h3>



<p>completeイベントに設定したinitializeでビットマップボタンを生成してみます。</p>


<pre class="wp-block-code"><span><code class="hljs language-php"><span class="hljs-keyword">private</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">initialize</span><span class="hljs-params">( e:Event )</span> : <span class="hljs-title">void</span> </span>{
    <span class="hljs-keyword">var</span> btn:BitmapButton = <span class="hljs-keyword">new</span> BitmapButton;
    btn.setImages( {
        normalImage: bl.getBitmapData( <span class="hljs-string">"images/button_normal.png"</span> ),
        overImage: bl.getBitmapData( <span class="hljs-string">"images/button_over.png"</span> ),
        downImage: bl.getBitmapData( <span class="hljs-string">"images/button_down.png"</span> ),
        selectedImage: bl.getBitmapData( <span class="hljs-string">"images/button_selected.png"</span> )
    } );
    btn.render();
    addChild( btn );
}
</code></span></pre>


<p>各ステータスの画像を設定する<em>setImages()</em>は、<br />
BitmapDataを格納したnormalImage, overImage,<br />
downImage, selectedImageらをまとめたオブジェクトを引数として受け取ります。<br />
あとは<em>render()</em>でボタンイメージを生成し、addChild。</p>



<h3 class="wp-block-heading">4. イベントなど</h3>



<p>Spriteを継承しているので、イベントなどはよきにはからえ、で。</p>


<pre class="wp-block-code"><span><code class="hljs language-css"><span class="hljs-selector-tag">btn</span><span class="hljs-selector-class">.addEventListener</span>( <span class="hljs-selector-tag">MouseEvent</span><span class="hljs-selector-class">.CLICK</span>, <span class="hljs-selector-tag">myFunc</span> );
</code></span></pre>


<h3 class="wp-block-heading">5. 選択状態の変更</h3>



<p>selectedプロパティをtrueにすることで、選択時の状態にする事ができます。<br />
トグルボタンなどを作りたい時はこちらを利用します。</p>


<pre class="wp-block-code"><span><code class="hljs language-javascript">btn.selected = <span class="hljs-literal">true</span>
</code></span></pre>


<p>こんな感じで作ってみたわけですが、何かの役にたてば幸いです。<br />
とりあえず自分で使おう。</p>



<hr class="wp-block-separator has-alpha-channel-opacity"/>



<dl>
<dt>2010/05/02</dt>
<dd>SimpleButtonを使えばもっと楽だという事に次の日気づきました</dd>
<dt>2010/05/03</dt>
<dd>フォロー記事書きました<br />
<a href="/2010/05/as3-simplebutton.html">AS3実験室: 画像を読み込んでボタンにする～SimpleButtonの巻</a></dd>
<dt>2010/05/24</dt>
<dd>フォロー記事書きました<br />
<a href="/2010/05/as3-simpletogglebutton.html">AS3実験室: SimpleButtonクラスをトグル出来るように拡張した「SimpleToggleButton」</a></dd>
</dl>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>AS3備忘録: XML読み込み～BulkLoaderで一括ロード</title>
		<link>https://blog.mach3.jp/2010/04/01/as3-bulkloader-xml.html</link>
		
		<dc:creator><![CDATA[mach3]]></dc:creator>
		<pubDate>Thu, 01 Apr 2010 21:19:00 +0000</pubDate>
				<category><![CDATA[Laboratory]]></category>
		<category><![CDATA[ActionScript]]></category>
		<category><![CDATA[Flash]]></category>
		<category><![CDATA[XML]]></category>
		<guid isPermaLink="false">http://lab.mach3.jp/2010/04/01/as3%e5%82%99%e5%bf%98%e9%8c%b2-xml%e8%aa%ad%e3%81%bf%e8%be%bc%e3%81%bf%ef%bd%9ebulkloader%e3%81%a7%e4%b8%80%e6%8b%ac%e3%83%ad%e3%83%bc%e3%83%89.html</guid>

					<description><![CDATA[XMLでリストを読み込み、画像をロードする… というのはFlashコンテンツを作る上でかなり頻出する処理ですが、 それを簡易化する「BulkLoader」が広く知られています。 今日はXML読み込みからBulkLoade [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p>XMLでリストを読み込み、画像をロードする…<br />
というのはFlashコンテンツを作る上でかなり頻出する処理ですが、<br />
それを簡易化する「BulkLoader」が広く知られています。</p>



<figure class="wp-block-image"><img decoding="async" src="http://lh6.ggpht.com/_JJkNs5Ixl70/S7SCqdAAwPI/AAAAAAAAA58/lTQ1Rd_ncKI/201004012020.png" alt="BulkLoader"/></figure>



<p></p>



<p>今日はXML読み込みからBulkLoaderによる一括ロードまでを<br />
軽く備忘録しておきます。</p>



<p><a href="http://code.google.com/p/bulk-loader/">bulk-loader &#8211; Project Hosting on Google Code</a></p>



<figure class="wp-block-image"><img decoding="async" src="http://lh3.ggpht.com/_JJkNs5Ixl70/S7SBxv-0cLI/AAAAAAAAA58/OVm1-BieK8g/201004012015.png" alt="BulkLoader"/></figure>



<p></p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
<p>BulkLoaderは、複雑なローディング処理をより簡単に行う為に書かれたAS3ライブラリです。</p>
</blockquote>



<p>早速、手順を追って書いてみるとします。</p>



<h2 class="wp-block-heading">1. ライブラリをインポートするなど</h2>


<pre class="wp-block-code"><span><code class="hljs language-css"><span class="hljs-selector-tag">import</span> <span class="hljs-selector-tag">br</span><span class="hljs-selector-class">.com</span><span class="hljs-selector-class">.stimuli</span><span class="hljs-selector-class">.loading</span>.*;
</code></span></pre>


<p>保存場所に注意。</p>


<pre class="wp-block-code"><span><code class="hljs language-php"><span class="hljs-keyword">private</span> <span class="hljs-keyword">var</span> imagelist:XMLList;
</code></span></pre>


<p>URLのリストを格納しておく用の変数を準備しておきます。</p>



<h2 class="wp-block-heading">2. XMLをロードする</h2>



<p>XMLのロードはBulkLoaderを使わずにシンプルに書きます。</p>


<pre class="wp-block-code"><span><code class="hljs language-javascript"><span class="hljs-keyword">var</span> ul:URLLoader = <span class="hljs-keyword">new</span> URLLoader;
ul.addEventListener(Event.COMPLETE, onXmlLoaded);
ul.load( <span class="hljs-keyword">new</span> URLRequest(<span class="hljs-string">"list.xml"</span>) );
</code></span></pre>


<p>読み込むXMLはこんなのにしておきます。<br />
実際はもうちょっと複雑な物になると思われますが…</p>


<pre class="wp-block-code"><span><code class="hljs language-xml"><span class="hljs-meta">&lt;?xml version="1.0" charset="utf-8" ?&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">data</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">items</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">item</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"1"</span>&gt;</span>images/a.png<span class="hljs-tag">&lt;/<span class="hljs-name">item</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">item</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"2"</span>&gt;</span>images/b.png<span class="hljs-tag">&lt;/<span class="hljs-name">item</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">item</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"3"</span>&gt;</span>images/c.png<span class="hljs-tag">&lt;/<span class="hljs-name">item</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">items</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">data</span>&gt;</span>
</code></span></pre>


<h2 class="wp-block-heading">3. 読み込んだXMLを処理する</h2>


<pre class="wp-block-code"><span><code class="hljs language-php"><span class="hljs-keyword">private</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">onXmlLoaded</span><span class="hljs-params">(e:Event)</span>:<span class="hljs-title">void</span> </span>{
    <span class="hljs-keyword">var</span> data:XML = <span class="hljs-keyword">new</span> XML(e.target.data);
    imagelist = <span class="hljs-keyword">new</span> XMLList( data.items.item );
    <span class="hljs-keyword">var</span> bloader = <span class="hljs-keyword">new</span> BulkLoader(<span class="hljs-string">"imageloader"</span>);
    <span class="hljs-keyword">var</span> item:*;
    <span class="hljs-keyword">for</span> each( item in imagelist) {
        bloader.add( item.toString() );
    }
    bloader.addEventListener(BulkProgressEvent.COMPLETE, onImagesLoaded);
    bloader.addEventListener(BulkProgressEvent.PROGRESS, onImageProgress);
    bloader.addEventListener(BulkLoader.ERROR, onImageError);
    bloader.start();
}
</code></span></pre>


<p>BulkLoaderのコンストラクタには、ユニークな名前をつけてあげます。<br />
（ここでは<em>imageloader</em>）</p>


<pre class="wp-block-code"><span><code class="hljs language-javascript"><span class="hljs-keyword">var</span> bloader = <span class="hljs-keyword">new</span> BulkLoader(<span class="hljs-string">"imageloader"</span>);
</code></span></pre>


<p>itemにはURL文字列が格納されたXMLオブジェクトが入っているので、<br />
<em>toString()</em> でStringに変えてあげましょう。<br />
URLを<em>BulkLoader.add</em>につっこむと、BulkLoaderの読み込みリストに追加されます。</p>


<pre class="wp-block-code"><span><code class="hljs language-css"><span class="hljs-selector-tag">bloader</span><span class="hljs-selector-class">.add</span>( <span class="hljs-selector-tag">item</span><span class="hljs-selector-class">.toString</span>() );
</code></span></pre>


<p>イベントは、<em>complete</em>と<em>progress</em>が登録できます。<br />
APIドキュメントのイベントには記述されていませんが、<em>error</em>イベントも受け取る事もできます。</p>



<p><em>BulkLoader.start</em>で読み込み処理が開始されます。<br />
URLLoader.loadみたいなもの。</p>



<h2 class="wp-block-heading">4. イベントハンドラ</h2>



<h3 class="wp-block-heading">progressイベント</h3>


<pre class="wp-block-code"><span><code class="hljs language-javascript">private <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">onImageProgress</span>(<span class="hljs-params">e:Event</span>):<span class="hljs-title">void</span> </span>{
    trace( <span class="hljs-built_in">Math</span>.floor((e.target.percentLoaded * <span class="hljs-number">100</span>)) + <span class="hljs-string">"%"</span> );
}
</code></span></pre>


<p>BulkLoader.parcentLoaded で全体の読み込み率を取得できます。<br />
BulkLoader.bytesTotal, bytesLoadedもあるのでこちらも活用できますね。</p>



<h3 class="wp-block-heading">errorイベント</h3>


<pre class="wp-block-code"><span><code class="hljs language-php"><span class="hljs-keyword">private</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">onImageError</span><span class="hljs-params">(e:Event)</span>:<span class="hljs-title">void</span> </span>{
    trace(e.target.getFailedItems());
}
</code></span></pre>


<p>読み込みエラーが発生した時に呼ばれます。<br />
BulkLoader.getFailedItemsでエラーの出たアイテムの情報が取得できます。</p>



<h2 class="wp-block-heading">5. 完了時の処理</h2>


<pre class="wp-block-code"><span><code class="hljs language-php"><span class="hljs-keyword">private</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">onImagesLoaded</span><span class="hljs-params">(e:Event)</span>:<span class="hljs-title">void</span> </span>{
    <span class="hljs-keyword">var</span> item:*;
    <span class="hljs-keyword">var</span> bmp:DisplayObject;
    <span class="hljs-keyword">var</span> margin:int = <span class="hljs-number">10</span>;
    <span class="hljs-keyword">var</span> point:Point = <span class="hljs-keyword">new</span> Point( margin, margin );
    <span class="hljs-keyword">for</span> each( item in imagelist ) {
        bmp = addChild( e.target.getBitmap(item.toString() ) );
        bmp.x = point.x;
        bmp.y = point.y;
        point.x += bmp.width + margin;
    }
}
</code></span></pre>


<p>10ピクセルの余白ごとにぺたぺたと横に画像を連ねるだけの簡単な処理をしています。<br />
ポイントは、<em>BulkLoader.getBitmap()</em>。</p>


<pre class="wp-block-code"><span><code class="hljs">bmp = addChild( e.target.getBitmap(item.toString() ) );
</code></span></pre>


<p>このメソッドに登録時につっこんだURLを入れると、<br />
そのURLの画像をBitmapオブジェクトで引っ張ってきてくれます。なんて便利な。</p>



<p>他の形式で受け取りたい場合は、色々と用意されています。<br />
<em>getMovieClip, getSound, getSprite, getText,<br />
getXML, getBitmapData, getContent, getBinary</em><br />
などなどなど。<br />
汎用的な<em>get</em>なんていうメソッドもあります。<br />
読み込んだファイルに応じて最適なものを使えば良いですね。</p>



<p>より詳しくは公式のドキュメントをご覧ください。<br />
<a href="http://code.google.com/p/bulk-loader/w/list">Wiki Pages &#8211; bulk-loader &#8211; Project Hosting on Google Code</a></p>



<p>本当は自分で似たようなのを書いてたんですが、<br />
あまりにもこっちが便利なので愛用することに。<br />
書く前に検索すればよいのですが、勉強になるので結果オーライです。</p>
]]></content:encoded>
					
		
		
			</item>
	</channel>
</rss>
