Сейчас 127 заметки.

Флеш баннер для сайта: различия между версиями

Материал из ЗАметки
 
(не показано 39 промежуточных версий 2 участников)
Строка 1: Строка 1:
В данном баннер не рассмотрены мелкие детали и некоторые повторяющие действие. Графика и текст были заранее подготовлены, слои переименованы.  
+
В данном примере Вы узнаете несколько flash эффектов при [http://www.freelancera.ru/index.php/component/adsmanager/15-reklamnye-flash-bannery/3-izgotovlenie-reklamnykh-flesh-.html?Itemid= изготовление недорогих flash-баннеров].
  
 
[[Файл:1it.png]]
 
[[Файл:1it.png]]
  
Создадим новый проект комбинациями клавиш Ctrl+ N, выберем ширину b высоту сцены, частоту кадров, цвет. По желанию можно настроить автосохранение проекта.
+
Создаем новый проект комбинациями клавиш Ctrl+ N.
  
 
[[Файл:2it.png]]
 
[[Файл:2it.png]]
Строка 11: Строка 11:
 
[[Файл:3it.png]]
 
[[Файл:3it.png]]
  
Перемещаем курсор на пятый кадр первого слоя, нажимаем на правую кнопку мыши и вставляем ключевой кадр.
+
Перемещаем курсор на пятый кадр первого слоя, нажимаем на правую кнопку мыши, вставляем ключевой кадр.
  
 
[[Файл:4it.png]]
 
[[Файл:4it.png]]
  
Жмём между первым и последним кадром, опять нажимаем на правую кнопку мыши и на этот раз вставляем классическую анимацию движения.
+
Жмём между первым и пятым кадрами. Нажимаем на правую кнопку мыши, вставляем классическую анимацию движения.
  
 
[[Файл:5it.png]]
 
[[Файл:5it.png]]
Строка 23: Строка 23:
 
[[Файл:7it.png]]
 
[[Файл:7it.png]]
  
На первом слое 40-ого кадра, вставляем ключевой кадр.(нажимаем на правую кнопку мыши и вставляем ключевой кадр) Проделываем все это со всеми слоями.  
+
На первом слое 40-ого кадра нажимаем на правую кнопку мыши, вставляем ключевой кадр. Проделываем это со всеми слоями.  
  
 
[[Файл:8it.png]]
 
[[Файл:8it.png]]
  
Выделяем первый текст ("образовательный") и перемещаем его стрелкой вправо.
+
Выделяем первый текст ("образовательный") и перемещаем его стрелкой влево.
  
 
[[Файл:9it.png]]
 
[[Файл:9it.png]]
  
Переместим также второй текст("центр"), но уже влево.
+
Переместим также второй текст("центр"), но уже вправо.
  
 
[[Файл:10it.png]]
 
[[Файл:10it.png]]
Строка 47: Строка 47:
 
[[Файл:13it.png]]
 
[[Файл:13it.png]]
  
Переходим на 15-ый кадр и стрелкой перемещаем текст в право.  
+
Переходим на 15-ый кадр и стрелкой перемещаем текст вправо.  
 
   
 
   
 
[[Файл:14it.png]]
 
[[Файл:14it.png]]
Строка 55: Строка 55:
 
[[Файл:16it.png]]
 
[[Файл:16it.png]]
  
Переходим на 15-ый кадр, нажимаем правую кнопку мыши и вставляем ключевой кадр.
+
Переходим на 15-ый кадр, нажимаем правую кнопку мыши, вставляем ключевой кадр.
  
 
[[Файл:17it.png]]
 
[[Файл:17it.png]]
  
Жмем между ключевыми кадрами и создаем классическую анимацию движения.
+
Жмём между ключевыми кадрами и создаем классическую анимацию движения.
  
 
[[Файл:18it.png]]
 
[[Файл:18it.png]]
  
Переходим на последний ключевой кадр(15 кадр) и перемещаем стрелкой на клавиатуре вправо.
+
Переходим на последний ключевой кадр(15 кадр) и перемещаем текст стрелкой на клавиатуре влево.
  
 
[[Файл:19it.png]]
 
[[Файл:19it.png]]
  
Переходим на четвертый слой 16-ого кадра, жмем на правую кнопку мыши, вставляем ключевой кадр.
+
Переходим на четвертый слой 16-ого кадра, жмём на правую кнопку мыши, вставляем ключевой кадр.
  
 
[[Файл:20it.png]]
 
[[Файл:20it.png]]
  
Переходим на четвертый слой. Переходим на 19-ый кадр, жмем на правую кнопку мыши, вставляем ключевой кадр.
+
Переходим на 19-ый кадр, жмём на правую кнопку мыши, вставляем ключевой кадр.
  
 
[[Файл:21it.png]]
 
[[Файл:21it.png]]
Строка 79: Строка 79:
 
[[Файл:22it.png]]
 
[[Файл:22it.png]]
  
Нажимаем на клавишу F8. Выбираем фрагмент ролика. Жмем Ok.
+
Нажимаем на клавишу F8. Выбираем фрагмент ролика. Жмём Ok.
  
 
[[Файл:23it.png]]
 
[[Файл:23it.png]]
  
Нажимаем на 19-ый кадр четвертого слоя, затем кликаем мышкой по символу и выбираем панель свойства.  
+
Нажимаем на 19-ый кадр, затем кликаем мышкой по символу и выбираем панель свойства.  
  
 
[[Файл:24it.png]]
 
[[Файл:24it.png]]
  
Выбираем раздел "ФИЛЬТРЫ" и жмем куда указывает стрелка - "Добавить фильтр"
+
Выбираем раздел "ФИЛЬТРЫ" и жмём куда указывает стрелка - "Добавить фильтр"
  
 
[[Файл:25it.png]]
 
[[Файл:25it.png]]
Строка 99: Строка 99:
 
[[Файл:27it.png]]
 
[[Файл:27it.png]]
  
Создаем классическую анимацию движения. (жмем между ключевыми кадрами, создаем классическую анимацию движения).
+
Создаем классическую анимацию движения(кликаем между ключевыми кадрами, создаем классическую анимацию движения).
  
 
[[Файл:28it.png]]
 
[[Файл:28it.png]]
Строка 107: Строка 107:
 
[[Файл:29it.png]]
 
[[Файл:29it.png]]
  
Жмем между ключевыми кадрами, создаем классическую анимацию движения.
+
Жмём между ключевыми кадрами, создаем классическую анимацию движения.
  
 
[[Файл:30it.png]]
 
[[Файл:30it.png]]
Строка 115: Строка 115:
 
[[Файл:31it.png]]
 
[[Файл:31it.png]]
  
Тоже самое делаем 22 кадре.
+
Нажимаем на 22-ой кадр и стрелкой на клавиатуре перемещаем логотип вниз.  
  
 
[[Файл:32it.png]]
 
[[Файл:32it.png]]
Строка 127: Строка 127:
 
[[Файл:35it.png]]
 
[[Файл:35it.png]]
  
Переходим 17-ый кадра пятого слоя, жмем на правую кнопку мыши, вставляем ключевой кадр.
+
Переходим на 17-ый кадра пятого слоя, жмём на правую кнопку мыши, вставляем ключевой кадр.
  
 
[[Файл:36it.png]]
 
[[Файл:36it.png]]
Строка 135: Строка 135:
 
[[Файл:37it.png]]
 
[[Файл:37it.png]]
  
Переходим 23-ый кадра пятого слоя, жмем на правую кнопку мыши, вставляем ключевой кадр.
+
Переходим на 23-ый кадра пятого слоя, жмём правую кнопку мыши, вставляем ключевой кадр.
  
 
[[Файл:38it.png]]
 
[[Файл:38it.png]]
Строка 143: Строка 143:
 
[[Файл:39it.png]]
 
[[Файл:39it.png]]
  
Между кадрами 17 и 20 создаем классическую анимацию.
+
Между кадрами 17 и 20 создаём классическую анимацию.
  
 
[[Файл:40it.png]]
 
[[Файл:40it.png]]
  
Создаем классическую анимацию движения между кадрами 20 и 23
+
Создаём классическую анимацию движения между кадрами 20 и 23. Переходим на 23 кадр, стрелкой передвигаеем символ влево.
  
 
[[Файл:42it.png]]
 
[[Файл:42it.png]]
  
Переходим на шестой слой, выделяем текст, жмем кнопку F8 и преобразуем текст в символ.  
+
Переходим на шестой слой, выделяем текст, жмём кнопку F8 и преобразуем текст в символ.  
  
 
[[Файл:43it.png]]
 
[[Файл:43it.png]]
Строка 163: Строка 163:
 
[[Файл:45it.png]]
 
[[Файл:45it.png]]
  
Создаем классическую анимацию движения.
+
Создаём классическую анимацию движения.
  
 
[[Файл:46it.png]]
 
[[Файл:46it.png]]
  
Переходим на 30-ый кадр, выбираем свойства. Стиль: Альфа-канал = 0%
+
Кликаем на 30-ый кадр, переходим в свойства. В стиле "альфа-канал" устанавливаем 0%.
  
 
[[Файл:47it.png]]
 
[[Файл:47it.png]]
  
 +
Сохраняем проект комбинациями клавиш CTRL+SHIFT+S и экспортируем flash ролик CTRL+ALT+SHIFT+S на свой компьютер.
 +
 +
Размер баннера составил 37,7 Kb.
  
 
'''Пример''': http://wikiency.org/images/0/03/Ite.swf
 
'''Пример''': http://wikiency.org/images/0/03/Ite.swf
  
 
'''Скачать исходник''' http://wikiency.org/fla/ite.fla
 
'''Скачать исходник''' http://wikiency.org/fla/ite.fla

Текущая версия на 23:59, 19 августа 2013

В данном примере Вы узнаете несколько flash эффектов при изготовление недорогих flash-баннеров.

1it.png

Создаем новый проект комбинациями клавиш Ctrl+ N.

2it.png

Нажимаем на графическую картинку.

3it.png

Перемещаем курсор на пятый кадр первого слоя, нажимаем на правую кнопку мыши, вставляем ключевой кадр.

4it.png

Жмём между первым и пятым кадрами. Нажимаем на правую кнопку мыши, вставляем классическую анимацию движения.

5it.png

Переходим на пятый кадр первой сцены и правой стрелкой на клавиатуре перемещаем картинку влево.

7it.png

На первом слое 40-ого кадра нажимаем на правую кнопку мыши, вставляем ключевой кадр. Проделываем это со всеми слоями.

8it.png

Выделяем первый текст ("образовательный") и перемещаем его стрелкой влево.

9it.png

Переместим также второй текст("центр"), но уже вправо.

10it.png

Переходим на 11-ый кадр второго слоя, нажимаем правую клавишу мыши, вставляем ключевой кадр.

11it.png

Переходим на 15-ый кадр второго слоя, нажимаем правую клавишу мыши, вставляем ключевой кадр.

12it.png

Жмём стрелкой между ключевыми кадрами, нажимаем правую клавишу мыши и создаем классическую анимацию движения.

13it.png

Переходим на 15-ый кадр и стрелкой перемещаем текст вправо.

14it.png

Переходим на третий слой 11-ого кадра, выделяем текст, нажимаем правую клавишу мыши, вставляем ключевой кадр.

16it.png

Переходим на 15-ый кадр, нажимаем правую кнопку мыши, вставляем ключевой кадр.

17it.png

Жмём между ключевыми кадрами и создаем классическую анимацию движения.

18it.png

Переходим на последний ключевой кадр(15 кадр) и перемещаем текст стрелкой на клавиатуре влево.

19it.png

Переходим на четвертый слой 16-ого кадра, жмём на правую кнопку мыши, вставляем ключевой кадр.

20it.png

Переходим на 19-ый кадр, жмём на правую кнопку мыши, вставляем ключевой кадр.

21it.png

Выделяем логотип it.

22it.png

Нажимаем на клавишу F8. Выбираем фрагмент ролика. Жмём Ok.

23it.png

Нажимаем на 19-ый кадр, затем кликаем мышкой по символу и выбираем панель свойства.

24it.png

Выбираем раздел "ФИЛЬТРЫ" и жмём куда указывает стрелка - "Добавить фильтр"

25it.png

Выбираем "Размытие".

26it.png

Ставим 70 пикселей по вертикали.

27it.png

Создаем классическую анимацию движения(кликаем между ключевыми кадрами, создаем классическую анимацию движения).

28it.png

Переходим на 22-ый кадр, жмём на правую кнопку мыши, вставляем ключевой кадр.

29it.png

Жмём между ключевыми кадрами, создаем классическую анимацию движения.

30it.png

Нажимаем на 19-ый кадр и стрелкой на клавиатуре перемещаем логотип вниз.

31it.png

Нажимаем на 22-ой кадр и стрелкой на клавиатуре перемещаем логотип вниз.

32it.png

Нажимаем на 22-ый кадр четвертого слоя, затем кликаем мышкой по символу и выбираем панель свойства.

34it.png

Делаем размытие по X и Y нулевую.

35it.png

Переходим на 17-ый кадра пятого слоя, жмём на правую кнопку мыши, вставляем ключевой кадр.

36it.png

Переходим 20-ый кадра пятого слоя, жмем на правую кнопку мыши, вставляем ключевой кадр.

37it.png

Переходим на 23-ый кадра пятого слоя, жмём правую кнопку мыши, вставляем ключевой кадр.

38it.png

Преобразуем текст в символ, для этого выделим текст "Эксперт" и нажимаем клавишу F8. Преобразуем в фрагмент ролика.

39it.png

Между кадрами 17 и 20 создаём классическую анимацию.

40it.png

Создаём классическую анимацию движения между кадрами 20 и 23. Переходим на 23 кадр, стрелкой передвигаеем символ влево.

42it.png

Переходим на шестой слой, выделяем текст, жмём кнопку F8 и преобразуем текст в символ.

43it.png

Переходим на 25-ый кадр шестого слоя, жмём на правую кнопку мыши, вставляем ключевой кадр.

44it.png

Переходим на 30-ый кадр шестого слоя, жмём на правую кнопку мыши, вставляем ключевой кадр.

45it.png

Создаём классическую анимацию движения.

46it.png

Кликаем на 30-ый кадр, переходим в свойства. В стиле "альфа-канал" устанавливаем 0%.

47it.png

Сохраняем проект комбинациями клавиш CTRL+SHIFT+S и экспортируем flash ролик CTRL+ALT+SHIFT+S на свой компьютер.

Размер баннера составил 37,7 Kb.

Пример: http://wikiency.org/images/0/03/Ite.swf

Скачать исходник http://wikiency.org/fla/ite.fla