スマホ向けFlashサイトを作るには？ 第二回 Flash編
『スマホ向けFlashサイトを作るには？』というテーマで更新をしています。
第二回目の今回はFlash編です。
Flashのステージサイズや、フレームレートなどの設定について書いていきます。
Swiffy変換し、iPhone3G～4Sまで再生する事を想定しています。
※あくまで自分用の設定なので、もっといい方法あったら教えてください！
■Flash(Swiffy)側制作のガイドライン(参考値)
| 開発言語 |
ActionScript 1or 2で制作する。 |
| ステージサイズ |
→ iOS用 横 320 px Ｘ 縦 416 px デザイン制作時には、320 x 416にコンテンツ内容を入れ、 |
| フレームレート |
→ 8～12ftp |
| その他 |
とにかくメモリに負担のかからない作りを心がける |
■ステージサイズ詳細
ステージサイズについてもう少し詳しく説明します。
iPhoneの場合は、iPhone3G,3GSに合わせて横幅を320で制作します。
それをHTML側でviewportを使って表示させます。
Androidの場合はviewportの効かない端末がありますので、Objectタグで100%表示にするか、直接サイズを横320に指定します。
さらにURLを表示するアドレスバーが邪魔ですので、
それを上にあげた時のサイズがブラウザでの最大表示サイズになります。
※HTML側の設定に関しては次のHTML編で説明します。
次に、他の端末のブラウザ最大サイズをみてみます。
・viewportで横320px時の縦幅
Android端末はObjectタグで横320に指定後、同じ比率での縦の大きさを表示。
| 端末 | 横幅 | 縦幅 |
| iPhone | 320 | 416 |
| iPad | 320 | 395 |
| Nexus1 | 320 | 508 |
| Nexus S | 320 | 508 |
| Galaxy S | 320 | 508 |
| Galaxy Tab | 320 | 525 |
| Galaxy Nexus | 320 | 504 |
| Desir | 320 | 533 |
| Desir HD | 320 | 533 |
表の様にiPadも含めると、最少ステージサイズは横320x縦395となります。
ただ、iPadなどのタブレット端末はスマホ用のUIだと大きく表示されすぎてしまいますので、
別のUIを用意した方がいいと思います。
Androidの場合は、縦幅がまちまちで、550px程まで見える可能性のある端末がありますので、
iOSのサイズのものをセンタリングレイアウトしたり、
スクリプトでブラウザサイズを取得して、Flash側で自動レイアウトで対応するのが良いと思います。
AndroidはiOSより縦長が多いです。
■フレームレート詳細
フレームレートについても少し詳しく見ていきます。
最適なフレームレートを調べる為に以下のムービーを作りました。
|
This movie requires Flash Player 9
|
■検証用SWF フレームレート：30fps ランダムな色・大きさの矩形が20個、 回転しながら落ちて、 下までいくと上に戻ってまた落ちる。 10秒後に 平均フレームレートが表示される。 |
この様な超絶シンプルなムービーです。
フレームレートは30fpsに設定しました。
それをFlashとSwiffyで再生してみます。
この様な結果となりました。
| デバイス | フレームレート | 対PC比(%) | |
| PC | PC Flashで再生 | 30 | 100% |
| PC Swiffyで再生 | 30 | 100% | |
| iOS Swiffyで再生 |
iPhone3G | 1.9 | 6.3% |
| iPhone3GS | 6.5 | 21.7% | |
| iPhone4 | 9.9 | 33.0% | |
| iPhone4S | 18.5 | 61.7% | |
| iPad | 8.7 | 29.0% | |
| iPad2 | 16.1 | 53.7% | |
| Android FlashPlayerで再生 |
NexusOne | 30 | 100% |
| NexusS | 30 | 100% | |
| Galaxy S | 29.8 | 99.3% | |
| Galaxy Tab | 29.9 | 99.7% | |
| Galaxy Nexus | 29.9 | 99.7% | |
| HTC Desir | 29.6 | 98.7% |
FlashPlayerは少し古い端末HTC Desirでも十分なパフォーマンスが出ていました。
やはりiPhone3Gが鬼門の様です。
このテストファイルでは、およそ2fpsしか出ませんでした。
沢山のオブジェクトを一気に動かすとフレームレートがでませんので、コンテンツのチューニングが必須と言えます。
では次にSwiffyがどの様なものか、どの点に気をつけるべきか、説明していきたいと思います。
『スマホ向けFlashサイトを作るには？ 第三回Swiffy編』
に続きます。
スマホ向けFlashサイトを作るには？第一回 準備編
スマホ向けFlashサイトを作るには？第二回 Flash編
スマホ向けFlashサイトを作るには？第三回 Swiffy編
スマホ向けFlashサイトを作るには？第四回 HTML編
[…] 第一回 準備編（本日アップ） 第二回 Flash編（本日アップ） 第三回 Swiffy編 第四回 […]
[…] スマホ向けFlashサイトを作るには？目次 第一回 準備編 第二回 Flash編 第三回 Swiffy編 この記事です。 第四回 […]
[…] スマホ向けFlashサイトを作るには？ ■ 目次 第一回 準備編 第二回 Flash編 第三回 Swiffy編 第四回 […]