携帯Flash待受ラボ!

 

galleryに待ち受けYGGDRASILL追加しました。

携帯Flashラボなんて大げさな名前をつけたこのブログですが、いつの間にか作品の展示場と化してはや1年。久しぶりに、待ち受けFlashの作り方をかるーく書いてみようと思います。
待ち受けFlashの作るためにactionscriptからって先入観持っている製作者の方も多いんですが、実は、待ち受けFlashに必要なaction scriptは無いんですよね。これが。

せいぜいfscommand2("SetQuality" , "high" );
ぐらいです。意味は「綺麗に出力しろ」って命令です。
無くてもいいんですが、これを1行目に書いてないとややシャギーが目立つ場合があります。それ以外は時計をつけたり、電波や電池によって何かを変えたりしなければ、必要ありません。
しいて言うならstop()とgotoAndPlay()かな。この辺はFlashを触ったことがある人はもうすでに知っているはず。

ということなのでactionscriptは過去のエントリを参照してもらうことにして今回は大まかな作り方の流れを話したいと思います。　作れない人は、多くの場合actionscriptの前でつまづいている。

■準備1．
まず大前提に作りたいものとかアイディアがある事。

これが無いと多分いくらactionscriptをマスターしたところで作れないです。最初はものすごく幼稚なことでいいんですよ。むしろ、途中でめんどくさくなって投げ出さないようにできるだけ、簡単なものがいい。絵心がある人だと自分の絵を少し動かすなど。絵に自身が無い人は画像を2枚か3枚使って連続表示の繰り返しのループにするとか。これだとアイディア考えるのも簡単でしょ。
例えば、普通の顔、怒った顔、困った顔の写真を連続で切り替えるとか、自分とか知り合いだと結構それだけで面白いものになります。


■準備2
ソフトを準備する。

準備1の作りたい待ち受けFlashのアイディアが浮かんだら次にソフトを用意しましょう。
必要なソフトはFlashというソフト。最新版はFlash CS4です。

結構お高いので、まずはAdobeのホームページに行って体験版を落としてくるのもあり。
1ヶ月無料のお試し期間があります。
あなたがWEBデザイナーであるならば、買わざるを得ないでしょう。


場合によって同じAdobe社のIllustratorやphotoshop、もしくはFireWorksというソフトがあると大変便利。
Design Flash Wall galleryの待ちうけは大半はillustrator+Flashで製作してます。
illustratorとphotoshopの違いは、前者はベクターデータ（線画系）を主に扱い、後者はビットマップデータ(写真系)を扱います。

大体下のようなイメージ。線画系のイラストはIllustratorを使わなくてもFlash単体でできないことは無いです。とりあえずは体験版なんかで試してみましょう。グラフィックやWEB系のクリエーターを目指す人には、Flash+photoshop+Illstratorはどうしても必須になるので、お金をためていずれ手に入れましょう。セットでお値打ちなものもあります。といっても単品それぞれ購入するようリお得というぐらいで高額ですが…　バージョンは特に高度なことをしない限りは、3〜4段階低いバージョンでも問題ないです。




■製作1
素材の用意。
線画のイラスト系だとイラストがいるので適当に紙に手書きでアイディアをイラストに起こしましょう。いきなりFlashとかillustratorで書いたところで大抵うまいものは書けません。
手書き最強です。
手書きしたものをスキャナもしくはデジカメで撮影してイラストレーターもしくはFlashに読み込んでトレースします。　実はここが最大の山場。トレースは熟練しても結構面倒です。
だから最初は簡単なものに。





画像系は場合によってphotoshopで切り抜きやレタッチをする。


ペンタブレットがあれば更にトレースや切抜きに便利。


■製作2
Flashでオーサリング。
ここまでくれば後は何とかなります。
まずは240×320ピクセル　Flashlite1.1の書き出し設定で新規ファイルを開きます。

先ほど製作1で作った素材を配置します。
illustratorで作ったイラストはコピー＆ペースト。jpgやphotoshopで作成した画像はCtrl+RでFlashに読み込みます。

配置した素材に適当にアニメーションをつけて書き出します。

イラストレーターやFlashで作った素材はベクター形式なので、拡大縮小、回転させても素材が荒れませんので、自由にアニメーションさせることができます。Design flash wall galleryでイラスト形が多いのもその為。

ビットマップ素材はタイムラインに順番に配置してパラパラアニメっぽくするのがセオリー。場合によってトゥイーンアニメーションも使いますが、回転や拡大すると画像が荒れるので、横縦斜めの平行移動。透明度を変化させるフェードインフェードアウトを使って動きをつけましょう。

都度プレビューして動きを確かめます。最近のFlashにはデバイスセントラルという、携帯端末をエミュレートするソフトが付属しているので、そこで動作確認をしましょう。

大体納得したらサーバーにファイルをあげて携帯電話でDownload。直接端末にメモリなんかで転送しても大丈夫です。待ち受けに設定して楽しみましょう。


最初は簡単なものから初めて、時計機能、電波、電池量によって変化など徐々に高度な待ち受けに挑戦するのがいいでしょう。
まずは作ってみるのが大切です。

あとクリエーターを目指す人なら、イラストレーターとフォトショップが扱えればFlash待ち受け以外にも紙媒体、WEB、動画作成などいろんなところで使えるので重宝します。まずは体験版で自分に合うか試してみてください。

どーもダーヤマです。
今回はランダムで待ち受け画像を変えるTips（携帯Flash）を紹介します。
まずは、ランダムで変更したい画像を用意してください。
そしてFLASHを開いてパブリッシュ設定をFLASH lite 1.1に。
これで下準備完了です。

それでは全体の流れを把握しましょう。
以上が流れになります。今回はルートのタイムラインに直接アクションスクリプトを記述しますが、お好みによってムービークリップ内にアクションスクリプトを記述しても大丈夫です。

その１．タイムラインの2フレーム目からランダムで表示したい画像を並べる。

今回は下記画像の様にムービークリップを並べました。

その2．タイムラインの1フレーム目にランダム発生プログラムを記述。

ランダム数を発生させるactionscriptはFLASHlite 1.1ではrandom();を使います。
()に例えば9を入れると0から8までの9つの数字がランダムで取得できます。
ここでは変更したい画像を2フレーム目から9フレーム目まで7つ用意したので2〜9までのランダム数を発生する式を用意します。

※ここでは2を足すことによって0〜7を2〜9までのランダム数に調整してます。
詳しいことはリファレンスのrandomの欄を参照ください。

その3．ランダムで発生したフレーム数にジャンプするactionscriptを記入。

その2で2〜9までのランダム変数を「r」をゲットしたのでgotoAndStop(r);で2〜9フレーム目のいずれかに飛ばしましょう。

まとめると

となります。

この講座のサンプルはこちら

携帯向けFlash講座　Tips6　「曜日の取得」

今回はactionscriptを使って曜日を取得して携帯の画面に表示してみましょう。
ではまず、製作の流れを把握して下さい。
以上が流れです。

その1.曜日を表示するダイナミックテキストを用意して変数を設定

下の画像のようにダイナミックテキストを用意して変数に「w」と設定します。

その2.fscommand("GetDateWeekday")で曜日を取得

FLASH lite 1.1ではfscommand("GetDateWeekday")で曜日を取得出来ます。
取得した曜日はいったん「weekday」という変数に入れてやります。
では1フレーム目に下記アクションスクリプトを記入してください。

ただ取得した曜日は0から6までの数字で返えってきますので、その3で人間のわかる曜日の表示に変更しましょう。
ちなみに返ってくる数字は
0: 日曜 、1: 月曜、 2: 火曜、 3: 水曜、 4: 木曜、 5: 金曜、 6: 土曜
となります。

その3.取得した曜日を人間のわかる表示に変更して、ダイナミックテキストに反映させる。

その2で取得した曜日は0〜6の数字で返ってくるのでこれをそれぞれ英語表記に変更してみましょう。（別に日本語でもいいです。）
変更には、if文を使います。if文はわかりやすく言うと「もし●●の時、□□しなさい」という場合の”もし”になります。
では取得した数字がもし「0」だったなら「sunday」という英語表記になおすアクションスクリプトを書いてみましょう。
※プログラムでの「等しい」は「=」ではなく「==」です。
同様に「1」だったら「monday」、「2」だったら「tuesday」・・・と追加していきます。
まとめると

です。


Flash講座サンプルダウンロード(Flash8)

携帯向けFlash講座　Tips5です。

Flash lite 1.1から携帯電話の電池残量と充電中であるかどうかを、fscommand2によって取得することが出来るようになりました。この新しいactionscriptによって、待ち受けFLASHの表示を変えることが出来き、いろいろと面白いギミックを待ち受け画面に仕込むことが可能です。

それでは、今回の電池残量によって画面表示が変わる簡単なサンプル作成の流れを把握しましょう。
以上が流れです。

では実際にサンプルを作ってみましょう。

その１．電池残量によって変えたい画像またはムービーを用意する。

今回は、下記のような電池残量ごとに変える画像を4枚用意し、まとめて一つのシンボルに変換しました。そしてまとめたシンボル内で先ほどの画像を２フレーム目から5フレーム目に配置します。

その２．現在の電池残量をfscommand2で取得する。

電池の残量はfscommand2のGetBatteryLevelで取得できますので、変数battLevelに取得した電池残量を代入します。　このbattLevelは今勝手につけた変数名なのでお好きな名前でどうぞ。

その3．電池残量によって変えたい画像を表示する。

さきほど「その２」で電池残量を取得したのでその値によって、表示する画像を変えるactionscriptをシンボルの1フレーム目に記入しましょう。
電池残量なしが0、
あと順に1、2　
最大3がGetBatteryLevelで取得できる値です。
ですので、0の時は2フレーム目に配置した画像に飛べばいいのですから
gotoAndStop(battLevel+2);でOKですよね。
その2からまとめると

以上です。

携帯用Flashコンテンツ作成講座Tips3ぐらい？

flash lite 1.1ではfscommand2で電波状況（信号強さ）を取得できます。
この機能を使って、電波状況によって画面表示を変えることが可能になりました。

今回のFLASH講座ではその作り方を説明します。
注意しなければならないのは、ドコモ、au、ソフトバンクで電波状況の強さを表す数値が
違うことです。　この辺ちゃんと各社であわせて欲しかった・・・・

では、作り方の流れを確認しておきましょう。
以上が流れです。

その１．変えたい画像やムービーの用意!!

ここでは下記4つのムービークリップを用意し、それを一つのシンボルにまとめて、
それぞれ、タイムラインに配置しました。配置したタイムラインには、stop();を記入して、ムービーをストップさせておきます。

その２．どのキャリアか判別する。

先ほども説明したようにキャリアによって電波状況の強さの捉え方が違いますので、どのキャリアなのかを判別します。書きアクションスクリプトを先ほど用意した。ムービークリップの１フレーム目のStop();の下に書き加えます。

ドコモの場合最大電波の強さは３です。
auの場合は４です。
softbankは100です。
なのでこの数字でどのキャリアなのか判別できます。

その3．現在の電波状況を把握します。

現在の電波状況はGetSignalLevelで取得できます。

その4．各キャリアにあわせて変えたい画像を表示する。

では先ほど取得した電波状況によって表示させる画像に移動しましょう。
ドコモならその3で取得した数値が、
アンテナ3本…3 　アンテナ2本…2　アンテナ1本…1　圏外…0
ですが、
au
アンテナ3本…4 　アンテナ2本…3　アンテナ1本…2　アンテナ0本…1　圏外…0
softbank(はよくわかんない)
アンテナ4本…100 　アンテナ2本…33　アンテナ1本…2　アンテナ0本…0　圏外…0
となるみたいですのでこれにあわせて下記アクションスクリプトを記入します。
以上です。
このプログラムでは最初の一回きりしか電波を取得しません。ご指摘うけて改定しました。 改定後は、エンジンと呼ばれるムービークリップを外部に設置してそこから電波状況をまとめた ムービークリップを操作します。エンジンの中でループさせているので常に電波状況を把握してムービークリップに反映すると思います。まだ確認してないので思います（笑） 改定版サンプルダウンロード

携帯向けactionscript一覧をサイトに追加しました。
主にFlash lite　1.1が中心です。

携帯向けFLASHの待受け製作やFlashゲーム製作の方どうぞご利用ください。

携帯用actionscript一覧

さて今回の携帯向け待ち受け作成講座のTipsは

曜日によって背景画像を変える方法を説明します。
ま、背景画像でなくてもいいんですけどね。

デザインフラッシュウォールギャラリーにある「goldenweek」がこれを採用してます。

まず作り方の流れを確認。
以上です。
簡単なので早速やって見ましょう。

その1．ムービークリップ内にそれぞれの曜日の背景を用意する。

まずムービークリップを一つ作って、下記のようにキーフレームを8つ作ります。
そしてラベルに名前を付けていきます。ここでは、sun,mon,tue,wed,the,fry,satと2フレーム目に付けました。そしてその曜日で表示したい背景画像を配置します。で配置したフレームそれぞれにstop();と書いておきます。

その2．曜日の取得

曜日の取得は、fscommand2("GetDateWeekday"); です。
この辺は呪文のようなものでfscommand2("GetDateWeekday");と叫んだら曜日が取得できると思ってください。
取得できた曜日は日曜が0、月曜が1、・・・・土曜が6というふうになります。

その3．if文によって曜日振り分けの式を書く

では先ほど取得した曜日をweekdayChangeという変数に格納し、if文で分岐させてやりましょう。
あ、weekdayChangeは今私が作った変数なので、wでも何でもかまわないです。
それでは、もし曜日が日曜なら日曜日の背景のあるフレーム(ラベルのsun)へ飛んでけ!というactionscriptを書いてみましょう!　ムービークリップの1フレーム目に以下のactionscriptを。

こうです。
あとはそれぞれ月、火、水、木、金、土の時のactionscriptを追加して完成です。

一応ムービークリップにしたので次回使う時は中に入っている背景画像のみ変えれば使い回しできるはずですよ。

今回は画質のお話です。
友人に頼まれて、Flash待ち受けを作ったんですが、「時計の文字部分が汚いよ」と言われました。

うーむ。PC向けのFlashではそんなこと言われたことないのに。

で調べたところなんと、携帯向けのFlash lite1.1では、デフォルトで画質が、高、中、低の3段階設定の「中」になってることが判明!

し、知らなかったー!



実はFlashは軽い軽いと言われてますが、この軽いって言うのがファイルのサイズのことで、結構CPUなどには負荷をかけていることがあって動作自体は実は作り方によっては結構重いものになってしまうことがあります。携帯のCPUはまだまだPCのCPUと比べて頭の弱い子なので、高負荷にならないように画質を落としているんでしょう。

負荷をかける代表的なもの、
アルファの多用
パスの複雑な図形の多用
こういったものはCPUに結構負荷をかけますので、使用を抑えるか、スペックの低い実機での確認が必要だと思います。

話は戻って字や、パスが汚いって状態には、下記actionscriptを1フレーム目に記述しておくと良いみたいです。

携帯むけFlashを作る上でのTipsです。

Flash lite 1.1ではボタンを作るとロールオーバーした時にデフォルトで
黄色い枠が付いてしまいます。
なぜこんな枠ができちゃうのかというと、おそらく携帯端末ではどのボタンにフォーカス
したかわかりにくいんだと思います。



これがデザインする上でウザイとお思いの方々、このボタン枠（フォーカス）をはずす方法があります。
1フレーム目にこのactionscriptを追加してみてください。

それでも消えない場合は
this.focusrect = false;
で試してみてください