「FLash CS4」体験版ダウンロードはこちらから
「Adobe CS4」購入はこちらから

前回は、スクリプトを地道に書き写すことをテーマとしたが、きちんとボタンは動作しただろうか。どうしても動作しないときは、思い切って、１から書き直す（打ち直す）のが近道だ。前回のような短いスクリプトであれば、書き直すことも容易だが、途方もない行数のスクリプトでエラーが出てしまうと、書き直すことは不可能に近い。そこで、今回はスクリプトのエラーを取り除くコツを紹介しよう。そして、ボタンをさらに作りこんでいきたい。今回作成するflaファイルは、こちらからダウンロードできる。

スクリプトのエラーを取り除くコツ

スクリプトを書き写したら、実践すべき2つのことがある。

(1)シンタックスチェックを実行
(2)自動フォーマットを実行

シンタックスチェックと自動フォーマットはアクションパネルのボタンとして装備されているので、覚えておこう。

シンタックスチェック

まず、1つ目のシンタックスチェック。これは、打ち込んだASが明らかに文法的におかしいとき、間違えているであろう箇所を教えてくれるというもの。この時点でエラーなどが出るのであれば、どんなにムービープレビューしても正しく動作しない。大抵はスペルミスや閉じるカッコが足らないなどの打ち間違いに反応するので、必ずチェックしよう。 エラーが起こると、図のようなダイアログが出て、エラーがリストアップされる。

コンパイルエラーパネルの1行をダブルクリックすると、ASの該当行を反転表示するので、その周辺をチェックすれば問題解決の糸口になるはずだ。

また、AS内に全角文字を打ってしまった場合はエラーとなる（ASは変数名などを除くと半角英数が基本）が、全角スペースなどは半角スペースと見分けがつきにくく、見つけるのも困難だ。そんなときに、オプションの「隠し文字」を有効にすると見つけやすくなる。ただし、スクリプトのフォントも影響するので環境設定で「_typewriter」などに変更しよう。

また、エラーは、スクリプトの上の部分から対応していくと良いだろう。あるエラーが原因で次のエラーを引き起こしている場合などには、最初のエラーをなくせばうまく動作するようになる場合もあるからだ。

自動フォーマット

これは、シンタックスチェックが通ったものについて、行の最後に「;」を追加したり、スペースを空けたりという見た目の整列をしてくれる。

ここで、重要なのは自動フォーマットで「;」をつけるということだ。書籍などに掲載されているASが綺麗になっているのは、実は自動フォーマットの後だからだ。ほとんどの場合筆者が「;」を打ったり、行頭をスペースで整えているわけではない。キーを打つ回数が増えれば、打ち間違いの元にもなるので、必ず「;」はFlashで自動的につけるように心がけよう。逆に言えば、自動フォーマットが機能しないスクリプトはまだ、エラーがあるということにもなる。

エラーが残っていることを承知の上でムービープレビューする場合もあるが、どちらにせよ、エラーが出る状態では完成とはいえない。地道にひとつひとつエラーを消していくしかない。

ところで、自動フォーマットの段階でエラーがなくなっても、アクションスクリプトの文法的にエラーがないというだけで、それが制作者(=あなた)の意図通りの動きをするかどうかは、わからない。たとえエラーがなくとも、意図通り動かないという事はよくある。そのときはまた違う方法で修正しなくてはならないが、その方法はまたの機会としたい。

ムービープレビュー

エラーがなくなれば、ムービープレビューを実行する。これは、Flashを開いたまま、ブラウザの中で再生される様子を確認できるので、非常に便利だ。[制御＞ムービープレビュー]で実行できるが、よく利用するので「Ctrl+Enter」というショートカットでも覚えておくと便利だろう。

さて、ムービープレビューして、HOMEボタンを押すとブラウザが起動し、togoru.netが表示できるはずだ。これができたらスクリプトで該当箇所を改造して、自分の好きなページを表示するようにしてみよう。

変更箇所は、var url:String="http://togoru.net/";のURLを示す「http://togoru.net/」という部分だ。ここを自分のホームページなどに変更してみよう。AS上達のコツは、他人の書いたASを真似して改造することにある。改造するには、そのASでは何が書かれているのかをしっかりと理解していなくては、ならない。

ボタンの動作を作りこむ

次は、再びFlashの操作に戻って、ボタンの動作に手を加えていこう。現在、ボタンは、指カーソルに切り替わるだけだが、Webサイトではボタンの上にカーソルが重なったら、ボタンの色が変わったり、ボタンがへこんだかのようなイメージに変化するサイトが多い。そこで、今回はFlashでそのような動きを表現する。ちなみに、この作業にはASは不要だ。

まず、ステージにあるボタンをダブルクリックして、シンボル編集モードに入る。シンボル編集モードでは、ステージの左上が下図のようになっているはずだ。シンボルは、階層構造になっているので、一番上の編集画面を出すには、一番左の「シーン1」をクリックすればよい。

シンボル「HOME_btn」のタイムラインを見ると、下図のように4フレームしかない状態になっていると思う。ここには、ボタンシンボルの時だけの特別なフレーム名が付いている。1フレーム目から、「アップ」、「オーバー」(オー...と略されている)、「ダウン」、「ヒット」となっている。現在は「アップ」だけしかない状態だ。

この4つのフレームは重要な役割を持つ。ひとつづつ解説していこう。

ボタンシンボルの中の4フレームの意味

この4つのフレームは、それぞれ特別な意味を持ったフレームで、次のような役割がある。

「アップ」……ボタンの通常時のイメージ。マウスボタンを押したあとのアップでも、このフレームのイメージが使用される。

「オーバー」……ボタンにカーソルが重なったときのイメージ。ここにムービークリップを配置すれば、マウスオーバーでアニメーションを再生する。

「ダウン」……ボタンを押しているときに表示するイメージ。クリック動作では、一瞬しか表示されない。

「ヒット」……ヒットエリアとも呼ぶ。ボタンが反応する部分を示す。この部分は、ヒットエリアをボタンに定義するだけなので実際には見えない。

先ほど作成したのは「アップ」だけだが、自動的にすべてのフレームがあるものとして動作するようになっている。もちろん、すべてのイメージを変更すれば、より正しいボタンになるので、これから作業していこう。

1.「アップ」のフレームを「ヒット」まで、フレームを挿入する。ヒットの空フレームで右クリック＞[フレームの挿入]を実行。

2.すべてのフレームをキーフレームに変換する。すべてのフレームを選択して、右クリック＞[キーフレームに変換]を実行。

3.「オーバー」の状態で、テキストを着色しよう。オーバーのフレームを選択してから「HOME_g」のプロパティパネルで[カラー効果]＞[着色]を選択。カラーパレットで適当な色を選択する。

4.「ダウン」では、テキストはそのままでよい。

5.「ヒット」では、テキストを囲むように四角いシェイプを描画する。塗りつぶす色は何色でも良い。テキストの外側を大きめに囲むと良いだろう。実はヒットは目には見えないフレームだ。しかし、ボタンの反応領域を設定するので、ユーザーインタフェースを考える上では非常に重要なフレームとなる。

4つのフレームを設定できたら、ムービープレビューで確認する。実際に、カーソルが重なるとテキストの色が変化する下図のようなボタンになっているだろうか（下図はサンプルのため、テキストの色に変化のみで、クリックしたときの動作は削除してある）。

次回は、さらにボタンを立体的に見せる方法や、効果音をつける方法について紹介していこうと思う。

伊藤のりゆき(NORI)
有限会社トゴル・カンパニー代表。オーサリングエンジニアとしてFlashでの制作を中心に活動。ロクナナワーク ショップ講師、アックゼロヨン審査員、ライターとしてFlash関連書籍や雑誌記事の執筆を行うほか、AdobeTVでもFlashCS4のテクニックを解説。また、写真家としての顔も持つ。