メモ

Google Swiffyを試してみました。【5.画面フィット・ステージサイズ】

Posted on by seigo

Google Swiffyを試す。第5回です。

今回は画面フィット・ステージサイズのお話です。

いままでの検証サイズ200×200だとiPhoneで検証してても小さく出てしまいちょっとさびしいので画面フィットさせる方法を試してみます。
（ちなみに200×200は携帯電話でよく利用されるサイズ240×240も少々小さくて無難という無根拠の値でした笑）

今回のソース

ステージにまつわる基本的なStage.width,Stage.height,Stage.scaleModeを調べてみます。
今回はiPhoneにサイズをあわせやすくするため320×480で作りました。

FLASH
[SWF]https://www.1ft-seabass.jp/memo/archives/google_swiffy_005/google_swiffy_005.swf,320,480[/SWF]

テキストフィールドを3つ設置し、sw,sh,smという変数に関連付け、以下のようにしています。

var sw:Number = Stage.width;
var sh:Number = Stage.height;
var sm:String = Stage.scaleMode;

それでは変換してみます

まず、変換されたものは以下の通りです。

あらら、Stage系3つともだめですね。今後のバージョンアップで期待ですが、今は無理のようです。

また、別ページで見てもらうと分かるのですが、画面サイズがとても小さく出てしまいます。

→別ページで開く

htmlでviewportを設置してみる。

Stage系関数が使えないこの状況だと現状ではFLASH内でいろいろやるのは難しい気がするので、やり方を変えて見ます。
このGoogle SwiffyがHTML5で出来てるということで、HTML側の設定でiPhoneに対応してみます。

iPhone Safariはmetaタグでviewportを設置すると表示サイズが制限できます。

例えば、スケールなしでコンテンツをフィットさせて、スケールを受け入れない設定のは以下の通りです。

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">

iframeだと分かりにくいですね。iPhone Safariにて別ページで開くと無事フルサイズで表示されます。

→別ページで開く

しかし、以下のキャプチャみたいにアドレスバーがでてしまうのはどうにかならないかなー。後で調べてみよう。

おわりに

今回はフルサイズを目指すうえでGoogle SwiffyのFlashからHTML5への変換の精度を見るというよりも、HTMLの機能を借りてフルサイズ表示を実現してみました。
将来的にStageクラスの機能がGoogle Swiffy側で変換してくれるとiPhone 3GS・iPhone4・iPadなど画面サイズの違いにも対応しやすくなりますが、いまのところ、このviewport実装でもある程度は問題ないと見ています。

それでは、今回のファイル一式を置いておきますので興味のある方は変換して試してみてください。

.fla(CS4作成)データダウンロード：google_swiffy_005.zip

それでは、よいFlash Lifeを。

、、、
seigo