<a href="http://www.110chang.com/lab/mt_rss_loader/index.html"><img alt="rssloader.jpg" src="/legacy/images/rssloader.jpg" width="450" height="225" /></a>



FLASHにatomフィードを読み込み表示。さらに、モリサワのMBゴシックで表示したかったのでフォントを埋め込んだswfファイルを読み込ませます。

<a href="http://www.110chang.com/lab/mt_rss_loader/index.html">MT RSS Loader</a>

このサイトをリニューアルするときに使いたいので作りました。仕組みを作るのに精一杯で表現はひどいです・・

今回はatomフィードを使ってみましたが、よく考えたらFLASHに全文読み込む必要は無いのでRSSフィードで良かったかも。

クラス主体のコーディング手法は FLASH OOP を参考にしました。やっと mx.eventDispatcher の使い方が分かってきた。また、FLASHでXMLをカンタンに扱うことのできる<a href="http://www.xfactorstudio.com/">XPath4AS2</a>というAS2ライブラリをつかってみました。

# 作成ファイル

rssloader.fla 
　┗embed_font_mc:MovieClip 
・embed_font_mcはフォントを埋め込んだSWFの読み込み用に作成したMCです。embed_font_mcの子要素で埋め込んだフォントを使用できます。

MBGothic.fla 
・MBGothic Bold を埋め込んだテキストフィールドを作成しパブリッシュします。

rssloader.as 
・RSSLoaderパッケージのInitクラスのインスタンスを作成します。rssloader.flaにインクルードしておきます。

/RSSLoader（パッケージ） 
　┗Init.as 
　　・RSSLoaderパッケージ内の必要なクラスのインスタンスを作成します。 
　　・XMLModelクラスのloadDataメソッドを実行し、読み込みを開始します。 
　┗XMLLoader.as 
　　・XMLデータを読み込みます。 
　┗XMLModel.as 
　　・読み込んだXMLデータを整形し、onDataイベントを発行します。 
　┗EmbedFont.as 
　　・onDataイベントを受信し、embed_font_mcにMBGothic.swfを読み込みます。 
　　・onEmbedFontイベントを発行します。 
　┗View.as 
　　・onDataイベントでXMLデータを受け取ります。 
　　・onEmbedFontイベントを受信し、embed_font_mcにテキストフィールドを作成しXMLデータを表示します。

と、結構大量のスクリプトになったのでソースは端折って掲載します。

## Init.as

```js
//Init.as
import RSSLoader.*;
class RSSLoader.Init
{
 private var mc:MovieClip;
 //コンストラクタ
 function Init( _mc:MovieClip )
 {
 mc = _mc;
 //XMLモデルのインスタンス
 var model:XMLModel = new XMLModel();
 //XMLデータの読み込み
 model.loadData("http://www.110chang.com/atom.xml");
 //埋め込みフォント読み込みのインスタンス
 var my_embed_font:EmbedFont = new EmbedFont( model, mc.embed_font_mc );
 //SWFファイルのURI指定
 my_embed_font.setURI("http://www.110chang.com/lab/mt_rss_loader/MBGothic.swf");
 //my_embed_font.setURI( "./MBGothic.swf" );
 //ビューのインスタンス
 var my_view:View = new View( model, mc.embed_font_mc );
 //埋め込みフォントにリスナー登録
 my_embed_font.addEventListener( "onEmbedFont", my_view );
 }
}
```

## XMLModel

```js
import RSSLoader.SuperModel;
import RSSLoader.XMLLoader;
import com.xfactorstudio.xml.xpath.*
//スライドモデルクラス
class RSSLoader.XMLModel extends RSSLoader.SuperModel
{
 //コンストラクタ
 function XMLModel()
 {
 //コンストラクタ関数のスーパークラスバージョンを呼び出す
 super();
 }
 //ファイル読み込み
 function loadData( url:String ):Void
 {
 XMLLoader.loadXML( url, parse, setData, this );
 }
 //XML解析
 function parse( xml:XML ):Object
 {
 //ここでxpathを使って解析します。
 //titles[i] = XPath.selectNodes( xml, "/feed/entry["+(i)+"]/title/text()" );
 //bodies[i] = XPath.selectNodes( xml, "/feed/entry["+(i)+"]/content/text()" );
 //dates[i] = XPath.selectNodes( xml, "/feed/entry["+(i)+"]/published/text()" );
 //とかやってまとめて返します。
 //data_obj[i] = { title:titles[i], body:bodies[i], date:dates[i] };
 return data_obj;
 }
 private function entryNodesLength( xml:XML ):Number
 {
 var XMLPath:String = "/feed/entry";
 var my_array:Array = XPath.selectNodes( xml, XMLPath );
 return my_array.length;
 }
}
```

## EmbedFont.as

```js
import RSSLoader.XMLModel;
class RSSLoader.EmbedFont extends RSSLoader.SuperView
{
 private var mc:MovieClip;
 private var model:XMLModel;
 private var uri:String;
 //コンストラクタ
 function EmbedFont( _model:XMLModel, _mc:MovieClip )
 {
 super();
 mc = _mc;
 model = _model;
 model.addEventListener( "onData", this );
 }
 function setURI( _uri:String ):Void
 {
 uri = _uri;
 }
 private function onData():Void
 {
 var my_mcl = new MovieClipLoader();
 my_mcl.addListener( this );
 my_mcl.loadClip( uri, mc );
 }
 private function onLoadStart( target_mc:MovieClip ):Void
 {
 //ロード開始
 }
 private function onLoadProgress( target_mc:MovieClip, loadedBytes:Number, totalBytes:Number ):Void
 {
 //プログレスバー表示など
 }
 private function onLoadComplete( target_mc:MovieClip ):Void
 {
 //ロード終了
 dispatchEvent({ type:"onEmbedFont" });
 }
}
```

## View.as

```js
import RSSLoader.XMLModel;
class RSSLoader.View extends RSSLoader.SuperView
{
 private var mc:MovieClip;
 private var model:XMLModel;
 private var data_obj:Object;
 //コンストラクタ
 function View( _model:XMLModel, _mc:MovieClip )
 {
 super();
 model = _model;
 mc = _mc;
 model.addEventListener( "onData", this );
 }
 function onData( obj:Object ):Void
 {
 data_obj = obj.data
 }
 function onEmbedFont():Void
 {
 for( var prop in data_obj )
 {
 //タイトルを作成
 makeTitle();
 }
 }
 private function makeTitle():Void
 {
 //テキストフォーマットやテキストフィールドの作成
 }
}
```

FLASHにatomフィードを読み込んで表示する

<a href="http://www.110chang.com/lab/fluid_sim/index.html"><img alt="fluid_sim.jpg" src="/legacy/images/fluid_sim.jpg" width="450" height="225" /></a>



<a href="http://www.110chang.com/lab/fluid_sim/index.html">http://www.110chang.com/lab/fluid_sim/index.html</a>

マウス速度に比例し、距離に反比例する力場のシミュレーション。ともかく、こんな事してます的にソースを公開。

まずは、.flaファイルにインクルードするasファイル。actionscriptは全て外部as。ここにクラスインスタンスを作ってスクリプトを動かす。

```js
//fluid_sim.as
//このasファイルをflaファイルにインクルード
//MouseSpeedChecker クラスインスタンス
var msc:MouseSpeedChecker = new MouseSpeedChecker( _root );
//DevicePlotter クラスインスタンス
var dp:DevicePlotter = new DevicePlotter( _root, "MY_DEVICE" );
dp.doPlotting();
```

マウススピードを検出するクラス。

```js
class MouseSpeedChecker
{
 //対象となるMovieClip
 private var mc:MovieClip;
 //現在の座標
 private var nX:Number;
 private var nY:Number;
 //1フレーム前の座標
 private var mX:Number;
 private var mY:Number;
 //距離
 private var dX:Number;
 private var dY:Number;
 //コンストラクタ
 function MouseSpeedChecker( _mc )
 {
 mc = _mc;
 init();
 }
 private function init():Void
 {
 var my_mc = this;
 mc.onEnterFrame = function()
 {
 my_mc.currentPos();
 }
 }
 //現在位置の検出
 private function currentPos():Void
 {
 mX = nX;
 mY = nY;
 nX = mc._xmouse;
 nY = mc._ymouse;
 dX = Math.abs( mX - nX );
 dY = Math.abs( mY - nY );
 drawLocus();
 }
 //軌跡描画（テスト用）
 private function drawLocus():Void
 {
 mc.createEmptyMovieClip( "line_mc", 1 );
 mc[ "line_mc" ].lineStyle( 1, 0xccffff, 100 )
 mc[ "line_mc" ].moveTo( mX, mY );
 mc[ "line_mc" ].lineTo( nX, nY );
 }
 //速度
 function get speed():Object
 {
 var obj = { x:dX, y:dY };
 return obj;
 }
}
```

力場を形成する素子をステージに配置するクラス。

```js
class DevicePlotter
{
 //ステージを分割するグリッド幅
 static var DIV_NUM:Number = 50;
 //素子を配置する対象
 private var base:MovieClip;
 //attachMovieする素子のリンケージ名
 private var id:String;
 //グリッド線数
 private var hGrid:Number;
 private var vGrid:Number;
 //コンストラクタ
 function DevicePlotter( _base:MovieClip, _id:String )
 {
 base = _base;
 id = _id;
 hGrid = Stage.width/DIV_NUM-1;
 vGrid = Stage.height/DIV_NUM-1;
 //trace( hGrid+","+vGrid );
 }
 function doPlotting():Void
 {
 for( var v=0; v < vGrid; v++ )
 {
 for( var h=0; h < hGrid; h++ )
 {
 //MovieClipをattach
 }
 }
 }
}
```

各素子の挙動を設定するクラス。これだけはクラスインスタンスではなく、ライブラリのリンケージで関連づける。

```js
class Device extends MovieClip
{
 //距離
 private var dX:Number;
 private var dY:Number;
 private var d:Number;
 //力
 private var Fx:Number;
 private var Fy:Number;
 private var F:Number;
 private var oF:Number;
 //マウススピードチェッカーのインスタンス
 private var msc:MouseSpeedChecker;
 //コンストラクタ
 function Device()
 {
 msc = _root.msc;
 }
 //onEnterFrame イベント
 function onEnterFrame():Void
 {
 calcForce();
 //trace( dX+","+dY );
 }
 private function calcForce():Void
 {
 //ここで力場の計算
 drawLine();
 }
 private function drawLine():Void
 {
 this.createEmptyMovieClip( "my_plot", 1 );
 this["my_plot"].lineStyle( 1, 0xccccff );
 this["my_plot"].moveTo( 0, 0 );
 this["my_plot"].lineTo( dX, dY );
 }
}
```

なぜか、左上に１個だけattachし損ねた子がいるなあ・・なんでだろ。

密かにactionscriptのクラス主体コーディングを勉強

FLVを再生するASクラスファイルを作成していて、ちょっとハマった。

ムービーの初期化をするメソッド<code>init()</code>を定義して、その中で<code>onStatus</code>関数を定義しても、中からクラスのプロパティにアクセスできない。<code>onStatus</code>でムービーの終わりを検出して再初期化したいのだけど。

<code>onStatus</code>内で<code>this</code>を<code>trace</code>してみると<code>[ object Object ]</code>となった（これは<code>this</code>が<code>NetStream</code>オブジェクト自身を参照しているんだと思うけど、正確な事はわかりません・・・）。どうりでスコープが通らないわけだ。

で、どうすれば良いかというと、メソッドのローカル変数にはアクセスできるらしいので、自分自身を<code>init()</code>のローカル変数に代入して（<code>var mc = this;</code>）おくと、<code>onStatus</code>内で"mc"として<code>this</code>にアクセスできる。

そういえば、以前XMLを読み込むクラスを作成しているとき<code>XML.onLoad</code>でも同じ問題でハマった。<code>XML</code>クラスには<code>XML.loaded</code>というプロパティがあるので、たしか無理矢理<code>XML.onLoad</code>の代わりに使った覚えがあるけど、これも解決できそうです。

クラスにもだいぶ慣れてきましたが、フレームアクションやムービークリップアクションでカンタンにできた事ができなくてよくハマる・・・でも勉強になる。

```js
//MovieClass.as
class MovieClass extends MovieClip
{
 var netConn:NetConnection;
 var netStream:NetStream;
 var myVideo:Video;
 //
 function MovieClass()
 {
 // Constructor
 // NetConnection オブジェクトを初期化
 netConn = new NetConnection();
 }
 //
 function init( filename:String ):Void
 {
 var mc = this;
 // ローカルストリーミング接続を作成する
 netConn.connect( null );
 // NetStream オブジェクトを作成し、onStatus() 関数を定義する
 netStream = new NetStream( netConn );
 netStream.onStatus = function( infoObj )
 {
 if( infoObj.code == "NetStream.Play.Stop" )
 {
 mc.init( filename );
 }
 }
 // NetStream ビデオフィードを Video オブジェクトに割り当てる
 myVideo.attachVideo( netStream );
 // バッファ時間を設定する
 netStream.setBufferTime( 5 );
 // FLV ファイルの再生を開始する
 netStream.play( filename );
 netStream.pause( true );
 netStream.seek( 0 );
 }
 function playVideo():Void
 {
 netStream.pause( false );
 }
 function pauseVideo():Void
 {
 netStream.seek( 0 );
 netStream.pause( true );
 }
 function rewindVideo():Void
 {
 netStream.seek( 0 );
 }
 function stopVideo():Void
 {
 netStream.close();
 }
}
```

NetStream.onStatusをASクラスファイル内で使う

方々にご迷惑をおかけしますが、夏休み１日目です。

<a href="http://inspiration.67.org/">Adobe® + ROKUNANA presents Flash® 8 INSPIRATION SCENE Summer Jam</a>

<img alt="IMG_1551.jpg" src="/legacy/images/IMG_1551.jpg" width="360" height="270" />

<a href="http://www.fumiononaka.com/">野中文雄さん</a>がスクリプト手打ちしながらAS3.0の解説。AS3.0はかなり厳密な仕様になる模様。(FLASH9では)ムービークリップアクションが使えなくなるらしい。目の前でASクラスファイルの作成を見て、なんとなくクラスがわかったような気になった。。。

５人のクリエーターの皆さんによる INSPIRATION SCENE のFLAファイルを見ながらの解説。個人的には<a href="http://www.img8.com/">+39さん</a>の Sublime が見応えあり。制作過程がすごすぎる。流体のシミュレーションがすでに作品に見える。

そして、台風がよけてくれたので、僕はとりあえず沖縄に行ってきます。 
今日受けた刺激の余韻に浸りつつ、デザインのことやら、WEB2.0のことやらは一旦忘れます(゜。゜)　ポケラー

夏休みはFLASHで始まる

最近３分弱のムービーを作ったのですが、たかが３分といえど、大きい画角でBGMとか画像とか追加して行くと結構なファイルサイズになります。

最終的にFLAファイルは44Mになりました^^

というところで気になったのが、Flashて何時間もの大作を作れるのか？ってことです。答えはNoです。Flashは最大フレーム数が16,000に制限されているようです。

<a href="http://www.adobe.com/jp/support/flash/ts/documents/fl0115.html">オーサリングにおける Flash の限界について</a>

16,000ということは24fpsで約11分、コマを落として12fpsでも22分が限界なんですね。 
レイヤーやシンボルも16,000に制限されているようです。それを超えると「大きな危険な問題が発生する」らしい・・・PCが爆発するとか？？？

Flashの最大フレーム数

Flashのダイナミックテキストに半角の円記号を出力しようとしてハマる（ハマったまま）。

公式のドキュメントやらいろんなサイトの情報をググってみると、￥￥（ここでは2バイト文字で記述しますが、実際は1バイト文字）でエスケープできる、ということらしい。でも、どうやっても出ない。￥￥はもちろん、＼＼も試したけどダメ。フォントを埋め込んだり、埋め込まなかったりしたけどダメ。変数の型指定してみたけどダメ・・・これってmacの仕様？

<a href="http://livedocs.macromedia.com/flash/8_jp/main/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Parts&file=00001485.html">Flashドキュメンテーション</a>

<code>var foo = "¥¥"</code>とか<code>var foo = "\\"</code>とか<code>var foo = "¥b"</code>とか<strike>HTML表示でも微妙だよな。windowsではどう見えてるんだろう。</strike>HTMLでは両方ともちゃんと見えてるぞ。FlashがPPC用だからか・・・？

しょうがないので埋め込みフォントをヒラギノにして、数字と2バイト￥を埋め込んだりしてみた・・・

￥に嵌る

休み中にちょっとだけ勉強。

いまさらですが<code>MovieClip.lineTo</code>で遊んでみた。これはリサージュという図形のひとつでハモリ（音程差）を視覚的に表現します。これがどの音程を表しているかはよくわかりません(-.-ゞネットに繋がってれば調べたんですが、という言い訳です。愛してるわけじゃありませんが、数式って美しいですね。 
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="450" height="360" id="line_test" align="middle"><param name="allowScriptAccess" value="sameDomain" /><param name="movie" value="/legacy/assets/line_test.swf" /><param name="menu" value="false" /><param name="quality" value="high" /><param name="bgcolor" value="#000000" /> 
<embed src="/legacy/assets/line_test.swf" menu="false" quality="high" bgcolor="#000000" width="450" height="360" name="line_test" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /></object>

某雑誌に載っていた疑似3D時計（秒針だけ）。サンプルがダウンロードできなくて、スコープがよくわからんかったけど出来た。 
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="450" height="360" id="3d_test" align="middle"><param name="allowScriptAccess" value="sameDomain" /><param name="movie" value="/legacy/assets/3d_test.swf" /><param name="menu" value="false" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" /> 
<embed src="/legacy/assets/3d_test.swf" menu="false" quality="high" bgcolor="#ffffff" width="450" height="360" name="3d_test" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /></object>

これらが何の役に立つかは不明(-.-ゞ

lineToと疑似3Dのお勉強

ActionScriptで`nodeValue`が`null`になってしまい、苦戦しました。



```xml
<foo>
<bar>hoge</bar>
</foo>
```

をXMLオブジェクト`theXML`に読み込んだ時、`bar`ノードの`nodeName`は

```js
theXML.firstChild.firstChild.nodeName
```

だが、`bar`ノードの`nodeValue`は

```js
theXML.firstChild.firstChild.firstChild.nodeValue
```

となる。

ウ〜ン。。。

nodeValueの取得

<img alt="lotdrawer.jpg" src="/legacy/images/lotdrawer.jpg" width="210" height="152" />

ロト・ドロワーver.1

順番を決めるくじ引き用のフラッシュを作った。



今回の肝は配列にそれぞれユニークな乱数をぶち込むとこ。
乱数を生成するたびに格納される配列の全ての要素と比較して
等しい値が無ければ生成した乱数を追加。
これで配列内の値はそれぞれユニーク数となる。

あ、windowsの人はフルスクリーンになるかも。
escで逃げて下さい。closeボタン必要だな。

ソースはこんな感じ。

`createNumArray`は`for`文の中で必要回数分繰り返し。`obj`は独自クラスの代理なので、`function createNumArray(i){・・・}`とやって使うこともできます。このソース、１つのメソッドにできれば`Math`クラスに追加して使えるんだけどなあ。

```js
this.numArray = new Array();
for( var i=0; i < this.maxValue; i++ ){//maxValueは必要回数
 this.createNumArray(i);
}
```

ここからがメソッド

```js
obj.createNumArray = function( i ){
 var randomNum = Math.floor( Math.random()*this.maxValue )+1;
 for( var j in this.numArray){
 this.checkNumArray( i, j, randomNum);
 }
 this.numArray[ i ] = randomNum;
 }
}
```

```js
obj.checkNumArray = function( i, j, randomNum ){
 if (randomNum == this.numArray[ j ] ){
 this.createNumArray( i );
 } else {
 break;
 }
}
```

Articles tagged 'Flash'