第1回 カスタムカーソルにトライ! | デザインってオモシロイ -MdN Design Interactive-
【サイトリニューアル!】新サイトはこちらMdNについて

Lesson1 マウスに反応するキャッチーな表現

Flashはバージョンアップを重ねて今やFlash8となり、ビデオ系の処理やビットマップ系の処理などさまざまな機能も充実し、ますます表現の幅も広がってきている。しかし一方、その習得に壁を感じ始めている人はいないだろうか?
このコーナーではアクションスクリプトの必要性を感じてはいるが、勉強の手が止まってしまっている初級・中級者を対象に、できるだけ汎用性のあるスクリプ ト手法を中心に解説していきたい。新機能を追求して新たな表現手法を研究するのも良いが、基本的で簡単なスクリプトでもまだまだいろいろな表現手法がある ことを感じて頂ければと思う。さまざまなFlash使いの方々のスキルアップの一助となれば幸いである。

(解説:茅原 伸幸)

第1回 カスタムカーソルにトライ!


インタラクティブな表現の醍醐味


初回のお題「マウスに反応するキャッチーな表現」であるが、基本的に人間はコミュニケーションを必要とする生物であり、常に人から相手にされたいと願っている。話をしていて相づちをうってくれればうれしいし、無視されれば寂しくなる。対象がWebページでも同じだ。ユーザーの操作(話しかけ)に対し、適切な反応(相づち)を返せばコミュニケーションがスムーズになるとともに好感を抱いてもらえるだろう。そんな対話型の仕組みはFlashの最も得意とするところのひとつであるから、ぜひ、「話上手は聞き上手」的なFlashコンテンツ作りを心がけてもらいたい。

さて、前置きが長くなったが、こちらの作品を見てもらいたい。


【サンプル1】「Click Here!?」という部分をクリックすると、カメレオンが……

まさにお題そのままの直訳的な作品である。私の妻はカメレオン君を見た瞬間「きもっ!」と言い放ったが、こちらのマウスに反応してうなずく様を見ていると愛着が湧いてくるのが不思議なものだ。これも対話型コンテンツの醍醐味のひとつだろう。一見、舌の動きなど複雑そうに思えるが、基本的なスクリプトの組み合わせで実現している。それでは順を追って見ていきたい。

■POINT カスタムカーソル


作品の左側領域でクリックするか、マウスを動かしていると、マウスポインタがカメレオン君に食べられてしまう。マウスポインタがユーザーの意図とは違う動きをするちょっとしたサプライズを演出するためにカスタムカーソルを利用している。仕組み的には標準のマウスポインタを非表示にし、こちらで用意したマウスポインタの画像をマウスの動きに合わせて移動させているだけだ。

【1】マウスポインタとなる画像をムービークリップ化




【1】マウスポインタとなる画像をムービークリップ化


【2】インスタンスをダブルクリックし、編集画面へ





【2】インスタンスをダブルクリックし、編集画面へ



【3】基準点がマウスポインタの基準点となることに注意する




【3】基準点がマウスポインタの基準点となることに注意する





まずはマウスポインタとなる画像を用意し、シンボルに変換(F8)して、ムービークリップ化する(ここではインスタンス名:mPt_mc)【1】。そしてそのインスタンスをダブルクリックして編集画面に入る【2】。ここでムービークリップの「基準点がマウスポインタの基準点となることに注意して、画像の位置を合わせておく【3】。

次にタイムラインのフレーム1のフレームアクションに下記のスクリプトを記述する。

【4】フレームアクションにスクリプトを記述


【4】フレームアクションにスクリプトを記述



マウスポインタが捕まっていないときはマウスのx座標(_root._xmouse),y座標(_root._ymouse)の動きに合わせて移動させ、捕まったときは(次回後述するが、)舌先(ムービークリップ:tPt_mc)の座標に合わせて移動させるよう分岐させている。

今回はそのままマウスポインタの形状を用いたが、場合によっては虫の形状に変更するなどしてもよいかもしれない。カスタムカーソルの利用はちょっとした演出には効果的だが、ユーザーが普段使い慣れたマウスポインタの変更は違和感を与える恐れもあり、また、マウスポインタを非表示にしたあと代替カーソルが表示されないなどのミスはまさに致命的ミスなので、使いどころには注意してほしい。

なお、カスタムカーソルの利用はこちらの解説も参照していただきたい。
カスタムカーソルの動きがカクカクしてしまう落とし穴 
(『WEBデザインの落とし穴』 FLASHの落とし穴より)

今回はほんのさわりだが、次回はメインの舌の動きについて解説していく。


次回へつづく



[プロフィール]
かやはら・のぶゆき●1972年生まれ、広島在住。広島大学経済学部卒業後、紆余曲折の末、2006年5月に株式会社メディア・パルサーを設立。若手を鍛えながらFlash制作に勤しむ。二児のパパ。
http://www.procreo.jp/


twitter facebook このエントリーをはてなブックマークに追加 RSS
【サイトリニューアル!】新サイトはこちらMdNについて

この連載のすべての記事

アクセスランキング

8.30-9.5

MdN BOOKS|デザインの本

Pick upコンテンツ

現在