Главная
Форум
Баннеры
ТОП Сайтов
Мониторинг серверов
Банлист Сервера
Статистика Сервера
Наши отзывы
Новые сообщения · Участники · Правила форума · Поиск · RSS
  • Страница 1 из 1
  • 1
Двигающаяся иконка
DooDLeZДата: Воскресенье, 28.03.2010, 20:09 | Сообщение # 1

WebMaster
Сообщений: 485
[ ]
:-(
Это мой первый переведенный урок и даже несколько дополненный blush.gif

Оригинальное название - Active flash icon

Вот что у вас должно получиться:

В этом уроке сделанном для Flash 8, вы увидите, как создать активную flash иконку, которую вы сможете использовать для любых ваших веб-сайтов (Ну или других проектов, которые вам больше по душе smile.gif ). Вы также изучите, как использовать Action Script (не верьте этому, это не весь As!!! laugh.gif ), как преобразовать иконку в муви-клип (мувик) и как создать Instance name и много других полезных вещей.

1) Откройте новый Flash документ. В Modify > Document (Ctrl+J) укажите ширину (width) вашего документа 200 пикселей (pixels) и высоту (height) в 150 пикселей (pixels). После этого, в свойствах документа (Ctrl+F3) найдите поле Frame rate и введите значение 32. (Прим. пер.: в исходнике только почему-то 45)

2) Используя инструменты Flash для рисования нарисуйте иконку (Или же просто импортируйте во flash готовую заготовку, а вообще решать вам). Переименуйте слой (layer1) в icon.

Двигающаяся иконка

3) Выберите инструмент Text Tool (T), и напишите выше иконки текст "flash icon" (ну или что вам больше по душе).

Двигающаяся иконка

4) Выделите иконку и текст "flash icon" с помощью инструмента Selection Tool (V) или же нажмите (Ctrl+A) {Выделить все}, и нажмите F8 (или же выберите Modify > Convert to Symbol) для преобразования иконки и текста в муви-клип.

Двигающаяся иконка

5) Вы можете использовать стандартные фильтры flash, если вам захочется сделать более привлекательную иконку. (Window > Properties > Filters)

Двигающаяся иконка

6) Выделите "icon", перейдите к Properties Inspector (также называемой Properties panel, под сценой или просто нажмите Ctrl+F3) и в его левой стороне вы найдете поле Instance name. Введите сюда ваш текст, в данном случае назовем муви-клип icon.

Двигающаяся иконка

7) Дважды кликнете на муви-клипе левой кнопкой мыши с помощью инструмента Selection Tool (V), или же нажмите на мувике правой кнопкой мыши и выберите Edit in Place. Мы перейдем к редактированию нашего мувика.

Двигающаяся иконка

Сейчас вам следует находиться внутри муви-клипа (то есть в режиме его редактирования).

Двигающаяся иконка

8) Выделите только текст ("flash icon") и нажмите вырезать (Cut) или Ctrl+X . Создайте новый слой (layer2), кликните на него и во 2 фрейме нажмите одновременно клавиши Ctrl+Shift+V (Paste in Place). После этого, заблокируйте layer2 (Его можно переименовать в слой - text layer), выделите 1 слой и нажмите клавишу F8 (Convert to Symbol) для преобразования иконки (без текста) в муви-клип.

Двигающаяся иконка

9) Кликните на 10 фрейме и нажмите клавишу F6. Затем, используя мышь или стрелки клавиш на клавиатуре, передвиньте иконку немного вверх.

10) Пока иконка еще выделена, перейдите на панель свойств (Property inspector). В правом угле вы увидите меню Color. Выберите Tint и цвет, который вам больше нравится и поставьте значение 43%.

Двигающаяся иконка

11) Нажмите правой кнопкой мышки где-нибудь на серой зоне между двумя ключевыми фреймами (keyframes) на временной линейке (timeline) и выберите Create Motion Tween из появившегося меню. Должно получиться следующее:

Двигающаяся иконка

12) Заблокируйте первый слой, выделите второй слой, кликните на 10 фрейме, и нажмите F6. Затем разблокируйте второй слой. Выберите инструмент Selection Tool (V), и сместите "text" под иконку.

Двигающаяся иконка

13) Нажмите правой кнопкой мышки где-нибудь на серой зоне между двумя ключевыми фреймами (keyframes) на временной линейке (timeline) и выберите Create Motion Tween из появившегося меню. Должно получиться следующее:

Двигающаяся иконка

14) Кликните на 10 фрейме и откройте панель Action Script (F9), и напишите это:

CODE

stop();

15) Выберите инструмент Selection Tool (V), и передвиньте 2 слой (layer2), под 1 слой (layer1).

16) Вернитесь назад на основную сцену (Scene1), вставьте новый слой, назовите его Невидимая Кнопка (Invisible Button), и создайте в нем невидимую кнопку (Invisible Button) над слоем icon. Она создается очень просто. Используя инструмент Rectangle Tool ® нарисуйте прямоугольник над вашим рисунком. Затем поставьте значение Alpha 0%. Можете это сделать в панели Color. Здесь альфа невидимость вашего цвета. Нажмите F8. Преобразуйте ее в тип Button. Войдите в режим ее редактирования. Кликните на 4 фрейм – над этим фреймом должна быть надпись – Hit. Это зона нажатия вашей кнопки. Нажмите F6. После этого очистите предыдущие 3 фрейма. Для этого выделите их, а затем нажмите правой кнопкой мыши на них и выберите пункт Clear Frames. Вернитесь на главную сцену.
Справка:
Up – Когда курсор вне поле кнопки (по умолчанию, он только и создается).
Over – Событие происходит, когда курсор мыши над полем кнопки.
Down - Событие происходит, когда вы нажимаете на кнопку.

Двигающаяся иконка

Двигающаяся иконка

17) Выделите невидимую кнопку и откройте панель Action Script (F9), и вставьте скриптик:

CODE

on (rollOver) {
_root.mouse_over_icon = true;
}
on (rollOut) {
_root.mouse_over_icon = false;
}
on (release){
getURL("http://www.toxiclab.org/", "blank");
}

18) Вставьте новый слой и назовите его AS. Нажмите на его первом фрейме, откройте панель Action Script (F9), и вставьте скриптик:

CODE

_root.icon.onEnterFrame = function() {
if (mouse_over_icon) {
_root.icon.nextFrame();
} else {
_root.icon.prevFrame();
}
};



  • Страница 1 из 1
  • 1
Поиск:


Все права принадлежат PainKiller.Net.Ru 2009-2010. Дизайн сайта разработан - PainKiller.Net.Ru
Внимание! Рип шаблона запрещен "Нарушение авторского права"! Design bY PainKiller.Net.Ru
Тиц и pr сайта