Матвей Земсков

Заметки веб-мастера

Среда, 19 сентября 2012 13:51

Создание flash-баннера в программе KoolMovies

Оцените материал
(1 Голосовать)

Темой этого поста будет создание flash-баннера без использования программы Adobe Flash. Adobe Flash очень хорошая программа для разработки серьезных приложений и сайтов, для моей задачи подойдет более простое приложение. Я выбрал KoolMovies – в этом приложении можно создавать анимацию в формате Flash. создавать анимацию в формате Flash.

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

Создание баннера в KoolMovies. Кадры

Вообще-то программа KoolMovies – не бесплатная, но существуют ее бесплатные аналоги. Например, пока я писал эту статью, нашлись 2 бесплатные программы для создания flash-анимации: ”Vectorian Giotto” и Synfig Studio. Кроме того, существуют онлайн инструменты для создания баннеров. Правда, в основном с помощью них можно создавать баннеры определенного размера (например, 468×60 пикселей).

После установки и запуска программы нужно настроить ее под себя. Предлагаю выбрать “Advanced User Interface”, а также активировать окно ”Movie overview”, находящееся в меню “View”.

Создание баннера в KoolMovies.Интерфейс программы

Для начала работы нужно создать новый файл и настроить размер будущего баннера. Это делается с помощью ”Movie”→“Movie Width/Height”. Например, я буду создавать баннер размером 220×275 пикселей.

Перед тем, как начать создавать баннер, я подготовил кадры для него с помощью графического редактора. Мой баннер будет состоять из трех кадров. При клике на баннер АО время показа первого кадра пользователь будет отправлен на yandex.ru, на втором кадре – на google.ru и на третьем на mail.ru.

Добавляем кадры в баннер. Для этого нудно зайти в меню ”File”→”Import”, выбрать тип файла и указать путь к нему, предварительно создавая новые кадры (”Frames”→”Add Blank Frame”). Эту операцию нужно будет сделать для каждого файла (кадра).

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

Затем нужно установить время смены кадров баннера. Для этого нужно выбрать нужный кадр и нажать на кнопку с часиками, находящуюся в правом нижнем углу окна.

Создание баннера в KoolMovies. Добавление новых кадров

Я сделаю так, чтобы кадры сменялись через 2 секунды. Для того, чтобы проигрывание баннера зациклилось, нужно выбрать пункт ”Loop Movie” в меню “Movie”.

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

Для этого выбираем по очереди каждый кадр баннера в окне ”Movie Overview” (пункт Shapes) и вызываем его свойства (правый клик → properties). В появившемся окне выбираем пункт ”Is a button” → “Yes”.

Создание баннера в KoolMovies. Превращаем кадр в кнопку

После этого вид окна свойств меняется, в нем появляются новые опции.

Создание баннера в KoolMovies. Свойства

Меня интересует пункт ”Actions”. Кликаем левой кнопкой по слову ”none” в пункте ”Actions”. Появляется небольшое окно, в котором можно «прикреплять» различные действия к активному кадру. Например, можно сделать переход к определенному кадру, добавить переход по ссылке или создать произвольный ActionScript. Меня интересует именно, переход по ссылке, поэтому выбираю пункт ”Go to URL (URL Link)” из выпадающего меню, которое появляется при нажатии кнопки со знаком «+». Появляется окно для ввода адреса, по которому будет совершаться переход при клике на кадре.

Создание баннера в KoolMovies. Указываем url

После ввода адреса и нажатия кнопки ”OK”, к кадру прикрепляется ссылка. Аналогичные действия нужно произвести с остальными кадрами. Баннер практически готов. Осталось только сохранить его в формате Flash (.swf).

Для этого заходим в меню “File”→”Export/Publish Movie”→”as SWF (Flash Movie)” и сохраняем файл. В итоге получился баннер, как и задумывалось в начале статьи.

Прочитано 3977 раз

Добавить комментарий


Защитный код
Обновить

Мои услуги

Предлагаю следующие услуги:

  • Верстка шаблона сайта из дизайн-макета для CMS «1С-Битрикс Управление сайтом» и CMS “Joomla”
  • Создание форм различной сложности (обратная связь, анкеты и тп) для указанных CMS
  • Настройка и кастомизация компонентов и модулей для указанных CMS
  • Доработка модулей и компонентов для указанных CMS, добавление нестандартного функционала
  • Разработка лендингов (landing-pages)

По все вопросам обращайтесь через форму обратной связи

Скачать

Предлагаю вашему вниманию: