あまりの制限の多さと自分の無知に、もう２度とやらないぞ（このへんは潔い）と誓った携帯サイト用のflashコンテンツについてつまったところをまとめておきます。
まだローンチしてないけどね・・
ナレッジにもならないような基本的なことばかりですが、覚え書き。
flashコンテンツつくる仕事をしてて、なんとなく携帯flashつくる仕事をうけて、なんとなくな自分が心底嫌いになったという人が少しでも減りますように・・

だもんで基礎の基礎です、そんなことも知らなかったのか！！とか言わないように。
だってほんとに知らなかったんだもの。

外部データを取得するにはクリックが必要

与件のひとつにベースのswfはひとつだけど、更新が可能なように外部データを参照する仕組みにせよというのがありました。
りょーかい。
できると思ってた勝手に。

できないんだね。。。仕様なんだね。
まー携帯ということですから、PCブラウザみたいに勝手にデータをあれこれロードされては困るというのは確かにわかる。

できないとわかったとき自分の書いた見積もりのあまりの安さに涙がでてきました。

結局swfmillだったかな？
ベースとなるswfを元にサーバサイドでswfを生成する仕組みが入ることになりました。

再生モードによる違いを最低限しっときましょう

すげー簡単に考えると以下のようなかんじかと（間違ってたら誰かおしえて）
■インライン再生モード
flashバナー
タグでhtmlに記述

■インタラクティヴ再生モード
flashサイト
swfへの直リンク


今回のはボタン制御でflash内のいろんなシーンに飛ぶというコンテンツなんで後者です。

画面サイズには気をつけましょう

インタラクティヴ再生モードの場合、携帯画面上ではフルスクリーンで表示されるわけです。

そこでまず必要になる情報が画面サイズです。
まずよくサイトとかにのってる画面サイズは、画面全体なんで、flashコンテンツを再生できる領域ではないことを理解しましょう。
例えば僕の携帯はSH703Iなんです（いまだにこんな古いの・・）
画面サイズは240ピクセル × 320ピクセル。

壁紙だったらこのサイズでつくれば問題無し。
だけども携帯サイトをブラウズできる領域は上部の電波表示や下部のナビゲーション部分をひっこぬく必要があります。
で、ぼくのは240ピクセル×240ピクセルになるです。

なんで仕様通りのサイズでつくってんのに、左右に隙間ができて文字が小さくなるのか理解できませんでした。
単純に縦の幅が収まらなくて小さくリサイズされてたわけです。

で、自分用の携帯ではよい。
けれどもっと大画面の携帯が巷の主流。
さてどうなるか。

上部にすきまができるのね・・・

どうやら携帯は自分の画面サイズの縦よりムービサイズの小さいコンテンツはセンタリングして表示するみたい。
ということで240ピクセル×240ピクセルのコンテンツを240ピクセル320ピクセルの表示領域を持つ携帯で表示した場合、上部にすきまが40ピクセルできるです。
下部には隙間ができないのは、コンテンツが実際にはもっと長いから。
余白部分はなにも存在しないのではなく、コンテンツがあれば表示される。
例えば240　320の両者に対応するコンテンツを作るには、天地の40ピクセルにどうでもいいようなものしかおかないようにして、320の場合は-40ピクセルswf内のコンテンツを上にずらせばよい。
そうすれば同じ見栄えにはならないけど、空白はなくなる。

結論としては、
1.画面サイズごとに異なる縦幅のムービーサイズを持つswfをつくって機種により振り分け
2.画面サイズをswf呼び出し時にプログラムで取得してswf内に縦幅横幅を変数としてを動的に格納→変数の値によってコンテンツを上にずらす
3.そもそもそんな予算は元からないし、１機種向けにしかつくれないといってあるので無視

のどれかを選択する必要があります。

僕のだした結論は、皆さんもうご理解いただいているかと思いますが・・


3です。



できませんこの予算じゃ・・あきらめてよ。

スクロールの制御は大変


途中の仕様変更でコンテンツ量がとても縦240なんかに収まるはずがなくなりました。
しょうがないので下記を参照にスクロールの仕組みを実装しました。

■ケータイFlashで縦スクロールするページを作ってみよう
http://www.plusmb.jp/2008/11/28/1368.html

参照サイトは空のボタンをレイアウトしてカーソル位置を動かしているだけなんですが、今回のボタンはマウスオーバーイメージも用意しなくちゃならない。
マウスオーバーイメージはtelltargetでon/offさせればいいか。まーなんとかなるかと思ったら次はこんな問題。

telltargetアクションの制限


空のボタンから全部のボタンのon/offをtelltargetでアクションさせようとしましたが、一度にtelltargetできる個数に限界があるらしいです。
うまく動作せずでした・・（やり方がいけないだけかもしれないけど）
というわけで、ステージに配置されたボタンインスタンスが動作しなくちゃいけないし、スクロール制御用に空のボタンも用意しなきゃいけないし。。
今回のコンテンツは、1つのswf内に複数のシーンが存在してシーンごとにコンテンツの縦の長さもことなるので、スクロール位置の制御がデリケートなこと・・
ドコモのimenuのようにボタンが隙間なく配置されているようなレイアウトならまだ簡単だったと思うけど。

スクロールだけでまるまる2日は悩んでた・・

できることなら画面内ですべてのコンテンツが表示できるような内容にしてもらいましょう。

文字サイズ


最初に書いたように今回のswfは外部テキストを参照してダイナミックテキストに読み込む形が与件な訳です。
（外部テキストは頓挫したけど）
ダイナミックテキストには当然等幅フォントを指定していれこむわけですが、そこでサイズの問題が発生。
どうやら機種ごとにもってるフォントサイズが違うみたいなんですね。

等幅フォントの文字サイズの最小値って僕の携帯だとどうやら12ピクセルみたい。
10ピクセル指定とかは12ピクセルになっちゃいます。
見出しは12ピクセル指定／本文は10ピクセル指定とかにしてデザインしてたものが全部同じフォントサイズになって・・
10ピクセルのテキストエリアの背景に吹き出し画像をレイアウトするデザインだったので、吹き出し内に文字がはいらず、すべてデザインし直しました・・・

フォントの見え方も注意です。



とりあえず思いついたところはこんなかんじですが、もう3ヵ月もこんなん繰り返しているので忘れているのもあるかも。


これだけは声をだして言えます。簡単に手をだしちゃならなーと。

コメント

  • Subscribe to our RSS
  • Receive updates as soon as they are posted.

カテゴリー

アーカイブ

コメント

Flickr Photo

    IMGP1826IMGP1817IMGP1826IMGP1824IMGP1821IMGP1816IMGP1794IMGP1789IMGP1783IMGP1778IMGP1753IMGP1747IMGP1744IMGP1743IMGP1738IMGP1736

© 2010 TAKASHI LOG
Wordpress Themes by (DT)