Листопад отсчитывает мгновения. Урок 6. |
Это не художественное произведение, просто иллюстрация к уроку "Листопад отсчитывает мгновения..."
Друзья просили, я обещал ... не прошло ещё три года ...
1. Создайте документ AS3, размеры по Вашей задумке. В уроке =550/400, то есть по умолчанию. Листопад создадим по уроку с Демиарта. Вернее, буду использовать отредактированный скрипт от Redefy и МОНСТЕР (ещё МОНСТЕР)- найти там в комментариях.
2. В библиотеке создайте ролик "Листопад+секунды" через иконку внизу вкладки.
3. Создайте ролик "Лист1". Потом нажмите комбинацию клавиш Ctrl+R и импортируйте листик в формате ПНГ.
4. Откройте в программе FLA файл секундного таймера (рассказывал раньше как сохранить шаблон). Если нет готового, то создайте в отдельном ролике или в новом документе. (Урок тут). Найдёте также во вложении, но лучше самим научиться делать.
5. Скопируйте папку с секундным таймером: клик правой кнопкой и =Копировать=
6. Переходите на вкладку с работой и вставьте скопированное в библиотеку проекта: клик правой кнопкой на свободное место в библиотеке и =Вставить=
7. Секундный таймер перенесите в ролик "Лист1" на слой, созданный выше слоя с листиком. Можете войти в редакцию таймера (текстовое поле) и поменять шрифт (не забудьте внедрить новый шрифт), цвет, применить фильтры...
8. Инструментом "Свободное преобразование" подберите размер, удерживая клавишу Shift, наклон. Пользуйтесь стрелками на клавиатуре. Также во вкладке "Свойства" добавьте фильтр =Тень=, экспериментируйте с настройками. Пробуйте другие фильтры, а также стиль, наложение... Теперь ролик "Лист1" "гибридный" - будет показываться везде с секундным таймером на листике.
9. Дублируем два раза ролик "Лист1" - клик правой кнопкой, выбрать =Дублировать=, именуем, для порядка, новые ролики
10. Важный момент - Связывание! : в колонке "Связывание" напротив соответствующего символа делаем двойной клик левой кнопкой мыши и пишем, соответственно: list1, list2, list3.
11. Теперь "стучим" двойным кликом на символ "Листопад+сек" в библиотеке - символ открылся для редактирования. В единственном кадре на слое вводим скрипт (есть во вложении):
var arrList:Array = new Array();
var firstTime:int = 0;
for (var s:int = 0; s<2;s++) {
var l1:list1 = new list1();
var l2:list2 = new list2();
var l3:list3 = new list3();
arrList.push(l1,l2,l3);
}
function myBg(n):void {
for (var i:int=0; i<n; i++) {
arrList[i].step = step();
reStart(arrList[i], true);
arrList[i].xCounter = randomNumb(-20, 20);
arrList[i].addEventListener (Event.ENTER_FRAME,mover);
addChild (arrList[i]);
}
}
function mover(e:Event):void {
firstTime = 1;
e.target.y += e.target.speed;
e.target.xCounter += e.target.step;
if (e.target.xCounter > 20) {
e.target.step = -1;
e.target.xSpeed *= -1;
}
if (e.target.xCounter < -20) {
e.target.step = 1;
e.target.xSpeed *= -1;
}
if (e.target.xCounter<10 && e.target.xCounter>-10) e.target.x += e.target.xSpeed;
if ((e.target.xCounter<=-10 && e.target.xCounter>=-15) || (e.target.xCounter>=10 && e.target.xCounter<=15)) e.target.x += (e.target.xSpeed/2);
if (e.target.xCounter>15 || e.target.xCounter<-15) e.target.x += (e.target.xSpeed/3);
if (e.target.y>(stage.stageHeight+e.target.height)) reStart(e.target,true);
}
function reStart(clip, rotat):void {
clip.x = randomNumb(0, stage.stageWidth);
clip.y = -clip.height;
clip.speed = randomNumb(1, 3);
clip.xSpeed = clip.speed*2*clip.step;
clip.scaleX = clip.scaleY =randomNumb(0.3, 0.5);
if (rotat) clip.rotation = randomNumb(-0, 90);
if (!firstTime) clip.y = randomNumb(0, stage.stageHeight);
}
function step():Number {
var myStep:Number = Math.random();
(myStep>0.5) ? myStep = 1 : myStep = -1;
return myStep;
}
function randomNumb(min, max) {
return (Math.random()*(max-min)+min);
}
myBg(arrList.length);
Про редактирование кода не буду рассказывать детально, это отдельная тема.
12. Ролик "Листопад+сек" переносим на монтажный кадр, задаём =0= для X & Y. То есть экземпляр ролика (маленький кружочек) будет находиться в левом верхнем углу монтажного кадра.
Тестируем ролик.
13. Создадим ещё один ролик "Листопад" с тем же листиком (или другими, в каждой копии разными). Это делаем для того, чтобы приблизить листопад к реальному. Если в ролике "Листопад+сек" код не прописывает вращение листьев, а только угловое смещение в плоскости X/Y, то тут код заставит листья вращаться разнообразно. Ещё: междуслоями с падающими листьями поместим картинку (девушки) - листья будут падать и впереди, и позади. Последовательность создания ролика "Листопад" и содержащихся в нём роликов с листьями (Лист4, Лист5, Лист6 и имена для связывания list1, list2, list3) та же, что и для ролика "Листопад+сек"! Только скрипт будет немного иначе написаный (есть во вложении):
var arrList:Array = new Array();
var firstTime:int = 0;
for (var s:int = 0; s<3;s++) {
var l4:list4 = new list4();
var l5:list5 = new list5();
var l6:list6 = new list6();
arrList.push(l4,l5,l6);
}
function myBg(n):void {
for (var i:int=0; i<n; i++) {
arrList[i].step = step();
reStart(arrList[i], true);
arrList[i].xCounter = randomNumb(-20, 20);
arrList[i].addEventListener (Event.ENTER_FRAME,mover);
addChild (arrList[i]);
}
}
function mover(e:Event):void {
firstTime = 1;
e.target.angle+=e.target.angleSpeed;
e.target[e.target.axis]=Math.sin(e.target.angle/180*Math.PI);
e.target.y += e.target.speed;
e.target.xCounter += e.target.step;
e.target.rotation+=e.target.rotating;
if (e.target.xCounter > 20) {
e.target.step = -1;
e.target.xSpeed *= -1;
}
if (e.target.xCounter < -20) {
e.target.step = 1;
e.target.xSpeed *= -1;
}
if (e.target.xCounter<10 && e.target.xCounter>-10) e.target.x += e.target.xSpeed;
if ((e.target.xCounter<=-10 && e.target.xCounter>=-15) || (e.target.xCounter>=10 && e.target.xCounter<=15)) e.target.x += (e.target.xSpeed/2);
if (e.target.xCounter>15 || e.target.xCounter<-15) e.target.x += (e.target.xSpeed/3);
if (e.target.y>(stage.stageHeight+e.target.height)) reStart(e.target,true);
}
function reStart(clip, rotat):void {
clip.x = randomNumb(0, stage.stageWidth);
clip.y = -clip.height;
clip.speed = randomNumb(3, 3);
clip.xSpeed = clip.speed*2*clip.step;
clip.scaleX = clip.scaleY =clip.scaleLimit = randomNumb(0.7, 0.7);
clip.angle = Math.random()*360;//угол клипа по выбранной оси. Его будем анимировать. Для простоты делаем его в градусах.
clip.angleSpeed = Math.random()*6;//Скорость вращения
clip.axis='scaleX';//"ось" вращения
if (rotat) clip.rotation = randomNumb(-180, 180);
if (!firstTime) clip.y = randomNumb(0, stage.stageHeight);
clip.rotating=Math.round(Math.random())?6*(Math.random()-.5):0;
}
function step():Number {
var myStep:Number = Math.random();
(myStep>0.5) ? myStep = 1 : myStep = -1;
return myStep;
}
function randomNumb(min, max) {
return (Math.random()*(max-min)+min);
}
myBg(arrList.length);
14. Переходите на монтажный кадр, создайте новый слой и перенесите на него ролик "Листопад". Во вкладке "Свойства" задайте значения X & Y = 0, то есть станет там же, где и "Листопад+сек". Дайте названия слоям. Тестируйте: Ctrl+Enter.
15. Создайте слой для фона, переместите под слои "с листопадами". На него импортируйте картинку, коллаж фотошопный Ваш ...
16. Между слоями с листопадами создайте слой, поместите изображение ПНГ девушки (или Ваш вариант)
17. Создайте слой поверх всех слоёв: "Маска" Инструментом "Прямоугольник" нарисуйте произвольный прямоугольник любого цвета (без обводки), выделите его инструментом "Сирелка" и во вкладке "Свойства" задайте размеры X/Y = 550/400 (или размеры Вашей работы), а во вкладке "Выравнивание" выравнивайте по центру горизонтально и вертикально. Затем кликайте по слою и выберите "Маска". (Без маски листья будут выбегать за пределы кадра).
18. Можно возвращаться к редактированию созданных символов в библиотеке а также их экземпляров на монтажном кадре, менять содержимое, добавлять-убрать-изменять эффекты ... Можно подписывать работу.
19. Дополнительных слоёв с изображениями, а также "листопадных" с или без секунд, может быть сколько пожелаете. Они не дадут флешке дополнительный "вес" Но чем больше загруженного материала (изображения, гифки, видео) в флешке, тем она "тяжелее" - долго будет открываться ... Подготавливайте исходный материал в графических редакторах (онлайн, фотошоп, иллюстратор ...)
Пока всё, устал Вас мучить, До следующего!
Серия сообщений "МАСТЕРСКАЯ ФЛЕШ .":
Часть 1 - Уроки флеш от Demiart forum.
Часть 2 - Мастерская флеш открыта! Добро пожаловать!
...
Часть 6 - Падают листья_секунды. Урок 4.
Часть 7 - Секундная стрелка "выстреливает" секунды. AS3. Урок 5.
Часть 8 - Листопад отсчитывает мгновения. Урок 6.
Рубрики: | Анимация Для ЛиРу Уроки Jorjorych Флеш |
Комментировать | « Пред. запись — К дневнику — След. запись » | Страницы: [1] [Новые] |