-Цитатник

Найди кота! или Как правильно спрятаться? - (5)

Ну очень улыбнуло!!!

Анимация формы во Flash(морфинг). - (5)

Анимация формы во Flash(морфинг) Морфинг отличается от предыдущих типов анимации тем,что работает...

Урок для Фотошоп " Закрываем глазки". - (11)

От меня добавка - Кисти для фотошоп "Ресницы" Вложение: 4167720_eyelashes.rar Смотреть зде...

Анимация частей картинки с помощью маски.Урок для Adobe Flash. - (2)

В комментариях к посту Использование анимированной маски в Adobe Flash.Урок ...

Текстовый скроллинг средствами флеш. - (0)

Текстовый скроллинг. Прокрутка текста средствами флеш. (Часть п...

 -Рубрики

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

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

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

 

 -Статистика

Статистика LiveInternet.ru: показано количество хитов и посетителей
Создан: 02.09.2010
Записей: 709
Комментариев: 11273
Написано: 13505


Делаем флеш открытку с эффектом курсора «Mouse trailer». Урок для Adobe Flash CS6.

Суббота, 14 Февраля 2015 г. 17:25 + в цитатник
Будем делать вот такую открытку. Чтобы увидеть эффект поводите мышкой по открытке.



Для создания эффекта нам потребуется Библиотека greensock

Скачать greensock-as3.rar

Для начала создаём папку проекта под названием "Mouse".
Разархивируем файл с Библиотекой greensock и находим там папку "com". Копируем эту папку в папку нашего проекта "Mouse".

Открываем программу Adobe Flash CS6 и создаем новый документ AS 3.0 размером 600 X 400 пикс. с любым фоном рабочего стола.





13-02-2015 19-34-32 (700x449, 188Kb)

Сохраняем документ в папку проекта "Mouse" под именем "mouse".

Файл - Сохранить как

На данном этапе в папке проекта "Mouse" теперь должны находиться папка "com" и файл FLA "mouse".

13-02-2015 23-54-16 (545x335, 72Kb)

На Временной шкале создаём слои для нашей открытки (снизу вверх):

1. Фон. Здесь будет создан фон для нашей открытки. Или можно на этот слой импортировать готовую фоновую картинку.

2. Клипарт. Сюда помещаем необходимый клипарт, перетащив его из Библиотеки программы, куда его предварительно, конечно, надо импортировать

Файл - Импорт - Импортировать в библиотеку.

Я взяла вот такой клипарт и импортировала его в Библиотеку программы

0_d0ceb_703eb2fe_M (300x274, 72Kb)

3. Надпись. На этот слой импортируем готовую надпись в формате png или делаем её непосредственно в программе инструментом "Текст".

Я импортировала вот такую готовую надпись

0_d0cef_11c7d821_orig (400x56, 21Kb)

4. На слое "сердечко" мы позднее расположим видеоролик, который и будет отвечать за создаваемый нами эффект.

5. На слое "скрипт" во вкладке "Действие" будет прописан скрипт для создания эффекта курсора "Mouse trailer"

14-02-2015 0-00-46 (700x517, 157Kb)

14-02-2015 2-32-34 (700x525, 178Kb)

Все подготовительные этапы мы сделали и теперь приступим непосредственно к созданию открытки.

На слое "фон" создаем фон с градиентной заливкой.
Для этого выделяем этот слой и на панели Инструментов устанавливаем
цвет обводки - "без обводки"
цвет заливки - любой цвет ( я выбрала стандартный красный)

14-02-2015 12-24-27 (485x586, 193Kb)

Далее, на панели Инструментов выбираем инструмент Прямоугольник и им на слое "фон" из верхнего левого угла рабочего поля тянем инструментом в нижний правый угол. Тем самым рисуем на слое "фон" прямоугольник перекрывающий всё Рабочее поле. Размеры нарисованного вами прямоугольника могут точно и не совпадать с размерами Рабочего поля - 600 X 400 пикс. Но это не так важно. Эти размеры мы далее установим в панели "Свойства".

14-02-2015 12-35-12 (429x573, 161Kb)

14-02-2015 12-38-11 (700x636, 603Kb)

Когда прямоугольник для фона будет нарисован, переходим в панель "Свойства", где устанавливаем его размеры и выравниваем по центру Рабочего поля.
Для этого в разделе "Положение и размер" панели "Свойства" устанавливаем размеры прямоугольника -
ширина = 600 пикс., высота = 400 пикс., координаты X и Y =0

14-02-2015 12-54-56 (316x245, 45Kb)

14-02-2015 12-46-22 (700x547, 394Kb)

Теперь установим для прямоугольника - фона градиентную заливку.
Для этого, на Рабочем поле, на слое "фон" выделяем инструментом "Стрелка" нарисованный прямоугольник (Это обязательно!) и открываем вкладку "Цвет". В этой вкладке выбираем тип заливки - Линейный градиент и свойство градиентной заливки (поток) - Расширить цвет.

14-02-2015 12-02-06 (408x294, 95Kb)

Далее опускаемся ниже - на шкалу редактирования цветов градиента и там с помощью маркеров цвета устанавливаем нужные цвета для градиента. Прямоугольник на Рабочем поле всё также должен быть выделен. Следите за этим.

14-02-2015 12-04-36 (700x608, 289Kb)

Для того, чтобы с помощью маркера ввести нужный цвет, необходимо щелкнуть по маркеру, тем самым выбрав его и затем ввести в окошечко кода цветов необходимый код цвета и нажать клавишу Enter. Чтобы добавить ещё один маркер, надо щелкнуть на шкале редактирования градиента в нужном вам месте. Маркер будет добавлен. Коды цветов даны на скрине под соответствующими им маркерами.

14-02-2015 13-16-34 (700x591, 460Kb)

После всех этих манипуляций прямоугольник будет залит Линейным градиентом и будет выглядеть следующим образом.

14-02-2015 13-25-23 (649x694, 238Kb)

Мы немного преобразуем этот созданный нами градиент.
Для этого на панели Инструментов выбираем инструмент "Преобразование градиента". Этот инструмент объединён вместе с инструментом "Свободное преобразование". Поэтому открываем вкладку с этими инструментами и выбираем нужный.

14-02-2015 13-29-23 (640x509, 211Kb)

После выбора инструмента "Преобразование градиента", им необходимо щелкнуть по прямоугольнику на Рабочем поле. После этого вокруг прямоугольника появятся маркеры преобразования градиента. Если вы этих маркеров не видите, то уменьшите изображения Рабочего поля.

14-02-2015 13-58-09 (700x548, 269Kb)

Маркером поворота градиентной заливки, с зажатой клавишей Shift, повернём заливку по часовой стрелке на 90 градусов. И градиентная заливка прямоугольника будет теперь иметь следующий вид:

14-02-2015 14-07-14 (700x635, 231Kb)

Фон готов и мы закрываем его на замочек, чтобы он не смещался в процессе работы над открыткой.

14-02-2015 14-12-36 (700x603, 224Kb)

Вы, конечно, можете выбрать свои цвета для градиента или поместить на слой "фон" готовое изображение.

Переходим на слой "клипарт", выбираем инструмент "Стрелка" и перетаскиваем им на слой "клипарт" из Библиотеки программы необходимые изображения, которые предварительно туда импортировали.

14-02-2015 14-18-36 (700x554, 235Kb)

Преобразуем помещенное на фон изображение в Фрагмент ролика, чтобы к нему возможно стало применение Фильтров.
Для этого выделяем изображение клипарта инструментом "Стрелка" и щелкаем по вкладке меню "Модификция". В открывшемся контекстном меню вкладки выбираем пункт "Преобразовать в символ".

14-02-2015 15-10-33 (700x629, 327Kb)

Откроется диалоговое окно "Преобразовать в символ".
Выставляем параметры как на скрине. Тип - Фрагмент ролика, Имя - клипарт1, точка регистрации - по центру.

14-02-2015 15-14-16 (700x608, 287Kb)

Теперь к преобразованному в Фрагмент ролика изображению можно применить Фильтр "Тень". Само изображение преобразованное в Фрагмент ролика при этом должно быть выделено инструментом "Стрелка".
Для добавления фильтра "Тень" открываем вкладку "Свойства", находим там раздел "Фильтры" и, нажав на иконку "Добавить фильтр", в контекстном меню выбираем пункт "Тень".

14-02-2015 15-24-11 (700x619, 304Kb)

Выставляем следующие настройки для фильтра "Тень".

14-02-2015 15-29-28 (318x289, 66Kb)

Ещё немного поработаем с клипартом.
Выделим изображение инструментом "Стрелка", щёлкним внутри выделения и, в открывшемся контекстном меню выбираем пункт "Копировать".

14-02-2015 15-32-14 (664x670, 375Kb)

Далее щёлкаем по Рабочему полю и в открывшемся контекстном меню выбираем пункт "Вставить".

14-02-2015 15-37-10 (700x531, 288Kb)

Инструментом "Свободное преобразование" трансформируем копию клипарта - уменьшаем размер, поворачиваем и устанавливаем в нужное место.

14-02-2015 15-41-03 (700x624, 376Kb)

14-02-2015 15-45-44 (700x531, 274Kb)

Трансформированная копия клипарта остаётся выделенной. Далее нажимаем на вкладку меню "Модификация" и, в открывшемся контекстном меню выбираем пункт "Преобразовать - Отразить слева направо"

14-02-2015 15-57-58 (700x497, 290Kb)

14-02-2015 16-00-31 (700x531, 244Kb)

После этого закрываем слой "клипарт" на замочек и переходим на слой "надпись"
Из Библиотеки программы инструментом "Стрелка" перетаскиваем на слой "надпись" готовое изображение надписи. Или делаем надпись инструментом "Текст".

14-02-2015 16-03-00 (700x531, 251Kb)

Оставив изображение надписи выделенным, преобразовываем его в Фрагмент ролика со следующими параметрами:

14-02-2015 16-11-43 (700x603, 314Kb)

К вновь полученному Фрагменту ролика "надпись1" применяем Фильтр "Свечение" со следующими параметрами:

14-02-2015 16-14-31 (315x193, 55Kb)

Теперь надпись будет выглядеть следующим образом

14-02-2015 19-35-30 (623x640, 340Kb)

Закрываем слой "надпись" на замочек и переходим на слой "сердечко"
На этом слое мы создадим изображения, которые будут использоваться для эффекта "Mouse trailer".
Для этого создаём новый символ - Фрагмент ролика со следующими параметрами:

14-02-2015 16-47-43 (632x380, 151Kb)

Обратите внимание, что в графе "Имя символа" мы вписываем
My Star

А в графе "Класс" -
MyStar

Вновь созданный Фрагмент ролика "My Star" пока оставляем пустым, сами создадим несколько графических символов для заполнения Фрагмента ролика "My Star".

Для этого создаём новый символ

Вставка - Создать символ

со следующими параметрами:

14-02-2015 16-56-01 (436x191, 68Kb)

Откроется окно редактирования графического символа "звёздочка1".
В панели Свойства поменяем цвет Монтажного стола на черный и в панели Инструментов выбираем инструмент "Многоугольник" без Обводки и с Заливкой белого цвета.

14-02-2015 17-01-57 (700x488, 159Kb)

Напоминаю, что мы находимся в поле редактирования графического символа "звёздочка1".
В панели Свойства находим раздел "Параметры инструмента" и щелкаем по кнопке "Параметры"
В появившемся диалоговом окне выставляем следующие параметры:

14-02-2015 17-15-13 (700x507, 180Kb)

Теперь выбранным инструментом "Многоугольник" с установленными параметрами в поле редактирования графического символа "звёздочка1" рисуем небольшую звёздочку.

14-02-2015 17-17-50 (531x568, 149Kb)

Инструментом "Стрелка" выделяем нарисованную звёздочку и в панели Свойства, в разделе "Положение и размер", выставляем для звёздочки следующие параметры:

14-02-2015 17-24-15 (324x214, 49Kb)

Создаём следующий графический символ
Для этого создаём ещё один графический символ

Вставка - Создать символ

со следующими параметрами:

14-02-2015 17-29-11 (436x191, 66Kb)

После создания графического символа "звёздочка2" мы попадаем в поле редактирования этого символа.
Точно также как и в случае с графическим символом "звёздочка1", выбираем инструмент "Многоугольник" с параметрами как и для "звёздочка1",Только цвет Заливки выбираем розовый. Рисуем в поле редактирования графического символа "звёздочка2" небольшую звёздочку розового цвета.

14-02-2015 18-15-40 (700x531, 187Kb)

14-02-2015 18-20-03 (671x538, 197Kb)

В панели Свойства для графического символа "звёздочка2", который при этом выделен инструментом "Стрелка", в разделе "Положение и размер", выставляем для второй звёздочки следующие параметры:

14-02-2015 18-26-22 (700x458, 148Kb)

Переходим к созданию третьего графического символа - сердечка.
Для его создания нам в программу его необходимо импортировать.
А для этого скачиваем файл в формате AI (Adobe Illustrator)

сердечко.ai

и импортируем его

Файл - Импорт - Импортировать в библиотеку

Указываем путь к скаченному вами файлу AI и открываем его.

Появиться вот такое диалоговое окно

14-02-2015 18-36-02 (700x471, 130Kb)

Нажимаем ОК
Графический символ "сердечко" будет занесён в Библиотеку.

Заходим в Библиотеку и дважды щелкаем по графическому символу "сердечко". Попадаем в поле его редактирования и там во вкладке "Свойства", в разделе "Положение и размер", выставляем для сердечка, предварительно выделив его инструментом "Стрелка", следующие параметры:

14-02-2015 18-55-42 (700x489, 174Kb)

Теперь все графические символы созданы и мы перетащим их в ранее созданный Фрагмент ролика "My Star".
Для этого открывам Библиотеку, находим там Фрагмент ролика "My Star" и дважды щелкаем по нему. После чего попадаем в поле редактирования данного символа.

14-02-2015 18-43-25 (700x531, 179Kb)

На панели Инструментов выбираем инструмент "Стрелка" и им из Библиотеки программы перетаскиваем в поле редактирования Фрагмента ролика "My Star" графические символы "звёздочка1", "звёздочка2" и "сердечко".
Располагаем их следующим образом - графический символ "звёздочка1" перетаскиваем, практически в середину поля редактирования, немного правее от него располагаем графический символ "звёздочка2" и графический символ "сердечко" располагаем чуть выше графического символа "звёздочка1".

14-02-2015 19-02-46 (700x531, 213Kb)

Фрагмент ролика "My Star" заполнен графическими символами и теперь его необходимо поместить на слой "сердечко" основной рабочей сцены - Монтажный кадр 1.
Для этого переключаемся на вкладку Монтажный кадр 1 и выделяем слой "сердечко"

14-02-2015 19-19-02 (700x531, 261Kb)

Инструментом "Стрелка" из Библиотеки программы перетягиваем Фрагмент ролика "My Star" на слой сердечко и располагаем в центре Рабочего поля.

14-02-2015 19-22-16 (700x531, 261Kb)

Не снимая выделения с Фрагмент ролика "My Star", переключаемся на вкладку "Свойства" и в графе "Назначить имя экземпляру" вписываем

myStar

14-02-2015 19-27-28 (700x531, 322Kb)

Далее переходим на слой "скрипт" и открываем вкладку "Действия". В блокнот этой вкладки вставляем скрипт

code:

//Import TweenMax
import com.greensock.*;
import com.greensock.easing.*;

//Hide the mouse
Mouse.hide();

//The starting color
var currentColor:uint = 0xffffff;

//This timer calls the changeColor() function every 0.5 seconds
var colorTimer:Timer = new Timer(500, 0);
colorTimer.addEventListener(TimerEvent.TIMER, changeColor);
colorTimer.start();

//This timer calls the createStar() method every 0.01 seconds
var trailTimer:Timer = new Timer(10, 0);
trailTimer.addEventListener(TimerEvent.TIMER, createStar);
trailTimer.start();

//Add an ENTER_FRAME listener so we can move the myStar
addEventListener(Event.ENTER_FRAME, moveStar);

//This function is called in each frame
function moveStar(e:Event):void {

//Set the myStar coordinates to match with the mouse coordinates
myStar.x = mouseX;
myStar.y = mouseY;
}

//This function is called by the colorTimer
function changeColor(e:Event):void {

//Assign a new random color
currentColor = Math.random() * 0xffffff;

//Tween the myStar to the currentColor
TweenMax.to(myStar, 0.7, {tint: currentColor});


}

//This function is called by the trailTimer
function createStar(e:Event):void {

//Create a new star
var newStar:MyStar = new MyStar();

//Set the newStar coordinates to match with the myStar coordinates
newStar.x = myStar.x;
newStar.y = myStar.y;

//Calculate random target x and y coordinates
var targetX:Number = newStar.x + Math.random() * 64 - 32;
var targetY:Number = newStar.y + Math.random() * 64 - 32;

//Calculate a random rotation
var targetRotation = Math.random() * 360 - 180;

//Add the newStar to the stage
addChild(newStar);

/*
Now we tween different properties of the newStar mc using TweenMax.
I call the "TweenMax.to()" multiple times so it's easier to read this code.
All of this could also be accomplished with one line.
Note that we call the function removeStar() when the tweens are finished.
*/
TweenMax.to(newStar, 3, {alpha: 0, scaleX: 5, scaleY: 5, tint: currentColor});
TweenMax.to(newStar, 3, {rotation: targetRotation, x: targetX, y: targetY});
TweenMax.to(newStar, 3, {blurFilter:{blurX:3, blurY:3}, onComplete: removeStar, onCompleteParams: [newStar]});
}

//This function is called when a star's tween is finished
function removeStar(star:MyStar):void {

//Remove the star from the stage
removeChild(star);
}



Необходимо также подписать нашу работу.
Для этого создаем выше слоя "надпись" слой "подпись" и выбираем инструмент "Текст".
Далее на слое "подпись" инструментом "Текст" разворачиваем в нужном месте текстовое поле, куда вписываем выбранным вами шрифтом ваш ник. Текст с ником выделяем инструментом "Стрелка" и переходим на вкладку "Свойства". Здесь мы внедряем выбранный шрифт и в разделе "Параметры" заполняем графу "Ссылка" и "Назначение"
В графу "Ссылка" вставляем ссылку на ваш дневник, а затем дважды щелкаем по раскрывающемуся списку графы "Назначение" и выбираем цель ссылки
_blank

14-02-2015 20-05-59 (700x531, 338Kb)

Тестируем наш флеш ролик
Управление - Тестировать ролик - в Flash Professional

Если всё устраивает, то экспортируем ролик во флеш

Файл - Экспорт - Экспортировать ролик

Кроме того нажимаем
Файл - Сохранить
чтобы сохранить окончательный вариант проекта в формате FLA.





Серия сообщений "Уроки Flash":
уроки в разных флешпрограммах, авторские уроки flash
Часть 1 - Делаем элементарные часики.Начинаем учиться созданию flash.
Часть 2 - Как правильно записать код флешки или видео в рамочку для кодов.
...
Часть 44 - Делаем флеш календарик в Adobe Flash (AS3).
Часть 45 - Текстовый скроллинг средствами флеш.
Часть 46 - Делаем флеш открытку с эффектом курсора «Mouse trailer». Урок для Adobe Flash CS6.
Часть 47 - Рисуем кнопку в Adobe Flash.
Часть 48 - Анимация частей картинки с помощью маски.Урок для Adobe Flash.
Часть 49 - Использование панели «Редактор движения» в Adobe Flash CS6.
Часть 50 - Анимация формы во Flash(морфинг).

Метки:  

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

Nella__solneshko   обратиться по имени Суббота, 14 Февраля 2015 г. 18:39 (ссылка)
Ответить С цитатой В цитатник
Татьяна_Волкова_Литвинова   обратиться по имени Суббота, 14 Февраля 2015 г. 18:41 (ссылка)
Марина, огромное спасибо за урок! В твоем уроке много полезного и нужного для освоения возможности АФ. Урок написан доступно. Спасибо!
Ответить С цитатой В цитатник
Перейти к дневнику

Понедельник, 16 Февраля 2015 г. 08:45ссылка
Танюш, в этой открытке вместо сердечек и звёздочек можно и другие элементы подставить.Например, бабочек, цветочки. Так что фантазируй в удовольствие.


Перейти к дневнику

Понедельник, 16 Февраля 2015 г. 10:31ссылка
Мариночка, спасибо за подсказку!
ВАТ   обратиться по имени Суббота, 14 Февраля 2015 г. 19:30 (ссылка)
Спасибо, Марина! С праздником!
Love (150x150, 400Kb)
Ответить С цитатой В цитатник
Перейти к дневнику

Понедельник, 16 Февраля 2015 г. 08:49ссылка
Верочка, спасибо за поздравление.

В этой открытке вместо сердечек и звёздочек можно и другие элементы подставить.Например, бабочек, цветочки, шарики. Так что и к другим праздникам можно открытку сделать.


Jorjorych   обратиться по имени Суббота, 14 Февраля 2015 г. 19:33 (ссылка)
Любви желанной!
16 (150x180, 39Kb)
Ответить С цитатой В цитатник
LARINA_KARA   обратиться по имени Суббота, 14 Февраля 2015 г. 19:45 (ссылка)
Мариночка ! спасибки за урок!
Ответить С цитатой В цитатник
Лариса_Гурьянова   обратиться по имени Воскресенье, 15 Февраля 2015 г. 00:35 (ссылка)
Мариночка, как всегда - шикарный урок!!! Спасибо, дорогая! С праздником!
Ответить С цитатой В цитатник
Перейти к дневнику

Понедельник, 16 Февраля 2015 г. 08:47ссылка
Ларис, в этой открытке вместо сердечек и звёздочек можно подставить, например, бабочек, цветочки и сделать открытку к другим праздникам.


Cafe__de__Paris   обратиться по имени Воскресенье, 15 Февраля 2015 г. 00:37 (ссылка)
Урок , супер! Спасибо Мариш!
Ответить С цитатой В цитатник
таила   обратиться по имени Воскресенье, 15 Февраля 2015 г. 03:31 (ссылка)
Спасибо Мариночка! Интересный урок! С днем святого валентина!
Для-тебя (500x431, 280Kb)
Ответить С цитатой В цитатник
Nattallie   обратиться по имени Воскресенье, 15 Февраля 2015 г. 12:12 (ссылка)
Спасибо, Марина, я как хомяк тащу все по этой проге, а никак не получается, , уроков счас много, смотрю, а вот с чего начать.... чтоб понять.
Ответить С цитатой В цитатник
Надежда_Заломина   обратиться по имени Воскресенье, 15 Февраля 2015 г. 13:29 (ссылка)
Спасибо большое.
Ответить С цитатой В цитатник
SylvAnna   обратиться по имени Воскресенье, 15 Февраля 2015 г. 23:50 (ссылка)
Спасибо большое, Марина!

(Добавил ссылку к себе в дневник)

Ответить С цитатой В цитатник
MissKcu   обратиться по имени Понедельник, 16 Февраля 2015 г. 16:54 (ссылка)
вау....надо попробовать....ПАСИБ
Ответить С цитатой В цитатник
Sobirayu_vinograd   обратиться по имени Вторник, 17 Февраля 2015 г. 23:53 (ссылка)
Благодарю, Марина.
Ответить С цитатой В цитатник
Irina-snez   обратиться по имени Среда, 18 Февраля 2015 г. 19:12 (ссылка)
Огромное спасибо, Мариночка! Все уроки по следу за курсором (не считая твоего с водой) у меня в As2. Прекрасно, что этот урок в As3. Можно всяких курсоров нафантазировать!
Ответить С цитатой В цитатник
LiSu   обратиться по имени Среда, 18 Февраля 2015 г. 19:44 (ссылка)
Спасибо, Мариночка, за прекрасный, подробный урок!
Ответить С цитатой В цитатник
Татьяна_НК   обратиться по имени Четверг, 19 Марта 2015 г. 23:16 (ссылка)
Мариночка СПАСИБО!! Такой Классный УРОК
Забрала. И уже сделала открытку с Днем Рождения!!
Ответить С цитатой В цитатник
малирина   обратиться по имени Понедельник, 18 Мая 2015 г. 11:34 (ссылка)
Урок интересный, но трудно понять что к чему, поэтому пока не получается сделать подобное.
Ответить С цитатой В цитатник
Комментировать К дневнику Страницы: [1] [Новые]
 

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

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

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

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