カスタムカーソルの動きがカクカクしてしまう落とし穴 | デザインってオモシロイ -MdN Design Interactive-

カスタムカーソルの動きがカクカクしてしまう落とし穴

2026.4.21 TUE

【サイトリニューアル!】新サイトはこちらMdNについて


Webデザインには、あなたの知らない「落とし穴」がたくさん。大きなものから小さなものまで、それが及ぼす影響はさまざまだ。カンペキだと思っているあなたのサイトも、実はすでに暗い穴の中かも・・・。





カスタムカーソルの動きがカクカクしてしまう落とし穴



 Flashムービーでは、カクカクした動きよりもなめらかな動きを求める人が多いだろう。Flashムービーは、ムービープロパティで設定したフレームレートの値によって、定期的に画面を更新する。そのため、フレームレートの値が小さいと画面の更新の間隔が遅くなり、Flashムービーはカクカクした動きになる。サイトのイメージとそぐわない形で、カスタムカーソルやカーソルを追いかけるオブジェクトがカクカク動いてしまっていたら、そのコンテンツにユーザビリティがあるとはいいがたいだろう。

 そのようなときに「updateAfterEvent()」というアクションを使用すれば、フレームレートの値にかかわらず強制的に画面を更新することができる。たとえば、カスタムカーソルをつくった場合、【1】のようにムービークリップアクションの最後に、「updateAfterEvent()」アクションを一行入れておけば、マウスが移動するたびに画面が更新される。フレームレートの値が大きい場合は無理にこのアクションを入れる必要はない。


onClipEvent(load){
Mouse.hide();
}
onClipEvent(unload){
Mouse.show();
}
onClipEvent(mouseMove){
_x+= _xmouse;
_y+= _ymouse;
updateAfterEvent(); //強制的に画面を更新
}
【1】カスタムカーソル用のスクリプト。updateAfterEvent()アクションで強制的に画面を更新

解説:横山 剛

(※本文中、及びキャプション内で使用している「<」、「>」は、全角になります。ご注意ください。)


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

この連載のすべての記事

アクセスランキング

8.30-9.5

MdN BOOKS|デザインの本

Pick upコンテンツ

現在