-Рубрики

 -Поиск по дневнику

Поиск сообщений в Jorjorych

 -Подписка по e-mail

 

 -Статистика

Статистика LiveInternet.ru: показано количество хитов и посетителей
Создан: 11.07.2013
Записей: 1657
Комментариев: 21885
Написано: 29186


Листопад отсчитывает мгновения. Урок 6.

Понедельник, 12 Октября 2015 г. 15:06 + в цитатник



Это не художественное произведение, просто иллюстрация к уроку  "Листопад отсчитывает мгновения..."

Друзья просили, я обещал ... не прошло ещё три года ...

1. Создайте документ AS3, размеры по Вашей задумке. В уроке =550/400, то есть по умолчанию. Листопад создадим по уроку с Демиарта.  Вернее, буду использовать отредактированный скрипт от Redefy и МОНСТЕР  (ещё МОНСТЕР)- найти там в комментариях.
2. В библиотеке создайте ролик "Листопад+секунды" через иконку внизу вкладки.

3. Создайте ролик "Лист1". Потом нажмите комбинацию клавиш Ctrl+R и импортируйте листик в формате ПНГ.


6-01.gif


4. Откройте в программе FLA файл секундного таймера (рассказывал раньше как сохранить шаблон). Если нет готового, то создайте в отдельном ролике или в новом документе. (Урок тут). Найдёте также во вложении, но лучше самим научиться делать.

5. Скопируйте папку с секундным таймером: клик правой кнопкой и =Копировать=
6. Переходите на вкладку с работой и вставьте скопированное в библиотеку проекта: клик правой кнопкой на свободное место в библиотеке и =Вставить=

6-02.gif


7. Секундный таймер перенесите в ролик "Лист1"  на слой, созданный выше слоя с листиком. Можете войти в редакцию таймера (текстовое поле) и поменять шрифт (не забудьте внедрить новый шрифт), цвет, применить фильтры...

8. Инструментом "Свободное преобразование" подберите размер, удерживая клавишу Shift, наклон. Пользуйтесь стрелками на клавиатуре. Также во вкладке "Свойства" добавьте фильтр =Тень=, экспериментируйте с настройками. Пробуйте другие фильтры, а также стиль, наложение... Теперь ролик "Лист1" "гибридный" - будет показываться везде с секундным таймером на листике.
 


6-03.gif

9. Дублируем два раза ролик "Лист1" - клик правой кнопкой, выбрать =Дублировать=, именуем, для порядка, новые ролики

10. Важный момент - Связывание! : в колонке "Связывание" напротив соответствующего символа делаем двойной клик левой кнопкой мыши и пишем, соответственно: list1, list2, list3.


6-04.gif


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. То есть экземпляр ролика (маленький кружочек) будет находиться в левом верхнем углу монтажного кадра.

Тестируем ролик.


6-05.gif

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);

 


6-06.gif

14. Переходите на монтажный кадр, создайте новый слой и перенесите на него ролик "Листопад". Во вкладке "Свойства" задайте значения X & Y = 0, то есть станет там же, где и "Листопад+сек". Дайте названия слоям. Тестируйте:  Ctrl+Enter.
6-07.gif

15. Создайте слой для фона, переместите под слои "с листопадами". На него импортируйте картинку, коллаж фотошопный Ваш ...
6-08.gif

16. Между слоями с листопадами создайте слой, поместите изображение ПНГ девушки (или Ваш вариант)
6-09.gif

17. Создайте слой поверх всех слоёв: "Маска"  Инструментом "Прямоугольник" нарисуйте произвольный прямоугольник любого цвета (без обводки), выделите его инструментом "Сирелка" и во вкладке "Свойства" задайте размеры X/Y = 550/400 (или размеры Вашей работы), а во вкладке "Выравнивание" выравнивайте по центру горизонтально и вертикально. Затем кликайте по слою и выберите "Маска". (Без маски листья будут выбегать за пределы кадра).

18. Можно возвращаться к редактированию созданных символов в библиотеке а также их экземпляров на монтажном кадре, менять содержимое, добавлять-убрать-изменять эффекты ... Можно подписывать работу.

19. Дополнительных слоёв с изображениями, а также "листопадных" с или без секунд, может быть сколько пожелаете. Они не дадут флешке дополнительный "вес"  Но чем больше загруженного материала (изображения, гифки, видео) в флешке, тем она "тяжелее" - долго будет открываться ... Подготавливайте исходный материал в графических редакторах (онлайн, фотошоп, иллюстратор ...)

Пока всё, устал Вас мучить, До следующего!
 

Вложение: 4946534_urok6.rar

Серия сообщений "МАСТЕРСКАЯ ФЛЕШ .":
Часть 1 - Уроки флеш от Demiart forum.
Часть 2 - Мастерская флеш открыта! Добро пожаловать!
...
Часть 6 - Падают листья_секунды. Урок 4.
Часть 7 - Секундная стрелка "выстреливает" секунды. AS3. Урок 5.
Часть 8 - Листопад отсчитывает мгновения. Урок 6.
Часть 9 - Эффект отражения на шкале времени. Урок 7.

Метки:  

Процитировано 10 раз
Понравилось: 16 пользователям

мадам-_тата   обратиться по имени Понедельник, 12 Октября 2015 г. 16:02 (ссылка)
Доброго вечера Георгий! как я поняла еще одна программа по созданию Флеш и урок по программе. очень интересно Спасибо, очень люблю флешки, но что то у меня с ними не лады- не получаются! жаль! Вам всего хорошего!!!
Ответить С цитатой В цитатник
Перейти к дневнику

Понедельник, 12 Октября 2015 г. 16:17ссылка
Нет, программа та же, единственная: Adobe Flash!
Нина36   обратиться по имени Понедельник, 12 Октября 2015 г. 16:48 (ссылка)
Вечера доброго Георгий. Конечно все это нужно знать,но у меня к тебе вопрос,это делается в Алео или фотошоп?
Ответить С цитатой В цитатник
Перейти к дневнику

Понедельник, 12 Октября 2015 г. 19:30ссылка
Это Adobe Flash. В фотошопе можно подготовить исходники для него. А Aleo - это игрушечная утилитка, ей нужны готовые исходники из Adobe Flash и Фотошоп.
LiSu   обратиться по имени Понедельник, 12 Октября 2015 г. 17:59 (ссылка)
Отлично написан урок, спасибо, Георгий!
Ответить С цитатой В цитатник
Перейти к дневнику

Понедельник, 12 Октября 2015 г. 19:31ссылка
Лиля, хоть что-то путное, новое нашла в нём? Знаю, что листопад делала по Демиартовскому уроку.
Перейти к дневнику

Понедельник, 12 Октября 2015 г. 19:37ссылка
Очень удобные картинки гиф-объяснения, всегда можно закрепить прочитанное. Урок отличный, не сомневайся. И всегда можно повторить пройденное, ведь забывается.
Перейти к дневнику

Понедельник, 12 Октября 2015 г. 19:42ссылка
Хорошо, спасибо.
Татьяна_Волкова_Литвинова   обратиться по имени Понедельник, 12 Октября 2015 г. 19:41 (ссылка)
Георгий, замечательно изложил материал, за что тебе огромное спасибо. Пробовать буду с понедельника. Дома гость и мой комп занят. Цитирую.
Ответить С цитатой В цитатник
Перейти к дневнику

Понедельник, 12 Октября 2015 г. 19:42ссылка
Приятного вечера!
Перейти к дневнику

Понедельник, 12 Октября 2015 г. 19:46ссылка
Спасибо! Просматриваю все с ноутбука внука, пока делает физ. упражнения перед сном.
эжейни   обратиться по имени Вторник, 13 Октября 2015 г. 00:39 (ссылка)
Благодарю Вас, Георгий, за Ваши труды! Сделано очень красиво !
Ответить С цитатой В цитатник
Перейти к дневнику

Вторник, 13 Октября 2015 г. 14:50ссылка
Благодарю Вас, Евгения! Как говорил в преамбуле, это не творчество, а простая иллюстрация к уроку.
daf53   обратиться по имени Четверг, 29 Октября 2015 г. 22:22 (ссылка)
Спасибо!Толково объяснил!Но, не даются мне скрипты! Увы!
Ответить С цитатой В цитатник
Перейти к дневнику

Четверг, 29 Октября 2015 г. 23:14ссылка
Да я тоже, пока, несмелые попытки делаю в AS3.
Комментировать К дневнику Страницы: [1] [Новые]
 

Добавить комментарий:
Текст комментария: смайлики

Проверка орфографии: (найти ошибки)

Прикрепить картинку:

 Переводить URL в ссылку
 Подписаться на комментарии
 Подписать картинку