Дана замітка є продовженням одного з минулих постів. але тепер буде розібраний спосіб створення призначеного для користувача курсору засобами ActionScript 3.0.
Насамперед треба приховати стандартний курсор. У AS 3.0 це робиться так:
Потім треба створити заготовку самого курсора. Як правило, курсори мають не дуже складну форму і, отже, їх легко можна "намалювати" засобами програмного малювання. Наступний код додає на сцену флеш-ролика заготовку для майбутнього курсора у вигляді стрілки:
Код ActionScript 3.0:
Mouse.hide (); var cur: Sprite = new Sprite (); cur.graphics.lineStyle (2,0x999999,1); cur.graphics.beginFill (0xcccccc); cur.graphics.moveTo (0,0); cur.graphics.lineTo (20,10); cur.graphics.lineTo (10,10); cur.graphics.lineTo (10,20); cur.graphics.endFill (); addChild (cur);
Але заготовку для курсора можна створити і вручну. Для цього в програмі Adobe Flash малюємо саму заготовку, виділяємо її і натискаємо F8 на клавіатурі для перетворення нашого малюнка в мувікліп. З'являється вікно, в якому вводимо ім'я майбутнього мувікліпа, вибираємо тип "Фрагмент ролика", а точку реєстрації поміщаємо в верхній лівий кут. У цьому ж вікні ставимо галочку у "Експортувати для ActionScript" і вводимо в поле введення ім'я класу (в даному прикладі таким ім'ям буде "Cur"). Після цього ми видаляємо нашу заготовку з робочого столу програми (але вона зберігається в бібліотеці нашого проекту) і прописуємо на головній часовій шкалі наступний код:
Mouse.hide (); var cur: Cur = new Cur (); addChild (cur);
Курсори, як правило, мають ефект тіні. Ми теж можемо додати до нашого курсору за допомогою фільтра DropShadowFilter:
Mouse.hide (); var cur: Sprite = new Sprite (); cur.graphics.lineStyle (2,0x999999,1); cur.graphics.beginFill (0xcccccc); cur.graphics.moveTo (0,0); cur.graphics.lineTo (20,10); cur.graphics.lineTo (10,10); cur.graphics.lineTo (10,20); cur.graphics.endFill (); addChild (cur); var shadow: DropShadowFilter = new DropShadowFilter (); shadow.distance = 5; shadow.color = 0x999999; shadow.alpha = 0.5; shadow.angle = 45; cur.filters = [shadow];
А тепер зробимо так, щоб при переміщенні реального курсора мишки (який у нас прихований від людських очей, але все одно існує) змінювалося б становище нашого саморобного курсору:
Mouse.hide (); var cur: Sprite = new Sprite (); cur.graphics.lineStyle (2,0x999999,1); cur.graphics.beginFill (0xcccccc); cur.graphics.moveTo (0,0); cur.graphics.lineTo (20,10); cur.graphics.lineTo (10,10); cur.graphics.lineTo (10,20); cur.graphics.endFill (); addChild (cur); var shadow: DropShadowFilter = new DropShadowFilter (); shadow.distance = 5; shadow.color = 0x999999; shadow.alpha = 0.5; shadow.angle = 45; cur.filters = [shadow]; stage.addEventListener (MouseEvent.MOUSE_MOVE, mMove); function mMove (event: MouseEvent): void
В принципі, наш курсор готовий і працює. Але у нього є, як мінімум, три недоліки, які варто усунути. По-перше, при низькому fps наш курсор починає "гальмувати", тобто він рухається ривками і явно відстає від реального курсора мишки. Цей недолік ми виправимо за допомогою використання методу updateAfterEvent (). який буде виконувати постсобитійное оновлення екрану. Отже, новий варіант коду:
Mouse.hide (); var cur: Sprite = new Sprite (); cur.graphics.lineStyle (2,0x999999,1); cur.graphics.beginFill (0xcccccc); cur.graphics.moveTo (0,0); cur.graphics.lineTo (20,10); cur.graphics.lineTo (10,10); cur.graphics.lineTo (10,20); cur.graphics.endFill (); addChild (cur); var shadow: DropShadowFilter = new DropShadowFilter (); shadow.distance = 5; shadow.color = 0x999999; shadow.alpha = 0.5; shadow.angle = 45; cur.filters = [shadow]; stage.addEventListener (MouseEvent.MOUSE_MOVE, mMove); function mMove (event: MouseEvent): void
По-друге, якщо ми уведём реальний курсор мишки за межі сцени флеш-ролика, то ми все одно будемо бачити наш саморобний курсор, який буде нагло красуватися у краю сцени. Це не добре. Тому ми будемо відловлювати подія виходу курсора мишки за межі сцени флеш-ролика і робити для користувача курсор невидимим, якщо він залишає межі сцени. Для цього в мові AS 3.0 є спеціальна подія - подія mouseLeave. яке відправляється об'єктом Stage кожен раз, коли курсор миші покидає робочу область флеш-ролика. А коли курсор повертається на сцену, ми знову його робимо видимим. Події, зворотного події mouseLeave, як я зрозумів, в ActionScript 3.0 немає, але імітувати його досить просто.
Третій важливий момент полягає в тому, що для правильної роботи нашого курсору з інтерактивними елементами флеш-ролика слід заборонити нашому курсору відстеження подій миші. Зробити це можна присвоївши властивості mouseEnabled призначеного для користувача курсору значення false.
Останній раз модифікуємо код і отримуємо наступне:
/ * Приховуємо стандартний курсор мишки * / Mouse.hide (); / * Створюємо свій користувальницький курсор * / var cur: Sprite = new Sprite (); cur.graphics.lineStyle (2,0x999999,1); cur.graphics.beginFill (0xcccccc); cur.graphics.moveTo (0,0); cur.graphics.lineTo (20,10); cur.graphics.lineTo (10,10); cur.graphics.lineTo (10,20); cur.graphics.endFill (); addChild (cur); / * Спочатку призначений для користувача курсор буде невидимим * / cur.visible = false; / * Забороняємо відстеження подій мишки * / cur.mouseEnabled = false; / * Додаємо курсору тінь * / var shadow: DropShadowFilter = new DropShadowFilter (); shadow.distance = 5; shadow.color = 0x999999; shadow.alpha = 0.5; shadow.angle = 45; cur.filters = [shadow]; / * Відстежуємо подія переміщення мишки по сцені ролика і кожен раз при зміні положення курсору мишки присвоюємо нові координати курсору мишки спрайту-курсору * / stage.addEventListener (MouseEvent.MOUSE_MOVE, mMove); function mMove (event: MouseEvent): void = 0 coordY> = 0 coordX
Результат роботи даного коду:
В даному прикладі все робиться програмно. Якщо ж Ви малювали курсор вручну (як описувалося вище), то у Вас код буде мати наступний вигляд:
Mouse.hide (); var cur: Cur = new Cur (); addChild (cur); cur.visible = false; cur.mouseEnabled = false; var shadow: DropShadowFilter = new DropShadowFilter (); shadow.distance = 5; shadow.color = 0x999999; shadow.alpha = 0.5; shadow.angle = 45; cur.filters = [shadow]; stage.addEventListener (MouseEvent.MOUSE_MOVE, redrawCursor); function redrawCursor (event: MouseEvent): void = 0 coordY> = 0 coordX