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ファイルを開かせる。

参考になるサイト

以下、とても参考になるページです。

各キャリアの画像保存・転送制限の設定方法をまとめてみました

「ケータイFlashのブラウザキャッシュを回避するには」

「swfmillでケータイFlashを動的生成してみよう（文字列置換編）」

PHP+swfmillでswfをいじってみた

Flash Lite 1.1でランダムで画像が変わる待ち受け

Flash Lite 1.1でのバッテリー残容量の取得