スマホ向けFlashサイトを作るには? 第二回 Flash編

このエントリーをはてなブックマークに追加

『スマホ向けFlashサイトを作るには?』というテーマで更新をしています。
第二回目の今回はFlash編です。
Flashのステージサイズや、フレームレートなどの設定について書いていきます。

Swiffy変換し、iPhone3G~4Sまで再生する事を想定しています。
※あくまで自分用の設定なので、もっといい方法あったら教えてください!

■Flash(Swiffy)側制作のガイドライン(参考値)

開発言語

 ActionScript 1or 2で制作する。
 SwiffyがActionScript3に非対応の為。
 Swiffyの詳細については第三回Swiffy編(近日更新予定)で解説します。

ステージサイズ

 → iOS用 横 320 px X 縦 416 px
 → Android用 横 320 px X 縦最大 550 px(縦幅は機種によって違う)
   iOS用をステージサイズによって自動レイアウトするようにする。

  デザイン制作時には、320 x 416にコンテンツ内容を入れ、
  縦550pxくらいまで、見える可能性があるので、
  リキッドデザインにする等、不自然に見えないようにデザインします。

フレームレート

 → 8~12ftp
 iPhone4,4Sだといい感じで動くのですが、
 iPhone3Gを考えると8~12ftpで制作する方が安全かと思います。
 ここはコンテンツや、ターゲットにするデバイスによって
 調整しながら変えていって下さい。

その他

 とにかくメモリに負担のかからない作りを心がける
 → 複雑なベクターファイルは避ける
 → 複雑な計算はしない(予め計算しておく)
 → 大きい場面転換はなるべくしない
 とにかくiPhone3Gだとメモリがほぼ無いように感じます。

■ステージサイズ詳細

ステージサイズについてもう少し詳しく説明します。

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編

3 Comments

  1. […] 第一回 準備編(本日アップ) 第二回 Flash編(本日アップ) 第三回 Swiffy編 第四回 […]

  2. […] スマホ向けFlashサイトを作るには?目次 第一回 準備編 第二回 Flash編 第三回 Swiffy編 この記事です。 第四回 […]

  3. […] スマホ向けFlashサイトを作るには? ■ 目次 第一回 準備編 第二回 Flash編 第三回 Swiffy編 第四回 […]

Leave a Reply