swfmillを使って動的にFlashLite1.1を作成する方法（画像置換）
swfmillを使って動的にFlashLite1.1を作成する方法です。
#持っている携帯はAndroidで画面はハメコミです(^^;
ちょいと勉強がてらランダム待ち受けFlashを作ってみたいなぁって思い、せっかくなので、その手順を説明したいと思います。
必要となるもの
swfmill（cygwin版のパッチ入りswfmillのダウンロード）
Flash CS( Flash Lite作成環境 )
1枚30kb以内の画像３枚
#今までの記事、swfmillで動的FlashLite作成！もどうぞ。
Flash CSを使用してテンプレートなFlashLiteを作成
Flash CSを起動したら作成ウィザードでモバイル版を選択。
解像度は240x340程度がよいみたい。
画像をフレームごとに３種類配置。ファイル⇒読み込み⇒ライブラリに読み込みで配置できるようになります。
タイムラインで右クリック⇒キーフレームの挿入などでフレームを分割していく。いまいち自分もこの辺が苦手。
画像１を設定
画像２を設定
画像３を設定
次にランダム表示になるようにactionフレームの１フレーム目に以下のactionscriptを記述。
ランダムで2,3,4フレームに飛んでストップします。
i=random(3)+2; gotoAndStop(i);
CTRL+Enterで動作が確認できます。
ファイル⇒書き出し⇒イメージの書き出しでtemplate.swfと出力すればテンプレートの完了となります。
今後、このテンプレートなswfファイルを使って動的にFlashLiteを作成していきます。
Flaファイルのダウンロード
http://moeten.info/flex/20090903_flashlite/template.fla
swfmillを使用してswfをxmlに変換
swfmillを使用して先ほど作成したテンプレートなswfをxmlに変換。
swfmill swf2xml template.swf > template.xml
template.xmlのダウンロード
http://moeten.info/flex/20090903_flashlite/template.xml
テンプレートxmlファイルを編集
xmlファイルを開いて、画像が格納されている部分をPHPが置換しやすいように%IMAGE1%などと書きかえる。
＃長い文字化けっぽい文字の羅列がある部分が画像。
今回は以下のように修正しました。
<?xml version="1.0" encoding="UTF-8"?> <swf version="4" compressed="0"> <Header framerate="24" frames="4"> <size> <Rectangle left="0" right="4800" top="0" bottom="6800"/> </size> <tags> <SetBackgroundColor> <color> <Color red="255" green="255" blue="255"/> </color> </SetBackgroundColor> <DoAction> <actions> <PushData> <items> <StackString value="i"/> </items> </PushData> <PushData> <items> <StackString value="3"/> </items> </PushData> <Random/> <PushData> <items> <StackString value="2"/> </items> </PushData> <AddCast/> <SetVariable/> <PushData> <items> <StackString value="i"/> </items> </PushData> <GetVariable/> <GotoExpression play="0"/> <PushData> <items> <StackString value="t"/> </items> </PushData> <GetVariable/> <Pop/> <EndAction/> </actions> </DoAction> <ShowFrame/> <DefineBitsJPEG2 objectID="1"> <data> <data>%IMAGE1%</data> </data> </DefineBitsJPEG2> <DefineShape objectID="2"> <bounds> <Rectangle left="0" right="4800" top="0" bottom="6800"/> </bounds> <styles> <StyleList> <fillStyles> <ClippedBitmap objectID="1"> <matrix> <Transform scaleX="20.00000000000000" scaleY="20.00000000000000" transX="0" transY="0"/> </matrix> </ClippedBitmap> </fillStyles> <lineStyles/> </StyleList> </styles> <shapes> <Shape> <edges> <ShapeSetup fillStyle1="1"/> <LineTo x="4800" y="0"/> <LineTo x="0" y="6800"/> <LineTo x="-4800" y="0"/> <LineTo x="0" y="-6800"/> <ShapeSetup/> </edges> </Shape> </shapes> </DefineShape> 〜 中略 〜 <PlaceObject2 replace="1" depth="1" objectID="6"/> <ShowFrame/> <End/> </tags> </Header> </swf> EOD;
template_php.xmlのダウンロード
http://moeten.info/flex/20090903_flashlite/template_php.xml
PHPを使用して画像部分を置換する。
PHPで画像を置換。
//テンプレートxmlファイルの取得
$template = file_get_contents( "template_php.xml" );
//画像base64へエンコード
$image1 = base64_encode( file_get_contents( "image1.jpg" ) );
$image2 = base64_encode( file_get_contents( "image2.jpg" ) );
$image3 = base64_encode( file_get_contents( "image3.jpg" ) );
//base64文字列に改行文字があるとバグる場合があるので取り除く
$arr_from = array(
"\r\n",
"\r",
"\n"
);
$arr_to = array(
"" ,
"" ,
"" ,
);
$image1 = str_replace( $arr_from , $arr_to , $image1 );
$image2 = str_replace( $arr_from , $arr_to , $image2 );
$image3 = str_replace( $arr_from , $arr_to , $image3 );
//画像の置換（書き込み）
$template = str_replace( $arr_from , $arr_to , $template );
$arr_from = array(
"%IMAGE1%",
"%IMAGE2%",
"%IMAGE3%"
);
$arr_to = array(
$image1,
$image2,
$image3
);
$template = str_replace( $arr_from , $arr_to , $template );
//置換済みxmlファイルを出力
file_put_contents( "template_new.xml" , $template );
以上でテンプレートファイルの画像部分を置換をすることができました。
置換してできた新しいテンプレートファイルをダウンロード
http://moeten.info/flex/20090903_flashlite/template_new.xml
swfmillを使用してxmlファイルをswfに変換
次に画像を置換したxmlファイルをswfに変換します。
swfmill xml2swf template_new.xml > template_new.swf
これでランダム壁紙のFlashLiteがプログラムで作成できました。
実際のサンプルはこちら
こんな感じ。時計はauの機能です。
http://moeten.info/maidcafe/i/?&m=s&id=123
携帯からアクセスするとFlashLiteが表示されます。
パソコンからでもページを表示した後、右クリック⇒再生でどんな感じになるか見れます。
表示されたFlashを保存して壁紙待ち受けに設定すると、携帯を開くたびに画像がランダムで表示されます。
作成する上で気をつける点
作成する上で気をつける点。
FlashLiteは100kb以内
画像を置換する場合は画像をbase64にテキスト変換した際、改行文字を削除しておく。
swfファイルに直接アクセスさせる。softbankでは
<?php echo file_get_contents( "template_new.swf" ); ?>
などで直接swfファイルを出力すると、表示はできるが、保存ができないので、
<?php header( "HTTP/1.1 302 Found(Moved Temporary)" ); header( "Location: http://moeten.info/maidcafe/i/flashlite/template_new.swf" ); ?>
として直接ファイルにアクセスをさせてswfファイルを開かせる。
