Функция Stacks была частью Mac OS начиная с Leopard, и это отличный способ работать с элементами экрана. В этом кратком совете мы будем имитировать эту функцию с помощью классов ActionScript 3.
Окончательный результат предварительного просмотра
Давайте посмотрим на конечный результат, к которому мы будем стремиться:
Шаг 1: Краткий обзор
Мы будем использовать класс, созданный PixelFumes и пользовательскую графику, для создания меню стеков во Flash. Вы можете скачать исходный код класса с сайта разработчика .
Шаг 2: Настройте файл Flash
Запустите Flash и создайте новый документ Flash, установите размер сцены 508×243 пикселей и частоту кадров 24 кадра в секунду.
Шаг 3: Интерфейс
Это интерфейс, который мы будем использовать; фон — это изображение, снятое с моего рабочего стола, а интересные логотипы являются частью сети Tuts +.
Преобразуйте логотипы в MovieClip и установите флажок « Экспорт для ActionScript» . Серый квадрат — кнопка сцены, называемая stackButton .
Шаг 4: ActionScript
Создайте новый класс ActionScript (Cmd + N), сохраните файл как Main.as и напишите следующие строки; пожалуйста, прочитайте комментарии в коде, чтобы полностью понять поведение класса.
|
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
|
package
{
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
import com.pixelfumes.stacks.Stack;
import fl.transitions.easing.Elastic;
public final class Main extends Sprite
{
private var stack:Stack = new Stack();
/* The next variables are the movieclips names, you can add any movieclip to the stacks */
private var nt:NT = new NT();
private var at:AT = new AT();
private var mt:MT = new MT();
public final function Main():void
{
/* Set the stack properties*/
stack.setRadius(240);
stack.setAngle(35);
stack.setStartAngle(0);
stack.setOpenEasing(Elastic.easeOut);
stack.setOpenTime(1);
stack.setCloseEasing(Elastic.easeOut);
stack.setCloseTime(0.5);
/* Add the elements to the stack container */
stack.addItem(nt);
stack.addItem(at);
stack.addItem(mt);
/* Position and add the stacks to the stage */
addChild(stack);
stack.x = stackButton.x;
stack.y = stackButton.y;
/* Listens for clicks on the stackbutton */
stackButton.addEventListener(MouseEvent.MOUSE_DOWN, stackClick);
}
private final function stackClick(e:Event):void
{
if (stack.getStackOpen() == false) //if stack is closed, open it
{
stack.openStack();
}
else //stack is open, so close it
{
stack.closeStack();
}
}
}
}
|
Шаг 5: Класс документа
Добавьте имя класса в поле « Класс» в разделе « Публикация » на панели « Свойства» .
Вывод
Вы создали полезное меню Stacks для своих приложений или веб-сайта. Вы можете адаптировать проект под свои нужды или использовать эту технику для создания ваших собственных стеков.
Надеюсь, вам понравился этот Quick Tip, спасибо за чтение!