Урок 2. События мыши. Кнопка Play и Stop.

ActionScript c нуля. Урок1. События мыши
Привет. Меня зовут Оксана. Я планирую написать серию уроков по ActionScript 3
для самых самых новичков (потому что я сама не так давно этим занимаюсь). У
меня стоит Flash CS4, русифицированный (к сожалению). Если нам с вами буду
нужны какие-то пункты меню, то буду писать их как на английском, так и на
русском.
Объективную критику обожаю. А также если вдруг перевру в каких-то терминах, то
буду рада исправлениям
. Надеюсь, что рисовать прямоугольники и кружки ты
уже умеешь, поэтому давай сразу перейдем к обучению.
События мыши
На основе 2-х примеров ты познакомишься с событиями мыши.
Пример1: При щелчке на прямоугольнике, он будет сдвигаться
вправо.
• Создай 2 слоя:
На рисунке обведена кнопка создания нового слоя. Переименовать слой можно,
если щелкнуть по названию слоя 2 раза.
• На сцене создай прямоугольник.
• Чтобы прямоугольник можно было использовать в ActionScript, давай
преобразуем его в символ.
Щелкни по прямоугольнику правой клавишей мыши – Преобразовать в
символ илиConvert to symbol (а можно было просто нажать F8). В списке «Тип»
выбери MovieClip – Фрагмент ролика.
Отлично.
Теперь можно писать скрипт.
Скрипт будет размещаться на слое AS.
• В первом кадре слоя AS щелкни правой и в меню выбери Action – Действия.
Или можно просто выделить первый кадр слоя AS и нажать F9.
В первом уроке я хочу познакомить тебя с событиями. Например, если
пользователь щелкает мышью, то происходит событие. Или, если пользователь
нажимает клавишу Alt на клавиатуре, это тоже может являться событием. О
событиях клавиатуры будет рассказано в следующих уроках.
В том примере, кокторый мы сейчас разбираем, щелчок на прямоугольник будет
событием.
Есть правило, по которому можно описать событие:
1. Создать слушателя событий.
CODE
addEventListener (MouseEvent.CLICK, moveObject);
Метод addEventListener() всегда создает слушателя событий. Слушатель событий
будет проверять, не произошло ли событие в нашей сцене.
В скобках задается тип события. В данном случае это событие
мыши MouseEvent.CLICK – тоесть прямоугольник будет сдвигаться вправо при
щелчке на нем. Есть и другие события, чуть позже вы с ними познакомитесь.
После запятой пишется имя функции, которая нам нужна, чтобы в дальнейшем
выполнять сдвиг прямоугольника вправо. Имя функции может быть любым, но
лучше имена давать осмысленно. Я решила назвать функцию – moveObject.
Слушатель добавлен, теперь нужно описать саму функцию:
CODE
function moveObject (event:MouseEvent):void {
x = x + 5;
}
Описывается функция moveObject.
В скобках описывается тип события – MouseEvent. Тип должен совпадать с типом
события, указанным в слушателе.
В дальнейшем вы привыкните к такой записи, меняться будут только названия
функций и типы событий. Все остальное будет оставаться таким же. Тоесть если
пока не очень понятно, нужно просто запомнить, как это пишется.
В фигурных скобках указывается, что будет делать функция, когда произойдет
событие.
x = x + 5 - Запись означает, что объект сдвинется на 5 пикселей вправо по
координате x.
Эту запись можно более коротким способом записать так:
x+=5;
Все. Вот полный код:
CODE
addEventListener (MouseEvent.CLICK, moveObject);
function moveObject (event:MouseEvent):void {
x += 5;
}
• Протестируй ролик – Ctrl+Enter. Если пощелкать по прямоугольнику, то он
начнет двигаться вправо.
primer1.swf ( 929байт ) Кол-во скачиваний: 35883
Пример2: При щелчке на прямоугольник – он будет двигаться
вправо. При шелчке на окружность, она будет двигаться влево.
• На слой «Анимация» добавь еще один объект – окружность.
• Также преобразуй ее в MovieClip – Фрагмент ролика.
• Протестируй ролик. Объекты двигаются вправо на 5 пикселей.
primer2.swf ( 1.01к ) Кол-во скачиваний: 35382
Чтобы можно было создать такую анимацию,как мне хочется, в коде будет
необходимо ссылаться на каждый объект отдельно. Поэтому давай дадим имена
нашим символам.
• Выдели прямоугольник и на панели свойств - Properties в поле Instance Name –
имя экземпляра – впечатай object1:
• Выдели окружность и дай ей имя экземпляра – object2
• Теперь снова возвращаемся в первый кадр слоя AS и F9, чтобы открыть панель
Действий.
Вот так будет выглядеть код:
CODE
addEventListener (MouseEvent.CLICK, moveObject);
function moveObject (event:MouseEvent):void {
object1.x += 5;
object2.x -= 5;
}
Протестируй мувик. Теперь при щелчке на один из объектов прямоугольник
сдвигается вправо, а окружность влево.
primer3.swf ( 1.06к ) Кол-во скачиваний: 36704
Задача не выполнена
Чтобы получилось так, как надо, нам нужно 2 событие. Одно будет для
прямоугольника. Другое для окружности.
CODE
object1.addEventListener (MouseEvent.CLICK, moveObject1);
function moveObject1 (event:MouseEvent):void {
object1.x += 5;
}
object2.addEventListener (MouseEvent.CLICK, moveObject2);
function moveObject2 (event:MouseEvent):void {
object2.x -= 5;
}
Обратите внимание, что слушателя мы теперь регистрируем отдельно для каждого
объекта
object1.addEventListener (MouseEvent.CLICK, moveObject1);
object2.addEventListener (MouseEvent.CLICK, moveObject2);
Протестируйте мувик.
prime4.swf ( 1.07к ) Кол-во скачиваний: 36622
Все получилось!!!!
Ну и на последок давай я тебе расскажу, какие бывают события мыши (более
подробно смотри тут):
MouseEvent.CLICK – сделано нажатие и отпускание ЛКМ над рабочей областью;
MouseEvent.MOUSE_DOWN – сделано нажатие ЛКМ;
MouseEvent.MOUSE_UP – сделано отпускание ЛКМ;
MouseEvent.DOUBLE_CLICK – событие происходит после 2-го щелчка
MouseEvent.MOUSE_MOVE – событие происходит, если курсор перемещается над
областью отображения;
MouseEvent.MOUSE_OVER – событие происходит, если указатель перемещается
на объект. Чтобы событие произошло еще раз, курсор нужно поместить за пределы
объекта, а потом снова навести его на объект.
MouseEvent.MOUSE_OUT – событие происходит, если указатель перемещается за
пределы области объекта;
MouseEvent.MOUSE_WHEEL – событие происходит, если указатель расположен
над рабочим объектом и пользователь крутит колесо;
Ты можешь поэксперементировать с типами событий, заменив в нашем коде
событие MouseEvent.CLICK в слушателе и в функции на какое-либо другое.
Для события MouseEvent.DOUBLE_CLICK предварительно надо будет разрешить
выполнение двойного щелчка на объекте:
CODE
object1.doubleClickEnabled = true;
object2.doubleClickEnabled = true;
object1.addEventListener (MouseEvent.DOUBLE_CLICK, moveObject1);
function moveObject1 (event:MouseEvent):void {
object1.x += 5;
}
object2.addEventListener (MouseEvent.DOUBLE_CLICK, moveObject2);
function moveObject2 (event:MouseEvent):void {
object2.x -= 5;
}
primer5.swf ( 1.1к ) Кол-во скачиваний: 37777
Пока это все.
В следующем уроке мы продолжим работать с событиями мыши и я расскажу, как
сделать кнопку Play – запускающую анимацию, и кнопку Stop – которая будет
анимацию останавливать.
Домашнее задание:
1. Сделай так, чтобы при щелчке на прямоугольник, он двигался вверх, а не
вправо.
2. Сделай так, чтобы прямоугольник двигался с шагом в 15 пикселей, а не 5.
Урок 2. События мыши. Кнопка Play и Stop.
В этом уроке мы продолжаем работать с событиями мыши. Только тут я уже
расскажу, как привязать эти события к кнопкам.
Пример 1: Кнопка Play и Stop
1. Первый слой назови – «анимация»
2. На сцене создай анимацию движения объекта из одной точки в другую. Я взяла
растровую картинку в качестве объекта. Ты можешь создать простой объект –
прямоугольник, окружность(объект должен быть сгруппирован – меню Modify –
Group; Модификация - Группировать);
или импортируй в сцену картинку – меню File – Import – Import to stage; Файл
– Импорт – В рабочую область .
Кратко о том, как создать анимацию движения:
• Выдели 30 кадр(например) слоя «Анимация».
• Нажми F6 – создание ключевого кадра
• Передвинь объект на сцене в другое место
• Правой клавишей щелкни по серой полоске между 1-м и 30-м кадрами и
выбери Motion tween – Анимацию движения. Для CS4 выберите Classic tween
– Классическую анимацию движения
• Протестируй мувик Ctrl+Enter
Primer1.swf ( 4.25к ) Кол-во скачиваний: 24326
3. Создай второй слой – назови его «Button» (можно по-русски – «Кнопки»)
4. На сцене, где-нибудь в углу создай два объекта – прямоугольник и треугольник
– это будущие кнопки Play и Stop.
5. По каждому из созданных объектов щелкни правой клавишей и выбери Convert
to Symbol – Преобразовать в символ (F8)
6. Оба символа сделай кнопками - Button.
7. На сцене выдели треугольник и в панели Properties – Свойства в поле Instance
name – Имя экземпляра впечатай имя кнопки – «Play_btn». Это делается для
того, чтобы в дальнейшем была возможность в скрипте ссылаться на эту кнопку. В
предыдущем уроке я об этом рассказывала.
8. На сцене выдели прямоугольник и в панели Properties – Свойства в
поле Instance name – Имя экземпляра впечатай имя кнопки – «Stop_btn».
9. Создай третий слой – назови его «action»
10. В первом кадре слоя «action» щелкни правой и в меню выбери Action –
Действия (F9)
11. Напиши такую строчку:
CODE
stop(); //останавливает анимацию в самом начале
12. Протетируй мувик. Все правильно. Ничего не движется
13. Теперь нужно сделать так, чтобы кнопка Play смогла запустить анимацию. И тут
придется вспомнить, что такое событие. Ведь нажатие на кнопку – это и есть
событие.
CODE
/*создаем слушателя событий для кнопки play_btn. Событие MouseEvent.CLICK
– тоесть пользователь делает щелчок на кнопке Play_btn*/
play_btn.addEventListener(MouseEvent.CLICK, playF);
/*Создаем функцию, которая и будет выполняться запуск анимации при щелчке
мышью на кнопке*/
function playF(Event:MouseEvent):void {
play();
}
14. Весь код:
CODE
stop();
play_btn.addEventListener(MouseEvent.CLICK, playF);
function playF(Event:MouseEvent):void {
play();
}
Если ты сейчас протестируешь ролик, то работать будет пока только кнопка Play.
15. Теперь нужно сделать так, чтобы кнопка Stop смогла останавливать анимацию.
И снова нам нужно событие. Здесь представлен полный код для 1-го примера:
CODE
stop();
play_btn.addEventListener(MouseEvent.CLICK, playF);
stop_btn.addEventListener(MouseEvent.CLICK, stopF);
function playF(Event:MouseEvent):void {
play();
}
function stopF(Event:MouseEvent):void {
stop();
}
Primer3.swf ( 4.8к ) Кол-во скачиваний: 25460
Отлично. Все работает!!!
Пример 2: Вся анимация находится внутри Movie Clip.
1. Создай новый проект
2. Первый слой назови – «анимация»
3. Создай новый символ – меню Insert – New Symbol; Вставка – Новый символ
4. В качестве символа выбери MovieClip
5. Внутри символа создай анимацию движения объекта как в предыдущем примере.
6. Чтобы вернуться на сцену, нажми на кнопку
и выбери название сцены.
7. Из библиотеки символов вытащи на сцену свой симвов (Чтобы открыть
библиотеку – меню Window – Libreries; Окно – Библиотека)
8. Создай второй слой – назови его «Button» (можно по-русски – «Кнопки»)
9. Создай две кнопки - Play и Stop.
10. Каждой кнопке дай имя экземпляра, как в примере 1.
11. Создай третий слой – «action»
12. В первом кадре слоя напиши скрипт из примера 1:
CODE
stop();
play_btn.addEventListener(MouseEvent.CLICK, playF);
stop_btn.addEventListener(MouseEvent.CLICK, stopF);
function playF(Event:MouseEvent):void {
play();
}
function stopF(Event:MouseEvent):void {
stop();
}
13. Протестируйте мувик. Хм. Кнопки не работают. А ролик изначально двигается
сам по себе.
Primer4.swf ( 5.41к ) Кол-во скачиваний: 24964
14. Когда анимация находится внутри символа, чтобы ее остановить, необходимо
ссылаться на этот символ. Поэтому давай сейчас назовем наш символ – «object»
• Вернись на сцену
• Выдели символ
• В панели свойства впечатай имя экземпляра – «object»
15. Давай немного изменим наш скрипт, чтобы он стал работать.
Во-первых правильно остановим мувик:
CODE
object.stop();//ссылаемся на тот символ, анимацию которого хотим
остановить
Во-вторых внутри функции playF правильно запустим анимацию:
CODE
object.play();
И в-третьих внутри функции stopF правильно остановим анимацию:
CODE
object.stop();
Весь код:
CODE
object.stop();
play_btn.addEventListener(MouseEvent.CLICK, playF);
stop_btn.addEventListener(MouseEvent.CLICK, stopF);
function playF(Event:MouseEvent):void {
object.play();
}
function stopF(Event:MouseEvent):void {
object.stop();
}
Primer5.swf ( 5.43к ) Кол-во скачиваний: 25183
Вот наконец урок 2 закончился. Если у тебя все получилось, ты молодец!)
В следующем уроке мы продолжим работать с событиями мыши и посмотрим
метод gotoAndStop() и gotoAndPlay().
Домашнее задание:
Пульт управления. При нажатии на кнопки, объект будет сдвигаться в
соответствующую сторону. Для того, чтобы выполнить домашнее задание, у тебя
уже имеются все навыки, если ты проделал(а) оба урока:
ActionScript 3. Урок 3. Методы gotoAndPlay() и
gotoAndStop().
Привет. Меня зовут Оксана. Я решила написать серию уроков по ActionScript 3 для
самых самых новичков (потому что я сама не так давно этим занимаюсь). У меня
стоит Flash CS4, русифицированный (к сожалению). Если нам с вами буду нужны
какие-то пункты меню, то буду писать их как на английском, так и на русском.
Объективную критику обожаю. А также если вдруг перевру в каких-то терминах, то
буду рада исправлениям
.
Надеюсь, ты уже ознакомился(лась) с первым и вторым уроком. Тогда давай сразу
переходить к обучению.
Метод gotoAndStop()
Пример 1:
1. В новом проекте создай анимацию: В первые 20 кадров звезда вылетает на
середину сцены, последующие 20 кадров звезда крутится.
Кратко о том, как это сделать:
• Создай звезду(звезда должна быть сгруппирована) и размести ее слева от сцены.
• Напротив слоя в 20 кадре нажми F6 – создание ключевого кадра
• Звезду перемести в середину сцены
• Щелкни правой клавишей между 1-м и 20-м кадрами и выбери Motion tween –
Анимацию движения. Для CS4 выберите Classic tween – Классическую
анимацию движения
• Напротив слоя в 40 кадре нажми F6.
• Щелкни правой клавишей между 20-м и 40-м кадрами и выбери Motion tween –
Анимацию движения. Для CS4 выберите Classic tween – Классическую
анимацию движения
• Выдели 20 кадр.
• На панели Properties - свойства в списке Rotate – Поворот выбери CW – вращение
по часовой стрелке, или CCW – вращение против часовой стрелки.
2. Протестируй ролик:
primer_3.1.swf ( 893байт ) Кол-во скачиваний: 23416
Анимация, если она зацикленная, будет воспроизводиться так: вначале звезда
вылетает, потом она крутится; затем снова вылетает, снова крутится и тд.
Задача: Сделать так, чтобы ползунок анимации после 40-го кадра перескакивал
не на первый кадр, а на 20-й. Тогда мы получим такую анимацию: Один раз звезда
вылетает слева и постоянно крутится.
Вот тут нам и понадобится метод gotoAndPlay();
3. Создай новый слой для скрипта. Назови его «action»
4. В 40-м кадре нажми F6 (Если писать скрипт в кадре, который не является
ключевым, то он привяжется к предыдущему ключевому кадру; в нашем случае к
1-му)
5. Окрой панель Action – Действия (F9)
6. Напечатай такую строку:
CODE
gotoAndPlay(20); //ползунок анимации после попадания на 40-й кадр
перескакивает на 20-й
7. Протестируй ролик
primer_3.2.swf ( 1.18к ) Кол-во скачиваний: 23327
Немного теории:
Синтаксис:
CODE
gotoAndPlay(frameNumber) //это мы попробовали
gotoAndPlay(frameLabel)
gotoAndPlay(scene, frameNumber)
gotoAndPlay(scene, frameLabel)
frameNumber - Задает номер кадра, в который должен перескочить ползунок
анимации
frameLabel - Этот аргумент задает метку кадра, в который должен перескочить
ползунок анимации
scene - Этот необязательный аргумент задает имя сцены, в которую перейдет
воспроизводящая головка. Если этот параметр не задан, то по умолчанию
предполагается текущая сцена.
Чтобы применить функцию gotoAndPlay() к клипу, находящемуся вне текущей
временной диаграммы, нужно использовать формат метода клипа
myClip.gotoAndPlay().
8. Иногда бывает удобно ссылаться не на номер кадра, а на номер метки. Напротив
слоя action выдели 20 кадр и сделай его ключевым (F6). На панели Properties –
Свойства в поле Frame Lable – Имя метки впечатай – «metka»
9. Теперь вернись в 40-й кадр и измени скрипт:
CODE
gotoAndPlay(“metka”);
10. Протестируй ролик. Все останется таким же, просто ссылаться по имени кадра
удобней, чем по числу.
Метод gotoAndStop()
- отличается от метода gotoAndPlay тем, что переводит ползунок анимации и
останавливается.
Синтаксис:
CODE
gotoAndStop(frameNumber)
gotoAndStop(frameLabel)
gotoAndStop(scene, frameNumber)
gotoAndStop(scene, frameLabel)
Пример2: После нажатия на кнопку появляется фото города
Кнопки, при нажатии на которые будет показываться город.
primer_3.3.swf ( 123.65к ) Кол-во скачиваний: 24290
1. Создай новый проект.
2. Измени цвет фона на серый
3. В библиотеку импортируй несколько каринок, изображающих различные
города. File – Import – Import ro library; (Файл – Импорт – Импорт в
библиотеку). У меня будет 4 картинки – Париж, Санкт-Петербург, Рим, Вена.
4. Перетащи одну из картинок на сцену из библиотеки. При необходимости размер
картинки можно изменить, впечатав значение длины и ширины на панели
Properties – Свойства.
5. На слое второй кадр сделай ключевым. Удали предыдущее изображение и в
середину сцены разместить вторую картинку.
6. Выполняй пункт 5 до тех пор, пока все картинки не будут добавлены на сцену.
7. Создай новый слой. Назови его – «button» (кнопки).
8. Мне понадобиться 4 кнопки.
• Создаю прямоугольник.
• Размещаю на нем надпись инструментом Text. Кстати надпись должна быть Static
– Статичная.
• Конвертирую все это в кнопку, выделив и нажав F8.
• И так проделать со всеми кнопками
9. Каждой кнопке дай своё имя экземпляра – Instance name.
Париж – parizh_btn
Санкт-Петербург – saint_btn
Рим – rim_btn
Вена – vena_btn
10. Создай новый слой. Назови его «action».
Протестируй мувик. Пока все картинки очень быстро перелистываются друг за
другом.
11. В первом кадре слоя «action» напечатай:
CODE
stop(); //позволяет остановить анимацию вначале
Далее нам надо заставить работать кнопки.
CODE
stop(); //позволяет остановить анимацию вначале
parizh_btn.addEventListener(MouseEvent.CLICK, parizhF); /*это мы создаем
слушателя для события щелчок. Регистрируем функцию, которую назвать можно,
как захочется. Но лучше давать интуитивно понятное название.*/
function parizhF(event:MouseEvent):void { //прописываем функцию
gotoAndStop(1); /*а вот и цель нашего урока. При нажатии на кнопку –
Париж, пользователь будет попадать в первый кадр, на котором находится
первая картинка – Париж.*/
}
//аналогично для других кнопок.
saint_btn.addEventListener(MouseEvent.CLICK, saintF);
function saintF(event:MouseEvent):void {
gotoAndStop(2);
}
rim_btn.addEventListener(MouseEvent.CLICK, rimF);
function rimF(event:MouseEvent):void {
gotoAndStop(3);
}
vena_btn.addEventListener(MouseEvent.CLICK, venaF);
function venaF(event:MouseEvent):void {
gotoAndStop(4);
}
Вот и все
Ты молодец!!
Домашнее задание:
Попробуй сделать такой мультик
dz_3.swf ( 6.37к ) Кол-во скачиваний: 24945
И задание повышенной сложности (а может и не очень повышенной)
ActionScript 3 с нуля. Урок 4. Условиe if. События
клавиатуры.
Привет. Меня зовут Оксана. Я решила написать серию уроков по ActionScript 3 для
самых самых новичков (потому что я сама не так давно этим занимаюсь). У меня
стоит Flash CS4, русифицированный (к сожалению). Если нам с вами буду нужны
какие-то пункты меню, то буду писать их как на английском, так и на русском.
Объективную критику обожаю. А также если вдруг перевру в каких-то терминах, то
буду рада исправлениям
.
Надеюсь, ты уже ознакомился(лась) с первым, вторым и третьим уроком. Тогда
давай сразу переходить к обучению.
Условие if
Первое, с чем будем знакомиться сегодня, это с условием If.
Синтаксис:
CODE
if ( условноеВыражение )
{
блокКода1
}
else
{
блокКода1
}
Пример использования оператора if в реальной жизни:
CODE
if (число конфет > 3) {
Поделюсь с другом
} else {
Съем сама
}
Действие if проверяет условие, указанное в скобках. Если окажется, что конфет
больше, чем 3, то будет выполняться первый блок кода – Поделиться с другом.
Иначе, если условие не верно, будет выполняться второй блок кода – Съесть
самой.
Иногда else могут упускать.
Или наоборот может быть так:
CODE
if (число конфет > 10) {
Поделюсь с друзьями
} else if (3 < число конфет < 10) {
Поделюсь с 1 другом
}
} else if (число конфет < 3) {
Съем одна
}
Условие switch
Чтобы не использовать несколько else if, ,будет более удобно пользоваться
инструкцией switch.
Синтаксис:
CODE
switch( условноеВыражение )
{
case выражение1:
блокКода1;
break;
case выражение2:
блокКода2;
break;
default:
блокКода3;
}
Здесь вместо проверки условия идет сравнение с выражением и определяется,
какой блок кода нужно выполнить. Если результат выражения условноеВыражение
не совпадает ни с одним из значений выражений case, то выполняются все
инструкции, расположенные за меткой default.
Пример использования в реальной жизни:
CODE
switch(ежедневник)
{
case ‘Понедельник’:
Пойти в универ
break;
case ‘Вторник’:
Снова универ
break;
case ’Среда’:
Погода плохая. Какой универ?
break;
default:
Самообучение
break;
}
Пример: При нажатии на кнопку анимация будет запускаться.
После повторного нажатия на эту же кнопку она будет
останавливаться.
1. На сцене создай анимацию движения для объекта из одной точки в другую.
(в предыдущих уроках рассказывалось, как это сделать)
2. Создай слой – «button», на котором размести будущую кнопку.
3. Конвертируй кнопку в символ Button: Выдели и нажми F8.
4. Дай Instance name – Имя экземпляра для кнопки – «knopka»
5. Создай слой action и в первом кадре напечатай:
CODE
stop (); //останавливает анимацию в самом начале
var cond:Number = 0; //переменная cond отвечает за состояние кнопки.
нажата кнопка или нет.
knopka.addEventListener (MouseEvent.CLICK, playStopF); /*создаем слушателя
события и регистрируем функцию playStopF*/
function playStopF (e:MouseEvent):void { //тело функции выполняется после
щелчка на кнопке
if (cond !=1) { // если состояние не равно нажатому, то play();
play ();
cond = 1; //теперь состояние делаем равным нажатому
} else { //если состояние равно нажатому
stop();
cond = 0; //теперь состояние делаем равным не нажатым
}
}
Протестируй ролик. Кажется все работает
primer_4.1.swf ( 11.27к ) Кол-во скачиваний: 21395
В коде нам встретился ввод переменной. Поэтому давай в этом разберемся.
Переменные
Переменные, это контейнеры, которые содержат в себе какие-либо значения или
данные. Для создания переменной всегда нужно использовать слова var. Тип
переменной назначается добавлением к имени переменной двоеточия (
последующим указанием типа этой переменной.
с
CODE
var x:Number = 5; //это вводится переменная x = 5. Тип Number - число
var text:String = «Привет»; //это вводится переменная text, означающая
слово «Привет». Тип String – строка.
var
y:Number; //так тоже можно, без присваивания значений
Внимание: переменная text не равна переменной Text.
Событие клавиатуры:
Событие будет происходить при нажатии клавиши.
Существует два типа событий клавиатуры: KeyboardEvent.KEY_DOWN и
KeyboardEvent.KEY_UP
KeyboardEvent.KEY_DOWN – пользователь нажал на клавишу
KeyboardEvent.KEY_UP – пользователь отпустил клавишу
Пример 2: Ролик, в котором при нажатии на стрелки
клавиатуры объект будет двигаться в соответствующую
сторону
1. Создай звезду
2. Преобразуй в Movie clip – Фрагмент ролика (F8)
3. Дай имя экземпляра Instance name «star»
4. Создай слой Аction и в 1-м кадре напечатай:
CODE
stage.addEventListener(KeyboardEvent.KEY_DOWN, keyboardF);
В этой строчке мы создаем слушателя не для кнопки, не для объекта, а для всей
сцены – stage.
Само событие теперь - KeyboardEvent.KEY_DOWN. Тоесть будет происходить, если
пользователь нажмет клавишу.
Функцию я назвала keyboardF.
Далее:
CODE
stage.addEventListener(KeyboardEvent.KEY_DOWN, keyboardF);
function keyboardF (e:KeyboardEvent):void { //функция keyboardF
if (e.keyCode == Keyboard.DOWN) {
//проверяется, какая клавиша нажата
star.y += 5;
} else if (e.keyCode == Keyboard.UP) {
star.y -= 5;
}
// еще 2 клавиши попробуй сам(а)
}
Протестируй ролик.
primer_4.2.swf ( 1.06к ) Кол-во скачиваний: 21336
Пример 3: После нажатия на стрелку, объект продолжает
двигаться в соответствующую сторону
1. На сцене создай окружность
2. Преобразуй в Movie clip – Фрагмент ролика (F8)
3. Дай имя экземпляра Instance name «ball»
4. Создай слой Аction и в 1-м кадре напечатай:
CODE
var direction:String; //вводим переменную direction, которая далее будет
задавать направление движения шарика
stage.addEventListener(KeyboardEvent.KEY_DOWN, keyboardF); //событие
клавиатуры
stage.addEventListener(Event.ENTER_FRAME, moveBall);
// событие
обновления экрана. Об этом смотри ниже
function keyboardF (e:KeyboardEvent):String { //тип String. Пояснение ниже
if (e.keyCode == Keyboard.RIGHT) { // стрелка вправо – направление вправо
direction = "right";
} else if (e.keyCode == Keyboard.LEFT) {//стрелка влево – направление
влево
direction = "left";
} else if (e.keyCode == Keyboard.UP) { //стрелка вверх – направление вверх
direction = "up";
} else if (e.keyCode == Keyboard.DOWN) { //стрелка вниз – направление вниз
direction = "down";
} else if (e.keyCode == Keyboard.SPACE) { //пробел – остановка анимации
direction = "stop";
}
return direction; //об этом ниже
}
function moveBall(e:Event) {
switch (direction) { //идет сравнение с тем, чему равно direction.
Соответствующий блок кода выполняется
case 'up' : //если direction= "up", выполняется этот блок кода
ball.y -= 4;
break;
case 'down' : //если direction= "down'", выполняется этот блок кода
ball.y += 4;
break;
case 'right' : //если direction= "right'", выполняется этот блок кода
ball.x += 4;
break;
case 'left' : //если direction= "left'", выполняется этот блок кода
ball.x -= 4;
break;
case 'stop' : //если direction= "stop'", выполняется этот блок кода
break;
}
}
Протестируй ролик.
primer_4.3.swf ( 4.2к ) Кол-во скачиваний: 21511
Разберу, что нового тут появилось:
stage.addEventListener(Event.ENTER_FRAME, moveBall);
– Событие обновления экрана ENTER_FRAME. О нем я планирую рассказать в
следующих уроках. Но в двух словах: Событие в фигурных скобках функции будет
moveBall будет выполняться со скоростью Кадров в секунду. То есть если ты
нажмешь на стрелку вправо, то шарик 12 раз за секунду сделает движение на 4
пиксела вправо.
function keyboardF (e:KeyboardEvent):String {
- Здесь обрати внимание на тип возвращаемых значений. Раньше был void - тоесть
возвращаемого значения нет. Теперь String - тоесть возвращается строковое
значение. А возвращается значение за счет return
return direction;
- Возвращает значение функции. Если не написать эту строку, значение
переменной direction не выйдет за пределы условия. А нам его надо дальше
использовать
Все остальное ты уже знаешь.
Вот и все
Ты молодец!!
Домашнее задание:
Попробуй сделать такую флешку:
dz_4.swf ( 56.94к ) Кол-во скачиваний: 21845
ActionScript 3 с нуля. Урок 5. Свойства объектов.
ЕnterFrame.
Привет. Меня зовут Оксана. Я решила написать серию уроков по ActionScript 3 для
самых самых новичков (потому что я сама не так давно этим занимаюсь). У меня
стоит Flash CS4, русифицированный (к сожалению). Если нам с вами буду нужны
какие-то пункты меню, то буду писать их как на английском, так и на русском.
Объективную критику обожаю. А также если вдруг перевру в каких-то терминах, то
буду рада исправлениям
.
Надеюсь, ты уже ознакомился(лась) с
первым,
вторым,
третьим
и четвертым уроками.
Тогда давай сразу переходить к обучению.
Событие Event.ENTER_FRAME
- событие обновления экрана. Будет происходить в каждом кадре. Скорость
обновления будет зависеть от числа кадров.
И сразу пример:
Пример1: Движение звезды по диагонали
1. Создай звезду
2. Преобразуй в Movie clip – Фрагмент ролика (F8)
3. Дай имя экземпляра Instance name «star»
4. Создай слой Аction и в 1-м кадре напечатай:
CODE
import flash.events.Event; //это импортируется класс событий, в котором и
находится событие ENTER_FRAME. На самом деле и без этой строки будет
нормально работать, но почему-то не у всех
addEventListener(Event.ENTER_FRAME, moveF); //функция moveF. Событие будет
выполняться в каждом кадре, т.е. со скоростью 12 кадров в секунду
function moveF (e:Event):void {
star.x += 5;
star.y -= 5;
}
Тот же самый код, но более правильно оформленный:
CODE
var speedX:Number = 5;
var speedY:Number = 5;
star.addEventListener(Event.ENTER_FRAME, moveF);
function moveF (e:Event):void {
star.x += speedX;
star.y += speedY;
}
Протестируй ролик:
primer_5.1.swf ( 1.07к ) Кол-во скачиваний: 18620
Чтобы звезда не выходила за пределы экрана, придется вспомнить прошлое
занятие – Условия.
Пример 2: Дойдя до края сцены звезда появится в начальной
позиции:
CODE
import flash.events.Event;
var speedX:Number = 5;
var speedY:Number = 5;
star.addEventListener(Event.ENTER_FRAME, moveF);
function moveF(e:Event):void {
star.x += speedX;
star.y += speedY;
//проверяется условие. Если координа x станет больше 300 ИЛИ (обозначается
|| ) координата y станет больше 200, то координаты обнулить
if (star.x>300 || star.y>200) {
star.x = 0;
star.y = 0;
}
}
Тот же самый код, но более правильно оформленный:
CODE
import flash.events.Event;
var speedX:Number = 5;
var speedY:Number = 5;
stage.addEventListener(Event.ENTER_FRAME, moveF);
function moveF(e:Event):void {
star.x += speedX;
star.y += speedY;
// stage.stageWidth – ширина сцены, stage.stageHeight – высота сцены
if (star.x>stage.stageWidth || star.y>stage.stageHeight)
{
star.x = 0;
star.y = 0;
}
}
Протестируй ролик:
primer_5.2.swf ( 1.09к ) Кол-во скачиваний: 17551
Пример3: Звезда отбивается от края сцены и летит в обратную
сторону:
CODE
var speedX:Number=5;
var speedY:Number=5;
var obX:Number=stage.stageWidth-star.width;
var obY:Number=stage.stageHeight-star.height;
star.addEventListener(Event.ENTER_FRAME, moveF);
function moveF(e:Event):void {
star.x+=speedX;
star.y+=speedY;
//если х больше ширины сцены ИЛИ х<0, то меняем направление на обратное
if (star.x>obX||star.x<0) {
speedX=- speedX;
}
//если у больше ширины сцены ИЛИ у<0, то меняем направление на обратное
if (star.y>obY||star.y<0) {
speedY=- speedY;
}
}
Протестируй ролик:
primer_5.3.swf ( 1.09к ) Кол-во скачиваний: 17458
Если событие ENTER_FRAME должно начаться после нажатия на кнопку или т.п., то
код немного изменится.
Пример4: Кнопка, запускающая событие ENTER_FRAME
В предыдущий пример просто добавь новый слой, размести на нем кнопку и дай ей
Instance name «btn»
Вернись на слой Action и просто немного измени код:
CODE
import flash.events.Event;
var speedX:Number=5;
var speedY:Number=5;
btn.addEventListener(MouseEvent.CLICK, clickF); //вначале происходит
событие клик, т.е. пользователь щелкает по кнопке «Лети!»
function clickF(e:MouseEvent):void {
star.addEventListener(Event.ENTER_FRAME, moveF); //после того, как
пользователь сделал щелчок, запускается событие ENTER_FRAME
function moveF(e:Event):void {
star.x+=speedX;
star.y+=speedY;
if (star.x>stage.stageWidth||star.x<0) {
speedX=- speedX;
}
if (star.y>stage.stageHeight||star.y<0) {
speedY=- speedY;
}
}
}
Протестируй ролик:
primer_5.4.swf ( 2.44к ) Кол-во скачиваний: 17929
В предыдущем примере мы пользовались свойством объекта: x и y. Т.е. движение
по горизонтали и вертикали. Свойства объекта на этом не ограничиваются. Также
можно было изменять прозрачность, ширину, поворот и т.д. Сейчас я собираюсь
рассказать тебе о некоторых свойствах объектов.
Свойства объектов
Cвойства объекта, которые мы сегодня рассмотрим, принадлежат к
классу DisplayObject.
Информацию об этих свойствах я частично буду брать из справки.
Ну и просто научиться ей пользоваться будет очень полезно
Свойство visible
Определяет видимость экранного объекта. Невидимые экранные объекты
отключаются.
Пример 5: Мигающий текст:
1. Создай надпись
2. Преобразуй в Movie clip(F8)
3. Instance name (Имя экземпляра) – «text»
4. Создай слой «action» и в первом кадре напечатай:
CODE
addEventListener(Event.ENTER_FRAME, textF); //событие будет выполняться в
каждом кадре
function textF (e:Event):void {
text.visible = !text.visible; //восклицательный знак означает НЕ. Т.е.
!text.visible – текст невидимый
}
Протестируй ролик:
primer_5.5.swf ( 3.12к ) Кол-во скачиваний: 17776
Свойство alpha
Указывает значение альфа-прозрачности заданного объекта. Допустимые значения
находятся в диапазоне 0 (полностью прозрачный) — 1 (полностью непрозрачный).
Значение по умолчанию 1. Экранные объекты, для которых значение alpha равно 0,
являются активными, несмотря на невидимость.
Свойство height, свойство width
Указывает высоту (ширину) экранного объекта в пикселах.
Свойство rotation
Указывает поворот в градусах. Значения от 0 до 180 представляют поворот по
часовой стрелке. Значения от 0 до -180 представляют поворот против часовой
стрелки. Значения за пределами этого диапазона, добавляются или вычитаются из
360 для получения допустимого значения. Например, rotation = 450 равносильно
rotation = 90.
Свойство scaleX, scaleY
Указывает горизонтальное (вертикальное) масштабирование объекта от точки
регистрации (в процентах). Точка регистрации по умолчанию — (0, 0). 1,0
равняется масштабу 100%.
Свойство x ; свойство y
Указывает координату x (y) объекта. Координаты объекта определяются
относительно положения точки регистрации.
Пример 6: Пульт управления
1. Нам понадобится 3 слоя:
• Слой «object» - на нем создай прямоугольник, который мы потом будем двигать с
помощью пульта. Преобразуй прямоугольник в MovieClip. Имя экземпляра Instance
Name – «mc»
• Слой «Button» - на этом слое создай кнопки пульта. Каждую кнопку преобразуй в
символ – Button. Каждой кнопке дай свое имя экземпляра Instance name:
Кнопка вверх: up_btn;
Кнопка вниз: down_btn;
Кнопка влево: left_btn;
Кнопка вправо: right_btn;
Кнопка, увеличивающая прозраность: aiphaPlus_btn;
Кнопка, уменьшающая прозраность: aiphaMinus_btn;
Кнопка, увеличивающая размер: sizePlus_btn;
Кнопка, уменьшающая размер: sizeMinus_btn;
Кнопка вращения по часовой стрелке: rotationCW_btn;
Кнопка вращения против часовой стрелки: rotationCCW_btn
• Слой action:
CODE
import flash.events.MouseEvent; //на всякий случай импортируем класс
событий мыши
up_btn.addEventListener(MouseEvent.CLICK , upF);
down_btn.addEventListener(MouseEvent.CLICK , downF);
left_btn.addEventListener(MouseEvent.CLICK , leftF);
right_btn.addEventListener(MouseEvent.CLICK , rightF);
alphaPlus_btn.addEventListener(MouseEvent.CLICK , alphaPlusF);
alphaMinus_btn.addEventListener(MouseEvent.CLICK , alphaMinusF);
sizePlus_btn.addEventListener(MouseEvent.CLICK , sizePlusF);
sizeMinus_btn.addEventListener(MouseEvent.CLICK , sizeMinusF);
rotationCW_btn.addEventListener(MouseEvent.CLICK , cwF);
rotationCCW_btn.addEventListener(MouseEvent.CLICK , ccwF);
function upF (e:MouseEvent):void {
mc.y -= 5;
}
function downF (e:MouseEvent):void {
mc.y += 5;
}
function leftF (e:MouseEvent):void {
mc.x -= 5;
}
function rightF (e:MouseEvent):void {
mc.x += 5;
}
function alphaPlusF (e:MouseEvent):void {
mc.alpha += 0.1;
}
function alphaMinusF (e:MouseEvent):void {
mc.alpha -= 0.1;
}
function sizePlusF (e:MouseEvent):void {
mc.height += 10;
mc.width += 10;
}
function sizeMinusF (e:MouseEvent):void {
mc.height -= 10;
mc.width -= 10;
}
function cwF (e:MouseEvent):void {
mc.rotation += 15;
}
function ccwF (e:MouseEvent):void {
mc.rotation -= 15;
}
Протестируй ролик:
primer_5.6.swf ( 3.92к ) Кол-во скачиваний: 19146
Свойство mouseX
Указывает координату x положения курсора мыши (в пикселах).
Это свойство чуть позже нам пригодится.
Свойство mouseY
Указывает координату y положения курсора мыши (в пикселах).
Это свойство чуть позже нам пригодится.
Свойство mask
Объект маскируется другим объектом
Пример 7: Очень просто пример маскирования
1. На нижний слой помести любую картинку.
2. Преобразуй картинку в MovieClip и дай ей Instance Name – «image_mc»
3. Создай новый слой, на котором нарисуй окружность
4. Окружность преобразуй в MovieClip и дай ей Instance Name – «mask_mc»
5. Cоздай новый слой для ActionScript и в первом кадре напечатай такую строку:
i
CODE
mage_mc.mask = mask_mc;
Протестируй ролик
6. Если в скрипт добавить еще пару строчек, то маска станет таскаться за мышью:
CODE
import flash.events.Event;
image_mc.mask = mask_mc;
addEventListener(Event.ENTER_FRAME, maskF);
function maskF(e:Event):void {
mask_mc.x = mouseX; //вот они нам и пригодились
mask_mc.y = mouseY;
}
Протестируй ролик
primer_5.7.swf ( 147.53к ) Кол-во скачиваний: 17945
Метод hitTestPoint()
В этом же классе DisplayObject, в которо
м находятся все свойства объекта, приведен список некоторых методов.
Один из методов нам сейчас понадобиться, чтобы выполнить последний пример.
Метод hitTestPoint()
- Вычисляет экранный объект, чтобы определить, перекрывает ли он точку,
заданную координатами x и y, или пересекает ее.
И сразу пример
Пример 8: Окошко с убегающей кнопкой
1. Создай фон в виде окошка
2. На втором слое создай кнопку – «Да». Преобразуй ее в символ Button и дай ей
Instance name – «da_btn»
3. Cоздай слой для ActionScript и в первом кадре напечатай:
CODE
import flash.events.MouseEvent;
da_btn.addEventListener(MouseEvent.MOUSE_OVER, moveF); //событие наведения
курсора на кнопку
function moveF(e:MouseEvent):void {
da_btn.x=Math.random()*stage.stageWidth;
da_btn.y=Math.random()*stage.stageHeight;
}
Протестируй ролик
primer_5.8.swf ( 9.35к ) Кол-во скачиваний: 18806
da_btn.x=Math.random()*stage.stageWidth;
Если пользователь наводит курсор на кнопку, то кнопка меняет положение по
координате x на любое другое в пределах ширины сцены - stage.stageWidth;
(Ширину также можно было бы впечатать цифрой)
da_btn.y=Math.random()*stage.stageHeight;
Аналогично
Можно еще так сделать этот пример:
CODE
import flash.events.MouseEvent;
da_btn.addEventListener(Event.ENTER_FRAME, moveF);
function moveF(e:Event):void {
if (da_btn.hitTestPoint(mouseX,mouseY)) {
da_btn.x=Math.random()*stage.stageWidth;
da_btn.y=Math.random()*stage.stageHeight;
}
}
Здесь:
if (da_btn.hitTestPoint(mouseX,mouseY)) {
}
Если произойдет пересечение кнопки и курсора мыши, то выполянется действие в
фигурных скобках
А событие ENTER_FRAME мы добавляем, чтобы оно проверяло каждый раз, нет ли
такого пересечения
Вот и все
Ты молодец!!
Домашнее задание:
Задание легкое, над сложным я думаю.
Попробуй сделать так
dz_5.swf ( 600байт ) Кол-во скачиваний: 18251
Прямоугольник надувается до определенного размера, затем начинает сдуваться,
опять же до определенного размера.
ActionScript 3 с нуля. Урок 6. Класс TIMER. Класс
Date
Привет. Меня зовут Оксана. Я решила написать серию уроков по ActionScript 3 для
самых самых новичков (потому что я сама не так давно этим занимаюсь). У меня
стоит Flash CS4, русифицированный (к сожалению). Если нам с вами буду нужны
какие-то пункты меню, то буду писать их как на английском, так и на русском.
Объективную критику обожаю. А также если вдруг перевру в каких-то терминах, то
буду рада исправлениям
.
Надеюсь, ты уже ознакомился(лась) с
первым,
вторым,
третьим,
четвертым
и пятым уроками.
Тогда давай сразу переходить к обучению.
Сегодня мы продолжим изучать события обновления экрана. Следующее событие –
это TIMER.
Чтобы посмотреть о классе TIMER, можешь воспользоваться справкой
TimerEvent.TIMER
- обновление анимации с заданным промежутком времени, заданное число раз.
Для создания события TIMER нужно выполнить несколько действий:
1. Создай экземпляр класса TIMER, также установи время задержки и число
повторений.
CODE
var
primer1:Timer = new Timer(100,5);
200 - частота обновления анимации в мс (200 мс = 5 кадров в секунду);
5 - количество повторов выполнения функции
Частота обновления анимации (Задержка) – задает промежуток, через
который будет происходить повтор события
Количество повторов – Задает число срабатываний TIMER. Если не написать
число повторов, то событие будет происходить бесконечно.
2. Создай слушателя события TimerEvent.TIMER с помощью метода addEventListener
CODE
primer1.addEventListener(TimerEvent.TIMER, moveF);
3. Создай функцию, которую ты хочешь выполнить несколько раз
CODE
function moveF (e:TimerEvent):void {
mc.x +=10;
}
4. Запусти таймер с помощью метода start()
CODE
primer1.start();
Теперь давай все это соберем в один пример:
Пример 1: Движение прямоугольника по оси X
1. Создать прямоугольник
2. Преобразуй его в Movie clip – Фрагмент ролика
3. На панели Properties дай ему имя экземпляра Instance name «mc»
4. Создай слой Аction и в 1-м кадре напечатай:
CODE
import flash.utils.Timer; //импорт класса TIMER
import flash.events.TimerEvent; //импорт события TIMER
var
primer1:Timer=new Timer(200,5);
primer1.addEventListener(TimerEvent.TIMER, moveF);
function moveF(e:TimerEvent):void {
mc.x+=10;
}
primer1.start();
5. Протестируй ролик:
В этом ролике прямоугольник сдвигается на 10 пикселей вправо 5 раз со скоростью
5 кадров в секунду.
primer_6.1.swf ( 1.01к ) Кол-во скачиваний: 18922
Остановка таймера
Чтобы остановить таймер до истечения числа повтором, можно воспользоваться
методом myTimer.stop();
CODE
myTimer.stop();
Пример 2: Кнопка Play – запускающая TIMER, и кнопка Stop –
останавливающая.
1. Создать прямоугольник
2. Преобразуй его в Movie clip – Фрагмент ролика
3. На панели Properties дай ему имя экземпляра Instance name «mc»
4. Создай слой для кнопок. На слое сделай 2 кнопки.
5. Преобразуй кнопки в символ Button.
6. Instance name: «play_btn» и «stop_btn»
7. Создай слой Аction и в 1-м кадре напечатай:
CODE
import flash.utils.Timer; //импорт класса TIMER
import flash.events.TimerEvent; //импорт события TIMER
import flash.events.MouseEvent; //импорт события MouseEvent
var primer2:Timer=new Timer(200); //число повтором не задали. Т.е. будет
выполнятся, пока не остановим
primer2.addEventListener(TimerEvent.TIMER, timerF);
function timerF(e:TimerEvent):void {
mc.rotation+=20;
}
//Кнопка Play, запускающая TIMER
play_btn.addEventListener(MouseEvent.CLICK, playF);
function playF(e:MouseEvent):void {
primer2.start();
}
//Кнопка Stop, останавливающая TIMER
stop_btn.addEventListener(MouseEvent.CLICK, stopF);
function stopF(e:MouseEvent):void {
primer2.stop();
}
8. Протестируй ролик:
primer_6.2.swf ( 14.24к ) Кол-во скачиваний: 18574
TimerEvent.TIMER_COMPLETE
Есть 2 типа события TIMER:
TimerEvent.TIMER – cобытие совершается через определенный промежуток
времени
TimerEvent.TIMER_COMPLETE – событие совершается тогда, когда выполняется
число повторов TIMER.
Пример 3: Пример использования TimerEvent.TIMER_COMPLETE
1. В первом кадре создай динамическое текстовое поле инструментом Text(T)
2. На панели Properties дай ему имя экземпляра Instance name «second_txt»
3. На этом же слое сделай второй кадр ключевым, удали динамическое текстовое
поле. и напечатай статичную надпись:
4. Создай новый слой для ActionScript
5. В 1-м кадре напечатай:
CODE
stop();
import flash.utils.Timer;
import flash.events.TimerEvent;
var count:Number=5;
var timer:Timer=new Timer(1000,count+1);
timer.addEventListener(TimerEvent.TIMER, tymerF);
timer.addEventListener(TimerEvent.TIMER_COMPLETE, completeF);
function tymerF(event:TimerEvent):void {
second_txt.text=String(count--);
}
function completeF(event:TimerEvent):void {
gotoAndStop(2);
}
timer.start();
Протестируй ролик
primer_6.3.swf ( 89.41к ) Кол-во скачиваний: 18932
Комментарии по коду:
var count:Number=5;
- Переменная, с нее будет начинаться обратный отчет
var timer:Timer=new Timer(1000,count+1);
- скорость обновления = 1 сек.; число повторений = 6. К переменной count
необходимо добавить единицу, иначе мы получим 5, 4, 3, 2 и сразу перескочим ко
2-му кадру
second_txt.text=String(count--);
- Каждю секунду будет появляться новая цифра: 5, 4, 3, 2, 1. Переменная count
уменьшается на единицу. Запись count -- аналогична записи count -=1 или записи
count = count -1
function completeF(event:TimerEvent):void {
gotoAndStop(2);
}
- После того, как таймер закончит повторять действия, перескочить на второй кадр
Пример 4: Секундомер, показывающий секунды
1. Создай динамическое текстовое поле инструментом Text(T)
2. На панели Properties дай ему имя экземпляра Instance name «timer_txt»
3. Создай слой для кнопок. На слое сделай 3 кнопки – «Старт», «Стоп» и
«Сбросить».
4. Преобразуй кнопки в символ Button.
5. Instance name: «play_btn», «stop_btn» и «reset_btn»
6. Создай слой Аction и в 1-м кадре напечатай:
CODE
import flash.utils.Timer;//импорт класса TIMER
import flash.events.TimerEvent;//импорт события TIMER
import flash.events.MouseEvent;//импорт события MouseEvent
//изначально в текстовом поле будет написано 0
timer_txt.text="0";
/*создаем новый таймер с именем экземпляра primer3. Промежуток между
повторами - 1000 мс = 1 с. Число повторов не указано, значит будет
повторятся, пока не остановим.*/
var primer4:Timer=new Timer(1000);
//создаем слушателя события TIMER для функции tymerF
primer4.addEventListener(TimerEvent.TIMER, tymerF);
//функция tymerF - преобразует число в строку и отображает текущее
значение счетчика
//currentCount - Общее число срабатываний таймера с момента его запуска с
нуля
//String() - преобразует в строку то, что в скобках
function tymerF(event:TimerEvent):void {
timer_txt.text=String(primer4.currentCount);
}
play_btn.addEventListener(MouseEvent.CLICK, startF);
stop_btn.addEventListener(MouseEvent.CLICK, stopF);
reset_btn.addEventListener(MouseEvent.CLICK, resetF);
//Запускает секундомер
function startF(event:MouseEvent):void {
primer4.start();
}
//Останавливает секундомер
function stopF(event:MouseEvent):void {
primer4.stop();
}
//Сбрасывает значение таймера
/*reset(); - Останавливает таймер, если он выполняется, и заново
присваивает свойству currentCount(число повторов) значение 0 (Из хелпа)*/
function resetF(event:MouseEvent):void {
primer4.reset();
timer_txt.text="0";
}
7. Протестируй ролик:
primer_6.4.swf ( 79.85к ) Кол-во скачиваний: 18484
Такой таймер будет показывать нам только секунды. И увеличиваться значение
секунд будет до бесконечности.
Давай немного изменим код, чтобы секундомер мог показывать еще и минуты:
Пример 5: Секундомер, показывающий минуты и секунды
CODE
import flash.utils.Timer;//импорт класса TIMER
import flash.events.TimerEvent;//импорт события TIMER
import flash.events.MouseEvent;//импорт события MouseEvent
var minutes:Number=0;//вводим переменную - минуты
var seconds:Number=0;//вводим переменную - секунды
//изначально в текстовом поле будет написано 0:0
timer_txt.text="0:0";
//создаем новый таймер с именем экземпляра primer4
var primer5:Timer=new Timer(1000);
//создаем слушателя события TIMER для функции tymerF
primer5.addEventListener(TimerEvent.TIMER, tymerF);
//функция tymerF
function tymerF(event:TimerEvent):void {
seconds++;//увеличиваем значение секунд. Запись seconds++ аналогична
seconds = seconds +1;
//если значение секунды станет равно 59, то обнулить и добавить 1 к
значению минут
if (seconds>59) {
seconds=0;
minutes++;
}
//секунды и минуты переводятся в строку. между ними будет стоять двоеточие
timer_txt.text=String(minutes+":"+seconds);
}
start_btn.addEventListener(MouseEvent.CLICK, startF);
stop_btn.addEventListener(MouseEvent.CLICK, stopF);
reset_btn.addEventListener(MouseEvent.CLICK, resetF);
//Запускает секундомер
function startF(event:MouseEvent):void {
primer5.start();
}
//Останавливает секундомер
function stopF(event:MouseEvent):void {
primer5.stop();
}
//Сбрасывает значение таймера
function resetF(event:MouseEvent):void {
primer5.reset();
timer_txt.text="0:0";
minutes=0;
seconds=0;
}
Протестируй ролик:
Я немного ускорила Timer(сделала 100, а не 1000), чтобы было видно, что секунды
побегут дальше 60-ти
primer_6.5.swf ( 79.93к ) Кол-во скачиваний: 18467
Класс Date
Информацию частично буду брать
отсюда: http://help.adobe.com/ru_RU/AS3LCR/Flash_10.0/Date.html
Класс Date представляет сведения о дате и времени.
Класс Date позволяет извлекать значения даты и времени относительно всемирного
времени или местного времени, которое определяется по настройке местного
часового пояса в той операционной системе, где запущен Flash Player.
Экземпляр Date создается так:
CODE
var time:Date = new Date(); //time – имя экземпляра. может быть другое
Некоторые методы класса Date
Метод getDate()
Возвращает день месяца по местному времени (целое число от 1 до 31), заданный
объектом Date. Местное время определяется операционной системой, в которой
запущен Flash Player.
Метод getFullYear()
Возвращает из объекта Date полный год по местному времени (четырехзначное
число, например 2000). Местное время определяется операционной системой, в
которой запущен Flash Player.
Метод getHours()
Возвращает час (целое число от 0 до 23) дня, относящегося к объекту Date, по
местному времени. Местное время определяется операционной системой, в которой
запущен Flash Player.
Метод getMinutes ()
Возвращает из объекта Date число минут по местному времени (целое число от 0 до
59). Местное время определяется операционной системой, в которой запущен Flash
Player.
Метод getMonth ()
Возвращает из объекта Date месяц по местному времени (0 — январь, 1 — февраль
и т.д.). Местное время определяется операционной системой, в которой запущен
Flash Player.
Метод getSeconds ()
Возвращает из объекта Date число секунд по местному времени (целое число от 0
до 59). Местное время определяется операционной системой, в которой запущен
Flash Player.
Теперь давай все это попробуем посмотреть в примере.
Пример 6: Ролик, показывающий текущую дату и время
1. На сцене создай 2 динамических текстовых поля.
2. Каждому текстовому полю дай свое имя экземпляра:
«date_txt» - поле будет показывать текущую дату
«time_txt» - поле будет показывать текущее время
3. Создай слой Аction и в 1-м кадре напечатай:
CODE
import flash.utils.Timer;
import flash.events.TimerEvent;
var primer6:Timer=new Timer(100);//создаем экземпляр класса Timer
primer6.start();//запускаем Timer
primer6.addEventListener(TimerEvent.TIMER, tymerF);
function tymerF(event:TimerEvent):void {
var time:Date = new Date();//создаем экземпляр класса Date, чтобы можно
было пользоваться методами класса
var day:Number=time.getDate();//переменной day присваиваем значение
текущего дня
var month:Number=time.getMonth();//переменной month присваиваем значение
текущего месяца
var year:Number=time.getFullYear();//переменной year присваиваем значение
текущего года
date_txt.text=day+"."+month+"."+year;//в текстовое поле вывести
день.месяц.год
}
4. Протестируй ролик. Верхнее текстовое поле должно показывать дату. Кстати,
обрати внимание на то, что месяц показывается прошедший. Исправим:
CODE
var month:Number=time.getMonth() +1;
Размер поля и размер шрифта можно менять в настройках текста на панели
Properties.
5. Дополним код, чтобы показывалось также текущее время:
CODE
import flash.utils.Timer;
import flash.events.TimerEvent;
var primer6:Timer=new Timer(100);//создаем экземпляр класса Timer
primer6.start();//запускаем Timer
primer6.addEventListener(TimerEvent.TIMER, tymerF);
function tymerF(event:TimerEvent):void {
var time:Date = new Date();//создаем экземпляр класса Date, чтобы можно
было пользоваться методами класса
var day:Number=time.getDate();//переменной day присваиваем значение
текущего дня
var month:Number=time.getMonth() +1;//переменной month присваиваем
значение текущего месяца
var year:Number=time.getFullYear();//переменной year присваиваем значение
текущего года
var hour:Number=time.getHours();//переменной hour присваиваем значение
текущего часа
var minute:Number=time.getMinutes();//переменной minute присваиваем
значение текущей минуты
var second:Number=time.getSeconds();//переменной second присваиваем
значение текущей секунды
date_txt.text=day+"."+month+"."+year;//в текстовое поле вывести
день.месяц.год
time_txt.text=hour+":"+minute+":"+second;//в текстовое поле вывести
часы:минуты:секунды
}
Протестируй ролик:
primer_6.6.swf ( 78.42к ) Кол-во скачиваний: 18432
Пример 7: Простое определение столкновения
В уроке 5 мы разбирали метод hitTestPoint()
Этот метод находится в классе DisplayObject, в котором находятся все свойства
объектов.
Метод hitTestPoint()
- Вычисляет экранный объект, чтобы определить, перекрывает ли он точку,
заданную координатами x и y, или пересекает ее.
В том же классе DisplayObject имеется еще один метод – hitTestObject(). Он нам
сейчас и пригодится.
Метод hitTestObject()
Оценивает экранный объект, чтобы определить, перекрывает ли он экранный
объект obj или пересекается с ним.
Итак:
1. Создай 2 объекта.
2. Преобразуй каждый в MovieClip и дай им InstanceName – «mc1» и «mc2»
3. Создай слой Аction и в 1-м кадре напечатай:
CODE
var timer:Timer=new Timer(200);
timer.addEventListener(TimerEvent.TIMER, moveF);
function moveF(e:TimerEvent):void {
mc1.x+=10;
//проверка, не пересекаются ли объекты
if (mc1.hitTestObject(mc2)) {
timer.stop();
}
}
timer.start();
Надеюсь, в коде все понятно
Протестируй ролик
primer_6.7.swf ( 2.24к ) Кол-во скачиваний: 19506
Вот и все
Ты молодец!!
Домашнее задание:
Попробуй сделать так:
dz.swf ( 81.58к ) Кол-во скачиваний: 19476
ActionScript 3 с нуля. Урок 7. Класс Tween
Привет. Меня зовут Оксана. Я решила написать серию уроков по ActionScript 3 для
самых самых новичков (потому что я сама не так давно этим занимаюсь). У меня
стоит Flash CS4, русифицированный (к сожалению). Если нам с вами буду нужны
какие-то пункты меню, то буду писать их как на английском, так и на русском.
Объективную критику обожаю. А также если вдруг перевру в каких-то терминах, то
буду рада исправлениям
.
Надеюсь, ты уже ознакомился(лась) с
первым,
вторым,
третьим,
четвертым,
пятым
и шестым уроками
Тогда давай сразу переходить к обучению.
Чтобы посмотреть о классе Tween, можешь воспользоваться справкой
Класс Tween
Класс Tween – это очень удобное средство для создания анимации движения,
вращения, изменения размера и т.д. И все это без использования TimeLine.
Также класс Tween позволяет использовать множество методов замедления.
Для создания анимации Tween нужно:
1. Импортировать классы Tween и easing. Класс Tween нам нужен для создания
анимации Tween. А класс easing для использования в этой анимации методов
сглаживания.
CODE
import fl.transitions.Tween;
import fl.transitions.easing.*;
2. Создать экземпляр класса Tween, который будет управлять анимацией
CODE
var TweenX:Tween = new Tween(obj:Object, prop:String, func:Function,
begin:Number, finish:Number, duration:Number, useSeconds:Boolean = false);
В данном случае я назвала экземпляр TweenX, но имя может быть и другим
Параметры:
• obj:Object — Объект, который будет анимироваться.
• prop:String — параметр, который будет изменяться во время анимации.
Записывается так: «x», «alpha» и т.д.;
• func:Function — Имя используемой функции замедления.
• begin:Number — Начальное значение изменяемого параметра prop
• finish:Number — Число, указывающее конечное значение изменяемого
параметра prop.
• duration:Number — Это продолжительность анимации, т.е. за сколько времени
параметр изменится от начального значения до конечного
• useSeconds:Boolean (default = false) — Флаг, определяющий использование
секунд вместо кадров. Функция использует секунды, если значение флага — true,
или кадры относительно значения, определенного в параметре duration, если
значение флага — false.
А теперь давай это все оформим в конкретный пример:
Пример 1: Создание простой анимации используя класс Tween
1. Размер сцены у меня 400*200
2. На сцене создай любой объект. У меня это будет надпись.
3. Преобразуй его в символ Movie Clip (F8)
4. Дай объекту имя экземпляра Instance Name -> «mc»
5. Создай слой «action» и в первом кадре слоя напечатай:
CODE
import fl.transitions.Tween;
import fl.transitions.easing.*;
var TweenX:Tween = new Tween(mc, "x", None.easeNone, 100, 300, 3, true);
Протестируй ролик
primer_7.1a.swf ( 3.46к ) Кол-во скачиваний: 19173
Можно еще в конце добавить такую строчку:
CODE
TweenX.looping = true;
Тогда анимация будет зацикленная
Что за анимация получилась:
var TweenX:Tween = new Tween(mc, "x", None.easeNone, 50, 250, 3, true);
mc – наш символ, для которого мы создаем анимацию
«х» - анимация – движение по оси х
None.easeNone – метод сглаживания нет.
50 – начальная координа положения объекта по оси x
250 – конечная координата положения объекта после анимации
3 – анимация длится 3 секунды
true – предыдущий параметр измеряется в секундах, а не в кадрах. Тоесть если
поменять «true» на «false», то анимация будет 3 кадра.
Тот же код, но немного модифицированный:
CODE
import fl.transitions.Tween;
import fl.transitions.easing.*;
var begin:Number = 100;
var finish:Number = 300;
var duration:Number = 3;
var TweenX:Tween = new Tween(mc, "x", None.easeNone, begin, finish,
duration, true);
TweenX.looping = true;
Теперь посмотрим, какие могут быть функции замедления. Ты можешь просто
менять параметр None.easeNone на какой-то другой.
Функции замедления:
В справке эта информация находится здесь
Существует несколько классов плавности:
Back - Движение будет выходить за заданные позиции и возвращаться к ним
Bounce - Анимация будет отскакивать от заданного положения один или несколько
раз
Elastic - Эластичное движение. Похоже на смесь Back+Bounce
Regular - Постепенное увеличение или уменьшение скорости анимации
Strong - Похож на Regular , но создает впечатление массивности объекта при
анимации.
None - Нет никакого эффекта, анимация постоянная и линейная
Каждый из классов имеет еще 3 набора методов (Кроме класса None. К нему
добавляется четвертый: easeNone):
easeIn- Эффект добавляется только в начале движения
easeOut- Эффект добавляется только в конце анимации
easeInOut- Эффект добавляется и в начале, и в конце анимации
К примеру я сейчас в предыдущий код вместо None.easeNone, подставляю
Elastic.easeInOut:
CODE
import fl.transitions.Tween;
import fl.transitions.easing.*;
var begin:Number = 100;
var finish:Number = 300;
var duration:Number = 3;
var TweenX:Tween = new Tween(mc, "x", Elastic.easeInOut, begin, finish,
duration, true);
TweenX.looping = true;
primer_7.1b.swf ( 3.65к ) Кол-во скачиваний: 18975
А это я сделала, чтобы тебе удобнее было сравнить отличие различных функций
сглаживания:
primer_7.1c.swf ( 19.25к ) Кол-во скачиваний: 19756
Методы Tween
• Tween.continueTo (finish, duration) - Предписывает анимации движения
продолжить анимацию с текущего положения до новой точки окончания и
длительности анимации движения.
finish:Number — Число, указывающее конечное значение свойства целевого
объекта, подвергаемого анимации движения.
duration:Number — Число, показывающее продолжительность или количество
кадров для движения в анимации движения.
• Tween.fforward () - Переводит точку воспроизведения анимации движения в
самый конец.
• Tween.nextFrame () - Переводит точку воспроизведения анимации движения к
следующему кадру остановленной анимации.
• Tween.preFrame () - Воспроизводит предыдущий кадр анимации движения от
текущей точки остановки в анимации.
• Tween.resume () - Возобновляет воспроизведение приостановленной анимации
движения.
• Tween.rewind () - Возвращает точку воспроизведения анимации движения в
начало.
• Tween.start () - Начинает воспроизведение анимации движения с начальной
точки.
• Tween.stop () - Останавливает воспроизведение анимации движения в текущем
положении.
• Tween.yoyo () - Предписывает анимации движения начать воспроизведение в
обратном направлении с приращениями, равными значению свойства tweened.
Пример 2: Кнопка, запускающая
анимацию:
1. Размер сцены у меня 300*200
2. На сцене создай объект, который будет анимироваться
3. Преобразуй его в символ Movie Clip (F8)
4. Дай объекту имя экземпляра Instance Name -> «mc»
5. Создай новый слой для кнопки.
6. Дай окнопке имя экземпляра Instance Name -> «btn»
7. Создай слой «action» и в первом кадре слоя напечатай:
CODE
import fl.transitions.*;
import fl.transitions.easing.*;
var begin:Number=50;
var finish:Number=250;
var duration:Number=3;
var TweenX:Tween=new
Tween(mc,"x",Bounce.easeOut,begin,finish,duration,true);
TweenX.stop();
btn.addEventListener(MouseEvent.CLICK, clickF);
function clickF(e:MouseEvent) {
TweenX.start();
}
Протестируй ролик
primer_7.2a.swf ( 3.7к ) Кол-во скачиваний: 19156
Пример: Пример использования Tween.continueTo ()
Ты можешь оставить тот же проект, что и в предыдущем примере.
Поменяй только код:
CODE
import fl.transitions.*;
import fl.transitions.easing.*;
var begin:Number=50;
var finish:Number=250;
var duration:Number=3;
var TweenX:Tween=new
Tween(mc,"x",Bounce.easeOut,begin,finish,duration,true);
btn.addEventListener(MouseEvent.CLICK, clickF);
function clickF(e:MouseEvent) {
TweenX.continueTo(150,3);
}
Теперь кнопка продолжает анимацию до координаты x = 150 за 3 секунды
Протестируй ролик
primer_7.2b.swf ( 3.7к ) Кол-во скачиваний: 19166
И еще один примерчик:
Пример: Пример использования Tween.yoyo ()
Ты можешь оставить тот же проект, что и в предыдущем примере.
Поменяй только код:
CODE
import fl.transitions.*;
import fl.transitions.easing.*;
var begin:Number=50;
var finish:Number=250;
var duration:Number=3;
var TweenX:Tween=new
Tween(mc,"x",Bounce.easeOut,begin,finish,duration,true);
btn.addEventListener(MouseEvent.CLICK, clickF);
function clickF(e:MouseEvent) {
TweenX.yoyo();
}
Теперь после нажатии на кнопку, анимация будет двигаться вначале в одну
сторону. А после слудующего нажатия в другую
primer_7.2c.swf ( 3.7к ) Кол-во скачиваний: 19045
События Tween
TweenEvent.MOTION_CHANGE - Указывает, что объект Tween изменился, и в
результате обновился экран.
TweenEvent.MOTION_FINISH - Указывает, что объект Tween достигнул конца и
завершил работу.
TweenEvent.MOTION_LOOP - Указывает, что объект Tween перезапустил
воспроизведение с начала в режиме повтора.
TweenEvent.MOTION_RESUME - Указывает, что объект Tween возобновил
воспроизведение после паузы.
TweenEvent.MOTION_START - Указывает, что началось воспроизведение
движения.
TweenEvent.MOTION_STOP - Указывает, что объект Tween был остановлен
вследствие явного вызова функции Tween.stop().
Пример3: Зацикленная анимация с использованием события
MOTION_FINISH и метода yoyo();
1. Размер сцены у меня 300*200
2. На сцене создай любой объект. У меня это будет надпись.
3. Преобразуй его в символ Movie Clip (F8)
4. Дай объекту имя экземпляра Instance Name -> «mc»
5. Создай слой «action» и в первом кадре слоя напечатай:
CODE
import fl.transitions.*;
import fl.transitions.easing.*;
var begin:Number=50;
var finish:Number=250;
var duration:Number=3;
var TweenX:Tween=new
Tween(mc,"x",Regular.easeInOut,begin,finish,duration,true);
TweenX.addEventListener(TweenEvent.MOTION_FINISH, yoyoF);//тоесть анимация
будет возвращаться в обратную сторону, когда объект достигнет конца
function yoyoF(e:TweenEvent):void {
TweenX.yoyo();
}
Протестируй ролик
primer_7.3.swf ( 3.11к ) Кол-во скачиваний: 18948
Свойства объектов, к которым можно применять анимацию
Tween.
• “x”
• “y”
• “height”
• “width”
• “scaleX” – значение 1=ширине объекта. 2=ширина*2
• “scaleY” - значение 1=высоте объекта. 2=высота*2
• “alpha” – можно менять от 1 до 0
• “rotation”
Пример 4: Применение класса Tween к свойствам объекта
1. Размер сцены у меня 300*200
2. На сцене создай прямоугольник.
3. Преобразуй его в символ Movie Clip (F8)
4. Дай объекту имя экземпляра Instance Name -> «mc»
5. Создай слой «action» и в первом кадре слоя напечатай:
CODE
import fl.transitions.Tween;
import fl.transitions.easing.*;
//объект сдвинется по оси х от координаты 50 до координаты 250
var tweenX:Tween = new Tween(mc, "x", Regular.easeOut, 50, 250, 3, true);
//объект сдвинется по оси y от координаты 50 до координаты 150
var tweenY:Tween = new Tween(mc, "y", Regular.easeOut, 50, 150, 3, true);
//объект повернется на 360 градусов
var tweenRotation:Tween = new Tween(mc, "rotation", Regular.easeOut, 0,
360, 3, true);
//объект из прозрачного превратится в полностью непрозрачный
var tweenAlpha:Tween = new Tween(mc, "alpha", Regular.easeOut, 0, 1, 3,
true);
//к ширине прибавится 50 пикселей
var tweenWidth:Tween = new Tween(mc, "width", Regular.easeOut, mc.width,
mc.width + 50, 3, true);
//к высоте прибавится 50 пикселей
var tweenHeight:Tween = new Tween(mc, "height", Regular.easeOut,
mc.height, mc.height + 50, 3, true);
Протестируй ролик
primer_7.4.swf ( 2.94к ) Кол-во скачиваний: 19647
Последовательное изменение свойств в анимации Tween:
Просто поменяй код из предыдущего примера на:
CODE
import fl.transitions.Tween;
import fl.transitions.easing.*;
import fl.transitions.TweenEvent;
var TweenX:Tween=new Tween(mc,"x",Regular.easeOut,50,200,3,true);
var TweenY:Tween=new Tween(mc,"y",Regular.easeOut,50,100,3,true);
TweenX.addEventListener(TweenEvent.MOTION_FINISH, rotationF);
function rotationF(e:TweenEvent):void {
var TweenRotation:Tween=new
Tween(mc,"rotation",Regular.easeOut,0,360,3,true);
TweenRotation.addEventListener(TweenEvent.MOTION_FINISH, alphaF);
}
function alphaF(e:TweenEvent):void {
var TweenAlpha:Tween=new Tween(mc,"alpha",Regular.easeOut,1,0,3,true);
}
primer_7.5.swf ( 3.57к ) Кол-во скачиваний: 19382
Последний большой пример:
Пример 6: Меню с выпадающими картинками
primer_7.6.swf ( 137.63к ) Кол-во скачиваний: 19638
1. Размер сцены 550*400
2. Назови слой «button» и создай 3 кнопки. Каждой кнопке свое имя: «btn1»,
«btn2», «btn3»
2. Создай новый слой «Image» и расположи его под слоем с кнопками.
На слое будет находиться 3 картинки, которые потом будут выезжать.
Я заранее уменьшила их в фотошопе и сделала размером 500*400
Каждую картинку преобразуй в MovieClip и дай им InstanceName – «mc1», «mc2» и
«mc3»
Расположи их одна над другой слева от сцены:
(На примере панель с кнопками скрыта. Голубыми линиями показана сцена)
3. Создай слой «action» и в первом кадре напечатай:
CODE
import fl.transitions.Tween;
import fl.transitions.easing.*;
btn1.rotation=0;
btn2.rotation=0;
btn3.rotation=0;
btn1.addEventListener(MouseEvent.CLICK, imagel);
function imagel(mevt:MouseEvent):void {
if (btn1.rotation==0) {
btn1.rotation=180;
var Tween1:Tween=new Tween(mc1,"x",Back.easeOut,-300,300,10);
} else {
btn1.rotation=0;
Tween1=new Tween(mc1,"x",Back.easeIn,300,-300,10);
}
}
btn2.addEventListener(MouseEvent.CLICK, image2);
function image2(mevt:MouseEvent):void {
if (btn2.rotation==0) {
btn2.rotation=180;
var Tween2:Tween=new Tween(mc2,"x",Back.easeOut,-300,300,10);
} else {
btn2.rotation=0;
Tween2=new Tween(mc2,"x",Back.easeIn,300,-300,10);
}
}
btn3.addEventListener(MouseEvent.CLICK, image3);
function image3(mevt:MouseEvent):void {
if (btn3.rotation==0) {
btn3.rotation=180;
var Tween3:Tween=new Tween(mc3,"x",Back.easeOut,-300,300,10);
} else {
btn3.rotation=0;
Tween3=new Tween(mc3,"x",Back.easeIn,300,-300,10);
}
}
По коду проде все понятно?
Протестируй ролик
Вот и все
Ты молодец!!
Домашнее задание:
Попробуй сделать так:
dz7.swf ( 85.99к ) Кол-во скачиваний: 19721
ActionScript 3 с нуля. Урок 8. Класс Array
Привет
Я продолжаю писать серию уроков
Ссылки на предыдущие уроки:
Урок 1. События мыши
Урок 2. Кнопка Play и Stop
Урок 3. Методы goto
Урок 4. Условия if, switch. Событие клавиатуры
Урок5. Свойства. ЕnterFrame.
Урок 6. Класс TIMER
Урок 7. Класс Tween
Информацию о массивах будем узнавать здесь
Что такое массив – Array?
Массив – это упорядоченная структура данных, которая может содержать
различные значения. Массив состоит из элементов. Число элементов
неограниченно
Например:
CODE
Имя массива: Кастрюля
Элементы массива: [«Картофель», «Мясо», «Морковь», «Лук»]
Каждый элемент массива имеет свой индекс. Первый элемент массива имеет индекс
0
CODE
Месяц[0] = "Январь"
Месяц [1] = "Февраль"
Месяц [2] = "Март"
Месяц [3] = "Апрель"
Месяц [4] = "Май"
Месяц [5] = "Июнь"
Месяц [6] = "Июль"
Месяц [7] = "Август"
Месяц [8] = "Сентябрь"
Месяц [9] = "Октябрь"
Месяц [10] = "Ноябрь"
Месяц [11] = "Декабрь"
Также массив может содержать элементы разных типов данных:
[«Картофель», 10, mc1, btn1]
Использование массивов позволяет в некоторых случаях упростить код и поднять
производительность.
Создание массива
Создадим пустой массив и заполним его элементами:
CODE
var createArray:Array = new Array();
var createArray:Array – это мы создаем перемную createArray, в которой и будет
храниться весь наш массив (имя переменной конечно может быть другим)
new Array(); - пустой массив
Заполняем массив элементами:
CODE
createArray [0] = "П"
createArray [1] = "Р"
createArray [2] = "И"
createArray [3] = "В"
createArray [4] = "Е"
createArray [5] = "Т"
Теперь давай попробуем проверить это на примере:
Пример 1: Создание массива
1. Размер сцены 300*200
2. На сцене создай 6 динамических текстовых полей. Проверь, чтобы цвет букв
отличался от цвета фона.
3. Каждому текстовому полю дай Instance Name – Имя экземпляра: «text1_txt»,
«text2_txt», «text3_txt», «text4_txt», «text5_txt», «text6_txt»
4. Создай слой «Action» и в первом кадре слоя напечатай:
CODE
var createArray:Array = new Array();
createArray[0]="П";
createArray[1]="Р";
createArray[2]="И";
createArray[3]="В";
createArray[4]="Е";
createArray[5]="Т";
text1_txt.text=createArray[0]; //в поле text1_txt будет отображаться
элемент 1
text2_txt.text=createArray[1];
text3_txt.text=createArray[2];
text4_txt.text=createArray[3];
text5_txt.text=createArray[4];
text6_txt.text=createArray[5];
Протестируй ролик. Не удаляй пока, он нам еще пригодится
primer8.1.swf ( 4.17к ) Кол-во скачиваний: 12039
Теперь немного изменим этот код, чтобы ты познакомился (лась) со вторым
способом создания массивов:
CODE
var createArray:Array = new Array("П","Р","И","В","Е","Т");
text1_txt.text=createArray[0];
text2_txt.text=createArray[1];
text3_txt.text=createArray[2];
text4_txt.text=createArray[3];
text5_txt.text=createArray[4];
text6_txt.text=createArray[5];
Очень легко, не правда ли?
Пример 2: Сегодняшняя дата
В уроке 6 мы уже делали флешку, в которой выводилась текущая дата. Но дата
выводилась в формате: 9.07.2010. Сейчас мы сделаем так, чтобы месяц писался
словом. Т.е. 9 июля 2010
1. Размер сцены 300*200
2. На сцене создай 1 динамичное текстовое поле. Проверь, чтобы цвет букв
отличался от цвета фона.
3. Полю дай Instance Name – Имя экземпляра: date_txt
4. Создай слой «Action» и в первом кадре слоя напечатай:
CODE
import flash.utils.Timer;
import flash.events.TimerEvent;
var myTimer:Timer=new Timer(100);
var month:Array = new Array ();
month[0]="Января";
month[1]="Февраля";
month[2]="Марта";
month[3]="Апреля";
month[4]="Мая";
month[5]="Июня";
month[6]="Июля";
month[7]="Августа";
month[8]="Сентября";
month[9]="Октября";
month[10]="Ноября";
month[11]="Декабря";
myTimer.start();
myTimer.addEventListener(TimerEvent.TIMER, tymerF);
function tymerF(event:TimerEvent):void {
var time:Date = new Date();
var day:Number=time.getDate();
var month:String=month[time.getMonth()];//номер месяца будет
соответствовать элементу массива
var year:Number=time.getFullYear();
date_txt.text=day+" "+month+" "+year;
}
primer_8.2.swf ( 78.39к ) Кол-во скачиваний: 11700
Свойство length;
Неотрицательное целое число, которым задается количество элементов в массиве.
Это свойство автоматически обновляется, когда в массив добавляются новые
элементы.
Пример 3: Количество элементов массива
Добавь в пример 1 еще одно динамическое текстовое поле
Дай ему Instance Name – «lenght_txt»
В первом кадре слоя Action:
CODE
var createArray:Array = new Array("П","Р","И","В","Е","Т");
text1_txt.text=createArray[0];
text2_txt.text=createArray[1];
text3_txt.text=createArray[2];
text4_txt.text=createArray[3];
text5_txt.text=createArray[4];
text6_txt.text=createArray[5];
lenght_txt.text = String(createArray.length);
primer8.3.swf ( 8.31к ) Кол-во скачиваний: 11533
Т.е. добавилась только одна строчка lenght_txt.text = String(createArray.length);
createArray.length – получаем число элементов массива
String(createArray.length) – переводим это число в строковое
Методы класса Array
Чтобы нам было удобно смотреть некоторые методы класса Array, давай сделаем
такую заготовку:
1. Размер сцены 300*200
2. На сцене создай 1 динамичное текстовое поле. Проверь, чтобы цвет букв
отличался от цвета фона.
3. Полю дай Instance Name – Имя экземпляра: array_txt
4. Создай слой Action и давай переходить к рассмотрению методов
concat()
Позволяет объединить два массива в один
CODE
var helloArray:Array=new Array("Как дела?");
var nameArray:Array=new Array("Аня");
array_txt.text=String(nameArray.concat(helloArray));
primer8.4a.swf ( 3.7к ) Кол-во скачиваний: 11499
indexOf()
Ищет элемент в массиве и возвращает позицию элемента в индексе.
CODE
var createArray:Array = new Array("П","Р","И","В","Е","Т");
array_txt.text = String(createArray.indexOf ("Е"));
primer8.4b.swf ( 3.77к ) Кол-во скачиваний: 11447
join()
Преобразует элементы массива в строки, вставляет указанный разделитель между
элементами, сцепляет их и возвращает получившуюся строку.
CODE
var createArray:Array = new Array("П","Р","И","В","Е","Т");
array_txt.text = String(createArray.join ("\n"));//элементы с новой строки
primer8.4c.swf ( 3.83к ) Кол-во скачиваний: 11394
пришлось немного уменьшить размер букв, чтобы все поместилось
Элементы массива без запятых
CODE
var createArray:Array = new Array("П","Р","И","В","Е","Т");
array_txt.text = String(createArray.join (""));
primer8.4d.swf ( 3.69к ) Кол-во скачиваний: 11376
pop()
Удаляет последний элемент из массива
CODE
var createArray:Array=new Array("П","Р","И","В","Е","Т");
createArray.pop();
array_txt.text=String(createArray);
primer8.4e.swf ( 3.69к ) Кол-во скачиваний: 11327
push()
Добавляет один или несколько элементов в конец массива
CODE
var createArray:Array = new Array("П","Р","И","В","Е","Т");
createArray.push ("!");
array_txt.text = String(createArray);
primer8.4f.swf ( 3.69к ) Кол-во скачиваний: 12221
reverse()
Преобразует массив в обратный массив.
CODE
var createArray:Array = new Array("П","Р","И","В","Е","Т");
array_txt.text = String(createArray.reverse());
primer8.4g.swf ( 3.69к ) Кол-во скачиваний: 11572
shift()
Удаляет первый элемент из массива
CODE
var createArray:Array=new Array("П","Р","И","В","Е","Т");
createArray.shift();
array_txt.text=String(createArray);
primer8.4h.swf ( 3.75к ) Кол-во скачиваний: 12130
slice(startIndex, endIndex)
Возвращает новый массив, состоящий из диапазона элементов исходного массива,
не модифицируя исходный массив.
CODE
var createArray:Array=new Array("П","Р","И","В","Е","Т");
array_txt.text=String(createArray.slice(2,5));
primer8.4i.swf ( 3.68к ) Кол-во скачиваний: 11369
sort()
Сортирует элементы в массиве значения Юникода.
CASEINSENSITIVE - Задает сортировку без учета регистра
DESCENDING - Задает сортировку по убыванию
NUMERIC - Задает числовую сортировку (вместо сортировки по символьной
строке)
RETURNINDEXEDARRAY - Задает сортировку, которая возвращает массив,
состоящий из индексов массивов.
UNIQUESORT - Задает уникальное требование сортировки
CODE
var createArray:Array = new Array("П","Р","И","В","Е","Т");
array_txt.text = String(createArray.sort (Array.DESCENDING));//по убыванию
primer8.4j.swf ( 3.7к ) Кол-во скачиваний: 11493
toString()
Возвращает строку, представляющую элементы в заданном массиве.
CODE
var createArray:Array = new Array("П","Р","И","В","Е","Т");
array_txt.text = createArray.toString ();//убрали String перед массивом
primer8.4k.swf ( 3.9к ) Кол-во скачиваний: 11414
unshift()
Добавляет один или несколько элементов в начало массива
CODE
var createArray:Array = new Array("П","Р","И","В","Е","Т");
createArray.unshift("АНЯ ");
array_txt.text = String(createArray);
primer8.4l.swf ( 3.7к ) Кол-во скачиваний: 11605
Извлечение из массива рандомного элемента
Пример 5: Объект, изменяющий прозрачность
1. Размер сцены 300*200
2. На сцене создай 1 объект.
3. Instance Name – Имя экземпляра: «mc»
4. Создай слой «Action» и в первом кадре слоя напечатай:
CODE
var ArrayMy:Array = new Array (0.1,0.3,0.5,0.7,0.9);
addEventListener(Event.ENTER_FRAME, alphaF);
function alphaF (e:Event):void {
mc.alpha = ArrayMy[Math.floor(Math.random()*ArrayMy.length)];
}
primer8.5.swf ( 1.36к ) Кол-во скачиваний: 11780
Вот и все
Ты молодец!!
ActionScript 3 с нуля. Урок 9. Рисование в
ActionScript 3. Циклы
Привет
Ссылки на предыдущие уроки:
Урок 1. События мыши
Урок 2. Кнопка Play и Stop
Урок 3. Методы goto
Урок 4. Условия if, switch. Событие клавиатуры
Урок5. Свойства. ЕnterFrame
Урок 6. Класс TIMER
Урок 7. Класс Tween
Урок 8. Массивы
Сегодняшний урок будет о рисовании в программе, использую ActionScript. Хотя
таких уроков полно по всему интернету, мы все же рассмотрим эту тему, так как
эти знания пригодятся в будущих уроках
Класс Graphics
Очень много полезной, интересной информации с примерами можно будет найти
в справке .
Нет смысла переписывать сюда всю справку, поэтому рассмотрены будут только те
методы, которые нам сегодня пригодятся.
Итак, для чего нам вообще нужна возможность рисования графики с помощью
кода?
Самое главное достоинство - это сокращение объема файла, так как графика не
хранится в swf, а загружается по мере выполнения приложения
Класс Graphics содержит методы для рисования векторной графики:
прямоугольников, линий, окружностей и тд. Также с помощью этого класса можно
изменять параметры заливки и обводки.
Пример 1: Создание линии
1. Размер сцены 300*200
2. В первом кадре напечатай такой код:
CODE
var line:Shape = new Shape();
line.graphics.lineStyle(2, 0x0000FF);
line.graphics.lineTo (300,200);
addChild(line);
3. Протестируй ролик
Теперь давай разбираться с тем, что у нас тут напечатано.
1. Прежде, чем начинать рисовать линию, нужно создать экземпляр класса
MovieClip, Shape или Sprite, к которому мы потом и будет добавлять разные
методы: толщина обводки, цвет, расположение линии и тд.
Какой класс лучше выбрать для создания экземпляра?
• Класс Shape - используется для создания легковесных (в отличии от Sprite или
MovieClip) графических элементов с помощью ActionScript. Но взаимодействие с
мышью или клавиатурой для экземпляров этого класса задать не получится.
• Класс Sprite – также используется для создания графики, используя ActionScript.
Не имеет связи с кадрами на Timeline
• Класс MovieClip - класс является наследником класса Sprite и имеет все свойства
и методы, которыми обладает класс Sprite. Поддерживает возможность работы с
временной шкалой
В примере мы создали экземпляр класса Shape, которому дали имя “line”:
CODE
var line:Shape = new Shape();
2. Все методы класса Graphics вызываются через объект graphics.
В данном примере были использованы 2 метода:
Метод lineStyle()
– определяет внешний вид обводки.
Имеет несколько параметров:
thickness — Целое число, определяющее толщину линии в пикселах; допустимыми
являются значения от 0 до 255. Если число не указано или параметр не определен,
то линия не будет проведена. При значении толщины, равной нулю, будет
нарисована волосяная линия (самая тонкая видимая линия).
color — Шестнадцатеричное значение цвета линии;
красный — 0xFF0000,
синий — 0x0000FF и т.д.
Если значение на задано, по умолчанию используется 0x000000 (черный).
alpha — число, задающие непрозрачность линии. Допустимые значения находятся
в диапазоне 0-1. Если значение на задано, по умолчанию используется
1(непрозрачная линия).
Об остальных параметрах можно посмотреть в справке. Там приведены также очень
подробные примеры.
Параметры выставляются через запятую.
В нашем примере была создана синяя линия с толщиной 2 пиксела
CODE
line.graphics.lineStyle(2, 0x0000FF);
Метод lineTo()
- создает линию их текущего положения точки до указанных в скобках координат.
Начальное положение точки, из которого ведется линия – левый верхний угол
сцены (0,0)
В нашем примере из левого верхнего угла выходит линия в точку с координатами
(300,200)
CODE
line.graphics.lineTo (300,200);
3. Добавляем только что созданную линию в список отображения с помощью
метода addChild():
CODE
addChild(line);
Метод moveTo ()
Перемещает текущее положение указателя в точку с координатами (x, y)
Пример 2:
Немного измени свой код из предыдущего примера и посмотри, что получится:
CODE
var line:Shape = new Shape();
line.graphics.lineStyle(2, 0x0000FF);
line.graphics.lineTo (300,200);
line.graphics.moveTo(300,0);
line.graphics.lineTo (0,200);
addChild(line);
Линиями также можно создавать замкнутые формы:
CODE
var triangle:Sprite = new Sprite();
triangle.graphics.lineStyle(5, 0x000000);
triangle.graphics.beginFill(0x336699); //о заливке читай дальше
triangle.graphics.moveTo(100,50);
triangle.graphics.lineTo (200,50);
triangle.graphics.lineTo (150,150);
triangle.graphics.lineTo (100,50);
addChild(triangle);
Пример 3: Создание простой рисовалки
В первом кадре слоя набери такой код:
CODE
/*
создаем переменную с типом Boolean, которая может иметь
2 значения – false (ложь) и true(правда). Когда переменная
будет равна true – кисть рисует, когда false – кисть не рисует
*/
var drawing:Boolean=false;
//Создаем таймер, который будет обновлять экран для создания линии
var timer:Timer=new Timer(50);
timer.start();
//определяем стиль линии. Толщина = 3 пиксела. Цвет = черный
graphics.lineStyle(3, 0x000000);
//Начальная точка, с которой будет рисоваться линия, равна позиции курсора
graphics.moveTo(mouseX, mouseY);
timer.addEventListener(TimerEvent.TIMER, timerF);
//слушатель нажатея кнопки мыши
stage.addEventListener(MouseEvent.MOUSE_DOWN, downF);
//слушатель отпускания кнопки мыши
stage.addEventListener(MouseEvent.MOUSE_UP, upF);
//после нажатия мыши drawing переключается в режим рисования
function downF(e:MouseEvent):void {
drawing=true;
}
//после отпускания мыши drawing переключается в режим не рисования
function upF(e:MouseEvent):void {
drawing=false;
}
//функция, которая проверяет, в каком режиме идет работа
function timerF(e:TimerEvent):void {
/*
если drawing=true, то создавать линию до той точки, где находится курсор
так как экран обновляется благодаря таймеру, линия создается за курсором,
пока его не отпустить
*/
if (drawing) {
graphics.lineTo(mouseX, mouseY);
} else {
/*
если drawing=false, то линия не создается, а просто происходит
перемещение
точки создания линии вслед за курсором
*/
graphics.moveTo(mouseX, mouseY);
}
}
Primer3.swf ( 3.27к ) Кол-во скачиваний: 14564
Метод drawCircle()
-позволяет создать круг по нескольким параметрам
Параметры
x— расположение центра круга по оси х
y — расположение центра круга по оси у
radius— Радиус окружности (в пикселах).
Пример:
CODE
var shape:Sprite = new Sprite();
shape.graphics.lineStyle(4, 0x000000, 1);
shape.graphics.beginFill(0x00FFFF, .5);
shape.graphics.drawCircle(150, 100, 70);
addChild(shape);
Заливка в данном примере назначается с помощью метода beginFill()
Метод beginFill()
Задает простую одноцветную заливку, которая будет использоваться при
последующих вызовах других методов Graphics, пока цвет будет не изменен
Параметры
color — Цвет заливки (0xRRGGBB).
alpha — Альфа-прозрачность заливки. 1 – заливка непрозрачная. 0 – полностью
прозрачная
Метод drawEllipse()
Рисует эллипс. Прежде чем вызывать метод drawEllipse(), необходимо задать стиль
линии, заливку или и то, и другое.
Параметры:
CODE
drawEllipse(х, у, ширина эллипса, высота)
Пример:
CODE
var shape:Sprite = new Sprite();
shape.graphics.lineStyle(4, 0x000000, 1);
shape.graphics.beginFill(0x000000, .5);
shape.graphics.drawEllipse(75, 50, 150,100);
addChild(shape);
Метод drawRect()
Рисует прямоугольник. Прежде чем вызывать метод drawRect(), необходимо задать
стиль линии, заливку или и то, и другое.
Параметры
CODE
drawRect(х, у, ширина прямоугольника, высота прямоугольника)
Метод drawRoundRect()
Рисует прямоугольник со скругленными углами.
Параметры
CODE
drawRoundRect(х, у, ширина прямоугольника, высота, ширина эллипса для
скругления, высота эллипса для скругления)
Пример:
CODE
var shape:Sprite = new Sprite();
shape.graphics.beginFill(0xFF0000, 1);
shape.graphics.drawRoundRect(50, 50, 200,100, 30, 30);
addChild(shape);
Пример 4: Перетащи окружность и она вернется обратно
1. Размер сцены 300*200
2. Начнем с создания окружности и места, в которое она постоянно будет
возвращаться. В первом кадре напечатай такой код:
CODE
//место, куда будет возвращаться окружность
var place:Sprite = new Sprite();
place.graphics.lineStyle(1,0);
place.graphics.beginFill(0xFFFFFF);
place.graphics.drawCircle(100,100,50);
addChild(place);
//окружность
var circle:Sprite = new Sprite();
circle.graphics.lineStyle(1,0);
circle.graphics.beginFill(0xFF9900);
circle.graphics.drawCircle(100,100,50);
circle.graphics.endFill();
addChild(circle);
3. Далее нужно добавить возможность перетаскивать окружность по сцене. За это
отвечает метод startDrag(). Ниже всего кода добавь:
CODE
circle.addEventListener(MouseEvent.MOUSE_DOWN, dragF);
function dragF(e:MouseEvent):void {
circle.startDrag();
}
4. И последнее, это добавим функцию возвращения кружка на место.
Метод stopDrag() здесь нужен, чтобы после отпускания мыши шарик не
перетаскивался за курсором
CODE
import fl.transitions.Tween;
import fl.transitions.easing.*;
var moveBackX:Tween;//возвращение по оси X
var moveBackY:Tween; // возвращение по оси Y
stage.addEventListener(MouseEvent.MOUSE_UP, backF);
function backF(e:MouseEvent):void {
circle.stopDrag();
moveBackX = new Tween(circle, "x", Strong.easeOut, circle.x, place.x, 0.5,
true);
moveBackY = new Tween(circle, "y", Strong.easeOut, circle.y, place.y, 0.5,
true);
}
5. Весь код полностью:
CODE
import fl.transitions.Tween;
import fl.transitions.easing.*;
var moveBackX:Tween;// возвращение по оси X
var moveBackY:Tween; // возвращение по оси Y
//место, куда будет возвращаться окружность
var place:Sprite = new Sprite();
place.graphics.lineStyle(1,0);
place.graphics.beginFill(0xFFFFFF);
place.graphics.drawCircle(100,100,50);
addChild(place);
//окружность
var circle:Sprite = new Sprite();
circle.graphics.lineStyle(1,0);
circle.graphics.beginFill(0xFF9900);
circle.graphics.drawCircle(100,100,50);
circle.graphics.endFill();
addChild(circle);
circle.addEventListener(MouseEvent.MOUSE_DOWN, dragF);
stage.addEventListener(MouseEvent.MOUSE_UP, backF);
function dragF(e:MouseEvent):void {
circle.startDrag();
}
function backF(e:MouseEvent):void {
circle.stopDrag();
moveBackX = new Tween(circle, "x", Strong.easeOut, circle.x, place.x, 0.5,
true);
moveBackY = new Tween(circle, "y", Strong.easeOut, circle.y, place.y, 0.5,
true);
}
6. Протестируй ролик
Primer4.swf ( 3.01к ) Кол-во скачиваний: 14851
Для следующего примера нам потребуется еще немного теории:
Метод random()
Метод относится к классу Math и возвращает случайное число от 0 до 1.
Пример:
• Создай на сцене динамичное текстовое поле.
• Instance name - имя экземпляра «number_txt»
• Создай новый слой «action»
• В первом кадре слоя напечатай:
CODE
number_txt.text = String(Math.random()); //число в диапазоне от 0 до 1
А теперь давай немного поэксперементируем с этим методом:
CODE
number_txt.text = String(Math.random()*10);//число в диапазоне от 0 до 10
CODE
number_txt.text = String(Math.random()*10 + 4);//число в диапазоне от 4 до
14
Циклы
Цикл for
Используется, когда какую-то операцию необходимо выполнить несколько раз
CODE
for (var i:Number =0; i<10; i++) {
выполнение операции
}
Сначала внутри цикла задается начальное значение, например 0:
CODE
var i:Number =0
Далее идет проверка, не превышено ли предельное число повторов
CODE
i<10
Увеличиваем число повторов на 1
CODE
i++
Тоесть операция, которая расположена в скобках, будет выполняться 10 раз
Пример:
CODE
for (var i:Number =0; i<10; i++) {
var circle:Sprite = new Sprite();
circle.graphics.beginFill(0xFF0000);
circle.graphics.drawCircle(5,5,10);
circle.x=Math.random()*stage.stageWidth;//любое положение на сцене по оси
х
circle.y=Math.random()*stage.stageHeight; //любое положение на сцене по
оси у
addChild(circle);
}
Цикл while
Этот текст будет выполняться до тех пор, пока будет выполняться некоторое
условие. Например, метод random() возвращает случайное число от 0 до 1. А мне
нужно число больше 0.5. Здесь как раз и подойдет цикл while:
CODE
var num:Number=0;
while (num< .5) {
num=Math.random();
}
Пример 5: Дергающиеся шарики
В первом кадре слоя набери такой код:
CODE
var sprites:Array = new Array();//массив, в который будут заноситься наши
шарики
var count:Number=100;//общее число шариков
// создаем 100 окружностей с разным диаметром
for (var i:Number = 0; i < count; i++) {
// создаем шарик
var circle:Sprite = new Sprite();
var radius:Number=Math.random()*6+4;
circle.graphics.beginFill(Math.random()*0xFFFFFF);
circle.graphics.drawCircle(5,5,radius);
// положение шариков на сцене в любой точке
circle.x=Math.random()*stage.stageWidth;
circle.y=Math.random()*stage.stageHeight;
addChild(circle);
// добавляем в массив созданные шарики
sprites.push(circle);
}
//движение окружностей
addEventListener(Event.ENTER_FRAME, enterF);
function enterF(e:Event):void {
for (var i:uint = 0; i < count; i++) {
sprites[i].x+=Math.random()*4-2;//движение по оси х в диапазоне от -2 до
2
sprites[i].y+=Math.random()*4-2;//движение по оси y в диапазоне от -2 до
2
}
}
Primer5.swf ( 1.42к ) Кол-во скачиваний: 14690
Теперь немного изменим код, чтобы функцию можно было вызывать в любой
момент:
CODE
var sprites:Array = new Array();//массив, в который будут заноситься наши
шарики
var count:Number=100;//общее число шариков
//создание шариков добавлено в функцию
function drawCircles():void {
// создаем 100 окружностей с разным диаметром
for (var i:Number = 0; i < count; i++) {
// создаем шарик
var circle:Sprite = new Sprite();
var radius:Number=Math.random()*6+4;
circle.graphics.beginFill(Math.random()*0xFFFFFF);
circle.graphics.drawCircle(5,5,radius);
// положение шариков на сцене в любой точке
circle.x=Math.random()*stage.stageWidth;
circle.y=Math.random()*stage.stageHeight;
addChild(circle);
// добавляем в массив созданные шарики
sprites.push(circle);
}
}
//анимация шариков добавлена в функцию
function animateSprites():void {
//движение окружностей
addEventListener(Event.ENTER_FRAME, enterF);
function enterF(e:Event):void {
for (var i:uint = 0; i < count; i++) {
sprites[i].x+=Math.random()*4-2;//движение по оси х в диапазоне от -2 до
2
sprites[i].y+=Math.random()*4-2;//движение по оси y в диапазоне от -2 до
2
}
}
}
//вызываем ф-ии создания и анимации шариков
drawCircles();
animateSprites();
И последнее. Объект, который создан первым, на сцене расположен ниже тех
объектов, которые расположены после него
Изменение порядка расположения объектов
Пример:
CODE
//создание треугольника
var triangle:Sprite = new Sprite();
triangle.graphics.lineStyle(5, 0x000000);
triangle.graphics.beginFill(0x336699);
triangle.graphics.moveTo(100,50);
triangle.graphics.lineTo(200,50);
triangle.graphics.lineTo(150,150);
triangle.graphics.lineTo(100,50);
addChild(triangle);
//создание скругленного прямоугольника
var rect:Sprite = new Sprite();
rect.graphics.lineStyle(5, 0x000000);
rect.graphics.beginFill(0x33CC66);
rect.graphics.drawRoundRect(150, 100, 75,75, 10, 10);
addChild(rect);
Метод addChildAt()
Добавляет экземпляр в список отображения объектов и позволяет задать порядок
расположения.
Параметры
CODE
addChildAt(добавляемый объект, позиция)
Давай изменим предыдущий пример:
CODE
//создание треугольника
var triangle:Sprite = new Sprite();
triangle.graphics.lineStyle(5, 0x000000);
triangle.graphics.beginFill(0x336699);
triangle.graphics.moveTo(100,50);
triangle.graphics.lineTo(200,50);
triangle.graphics.lineTo(150,150);
triangle.graphics.lineTo(100,50);
addChild(triangle);
//создание скругленного прямоугольника
var rect:Sprite = new Sprite();
rect.graphics.lineStyle(5, 0x000000);
rect.graphics.beginFill(0x33CC66);
rect.graphics.drawRoundRect(150, 100, 75,75, 10, 10);
addChildAt(rect, 0);
Вот и все
Ты молодец!!
Домашнее задание:
Появляющиеся прямоугольники разного цвета и размера
dz.swf ( 1.06к ) Кол-во скачиваний: 14849