Flashでやってしまいがちな16個の間違った使い方

Photoshopでやってしまいがちな12個の間違った使い方 – GIGAZINEが面白かったので、Flash版として「Flashでやってしまいがちな16個の間違った使い方」としてまとめてみました。

1.シンボル化しないままトゥイーンを作成している

まずは誰でも一度はやったことがあるであろう、シンボル化しないままのトゥイーン作成。ライブラリに「トゥイーン○」という名もなきシンボルが作成され、後で見返したときや他の共同作業者が非常に困ることになります。

2.テキストフィールドに直接リンクURLを設定している

getURLやnavigateToURLなんてスクリプトを知らない初心者のころはテキストフィールドにURLをいれてテキストリンクを作っていました。これは演出が作れないので、慣れてくると使うことはないでしょう。

3.文字をボタンに含めたときに後ろにシェイプを敷いていない

ボタンを作ったときに、ヒットエリア領域が文字のシェイプだけになってしまい、クリッカブル領域が文字のシェイプ部分だけに限定されてしまうことがあります。解決方法は透明な座布団(シェイプなど)を敷いたり、テキストのアンチエイリアスの種類を「読みやすさ優先」に設定することです。

（追記：2010/7/12）アンチエイリアスの種類を「読みやすさ優先」にする場合は、次の事象が発生することにご注意ください。

• F-site | テキストでつくったボタンのヒット領域

4.背景色としてステージの背景を指定している

SWFの背景はHTML側のパラメーターで何色にでも変更できるので、最背面のレイヤーに透過しないシェイプを敷くのが一般的です。特にYahoo!などのポータルサイトの媒体バナーではステージの背景を設定すること自体を禁止しています。

5.虹色のグラデーション

あの虹色は誰が使うのだろうと思いますが、レインボーグラデーションを乱用するのは控えた方が良いです。例えばここをクリックすれば七色のまばゆいグラデーションの破壊力、ダメな理由、そのすべてが理解できます。支離滅裂な色によるグラデーションを作る代わりに、同じ色で明るい色から暗い色へのグラデーションを使う、などの使い方を心がけましょう。

6.フレームレートがデフォルトのまま

初期設定の12(Flash CS3以前)や24(Flash CS4以降)はコンテンツに最適なフレームレートであるか一度確認しておきましょう。

一般的には12(携帯電話)、18(媒体バナー)、24(Flex、海外のFlash)、30(国内の一般的な商用サイト)、31(マジックナンバーと呼ばれていたfps・最近は使われない)、48・60(高FPSは体感として非常に滑らか、一部のサイトで使用が進んでいる)と目安を覚えておけばよいでしょう。

7. alpha=0は完全には消えていない

alpha=0 にすると表示上は見えなくなりますが、マウスに反応したり内部で描画処理が行われています。オブジェクトを隠したいときは visible=false を使いましょう。

8.フィルタの使いすぎ

初めてFlashを経験した人はフィルタに取り憑かれ、やたらめったら使いまくる傾向があります。ぼかしも美しく利用頻度が高い演出手法ですが、描画処理がおもくなるのでほどほどに。

9.ショートカットキーを学ばない

ショートカットキーの学習は不可欠です。作業に要する時間を節約することによって、ワークフローを増大させるだけでなく、多くのツールはより多くの機能を 使うためにさまざまなショートカットキーが必要です。メニューバーの［編集］→［キーボードショートカット］を選べば、自分でより多くのわかりやすいキーの定義が可能 です。

Flashで少なくとも覚えておきたい8つのショートカット。

• Ctrl + Enter : ムービープレビュー
• F5 : フレームを追加
• F8 : シンボルに変換
• F9 : アクションパネルを表示
• Ctrl + L : ライブラリパネルを表示
• Ctrl + Shift + D : レイヤーに配分
• Ctrl + R : ファイルの読み込み
• Ctrl + Shit + F12：パブリッシュ設定

10.ムービークリップの原点をずらしたまま放置

スクリプトの制御がしづらくなったり、配置座標の整数化が難しくなるので気をつけましょう。基本はXY座標の基準位置を(0, 0)にしておくとよいでしょう。

11.ムービークリップの変形点をずらしたまま放置

基準点と変形点がずれていると、後で修正するときに確認しづらくなります。変形点をダブルクリックして基準点と変形点を同じ位置にあわせておきましょう。

12.配置したオブジェクトの座標を整数にしておかない

小数点位置にインスタンスを配置しているとアンチエイリアスが適用され、ぼけた感じの表示になります。アンチエイリアスがかかると見た目がパキッとしないですし、アンチエイリアスが適用されるため微量に負荷がかかります。インスタンスの配置位置は整数にするように心がけましょう。

13. アクションパネルのフォントを等幅フォントに設定していない

プログラミングするときはフォントの幅が揃う等幅フォントに設定することで、美しくActionScriptを表示することができます。等幅フォントに設定することでカンマ「,」など見落としやすい文字を確認しやすくなります。Windowsなら「ＭＳ ゴシック」、Macなら「Osaka−等幅」にしておくと無難でしょう。

14.JPEG画質を80のままパブリッシュしている

Flash Professionalの初期設定はJPEG画質が80になっていますが、これはファイルサイズ的にはいいかもしれませんが画質的には満足できないのではないでしょうか（FlashのJPEG画質80は特に汚い!?）。画像にもよりますがJPEG画質は85〜95の間で設定すると無難でしょう。

15. ローカルで確認したら「通信できない」とアラートがでた

通信系スクリプトを組み込んだ場合に、ローカルマシンでSWFを再生すると次のようなセキュリティーアラートが表示されることがあります。その場合はFlash Playerのグローバル設定マネージャーで設定することで解決することができます。

• Adobe – Flash Player: 設定マネージャ – [グローバルセキュリティ設定] パネル

16. Firefoxのアドオンを使っていない

通信系のスクリプトを使うようになったらブラウザで動作を確認することが多くなります。しかし、デフォルトではそのためのデバッグ機能がブラウザに用意されていません。そのため、FirefoxのアドオンであるFlash TracerやFirebugなどインストールしておきましょう。

• Firefox extensions – Flash Tracer  – sephiroth.it
• Firebug :: Firefox Add-ons

※Flashコンテンツの公開時には、traceの出力をOFFにしておくことも忘れずに！

Flash Professionalの関連記事もどうぞ！

• Adobe Creative Suite CS5 (Adobe CS5)が発表されました
• Flash CS4の新機能 日本語でまとめました
• 公式リリースされたFlash Player 10の新機能を試せる20本のデモ
• フレームアクションで覚える Papervision3D チュートリアル Vol.01
• Flash CS5の数値入力みたいなコンポーネントを作ってみた