effective_AdobeFlashCS3

51

Катящийся шар

002_1.fla. Просмотрите анимацию. Выделите кадры с 7 по 14 в каждом из слоев, F5 – добавьте кадры. Лкм по 7 кадру в слое 1, F6, лкм по 20 кадру в слое 1, F6. В 20 кадре выберите шар и при помощи инструмента свободного преобразования задайте объекту сдвиг влево. Между 2 и 3 КК и 3 и 4 КК в первом слое задайте анимацию движения. Просмотрите анимацию.

В 3КК задайте параметр замедление – 100, а в 2КК замедление 100. Просмотрите анимацию.

Падение предмета

003.fla. Просмотрите изначальное движение предмета. Задайте анимацию движение между 1КК и 2КК анимацию движения, параметр Замедлить – - 100. Лкм по 2КК во втором слое, F6 – создавая новый КК. Перейдите в этот КК, выберите объект, при помощи инструмента свободного преобразования увеличьте объект по горизонтали и уменьшите по вертикали (сплюсните объект). Переместите его таким образом, чтобы он нижней границей касался поверхности. Лк по 16 кадру, создайте ключевой кадр и еще немного сплюснете объект. Задайте анимацию движения между 3КК и 4КК. Лкм по 19т кадру, F6, уменьшите объект по горизонтали и увеличьте по вертикали объекта. Задайте анимацию движения между 5КК и 6КК. Затем задайте анимацию движения с параметром замедление – 100 между предпоследним и последним КК. Просмотрите анимацию.

Движение персонажа

004.fla. Просмотрите анимацию. 2лкм по объекту для того, чтобы просмотреть из чего состоит объект. Посмотрите на анимацию внутри символа при помощи ползунка времени. Рассмотрите, как двигаются все части персонажа. Увеличьте ширину шага (например, при помощи инструмента свободное преобразование).

По аналогии нарисуйте своего

Продвинутые кнопки

005.fla. Выделите объект на слое buttons. Сдублируйте объект, F8 – кнопка. 2лкм по кнопке, удерживая Alt, перенесите содержимое ключевых кадров в соседние состояния (или можно наживать клавишу F6). В состоянии Прохождений измените цвет объекта на малиновый. Посмотрите на проект в действии.

Вернитесь на сцену и удалите кнопку. Расположите заготовку под кнопку напротив действия home. Преобразуйте заготовку в ФР с именем buttons.

52

Войдите в режим редактирования символа. Переименуйте слой в buttons.

Создайте слои с названиями: animation, labels, actions.

Выделите 15-е кадры во всех слоях, F5. Лкм по 8 кадру в слое labels, F6. В панели в панели свойств задайте параметр метки кадра – out.

В 1КК укажите метку in.

Метки в кадрах обозначаются флажками.

Вслое animations, инструментом прямоугольник синего цвета без линий обводки, нарисуйте прямоугольник, закрывающий изначальный объект. При помощи панели Цвет – задайте градиентную заливку данному объекту – линейную, состоящую из цветов – 255,255,255,0; 255,255,255,100; или 255,255,255,0; 255,255,255,100; 255,255,255,0. Можете сдвинуть центральный ползунок вправо. Преобразуйте градиентный прямоугольник в ФР с именем grad.

Лкм по 8 кадру в слое animations, F6. Задайте анимацию движения между КК.

В1КК передвиньте градиент влево от кнопки. Просмотрите анимацию при помощи ползунка времени.

Лкм по 15 кадру, F6, задайте анимацию движения, в 3КК перенесите градиент влево.

Создайте слой с именем mask, расположите его над слоем animations, перенесите в него содержимое из слоя buttons (например, удерживая клавишу Alt).

Пкм по названию слоя mask, Маска. Просмотрите результат анимации. Переедите в слой actions, в панели действий, укажите

stop();

Лкм по 7 кадру слоя actions, F6. в панели действий, укажите stop();

Выделите 10-е кадры в каждом из слоем и нажмите F5 2-3 раза для создания асимметричности анимации.

Вернитесь на сцену. Перемесите объект в примерные координаты home. Укажите ему имя экземпляра home.

53

В1КК слоя actions запишите: home.onRollOver=function(){ this.gotoAndPlay(“in”);

}

Посмотрите результат.

Впанели действий допишите следующее: home.onRollOut=function(){

this.gotoAndPlay(“out”);

}

Посмотрите результат.

Доработайте символ buttons: вернитесь в слой buttons, 2лкм по символу, в слое actions, лмк по последнему кадру, F6. F6. в панели действий, укажите gotoAndStop(1);

Вернитесь на сцену. Посмотрите результат. Удерживая клавишу Alt, разместите объекты в слое buttons под словами: gallery, words, contact. Поменяйте имена экземпляров на: gallery, words, contact. В слое actions добавьте:

gallery.onRollOver=function(){

this.gotoAndPlay(“in”);

}

gallery.onRollOut=function(){

this.gotoAndPlay(“out”);

}

words.onRollOver=function(){

this.gotoAndPlay(“in”);

}

words.onRollOut=function(){

this.gotoAndPlay(“out”);

}

contact.onRollOver=function(){

this.gotoAndPlay(“in”);

}

contact.onRollOut=function(){

this.gotoAndPlay(“out”);

}

Посмотрите результат.

Заставим одну из кнопок «работать», в панели действий в 1КК слоя actions допишите:

54

home.Release=function(){

bio.gotoAndPlay(1);

}

Как только появится клип с именем bio, он будет проигран с первого кадра.

Прелоадер

007.fla. Перейдите на 2КК в слое content, посмотрите на содержании проекта. В 1КК слоя actions запишите скрипт:

stop();

Лкм по 2 кадру в слое actions, F6, запишите в панели действий: stop();

Лкм по 1КК слоя preloader. Из библиотеки перенесите logo на сцену. При помощи инструмента Свободное преобразование, увеличьте символ. Войдите в режим редактирования символа, создайте 2 слоя. Слой с логотипом назовите logo, второй слой – mask, третий слой – outline. Инструментом Чернильница создайте черный контур для логотипа, выделите его, Редактирование, Вырезать. Лкм по 1КК слоя outline, Редактирование, Вставить. Отключите и снова включите видимость нижнего слоя, чтобы проверить насколько хорошо получилась операция вырезания и вставки. Заблокируйте слои logo & outline. В слое mask нарисуйте прямоугольник темно-серого цвета без обводки с включенное опцией рисования объектов, закрывающий логотип. Выделите его, F8, ФР с именем mask. Задайте имя экземпляра mask. Пкм по названию слоя mask, Маска.

Вернитесь на сцену. Инструментом Текст, с выбранной опцией – Динамический текст, создайте текстовое поле (нарисуйте).

Задайте имя текстового поля – myText.

В 1КК слоя actions запишите: myInterval=setInterval(preloader,10); function preloader(){

if(getBytesLoaded()>=getBytesTotal()){

play();

clearInterval(myInterval);

}

myText.text=(getBytesLoaded()/getBytesTotal()*100);

55

}

Проверьте работу.

Измените строку с заданием текста: myText.text=Math.round(getBytesLoaded()/getBytesTotal()*100)+”%”;

Проверьте работу.

В действиях добавьте еще:

bar.mask._yscale= getBytesLoaded()/getBytesTotal()*100;

проверьте работу. Назовите символ bar Проверьте работу.

Пользовательский курсор

Создайте новый файл. Инструментом Овал нарисуйте круг с градиентной от черного к красному заливкой. Выделите его, F8, ФР с именем pointer. В диалоговом окне нажмите Дополнительно:

56

Поставьте галочку в «Экспортировать для ActionScript». Удалите объект со сцены. Лкм по 1КК, в панели действий запишите:

function onEnterFrame(){ attachMovie(“pointer”, “pointer”, 100); pointer._x=_xmouse; pointer._y=_ymouse;

}

Проверьте работу. Уберите курсор Мыши – допишите внутри функции:

Mouse.hide();

Проверьте работу.

Перетаскивание объектов

009.fla. Перенесите nyc из библиотеки на Сцену. F8, image. Создайте слой imaget. Скопируйте ФР и вставьте его в новый слой. Заблокируйте слой imaget. Создайте слои mask и actions. В слое mask, инструментом oval темносерого цвета, с отключенным контуром и отключенной опцией рисование объектов нарисуйте круг. Выделите его, Изменить, Форма, Смягчить края

57

заливки – 14, 6. Снимите выделение, посмотрите результат. Заблокируйте слой image. Выделите круг, F8, mask. Задайте ему имя экземпляра – mask. Заблокируйте слой. Разблокируйте слой imaget, символу на этом слое задайте имя экземпляра – img, заблокируйте слой. Разблокируйте нижний слой. Уберите видимость слоя imaget. Выделите объект на слое image. Задайте яркость объекту – -70.

Перейдите в слой actions, лкм по 1КК, в панели действий запишите: mask.onPress=function(){

this.startDrag();

}

Проверьте действие. Допишите скрипт. mask.onRelease=function(){

this.stopDrag();

}

Проверьте действие. Допишите скрипт.

Img.setMask(mask);

Проверьте действие.

Для оптимизации разблокируйте слой с маской, выберите символ и поставьте галочку в пункте «Применить кэширование…» аналогично на символах картинок. Проверьте действие.

Фото галерея

010.fla. Запустите проект на просмотр, наводите курсор мыши на иконки, понаблюдайте на изменение картинок, понажимайте лкм. Лкм по первой кнопке, задайте имя экземпляра btn1, у второй кнопки – btn2, у третьей – btn3, у четвертой – btn4. Перенесите растровое изображение Angela на сцену, выделите его, преобразуйте в ФР с именем angela_mc, точка регистрациилевый верхний угол. Удалите экземпляр символа со сцены. В библиотеке это символ остался. Перенесите Kaysar-а, преобразуйте в символ с именем kaysar_mc, удалите со сцены. Перенесите kuntal, преобразуйте в символ с именем kuntal_mc, удалите со сцены. Перенесите michael, преобразуйте в символ с именем michael_mc, удалите со сцены. Проверьте библиотеку, все символы должны были остаться. Пкм по angela_mc, Связывание, поставить галочку в пункте «Экспортировать для ActionScript», пкм по kaysar_mc, Связывание, поставить галочку в пункте «Экспортировать для ActionScript» пкм по kuntal_mc, Связывание, поставить галочку в пункте «Экспортировать для ActionScript», пкм по michael_mc, Связывание, поставить галочку в пункте «Экспортировать для ActionScript».

Создайте слой с именем script. Лкм по 1КК слоя script, в панели действий укажите:

btn1.onRelease=function(){

58

attachMovie(“michael_mc”,”michael",0); michael._x=20;

michael._y=120;

}

Запустите проект и проверьте действие кнопки. Если все работает, допишите скрипт.

btn2.onRelease=function(){ attachMovie(“angela_mc”,” michael ",0); michael._x=20;

michael._y=120;

}

btn3.onRelease=function(){ attachMovie(“kuntal_mc”,” michael ",0); michael._x=20;

michael._y=120;

}

btn4.onRelease=function(){ attachMovie(“kaysar_mc”,” kaysar ",0); kaysar._x=20;

kaysar._y=120;

}

Запустите проект и проверьте действие кнопки.

Сайт на Флеш

011.fla. Откройте и просмотрите содержимое проекта. Поставьте видимость всех слоев. Оставьте видимость только у слоя home, выберите символ, находящийся на сцене и войдите в режим редактирования символа. Войдите в режим редактирования символа, находящегося внутри символа home, посмотрите содержимое символа. Вернитесь на сцену. Оставьте видимость только у слоя contact, выберите символ, находящийся на сцене и войдите в режим редактирования символа. Вернитесь на сцену. Оставьте видимость только у слоя info,затем у portfolio. Верните видимость всем слоям. Передвиньте КК в слое portfolio на кадр вправо, в слое info на 2 кадра вправо, в слое contact на 3 кадра вправо. Получится «лесенка» из кадров, причем в каждый текущим момент времени будет виден только один из слоев с содержимым. Разверните папку interface, выделите все 4-е кадры из слоев в этой папке, F5. интерфейс появляется все время проекта. Сверните папку interface. Проверьте проект в работе.

Лкм по 1КК в слое actions, напишите: stop();

Проверьте проект в работе.

59

Лкм по первой кнопке, укажите имя экземпляра btn1, по второй кнопке, укажите имя экземпляра btn2 по третьей кнопке, укажите имя экземпляра btn3 по четвертой кнопке, укажите имя экземпляра btn4.

Лкм по 1КК в слое labels, выделите кадры с 2 по 4, F6 – создавая КК под метки.

Лкм по 1КК в слое labels, задайте метку home, лкм по 2КК в слое labels, задайте метку portfolio, лкм по 3КК в слое labels, задайте метку info, по 4КК в слое labels, задайте метку contact.

Лкм по 1КК в слое actions, напишите: btn1.onRealease=function(){

gotoAndStop(“home”);

}

Проверьте действие скрипта, если все ок, допишите скрипт: btn2.onRealease=function(){

gotoAndStop(“portfolio”);

}

btn3.onRealease=function(){

gotoAndStop(“info”);

}

btn4.onRealease=function(){

gotoAndStop(“contact”);

}

Проверьте действие скрипта.

Создание графической оболочки для загрузки страниц

012.fla. Откройте и просмотрите содержимое проекта. Разверните папку interface, посмотрите ее содержимое. Посмотрите отдельно содержимое следующих файлов: contact.swf, home.swf, info.swf, portfolio.swf. Вернитесь в проект.

Лкм по первой кнопке, укажите имя экземпляра btn1, по второй кнопке, укажите имя экземпляра btn2 по третьей кнопке, укажите имя экземпляра btn3 по четвертой кнопке, укажите имя экземпляра btn4.

Лкм по 1КК слоя loader, Вставка, Новый символ, cloader_mc, если при создании символа Вы автоматически перешли в режим редактирования символов, то вернитесь на сцену. Передвиньте символ (он будет в виде кружочка с крестиком) в левый верхний угол сцены. Задайте имя экземпляра символу – loader_mc. Переставьте слой loader вниз. Лкм по 1КК слоя actions, запишите скрипт:

btn1.onRelease=function(){ loader_mc.loadMovie(“home.swf”);

}

60

Проверьте действие скрипта, если все ок, допишите скрипт: btn2.onRelease=function(){

loader_mc.loadMovie(“portfolio.swf”);

}

btn3.onRelease=function(){ loader_mc.loadMovie(“info.swf”);

}

btn4.onRelease=function(){ loader_mc.loadMovie(“contact.swf”);

}

Проверьте действие скрипта.

Вернитесь на 1КК слоя actions, в панели действий допишите кусок скрипта: onLoad=function(){

loader_mc.loadMovie(“home.swf”);

}

Проверьте действие скрипта.

Использование фокуса

013.fla. Откройте и просмотрите содержимое проекта. Лкм по первому ящику, F8, ФР, ibr, лкм по второму ящику, F8, ФР, ibg, лкм по второму ящику, F8, ФР, ibgr, лкм по второму ящику, F8, ФР, ibgre. Войдите в режим редактирования символа ibr. Вернитесь на сцену. Лкм по первому ящику, F8, кнопка btn1, по второму ящику, F8, кнопка btn2, по третьему ящику, F8, кнопка btn3, по четвертому ящику, F8, кнопка btn4. Войдите в режим редактирования символа btn1, в панели фильтров задайте симметричное размытие в 5 пикселов. Продублируйте состояние кнопки. Войдите в состояние Прохождений и для почтового ящика уберите размытие, при помощи инструмента свободного преобразования увеличьте. Вернитесь на сцену и проверьте действие кнопок (например, Ctrl+Enter или Управление, Разрешить простые кнопки). Войдите в режим редактирования символа btn2, в панели фильтров задайте симметричное размытие в 5 пикселов. Продублируйте состояние кнопки. Войдите в состояние Прохождений и для почтового ящика уберите размытие, при помощи инструмента свободного преобразования увеличьте. Аналогично с 3 и 4 кнопками. Проверьте действие кнопок.

Слайдер

014.fla. Запустите проект и посмотрите его возможности. Разверните папку design и рассмотрите содержимое слоев в данной паке. Создайте слой slider и переместите его над папкой design. Войдите в режим редактирования