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



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

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

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

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





[700x449]

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

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

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

[545x335]

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

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

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

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

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

[300x274]

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

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

[400x56]

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

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

[700x517]

[700x525]

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

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

[485x586]

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

[429x573]

[700x636]

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

[316x245]

[700x547]

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

[408x294]

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

[700x608]

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

[700x591]

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

[649x694]

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

[640x509]

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

[700x548]

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

[700x635]

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

[700x603]

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

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

[700x554]

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

[700x629]

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

[700x608]

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

[700x619]

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

[318x289]

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

[664x670]

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

[700x531]

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

[700x624]

[700x531]

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

[700x497]

[700x531]

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

[700x531]

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

[700x603]

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

[315x193]

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

[623x640]

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

[632x380]

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

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

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

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

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

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

[436x191]

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

[700x488]

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

[700x507]

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

[531x568]

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

[324x214]

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

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

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

[436x191]

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

[700x531]

[671x538]

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

[700x458]

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

сердечко.ai

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

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

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

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

[700x471]

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

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

[700x489]

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

[700x531]

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

[700x531]

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

[700x531]

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

[700x531]

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

myStar

[700x531]

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

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

[700x531]

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

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

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

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