携帯でFlash(lite1.1/SWF4)待ち受けを作成

| HOME | backupに戻る | 作成日:平成19年11月24日現在

ページの概要

このページは、携帯カスタマイズについての雑記が日記調で書かれています。 携帯の機種は07年夏型の「Softbank 814T」で、 前説に着うた作成について(ただしMMF)、本題にFlashを使った動く待ち受け画面について、作成した3日間の流れの順に記述しています。 「私はこうやって作った。」という内容なので汎用性が少なく、携帯機種や表現したい待ち受けの内容によっては、このページは不十分かもしれません。

Flash待受についてですが、紆余曲折を経て(後述)「スプライトを利用したパラパラアニメ+デジタル時計」となりました。 なお、Flashを作成したソフトウェアは、フリーソフトの「Suzuka」です。 Flashソースコードは最終改訂版のみページの最後に載せてあります。

はじめに

ただでさえ忙しいのに急な仕事が入り寝不足だったので、夜寝ぼけて階段落ちをしてしまい利き腕の上腕骨を骨折してしまった。 同僚には大変迷惑をかけることになり申し訳ないと思いつつも、怪我が痛いだけで何か病気になっているわけではなく自宅療養で仕事をしていないため、 疲れが無く頭は普段よりスッキリしているぐらいだったりする。

まだ骨は全然くっついていないが痛みに慣れてくると、元来休日サービス出勤好き(?)の仕事型人間であったため、すぐに暇を持て余してしまった。 医者からはまだ運動を禁止されているため、手首のリハビリを兼ねて何か自宅でできないかと考え、携帯のカスタマイズをすることにした。 (人間することがないと携帯をいじり始めるのは共通か…。)ちなみにまだ骨折した腕は三角巾と包帯でバッチリ固定されている。

とりあえず着うたと待ち受けでしょう

実は19年9月に通信会社をauからsoftbankに変更したばかりで、暇もなかったためデフォルトのまま使ってきていた。機種はTOSHIBAの814T、チタンケースに 萌えて選んだ機種である。

Softbankに変更したのは当然安いからだが、いざカスタマイズしようと思ってみると安い理由が何となくわかってきた。 以前使っていたauからすると音楽関係の出力能力は格段に低いのだ。まあ安いからいいんだけど、 auのときも同じTOSHIBA製だったがなにゆえこんなにも機能に差があるのだろうか?

着うたはいわゆるえせ着うたといわれるmmf、待ち受けは(紆余曲折を経て)flash(フラッシュ)になった。以下にその顛末をつづる。

着うた作成

自作できる楽曲のファイルフォーマットはmmfのみ、しかも着うたに指定できるファイル容量上限が240KBぐらい。これではいくらシンセサイザーを調整しても ステレオ音源では10秒程度までしか再現できない。音質を無理に高くすると音割れもする。楽曲のサビ部分が収まらないのだ。 流石に「なんちゃって着うた」といわれるmmfだけはある。

というわけで歌は諦めて別のもにした。選んだのはゲーム音楽の「FF5サントラ」CDから「クリスタル」、そして映画の「紅の豚」DVDから 「飛ばねえ豚はただの豚だ」「バカッ」という台詞のやりとりの部分だ。

「クリスタル」の着うたは以前のau端末でも自作して使用していた。そのときはサビを30秒に切り取り、 ステレオの3g2フォーマットであったため、ほとんど劣化もなかったが、今回は20秒に短縮ししかもモノラルで作成した。ファイル容量の上限にかかるためである。 周波数もかなり落とした。

「紅の豚」の方は短い秒数なのでステレオのままだが、周波数自体は落とす必要がある。 周波数上限はシンセサイザソフトの作成元YAMAHAのページにあるので参照されたい。

作成方法については「自作着うた作成」(外部リンク)(訂正:リンク消し:サイト消滅)を参考にした。 自分の好きな歌の自分の好きなフレーズを着うたにしたいという場合には、欠かせないサイトである。 着うた作成に必要な各フォーマット変換ソフトやシンセサイザなどのリンクも完備し、このサイトをたどるだけで全て揃う優良なサイトである。

当然のことではあるが、着うたを作成するベースとなる楽曲ファイルは 自分で買ったものから抽出しなくてはならないし、かつ作成した着うたを他人に譲渡してはならない。

なお、やってみればわかることだが、Softbank814Tのmmfタイプは「MA-7」でいける。

待ち受け作成

さて、本題はこちらの待ち受け画面である。だいたいにおいてデフォルトの待ち受けというものは「可もなく不可もなく」という万人受けするものではあるので、 使っていてストレスにはならないが、決して楽しくもない。 ネット上にはオシャレな待ち受けがいくつでも転がっているが、私は「自分オリジナル」のものが欲しくなるタイプなので以前から「お好みのカット」にこだわってきた。

まずメイン画面のピクセルサイズを調べるために取扱説明書を読んだが、なんとこれが載っていない。 かわりに「Softbank 814Tの待受画面で、メインディスプレイの壁紙にアニメーションを設定できる(取扱説明書11-6)」との記述を見つけた。 早速パラパラ漫画をPCで5枚自作し取扱説明書の順に設定を行ってみたが、動かない。「価格.com」などで調べ、 結局は2ch情報で「壁紙設定後に電源ボタンを1回押せばいい」ことがわかったが、取扱説明書はいまいち不親切である。 なお、途中Softbankのヘルプにも電話してみたがこちらでは結論は出なかった。ただし対応は丁寧で報告も比較的早くいただいた(感謝)。

ネットで調べたところ、メイン画面のフルサイズは、W240*H320(現行機種の標準サイズ)のようである。(残念ながら「メニューボタン」を除いたサイズ がわからないため、着信画像まではまだ作れていない。)

ステップ1:機種提供型パラパラアニメーション

取扱説明書11-6の手順で設定をしていくと、814Tの機能が提供するスクリーンアニメーションが利用できる。

パラパラ漫画を再現するために5枚の画像を準備しなんとか表示までこぎつけた。(表示方法は「カレンダー」というものを選択)。

しかし、画像の表示間隔が遅い。もともとパラパラ漫画を再現するための機能ではなく、たとえば家族の写真を複数枚ゆっくり眺める、といった使用方法 のために準備された機能なのだろう。

とても「アニメーション」といえるものではなく、納得がいかないので別の方法を試してみることにする。

ステップ2:Flashの利用(PhotoShop Elements5.0編)

取扱説明書をもう一度読んでみると、どうもこの機種はFlashが使えそうだとわかった。

Flashならばアニメーションが得意なはずだ。ただし、私はFlashを一度も作成したことがないため、 まずはどうやってFlashを作成したらよいかを調べることから始めた。

パラパラ漫画の元となる画像ファイル(JPEGやPNG)を作成するために使用しているソフト PhotoShop Elements5.0に、Flashを利用した機能があると書かれていたので利用してみた。

しかしこちらも、最初から準備されているアルバム機能に画像ファイルを当てはめる、という仕組みで、本格的に作成するならFlash8を買えということであった。 そこでAdobeのサイトでFlash8の価格を調べると、8万円! とても手が出ない。

どうにかならないかとネットで調べてみたところ、フリーソフトでもFlashが作成できるらしいことがわかった。

ステップ3:Flashの利用(Suzuka編)

フリーのFlash作成ソフトではじめに見つけたのが「Suzuka」であったため、このソフトウェアを試しにインストールしてみて、 パラパラ漫画が作れるかどうか調べてみた。 (同様にフリーソフトで「parafla」があり、こちらの方が枯れている分だけ解説サイトが多いので利用しやすいかもしれない。 ちなみに「Suzuka」の総合解説サイトの質問用掲示板は私のIE7では表示できなかった。おそらくPHPが未対応。)

結論から言うと、Suzukaで携帯用flash待ち受けを作成できたので、下記に両ソフトへのリンクを貼っておく。 次項からは「Suzuka」を使用したFlash作成顛末である。

Suzukaのページ

paraflaのページ

Suzukaを使って待ち受け作成

Suzukaを使って待ち受けflashを作成した顛末を以下に記述している。途中経過は「失敗の理由」の記述であるため、結論だけ欲しい場合は 最下段の項目だけ読んでもらいたい。

なお、今回利用したパラパラアニメーションは「メイの散歩アニメ」で、1歩分作れば後は繰り返し表現で違和感がなく、 使用枚数も少なくてファイルサイズを軽くできるので、待ち受けに向いており採用した。 (没案→)最初は「紅の豚」DVDから空賊とフィオ嬢の記念撮影シーンで、マンマユートが周囲の空賊を蹴散らして写真を独占するカット (主要なコマだけでも1秒に10カットぐらい含まれている!)を抽出したのだが、待ち受けにした場合、マンマユートのおっさんが延々と周囲を殴りつけ、 フィオはニコニコしたままという、なんともシュールな繰り返しになり不自然であるため却下となった。 「一番お気に入りのシーンが一番それに向いているとは限らない」のである。 もちろん全て所有DVDから個人使用のためだけに抽出したものである。

しかしこのため著作権上、実際のカットを含む作業風景を公開できないので、ほとんど文章のみの解説なるがご了承いただきたい。 しかしながら実際の作業画面がないとフリーソフトの操作というものは得てして面倒くさいというのも確かであるため、最も重要と思われる完成時のレイヤー構成 (一般レイヤー・スプライトレイヤー:後述)のみ、著作権に引っかかる画像を除いてプリントスクリーンしたので、ページの最後を参照されたい。 (こちらも手探りでflashを作成してきたので、各作業過程の画像はとても面倒で保存などしていない。)

インストール手順については割愛する。Suzukaのページに記載されている。

同様にソフトウェアの使用方法についてもごっそりと割愛する。ソフトウェア付属のヘルプやすでに解説ページが存在する。 スプライトや(今回は使用していない)トゥイーンなど初めての方が聞き慣れない用語については、最下段のリンクを参照されたい。 同じ初心者の私が最終的に理解でき助かったページを貼り付けてある。

Suzuka(1):パラパラアニメーションのみ

suzukaのインターフェイスはおおざっぱに言うと次の通りとなる。 作業ウィンドウの左側に素材の登録場所があり、いったんそこで保管した素材を画面上側の「レイヤー」に組み込み、 「レイヤー」の右側にあるタイムスケジュール上で表示タイミングの時間調整をする。 最後に「メニュー」から独自ファイルで保存した上でswfファイルに書き出す、という流れになる。 いったんswfファイルにすると編集はできないので、独自形式での保存は重要である。

今回は5枚の画像を準備し登録、それぞれをレイヤーとして組み込み、 表示時間は1枚につき「4(単位時間:コマ)」として各々をずらしてタイムスケジュールを組んだ。

ツールにプレビューがあるのでそちらで動作確認をする。動作していればOK。

作成したものをSuzukaのファイルとして保存後、swfファイルを書き出した。

このswfファイルを携帯に転送する。なお、転送にはUSBケーブル(接続口に注意)とMicroSDカードが必要である。メール添付という方法もあるが、 バイト数が大きいため時間がかかり面倒なので私は避けた。

SDカードとUSBケーブルを近くの電気店で購入し接続する。 パソコン上からの操作で、携帯のSDデータファイルからFlash(R)フォルダへ先ほど作成したswfファイルをコピペする。(USBを安全に抜いたら) 次に携帯の”SDカード側の”Flash(R)フォルダに先ほどのファイルがあるので、メニューから壁紙に指定する。 待ち受け画面に戻り電源ボタンを1回押すとFlashが実行される。

げっ、携帯標準機能の時計が消えている。どうも仕様のようだ。アニメーション自体はうまく働いている。パラパラアニメ感も申し分ない。 ただし日付や時計がないのは大変不便。ネットで調べてみると、flash自体に時計のプログラムを組み込めるとある。

次への課題は、flashプログラムに時計を組み込むことになる。

Suzuka(2):時計を表示(その1)

日曜日起き出してすぐPCに向かう。 よくよく調べてみると、携帯用Flashのプログラム文はPC用と違いflash lite 1.1という規格でSWF4相当のようだ(ただし厳密に言うとSuzuka側のバグがある:後述)。 最近ではflash lite 2.0対応の携帯端末もあるようだが、 Softbankで最新規格に対応しているはずがないという偏見を元にflash lite 1.1でプログラムを書くことにする。

flashを一から勉強する気はないので、プログラムソースを公開している人からパクることにする。 参照ページの下段が携帯用デジタル時計のソース。ありがとうございました。

実は他にも調べたページはあったのだが、使用しているソフトに違いから細かい用語に違いがあり、現段階の私の能力ではSuzukaに置き換えて設定ができず、 ソースチェックでエラーが消えず断念した。そのため上記サイトのソースだけを使用したが、ある理由で結局後で多少苦労した。(後述)

さてまず、時計自体は文字列であるため、素材の場所に「テキスト」を新規作成し素材として保管。 ただしプログラムで取得した時刻を適時書き換えて表示していかなくてならないため プロパティで「ダイナミックテキスト」を選択。表示サイズはとりあえずW200*H30に設定した。

その上で上記サイトの指示通りレイヤー側にActionScriptを登録しプログラム文を丸ごとコピペした。ただし年と秒はいらないと思いプログラムから削除。 ソースチェックしたがエラーはなかったので、素材庫からテキストをレイヤーに登録し「インスタンス名」を上記サイトの指示通り変数名「now_time」にした。

テキストのタイムスケジュールは画像が表示されている範囲全体までのばした。そうしないと1巡ごとに一瞬だけ表示されチカチカするため。

また前日のパラパラアニメの枚数が5枚だったのは、携帯の機種機能の上限が5枚であったためだけなので、もう少しアニメーションの質を上げるために 画像を8枚に増やすことにした。なお、後でわかったことだが携帯のFlashはファイルサイズの上限が100KBになっており、Suzuka側で自動的に 画像をjpeg圧縮するなどしてサイズ調整をしてくれていた。

作成したものをSuzukaのファイルとして保存後、swfファイルを書き出した。

携帯で壁紙指定したところ時計が表示された。

やったぁ、と思ったのもつかの間、2つ問題があることがわかった。一つ目は、時刻(分)の変更が携帯の時計より少し遅れること、もう一つが 「12時」と「2時」や「40分」と「5分」というように表示される桁数のズレがあること。 1桁と2桁で表示位置が変わり見栄えが悪い。つまり「12:04」とは表示されず「12:4」となる。

次への課題は、時刻の表示桁数を揃えることになる。

Suzuka(3):時計を表示(その2)

ネットで調べると、桁揃えのプログラムはいくつか公開されていた。しかしほとんどがPC用で携帯用で公開されているものが少なく、あったものは コピペしてソースチェックにかけるとエラーとなってしまった。

とりあえずif文を使うことはわかったので、いくつかの参考サイトを調べて、if文の構造を把握後、 とりあえずエラーが表示されなくなるまで自分でソースを改良した。(←丸一日を費やし涙なしでは語れない。)改良後のソースについては次項を参照されたい。

また、プログラム構文を練る間に同時進行で時刻のずれ問題の方を考えてみることにした。

これは単純で、パラパラ漫画が1巡するまで時刻を見直さないという風に設定したからである。よって、タイムスケジュール上の1コマごとに 時刻を読み直すという設定(ループ設定)にすればよいはず。

ネット上で調べてみると、ループについてはActionScriptのタイムスケジュールの2コマ目に、 ループを指示する命令文「gotoAndPlay(1); 」を書けばよいことがわかった。 なお、確認上「秒」があった方がわかりやすいので先ほど消した「秒」部分のプログラム文を再度書き足した。

swfファイルにして携帯上で実行してみると、なんとパラパラ漫画が動かない。時計の方はうまく秒まで動いている。 どうもActionScriptのループ命令に画像まで引きずられ、延々と1コマ目を再生しているようである。

次への課題は、複数のオブジェクト(時計とアニメーション)を同時に動かすことになる。

Suzuka(4):時計とアニメを同時に動かす

アニメの元になっている画像ファイルがスクリプトに引きずられているなら、レイヤーに登録する段階で別の方法があるのではと考えた。 つまりはActionScriptと同格のものを登録し、画像はその”同格のもの”の子分とすればよいのいではないか?という考えである。

ネット上で調べてみる。あった。どうやらスプライトというらしい。

スプライトは、まず左側の素材保管庫で作成し、スプライトに画像ファイルを登録し、画像を登録したスプライトをさらにレイヤーに登録する 、という手順をとる。

やり方については、こちらのサイトで 調べさせていただいた。このサイトの 「後編:スプライトやトゥイーン機能を使えば複雑な動きも楽々」 のページに詳細が載っているので参照されたい。

これで一応は、時計とアニメーションを同時に動かすことができた。

ただし、Suzuka上でプレビューをみるとループミスがあるらしく変数のクリアがされておらず、すごいスピードで「時時時時時…」のように 時刻の間の文字が増殖する。しかし、swfファイルにして携帯上で実行したところ問題はなかったので、flash lite 1.1特有の問題かもということで済ませた。 正直あんまり細かなソースミスまでは今の段階では気にしてられない。flashのプログラム文に手を出してまだ2日目である。

下記に私が使用しているActionScriptソースを記載しておく。ただし、Flashを作り始めて2日目に人間のソースであることをお忘れ無く。 何かしら問題があっても、申し訳ないが対応できない。

注:Suzukaのflash構文は一部独特で、lite1.1ともSWF4とも異なる部分があるそうだ(2ch情報)。例えばaddを&と表記しないとスクリプトエラーになる。 よって一般的なflashのHowto本のままソースを書いても、Suzukaではいつまでたってもエラー表示が消えない場合もあるので適時合わせてもらいたい。 エラーが出ず、パブリッシュできればとりあえずは携帯上で実行しても比較的安全だろう。 (携帯機種によっては誤ったFlashを実行するとハングして電源も切れないものもあると噂で聞いた。)

ActionScriptソース(携帯用デジタル時計)

【補記2008.01.16】作成環境:Windows XP Home SP2/ Suzuka ver0.8.0.1 / ページ作者もSuzukaのサイトとプログラムのヘルプまではつぶさに確認してから作成している。 インストールしてコピペで、ウホッ完成、なんて都合のいいことにはならないかもしれないのでご注意願いたい。あくまでも参考程度にしておいてね。 (そもそも最初に自分で調べたときに思ったよりも携帯用ソースを公開しているサイトが少なくて苦労したので、恥を覚悟でこっそりと出してあるだけだったのに。 思ったよりも検索で引っかかってしまうらしい、携帯用のコマンド2,3個入れないと引っかからないかと思っていたんだけど。)

フレーム1(デジタル時計)

now_time = "";
now_time2 = "";
now_time3 = "";
//変数の初期化
 
( "week" & "0" ) = "日";
( "week" & "1" ) = "月";
( "week" & "2" ) = "火";
( "week" & "3" ) = "水";
( "week" & "4" ) = "木";
( "week" & "5" ) = "金";
( "week" & "6" ) = "土";
//曜日用の擬似配列
 
//now_time(日付)
now_time_mth = FSCommand2("GetDateMonth");
if (now_time_mth<10) {now_time_mth = " " & now_time_mth;}
now_time_mth = now_time_mth & "月 ";
now_time = now_time & now_time_mth;
//月
 
now_time_dy = FSCommand2("GetDateDay");
if (now_time_dy<10) {now_time_dy = " " & now_time_dy;}
now_time_dy = now_time_dy & "日 (";
now_time = now_time & now_time_dy;
//日付
 
wd = FSCommand2("GetDateWeekday");
now_time = now_time & valueOf( "week" & wd ) & ") ";
//曜日

//now_time2(時刻)
now_time_h = FSCommand2("GetTimeHours") ;
if (now_time_h<10) {now_time_h = "0" & now_time_h;}
now_time_h = now_time_h & ":";
now_time2 = now_time2 & now_time_h;
//時刻
 
now_time_m = FSCommand2("GetTimeMinutes");
if (now_time_m<10) {now_time_m = "0" & now_time_m;}
now_time2 = now_time2 & now_time_m;
//分

//now_time3(秒)
now_time3 = FSCommand2("GetTimeSeconds");
if (now_time3<10) {now_time3 = "0" & now_time3;}
//秒

フレーム2(ループ命令)

gotoAndPlay(1);

ソースについては、coreさんの携帯用デジタル時計のソースがベースとなっている。これにif文を加え、都合上変数を3つに分けた。 now_timeは、月、日、および曜日を取得する変数。now_time2は時と分を取得する変数。now_time3は秒を取得する変数。 それぞれ表示位置やフォントの大きさを別個にしたかったため変数を分けて別々のテキストから参照できるようにした。(インスタンス名を固有名にするため。)

上記アクションスクリプトがレイヤーの1コマ目(1フレーム目)にあるとすると、その2コマ目にループ命令を加える必要がある。

スプライトには8枚のPNG画像を登録している。(ただし実際にはSuzukaによってjpeg圧縮を強制的にかけられる。)スプライトに登録した画像は レイヤー側に単体で追加する必要は全くない。以前のものが残っているようなら消してしまってよい。 下記スプライト編集画面の通り画像1枚につき2コマのタイムスケジュールを組んでいるので、合計16コマで画像が一巡する。よってスプライトとテキストは 下記通常編集画面の通り、全体編集でも16コマ分タイムスケジュールをとった。ついでに背景も強制的に16コマになる。

参考スナップショット(通常編集画面)ActionScriptフレーム1(時計)(画像サイズ1024*768)

参考スナップショット(通常編集画面)ActionScriptフレーム2(ループ命令)(画像サイズ1024*768)

参考スナップショット(スプライト編集画面)(画像サイズ1024*768)

参考サイト一覧

| HOME | backupに戻る | 作成日:平成19年11月24日現在


for back up,NYARGO