В этом уроке я покажу вам, как создать меню, подобное док-станции Apple, используя классы AS3. Мы создадим один файл AS, который будет выполнять всю магию, расширяя его для добавления новых функций.
Каждые несколько недель мы пересматриваем некоторые из любимых постов нашего читателя на протяжении всей истории сайта. Этот учебник был впервые опубликован в марте 2010 года.
Окончательный результат предварительного просмотра
Во-первых, давайте посмотрим на то, что мы будем создавать. Наведите курсор на значки, чтобы увидеть, как они перемещаются и масштабируются.
Шаг 1. Создайте новый файл ActionScript
Начните с создания нового файла ActionScript и сохранения его как «DockItem.as». Я сохраняю свою в c: /macmenu/org/effects/DockItem.as.
Обратите внимание, что корнем нашего документа (где находится .fla) будет c: / macmenu; папка / org / Effects сформирует пакет для класса DockItem.
Шаг 2: Создайте новый FLA
Создайте новый Flash-файл ActionScript 3.0 и откройте его, чтобы у нас был открыт и DockItem.as, и этот файл .fla. Сохраните этот .fla в корневой папке (DockItem.as находится в каталоге c: / macmenu / org / Effects, поэтому корнем нашего сайта является c: / macmenu) / org / Effects — это пакет объекта DockItem, и мы сохраняем. fla как c: /macmenu/macmenu.fla.
Шаг 3: Импорт значков
Теперь мы импортируем или рисуем некоторые значки в .fla. Я импортировал некоторые значки, которые у меня есть, из файла Illustrator, но вы, конечно, можете нарисовать свои собственные и применить к ним градиент.
Шаг 4: Начните преобразовывать значки в символы
Выберите любой значок и нажмите «Изменить»> «Преобразовать в символ».
В открывшемся окне дайте ему имя (я назвал этот символ «Звезда») и обратите внимание на точку регистрации; это должно быть в центре снизу. Для класса используйте то же имя (помните, что вы не можете использовать пробелы), а для базового класса используйте org.effects.DockItem (класс, который мы создадим). Кроме того, убедитесь, что ваш тип установлен на Movie Clip.
Затем выровняйте все объекты снизу: выберите все, нажмите «Окно»> «Выровнять», убедитесь, что кнопка «На сцену» не выбрана (в противном случае она будет выровнена у основания сцены), затем нажмите на верхнюю правую кнопку в этом поле. панель для выравнивания всех объектов.
Шаг 5: преобразовать все значки в символы
У нас может быть столько кнопок, сколько мы хотим, поэтому давайте преобразуем все наши значки в символы. Не забудьте дать им имя и класс, установите все их точки регистрации внизу по центру и установите для базового класса значение org.effects.DockItem.
Смотрите ниже, как должна выглядеть наша библиотека и иконки; обратите внимание на расстояние между ними, это важно для создания хорошего эффекта.
Шаг 6: Начните кодировать класс DockItem
Если мы сейчас протестируем фильм, он выдаст ошибку, говорящую о том, что файл ActionScript должен иметь хотя бы одно внешнее и видимое определение; это потому, что все наши пункты меню расширяют класс DockItem, который мы еще не написали. Давайте напишем это сейчас …
Начните создавать пакет с расширения класса Sprite (мы расширим Sprite, поскольку у нас нет анимации на временной шкале).
|
1
2
3
4
5
6
7
|
package org.effects{
import flash.display.Sprite;
public class DockItem extends Sprite{
}
}
|
На данный момент у нас есть DockItem, расширяющий класс Sprite, поэтому, если вы протестируете его сейчас, он будет работать, но вы не увидите никаких эффектов.
(Запутано? Не используется для кодирования с классами? Посмотрите этот краткий совет по использованию класса документа для ознакомления.)
Шаг 7: Импортируйте необходимые классы
Теперь мы импортируем все необходимые классы. Здесь используется пользовательский класс, класс TweenLite , который вы можете загрузить с GreenSock.com. Когда вы скачали TweenLite, распакуйте его в папку / macmenu / (у вас будет папка / macmenu / com / greensock /).
|
01
02
03
04
05
06
07
08
09
10
11
12
|
package org.effects{
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
import com.greensock.TweenLite;
import com.greensock.plugins.TweenPlugin;
import com.greensock.plugins.TintPlugin;
public class DockItem extends Sprite{
}
}
|
Я импортировал класс Sprite, потому что это то, что мы расширяем; если у вас есть анимация на временной шкале, расширьте класс MovieClip. Мы будем использовать класс Event, когда пользовательский объект будет добавлен на сцену, и мы будем использовать MouseEvent при проверке расстояния каждого значка от мыши.
Шаг 8: объявить необходимые переменные
На этом этапе мы объявим необходимые переменные:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
|
package org.effects{
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
import com.greensock.TweenLite;
import com.greensock.plugins.TweenPlugin;
import com.greensock.plugins.TintPlugin;
public class DockItem extends Sprite{
private var _initPosition:Number;
public var maxXDistance:Number;
public var maxYDistance:Number;
public var maxScale:Number;
}
}
|
Обратите внимание, что я использовал _initPosition как private: он просто устанавливает начальную x-позицию иконки. Расстояние от мыши всегда будет измеряться от этой точки, потому что фактическая x-позиция элемента всегда будет меняться.
maxXDistance — это максимальное x-расстояние, на которое мышь воздействует на значок, maxYDistance — максимальное y-расстояние, на которое мышь влияет на значок, а maxScale — максимальный масштаб, который будет добавляться к значку (например, если вы установили это до 2, максимальный масштаб, которого может достигнуть объект, равен 3.)
Я использовал публичные переменные для последних трех, чтобы мы могли изменить их во время выполнения.
Шаг 9: Кодирование функции конструктора
Функция конструктора должна иметь то же имя, что и класс (и, следовательно, то же имя, что и файл), следовательно, DockItem () :
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
package org.effects{
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
import com.greensock.TweenLite;
import com.greensock.plugins.TweenPlugin;
import com.greensock.plugins.TintPlugin;
public class DockItem extends Sprite{
private var _initPosition:Number;
public var maxXDistance:Number;
public var maxYDistance:Number;
public var maxScale:Number;
public function DockItem($maxXDistance:Number=60,$maxYDistance:Number=30,$maxScale:Number=2):void{
maxXDistance=$maxXDistance;
maxYDistance=$maxYDistance;
maxScale=$maxScale;
if(stage) init();
else addEventListener(Event.ADDED_TO_STAGE,init);
addEventListener(Event.REMOVED_FROM_STAGE,end);
}
}
}
|
Почему у нас есть некоторые параметры здесь? Это позволяет нам использовать различные комбинации расстояний и масштабов: мы можем иметь небольшое расстояние с очень большим масштабом или большое расстояние с небольшим масштабом. Также мы можем определить y расстояние, на котором мышь будет воздействовать на иконку.
Поскольку мы расширяем класс Sprite, мы можем добавлять дочерние элементы или даже кодировать собственный класс для каждого значка, расширяющего класс DockItem, поэтому, если мы расширяем его, мы можем использовать функцию super () для передачи новых параметров суперклассу. Затем мы можем использовать класс DockItem в любое время и в любом месте.
На этом шаге мы устанавливаем переменные maxXDistance, maxYDistance и maxScale в значения, передаваемые в качестве параметров. Кроме того, мы проверяем, находится ли объект на сцене — если нет, мы добавляем событие, чтобы проверить, когда это происходит. Мы также добавили еще один прослушиватель событий, чтобы определить, когда значок удален со сцены. Мы добавим событие MOUSE_MOVE на сцену, чтобы получить расстояние, поэтому важно знать, находится ли он на сцене.
Шаг 10: Функция Init ()
Эта функция будет запущена после того, как иконка будет создана и добавлена на сцену. В функции init () мы просто добавляем слушатель MouseEvent.MOUSE_MOVE на сцену, устанавливаем переменную _initPosition в значение x объекта и прослушиваем мышь, покидающую область сцены.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
package org.effects{
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
import com.greensock.TweenLite;
import com.greensock.plugins.TweenPlugin;
import com.greensock.plugins.TintPlugin;
public class DockItem extends Sprite{
private var _initPosition:Number;
public var maxXDistance:Number;
public var maxYDistance:Number;
public var maxScale:Number;
public function DockItem($maxXDistance:Number=60,$maxYDistance:Number=30,$maxScale:Number=2):void{
maxXDistance=$maxXDistance;
maxYDistance=$maxYDistance;
maxScale=$maxScale;
if(stage) init();
else addEventListener(Event.ADDED_TO_STAGE,init);
addEventListener(Event.REMOVED_FROM_STAGE,end);
}
private function init(e:Event=null):void{
_initPosition=x;
stage.addEventListener(MouseEvent.MOUSE_MOVE,mouseMove);
stage.addEventListener(Event.MOUSE_LEAVE,mouseLeave);
}
}
}
|
Шаг 11: функции мыши
Когда мышь перемещается по сцене, эта функция (вызванная событием MOUSE_MOVE, для которого мы добавили прослушиватель на последнем шаге) будет проверять положение мыши родительского объекта и измерять расстояние от объекта до родительской позиции мыши.
Мы используем parent.mouseX, потому что это дает нам x-положение мыши относительно любого объекта, содержащего значок, а не относительно точки регистрации значка.
Мы также поворачиваем значки обратно в их исходные позиции, если мышь покидает сцену в обработчике mouseLeave ().
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
|
package org.effects{
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
import com.greensock.TweenLite;
import com.greensock.plugins.TweenPlugin;
import com.greensock.plugins.TintPlugin;
public class DockItem extends Sprite{
private var _initPosition:Number;
public var maxXDistance:Number;
public var maxYDistance:Number;
public var maxScale:Number;
public function DockItem($maxXDistance:Number=60,$maxYDistance:Number=30,$maxScale:Number=2):void{
maxXDistance=$maxXDistance;
maxYDistance=$maxYDistance;
maxScale=$maxScale;
if(stage) init();
else addEventListener(Event.ADDED_TO_STAGE,init);
addEventListener(Event.REMOVED_FROM_STAGE,end);
}
private function init(e:Event=null):void{
_initPosition=x;
stage.addEventListener(MouseEvent.MOUSE_MOVE,mouseMove);
stage.addEventListener(Event.MOUSE_LEAVE,mouseLeave);
}
private function mouseMove(e:MouseEvent):void{
var yDistance:Number=Math.abs(parent.mouseY-y);
if(yDistance>maxYDistance){
if(_initPosition==x) return;
else{
TweenLite.to(this,.3,{x:_initPosition,scaleX:1,scaleY:1});
return;
}
}
//get the difference between the parent mouse x position and the initial position of the object
var xDistance:Number=parent.mouseX-_initPosition;
//check if the distance of the mouse from the object is more than max distance, it can’t be bigger…
xDistance = xDistance > maxXDistance ?
//check if the distance is lower than the negative of the max distance, it can’t be lower…
xDistance = xDistance < -maxXDistance ?
//create a variable for the position, assuming that the x position must be the initial position plus the distance of the mouse, but it can’t be more than the max distance.
var posX=_initPosition-xDistance;
//we get the scale proportion here, it goes from 0 to maxScale variable
var scale:Number=(maxXDistance-Math.abs(xDistance))/maxXDistance;
//the minimum scale is 1, the original size, and the max scale will be maxScale variable + 1
scale=1+(maxScale*scale);
//here we use a Tween to set the new position according to the mouse position
TweenLite.to(this,.3,{x:posX,scaleX:scale,scaleY:scale});
}
private function mouseLeave(e:Event):void{
TweenLite.to(this,.3,{x:_initPosition,scaleX:1,scaleY:1});
}
}
}
|
Сначала мы проверяем расстояние у (вертикальное расстояние между значком и мышью); если он находится дальше, чем диапазон, который мы установили с помощью maxYDistanceVariable, тогда мы проверяем, вернулась ли иконка в исходное положение, и, если нет, мы ее там анимируем. Ключевое слово return выходит за пределы функции, поэтому в этом случае не будет выполняться ни один из остального кода.
Если мышь находится близко к значку по вертикали, мы используем некоторые математические расчеты, чтобы определить новый масштаб и положение значка на основе его горизонтального расстояния от мыши, а затем скорректировать его до этих значений.
Шаг 12: Функция End ()
Если мы удалим объект со сцены, нам нужно удалить слушатели mouseMove и mouseLeave; в противном случае мы можем получить ошибки каждый раз, когда мышь перемещается. Эта функция является обработчиком для прослушивателя REMOVED_FROM_STAGE, который мы добавили ранее, поэтому будет срабатывать при удалении объекта.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
|
package org.effects{
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
import com.greensock.TweenLite;
import com.greensock.plugins.TweenPlugin;
import com.greensock.plugins.TintPlugin;
public class DockItem extends Sprite{
private var _initPosition:Number;
public var maxXDistance:Number;
public var maxYDistance:Number;
public var maxScale:Number;
public function DockItem($maxXDistance:Number=60,$maxYDistance:Number=30,$maxScale:Number=2):void{
maxXDistance=$maxXDistance;
maxYDistance=$maxYDistance;
maxScale=$maxScale;
if(stage) init();
else addEventListener(Event.ADDED_TO_STAGE,init);
addEventListener(Event.REMOVED_FROM_STAGE,end);
}
private function init(e:Event=null):void{
_initPosition=x;
stage.addEventListener(MouseEvent.MOUSE_MOVE,mouseMove);
stage.addEventListener(Event.MOUSE_LEAVE,mouseLeave);
}
private function mouseMove(e:MouseEvent):void{
var yDistance:Number=Math.abs(parent.mouseY-y);
if(yDistance>maxYDistance){
if(_initPosition==x) return;
else{
TweenLite.to(this,.3,{x:_initPosition,scaleX:1,scaleY:1});
return;
}
}
//get the difference between the parent mouse x position and the initial position of the object
var xDistance:Number=parent.mouseX-_initPosition;
//check if the distance of the mouse from the object is more than max distance, it can’t be bigger…
xDistance = xDistance > maxXDistance ?
//check if the distance is lower than the negative of the max distance, it can’t be lower…
xDistance = xDistance < -maxXDistance ?
//create a variable for the position, assuming that the x position must be the initial position plus the distance of the mouse, but it can’t be more than the max distance.
var posX=_initPosition-xDistance;
//we get the scale proportion here, it goes from 0 to maxScale variable
var scale:Number=(maxXDistance-Math.abs(xDistance))/maxXDistance;
//the minimum scale is 1, the original size, and the max scale will be maxScale variable + 1
scale=1+(maxScale*scale);
//here we use a Tween to set the new position according to the mouse position
TweenLite.to(this,.3,{x:posX,scaleX:scale,scaleY:scale});
}
private function mouseLeave(e:Event):void{
TweenLite.to(this,.3,{x:_initPosition,scaleX:1,scaleY:1});
}
private function end(e:Event=null):void{
stage.removeEventListener(MouseEvent.MOUSE_MOVE,mouseMove);
stage.removeEventListener(Event.MOUSE_LEAVE,mouseLeave);
}
}
}
|
Все, что мы делаем в этой функции, это убираем слушателя события со сцены.
Шаг 13: Проверьте это!
На данный момент мы уже можем проверить это; это будет работать, поскольку каждый объект связан с базовым классом DockItem. Однако у нас нет ограничивающего прямоугольника для щелчка (если мы установим для свойства buttonMode нашего объекта значение true, мы увидим, что мы можем щелкнуть по нему только тогда, когда он находится над реальной графикой.)
Шаг 14: начни превращать иконки в кнопки
Пока мы видим, как работает эффект, поэтому теперь давайте превратим каждый элемент в кнопку. Мы создадим новый файл ActionScript, который расширит DockItem — назовем его DockButton. Его пакет будет таким же, как DockItem (org.effects), поэтому мы сохраним itb в той же папке, что и DockItem.as (пример: c: /macmenu/org/effects/DockButton.as).
Шаг 15: измени базовый класс
Теперь мы изменим базовый класс каждого объекта в библиотеке. В настоящее время мы используем org.effects.DockItem в качестве базового класса, теперь давайте используем org.effects.DockButton.
Если мы проверим это сейчас, будет ошибка. Это потому, что DockButton.as по-прежнему пуст, поэтому давайте закодируем его.
Шаг 16: Запустите кодирование DockButton.as
Хорошо, теперь мы расширим класс DockItem, потому что мы хотим использовать все, что у нас есть в DockItem, и добавить еще несколько хитростей (позволяющих ему действовать как кнопки), но мы не хотим добавлять новые функции в DockItem непосредственно. Таким образом, если мы хотим позже использовать DockItem как что-либо кроме Button, мы можем, но если мы хотим использовать его как Button, мы можем использовать DockButton.
|
1
2
3
4
5
|
package org.effects{
public class DockButton extends DockItem{
}
}
|
Если мы сейчас протестируем наш проект, он будет работать, но он будет работать точно так же, как DockItem, поскольку мы еще не добавили ничего нового.
Шаг 17: Импорт классов для DockButton
Давайте импортируем некоторые вещи, которые нам понадобятся для расширения DockItem. Поскольку мы расширяем DockItem, нам не нужно импортировать уже существующие классы, поскольку мы не будем использовать их непосредственно в DockButton.
|
1
2
3
4
5
6
7
|
package org.effects{
import flash.geom.Rectangle;
public class DockButton extends DockItem{
}
}
|
Я импортировал класс Rectangle, но почему? Это потому, что мы будем использовать ограничивающую рамку нашего объекта, чтобы создать поддельный фон, чтобы позволить кнопке нажиматься, даже если мышь не находится точно над цветной областью. Давайте создадим фоновый рисунок с альфа 0 (прозрачный), поэтому у нас будет квадрат для щелчка
Шаг 18: Конструктор для DockButton
Поскольку нам нужно создать ограничивающий прямоугольник для DockButton, мы получим его собственные границы, поэтому мы импортировали класс flash.geom.Rectangle
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
|
package org.effects{
import flash.geom.Rectangle;
public class DockButton extends DockItem{
public function DockButton():void{
buttonMode=true;
mouseChildren=false;
var bounds:Rectangle=getBounds(this);
this.graphics.beginFill(0,0);
this.graphics.drawRect(bounds.x,bounds.y,bounds.width,bounds.height);
this.graphics.endFill();
}
}
}
|
Что мы сделали? Мы создали конструктор, который сначала устанавливает для объекта buttonMode значение true, поэтому наш DockButton будет обрабатываться как кнопка. Затем мы устанавливаем mouseChildren в false, поэтому события мыши будут поступать из объекта DockButton, а не из любого другого объекта внутри него. Далее мы получаем границы объекта с помощью getBounds () и рисуем прозрачный прямоугольник с помощью графического объекта. (Свойство graphics поставляется с классом Sprite, и мы расширили Sprite для создания нашего объекта DockItem. Теперь мы расширили наш DockItem для создания нашего объекта DockButton, в DockButton есть все — от класса Sprite и класса DockItem.)
Шаг 19: проверь все и проверь
Хорошо, давайте выполним проверку:
- Нам нужен файл .fla (пример: c: /macmenu/macmenu.fla).
- В той же папке, что и файл .fla, у нас должна быть другая папка: / org / Effects (пример: c: / macmenu / org / Effects).
- Внутри этой папки нам нужно иметь два документа .as (DockItem.as и DockButton.as).
- Внутри .fla каждый элемент в библиотеке должен быть связан с классом, а базовый класс каждого элемента должен быть org.effects.DockButton.
Если все в порядке, проверьте фильм …
(На данный момент, если вы хотите поместить папку org / Effects в ваш путь к классу, вы можете, поэтому вам не нужно будет копировать эту папку в каждый создаваемый вами проект и использовать DockItem или DockButton.)
Шаг 20: поменяй цвет при наведении мыши
Почему бы не изменить цвет кнопки, когда мышь проходит над ней? В этом разделе я научу как. Для этого мы снова будем использовать движок TweenLite, чтобы придать объекту некоторый оттенок. Однако мы уже используем TweenLite в объекте DockItem и расширяем этот объект в DockButton. Мы хотим расширить DockButton, чтобы изменить цвет, но мы больше не можем использовать TweenLite в том же объекте, так как новый объект TweenLite будет перезаписывать другой (даже если свойство overwrite: false в TweenLite, это значительно снизит производительность, если мы используем его непосредственно в том же объекте). Еще не все потеряно; у нас есть значок внутри каждого объекта библиотеки, и мы можем применить к нему оттенок.
Для этого давайте создадим еще один файл ActionScript, но теперь сохраним его в той же папке, что и .fla, с именем «OverButton.as» (пример: c: /macmenu/OverButton.as.)
Шаг 21: Кодирование объекта OverButton
Сначала мы создаем пакет и импортируем необходимые классы; так как мы сохранили файл OverButton.as в той же папке файла .fla, пакет будет верхнего уровня, поэтому нет необходимости писать «package org.effects»:
|
01
02
03
04
05
06
07
08
09
10
11
12
|
package{
import org.effects.DockButton;
import flash.display.DisplayObject;
import flash.events.MouseEvent;
import com.greensock.TweenLite;
import com.greensock.plugins.TweenPlugin;
import com.greensock.plugins.TintPlugin;
public class OverButton extends DockButton{
}
}
|
Итак, на этот раз мы расширяем DockButton и импортировали класс DisplayObject, потому что мы будем обрабатывать значок как DisplayObject. Мы также импортировали MouseEvent, который мы будем использовать для проверки, когда мышь находится над значком, а когда нет. У нас также есть TweenLite для создания некоторых анимационных эффектов с цветом.
Шаг 22: Конструктор OverButton
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
|
package{
import org.effects.DockButton;
import flash.display.DisplayObject;
import flash.events.MouseEvent;
import com.greensock.TweenLite;
import com.greensock.plugins.TweenPlugin;
import com.greensock.plugins.TintPlugin;
public class OverButton extends DockButton{
private var _object:DisplayObject;
public function OverButton():void{
_object=this.getChildAt(0) as DisplayObject;
this.addEventListener(MouseEvent.MOUSE_OVER, mouseOver);
this.addEventListener(MouseEvent.MOUSE_OUT, mouseOut);
TweenPlugin.activate([TintPlugin]);
}
}
}
|
Почему мы создали частную переменную _object как DisplayObject? Наш фактический значок хранится в этой переменной (это то, что делает строка 13) и обрабатывается как DisplayObject; мы будем использовать цветовой эффект на нашей иконке, а не на всем объекте.
Мы добавляем прослушиватели событий мыши, чтобы проверить, когда мышь нажата и когда мышь выключена.
Шаг 23: Кодирование функций мыши
Так как мы создали слушателей для наведения мыши и мыши, теперь мы создадим их функции:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
package{
import org.effects.DockButton;
import flash.display.DisplayObject;
import flash.events.MouseEvent;
import com.greensock.TweenLite;
import com.greensock.plugins.TweenPlugin;
import com.greensock.plugins.TintPlugin;
public class OverButton extends DockButton{
private var _object:DisplayObject;
public function OverButton():void{
_object=this.getChildAt(0) as DisplayObject;
this.addEventListener(MouseEvent.MOUSE_OVER, mouseOver);
this.addEventListener(MouseEvent.MOUSE_OUT, mouseOut);
TweenPlugin.activate([TintPlugin]);
}
private function mouseOver(e:MouseEvent):void{
new TweenLite(_object,.5,{tint:0x990099});
}
private function mouseOut(e:MouseEvent):void{
new TweenLite(_object,.5,{tint:null});
}
}
}
|
Обратите внимание, что мы используем TweenLite для _object сейчас, а не для «this». Это потому, что OverButton расширяет DockButton, который расширяет DockItem, где уже используется TweenLite. Кроме того, в DockButton у нас есть поддельный фон альфа 0, который не нужно рисовать.
Для свойства tint TweenLite я использовал цветовой код 0x990099, который является фиолетовым; если вы используете в качестве значения null, оттенок будет мягко удален.
Шаг 24: измени базовые классы
На этом этапе, если вы протестируете фильм, вы не увидите никакого изменения цвета, потому что нам нужно снова изменить базовый класс каждого объекта в библиотеке. Откройте библиотеку еще раз в .fla (Окно> Библиотека). Щелкните правой кнопкой мыши каждый объект и измените его базовый класс на OverButton (не org.effects.OverButton, поскольку файл класса не находится в папке / org / Effects).
Хорошо, теперь вы можете проверить это!
Вывод
В этом уроке я объяснил о расширении объектов. Фактический эффект закрепления — это чистая математика — это расчеты расстояния, настройки масштаба — но важно, что в коде мы видим, что мы не можем использовать свойство «x» в качестве ссылки на позицию, потому что свойство «x» меняется каждый раз. Я надеюсь, что теперь вы все лучше понимаете ключевое слово «extends» и можете оценить, как здесь выполняются вычисления. Спасибо за прочтение 🙂