-Цитатник

Анимация инструментом - Осветлитель - (0)

Анимация инструментом - Осветлитель Посмотрите внимательно на картинку - мигающие огоньки...

Зажигаем огоньки - (0)

Зажигаем огоньки Открываем картинку, я взяла вот такую Дублируем основной слой ( Ctrl...

Бегущие огоньки - (0)

Бегущие огоньки В этом уроке мы с вами научим огоньки бегать))   Возьмите лю...

Инструмент выделение и маска в фотошоп - (0)

Инструмент выделение и маска в фотошоп

Декор в ФШ - (0)

Декор в ФШ Я когда-то писала про плагин, который делает такие цветы в ФШ Плагин Genicap ...

 -Приложения

  • Перейти к приложению Открытки ОткрыткиПерерожденный каталог открыток на все случаи жизни
  • Перейти к приложению Я - фотограф Я - фотографПлагин для публикации фотографий в дневнике пользователя. Минимальные системные требования: Internet Explorer 6, Fire Fox 1.5, Opera 9.5, Safari 3.1.1 со включенным JavaScript. Возможно это будет рабо
  • Перейти к приложению Всегда под рукой Всегда под рукойаналогов нет ^_^ Позволяет вставить в профиль панель с произвольным Html-кодом. Можно разместить там банеры, счетчики и прочее
  • ТоррНАДО - торрент-трекер для блоговТоррНАДО - торрент-трекер для блогов
  • Перейти к приложению Переводчик ПереводчикОнлайн переводчик:Перевести текст или веб-страницу

 -Музыка

 -Видео

животные
Смотрели: 65 (1)

 -Фотоальбом

Посмотреть все фотографии серии Elitmagia
Elitmagia
01:32 20.03.2010
Фотографий: 4
Посмотреть все фотографии серии волки
волки
14:50 20.12.2009
Фотографий: 1
Посмотреть все фотографии серии Год тигра
Год тигра
19:37 19.12.2009
Фотографий: 5

 -Всегда под рукой

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

Поиск сообщений в татьяна_татуревич

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

 

 -Статистика

Статистика LiveInternet.ru: показано количество хитов и посетителей
Создан: 23.11.2009
Записей: 7621
Комментариев: 13539
Написано: 73221


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

Понедельник, 16 Февраля 2015 г. 17:08 + в цитатник
Цитата сообщения novprospekt Делаем флеш открытку с эффектом курсора «Mouse trailer». Урок для Adobe Flash CS6.

Будем делать вот такую открытку. Чтобы увидеть эффект поводите мышкой по открытке.



Для создания эффекта нам потребуется Библиотека 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.


Рубрики:  флеш

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

 

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

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

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

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