Создание баннера flash adobe
Разработка Flash-баннеров часто сопровождается несколькими файлами, фрагментированным кодом и запутанными временными рамками. Из этого туториала вы узнаете, как создать шаблон проекта, который послужит прочной основой, которая поможет быстро разработать надежные флэш-баннеры, что позволит вам сосредоточиться на воплощении креативной идеи в жизнь.
Шаг 1. Настройка структуры папок проекта
При создании нескольких флеш-баннеров хорошее управление файлами имеет важное значение для поддержания эффективности вашего рабочего процесса. Запустите шаблон вашего баннерного проекта, создав структуру папок, показанную ниже:
Шаг 2: Создание шаблона Photoshop
Теперь мы собираемся создать набор шаблонов Photoshop, которые будут использоваться при разработке рекламной кампании на флеш-баннере. (Если у вас нет Photoshop, не беспокойтесь, вы можете перейти к шагу 5). Интерактивное рекламное бюро поддерживает Руководство по рекламным блокам, в котором перечислены общие размеры рекламных блоков (баннеров). Для целей этого урока мы собираемся создать три наиболее распространенных:
- Широкий небоскреб (шириной 160 пикселей и высотой 600 пикселей)
- Средний прямоугольник (шириной 300 пикселей и высотой 250 пикселей)
- Таблица лидеров (728 х 90 х в высоту)
Давайте начнем с создания шаблона для широкого небоскреба. Откройте Photoshop и выберите «Файл»> «Создать». Настройте свойства для вашего нового документа Photoshop, как показано ниже:
Шаг 3: Добавление групп слоев
Чтобы слои в вашем файле Photoshop были такими же структурированными, как и папки вашего проекта, когда пришло время создавать дизайн баннера, мы добавим группы слоев в файл шаблона для хранения основных элементов дизайна.
Используя New Group из меню в правом верхнем углу панели Layers, создайте структуру Layer Group, показанную ниже:
Группа слоев «Фон» будет содержать элементы дизайна, которые всегда находятся на заднем плане вашего баннера, например, цвет или текстуру.
Группа слоев «Передний план» будет содержать элементы дизайна, которые всегда находятся на переднем плане вашего баннера, например логотип компании.
Шаг 4: Сохранить
Теперь ваш шаблон готов к сохранению. Перейдите в «Файл»> «Сохранить как» и перейдите к папке «design» в структуре папок вашего проекта. Назовите файл в соответствии с его размерами, в данном случае «160×600», и убедитесь, что он в формате Photoshop, с установленными слоями.
Это ваш первый фантастический шаблон флеш баннера! Повторите эти шаги для среднего прямоугольника (шириной 300px и высотой 250px) и таблицы лидеров (728px x 90px ростом). С этими шаблонами Photoshop мы готовы перейти к Flash.
Шаг 5: Создание вашего Flash проекта
Начнем с создания Flash-проекта, чтобы вы могли перемещаться по структуре файлов в Flash IDE. Откройте Flash CS4 (процесс очень похож во Flash CS3, хотя интерфейс Flash будет отличаться) и перейдите в «Окно»> «Другие панели»> «Проект». На панели «Проект» щелкните раскрывающийся список «Проекты» и выберите «Новый проект». Укажите имя проекта как «BannerTemplate».
Для корневой папки перейдите к папке / banner_template / development /, которую вы создали в шаге 1, используя значок папки. Убедитесь, что версия ActionScript установлена на ActionScript 3.0, и нажмите «Создать проект».
Шаг 6: папка классов проекта Flash
Теперь мы собираемся установить свойства Flash Project, чтобы помочь Flash выполнить работу по заглушению наших классов для нас. Щелкните раскрывающийся список со значком шестеренки в правом верхнем углу панели «Проект» и выберите «Свойства проекта». В поле «Сохранить классы» перейдите в папку / as /, созданную на шаге 1, и нажмите кнопку «ОК».
Шаг 7: Папка с баннером
Если вы выполнили последний шаг правильно, вы должны увидеть маленькие скобки кода теперь на значке / as / folder. Сейчас мы собираемся создать папку для всех классов, специфичных для наших шаблонов баннеров. Выберите папку / as / и щелкните значок новой папки в нижней части панели. В появившемся диалоговом окне назовите вашу папку «banner» и нажмите «OK».
Шаг 8: Базовый класс документа Banner
Теперь (наконец-то!) Вы готовы создать базовый класс документа для баннера. Если вы не знакомы с использованием классов документов (или классов в целом), рекомендуется сначала прочитать этот быстрый совет .
Выбрав папку / as / banner /, щелкните значок «Создать класс» в нижней части панели. В поле Class добавьте имя класса Banner после имени пакета banner. и нажмите Создать класс.
Теперь нам нужно взять заглушку этого класса и изменить ее на функциональный базовый класс документа. Добавьте к ActionScript, чтобы отразить код, показанный ниже:
Давайте быстро рассмотрим изменения, которые мы внесли в класс Banner:
- Импортирован класс MovieClip.
- Сделано, чтобы класс Banner расширял MovieClip (чтобы его можно было использовать в качестве класса документа).
- Сделано, чтобы функция инициализации документа Banner получала необязательный объект конфигурации, который мы можем использовать для передачи параметров.
- Создана публичная функция init (), которая выводит трассировку при вызове. Причина, по которой это удобно, будет объяснена, когда мы начнем создавать баннер .FLA.
Сейчас это мало что дает, но здесь важно создать структуру классов, которая позволит нам централизовать логику баннера, уменьшая повторение кода. Теперь мы можем расширить класс Banner для создания наших отдельных классов баннерных документов.
Шаг 9: Баннерные классы документов
Давайте начнем с файла класса для широкого небоскреба. Создайте класс «WideSkyscraper» в своей папке Flash-проекта / as / banner /, как вы делали это для класса «Banner». Возьмите сгенерированный код заглушки класса и добавьте к нему, чтобы он выглядел так:
Давайте рассмотрим изменения, которые мы внесли в класс WideSkyscraper:
- Сделано, чтобы класс WideSkyscraper расширял Banner.
- Вызывается функцией документа базового класса Banner с помощью super () в функции документа WideSkyscraper.
- Переопределите базовую функцию init () класса Banner пользовательской функцией init (), которая при вызове выводит трассировку, а затем вызывает функцию init () класса Banner.
Теперь повторите этот шаг, чтобы создать классы баннерных документов для MediumRectangle и Leaderboard. После этого наша структура класса документа уже создана.
Шаг 10: Создание вашего баннера .FLA
Теперь мы можем начать создавать нужные нам файлы .FLA. Опять же, давайте начнем с создания шаблона для широкого небоскреба (160×600).
Откройте Flash CS4 и выберите «Файл»> «Создать». Выберите «Flash File (ActionScript 3.0)» в качестве Типа и нажмите «ОК». На панели «Свойства» измените параметры публикации и свойств, как показано ниже:
Теперь сохраните ваш файл как «160×600.fla» в папке / development / вашего проекта.
Шаг 11: установка относительного исходного пути
Теперь мы собираемся установить относительный исходный путь и относительный путь публикации. Это становится важным, когда вы хотите сделать копию своего шаблона шаблона баннера, переименовать его и начать работать, или когда вы хотите передать шаблон кому-то еще. Абсолютные пути могут быть реальной проблемой для обновления (особенно для нескольких файлов!) Каждый раз, когда вы хотите начать проект.
Чтобы установить исходный путь, выберите «Файл»> «Параметры публикации» и перейдите на вкладку «Flash». Теперь нажмите кнопку «Параметры» рядом с раскрывающимся списком «Сценарий», чтобы открыть окно «Дополнительные параметры ActionScript 3.0». Убедитесь, что Source Path является активной вкладкой, и нажмите «+», чтобы добавить путь «./as». Теперь вы можете добавить текст «banner.WideSkyscraper» в поле «Класс документа». Ваше окно должно выглядеть так:
Шаг 12: установка относительного пути публикации
Чтобы задать путь публикации, выберите «Файл»> «Параметры публикации» и перейдите на вкладку «Форматы». Нам не нужен файл HTML, поэтому снимите этот флажок. В пути публикации для SWF выберите папку / www / в папке вашего проекта, как показано ниже. Если все выглядит правильно, нажмите ОК. Ваш скомпилированный SWF-файл теперь будет помещен в папку / www / при предварительном просмотре или публикации.
Есть немного больше информации об этом в этом скринкасте Quick Tip .
Шаг 13: Основной график
По некоторым причинам некоторые системы показа рекламы требуют, чтобы первый кадр вашего фильма был пустым (например, Eyeblaster ), или импортировали свои классы / включали свой ActionScript в первый кадр. Часто расширения Flash, которые вы можете установить для этих систем показа рекламы, откажутся упаковать ваш файл, если вы не будете соблюдать это условие.
Именно здесь появляется функция init (), которую вы создали ранее в своем классе документов. Чтобы обеспечить возможность использования нашего шаблона в этой ситуации, мы собираемся создать временную шкалу из двух кадров с пустым первым кадром, второй – с остановкой. действие и вызов функции init (), как показано ниже:
Если вы сейчас скомпилируете этот файл, вы должны получить на панели «Вывод» следующее, подтверждающее, что ваш класс документов WideSkyscraper и базовый класс документов Banner работают:
Современный интернет сложно представить без Flash-анимации. Сегодня практически на каждом сайте размещены Flash-баннеры, которые поражают разнообразием форм и анимационных эффектов. В этой статье вы узнаете, как можно самостоятельно создать красочный Flash-баннер, сэкономив время и деньги.
Программы для создания Flash-баннеров
Узнайте о наиболее популярных способах создания Flash-баннеров и определите, какой из них подходит именно вам.
Создание Flash-баннера в Adobe Flash
Adobe Flash – самая известная на сегодняшний день платформа для создания Flash-баннеров. Но на практике создание баннера в Adobe Flash оказывается непростой задачей.
Данный метод обладает массой недостатков. Вот некоторые из них:
- Для создания полнофункционального баннера в Adobe Flash необходимо знание языка Action Script
- Flash-баннер представляет собой сложную структуру, состоящую из нескольких слоев, на каждом из которых может быть реализована независимая анимация
- Большинство уроков по работе в Adobe Flash составлены для англоязычной версии программы
Таким образом, если вас интересует быстрое создание Flash-баннеров, то этот способ вам не подходит.
Создание Flash-баннера в iSpring Converter Pro
Microsoft PowerPoint – очень простая в использовании программа для создания презентаций, которая установлена практически на каждом компьютере.
Программа iSpring Converter Pro позволяет в один клик сконвертировать PowerPoint в формат Flash, с сохранением анимации и всех эффектов переходов. Таким образом, за минимум времени вы получите Flash-баннер с большим количеством визуальных эффектов.
Основное преимущество использования данного способа заключается в том, что для создания баннеров вам не нужны специальные знания и навыки. Вам только необходимо уметь создавать презентации в PowerPoint и конвертировать PowerPoint во Flash (об этом вы узнаете в данной статье).
Создание Flash-баннера в PowerPoint с помощью iSpring Converter Pro
Познакомьтесь с инструкцией по созданию баннеров в Microsoft PowerPoint. Для конвертации баннеров в формат Flash вы можете воспользоваться бесплатной пробной версией iSpring Converter Pro.
1. Создание Flash-баннера в PowerPoint
Для начала создайте простой баннер в PowerPoint или скачайте готовый пример баннера.
Настройте размеры презентации:
- Перейдите на вкладку Дизайн, нажмите Размер слайда - Настроить размер слайда. В нашем примере размеры баннера будут 468 x 60, установите соответствующие размеры для слайда PowerPoint.
- Выберите Произвольный размер слайдов из выпадающего меню.
- Установите Ширину 46,8 см.
- Установите Высоту 6,0 см.
- Нажмите OK.
Теперь добавьте новые слайды и текст и дополните баннер анимациями и эффектами переходов между слайдами.
2. Установка автоматических переходов между слайдами
После того как вы сделали баннер, его необходимо подготовить для публикации в формат Flash.
Сначала нам необходимо настроить презентацию так, чтобы переход на следующий слайд осуществлялся автоматически через 5 секунд.
3. Добавление в баннер ссылки на сайт
Пока наш баннер представляет собой набор анимированных слайдов, тогда как нам необходимо, чтобы при клике по баннеру пользователь переходил на сайт.
4. Публикация баннера во Flash
Теперь баннер готов к преобразованию в формат Flash.
Баннер будет сконвертирован во Flash-ролик (файл с расширением .SWF). Теперь осталось только добавить его на веб-страницу.
В посте “Как создать Flash-баннер” мы научились создавать баннеры в PowerPoint с помощью iSpring Presenter 7. В этом посте встроим готовый Flash-баннер на страницу сайта с помощью iframe.
iframe – это технология (“плавающий” фрейм), которая позволяет в определенном окне веб-страницы отображать содержимое другой страницы, в том числе, и с других сайтов. Это может быть видео с YouTube, html-документ, flash-объект и др.
Как создать iFrame?
Делается это достаточно просто:
1. Это шаблон кода:
[box style=’doc’] [/box]
iframe имеет несколько атрибутов:
- width – ширина объекта (в нашем случае баннера)
- height – высота объекта
- scrolling – полоса прокрутки. Может принимать несколько параметров: auto – появляется автоматически при необходимости, no – не появляется, yes – появляется всегда
- frameborder – отображение границы объекта (баннера): 1 – отображать, 0 – нет (посетители сайта не смогут растягивать границы встроенного объекта при помощи мыши).
2. Ваши действия:
- Загружаем получившийся flash-баннер на сайт или в удобное для вас файлохранилище.
- Запоминаем адрес, по которому этот баннер доступен.
- Этот адрес вставляем в код iFrame.
- Указываем размеры Flash-баннера (ширину и высоту).
3. Пример готового кода с указанием адреса SWF-файла:
4. Получившийся код копируем и вставляем на страницу сайта или блога. Код встраивается в режиме редактирования (HTML).
После сохранения страницы баннер будет доступен посетителям вашего сайта.
Баннер, добавленный в пост блога:
Встраиваем баннер на страницу сайта (Блоггер):
Система дистанционного обучения для бизнеса
Поставит на автопилот развитие сотрудников.
Быстрый старт онлайн‑обучения за 1 день.
Также необходимо понимать, что для создания привлекательного баннера нужно уметь работать с графическими редакторами. Так как без графических заготовок трудно будет создать баннер, привлекающий взгляд посетителя сайта.
Поэтому заказывая баннер, вы платите, прежде всего, за его дизайн. Также для каждого баннера разрабатывается план-схема, как будут различные элементы отображаться. И уже после этого всё задуманное реализуется технически.
В отличие от обычных анимированных баннеров в формате gif, флеш баннеры позволяют создать более яркие эффекты, которые очень красиво смотрятся. Хотя я всё же отдаю предпочтение баннерам в формате gif. Кому интересно почему, поделюсь в комментариях.
А ещё есть баннеры в формате html5, которые можно создать в бесплатном редакторе Google Web Designer. Эти баннеры тоже эффектно смотрятся.
Материал статьи достаточно объемный, поэтому сразу предлагаю посмотреть видеоурок, так будет легче разобраться с материалом.
Что необходимо для самостоятельного создания флеш баннера.
- Прежде всего, вам понадобится программа или оплаченный аккаунт в сервисе по созданию баннеров. В качестве примера программного обеспечения рассмотрим две программы Adobe Flash Professional и Aleo Flash Intro Banner Maker.
Adobe Flash Professional является законодателем моды. Потому как именно компания Adobe разработала технологию flash – создания анимированной графики на основе векторных изображений. В этой программе можно создать очень красивые и в то же время очень сложные анимированные сюжеты. Нужно лишь начать изучать эту программу и с каждым днём у вас будет получаться всё лучше и лучше.
Aleo Flash Intro Banner Maker я выбрал не просто так, в отличие от законодателя моды, эта программа позволяет создавать баннеры в считаные минуты. Достаточно переключаться от раздела к разделу и выбирать подходящие эффекты.
- Также понадобятся графические заготовки. Эти элементы вы можете подготовить в графическом редакторе. А можете найти и на просторах интернета.
- И третий момент, который нельзя забывать – это наличие плана. Хорошо продуманный план позволит создать привлекательный баннер, который сможет привлечь внимание посетителей.
Создание флеш баннера в Adobe Flash Professional.
Это очень мощный инструмент для создания flash анимации. Впрочем, эта программ так же, как фотошоп выделяется на фоне конкурентов. Оно и понятно, обе программы созданы одной компанией.
Программа платная, но можно установить 30 дневную бесплатную версию. Чтобы скачать последнюю версию программы, нужно перейти на официальный сайт Adobe и зарегистрироваться в Creative Cloud, нажав по ссылке «Бесплатная пробная версия». После регистрации программа автоматически скачается и будет готова к работе.
Регистрационная форма очень простая.
Запустив программу нужно выбрать тип рабочего документа. Так как в дальнейшем в баннере будет ссылка, то сразу можно выбрать «ActionScript 3.0».
Далее, нужно указать размеры будущего баннера. Для этого на вкладке «Свойство» задайте параметры ширины и высоты.
Для того чтобы добавить изображения в баннер просто перетащите нужное изображение из «Проводника» в рабочую область программы. Только создавайте отдельные слои для каждого изображения. Так будет проще в дальнейшем работать с каждым элементом баннера.
Разместив все элементы баннера, можно приступать к созданию анимации (движения). В одном уроке невозможно показать всех возможностей, поэтому разберём создание простых движений.
К примеру, я хочу, чтобы стрелка на фоновом изображении появлялась из-за границ баннера.
Для этого графический элемент помещается за пределы баннера, после на нём нужно нажать правую кнопку мышки и выбрать пункт «Создать анимацию движения».
Перемещая графический элемент на исходное место в границах баннера, вы создаёте движение. Траектория движения появится на изображении. Её можно менять, изменяя положение точек.
Подобные манипуляции проделываете и с остальными элементами баннера. Время отображения эффекта вы меняете на временной шкале.
Для того чтобы элемент появился в баннере и продолжал оставаться на виду, пока появляются следующие элементы нужно «Добавить пустой ключевой кадр», нажав правую кнопу мышки на временной шкале данного элемента.
После того как все элементы настроены. Нужно добавить ссылку. В качестве примера рассмотрим создание кнопки и добавление ссылки.
Итак, выбираем изображение кнопки и на закладке «Свойства» задаём название, выбираем тип «Кнопка».
Теперь пришло время для создания ссылки. Для этого устанавливаете курсор на первый кадр кнопки и нажимаете F9. В открывшемся окне, жмём на кнопку «Фрагмент кода». В следующем окне, жмём на папку «ActionScript» — «Действия» — «Нажмите для перехода к веб-странице».
Появится уже готовый код, в котором нужно заменить ссылку. Меняете и закрываете эти окна.
Проверяете работу баннера Ctrl+Enter. И если всё вас устраивает. Можно публиковать баннер.
Для того чтобы сохранить баннер и опубликовать его отрываем пункт меню «Файл» — «Параметры публикации». Далее, выбираете форматы баннера и изображений, папку для сохранения и задаёте имя баннера. После чего жмёте на кнопку «Опубликовать».
Всё баннер готов и его можно вставлять на сайт. Но об этом после обзора второй программы, в конце статьи.
А так выглядит баннер, который я сделал в качестве примера:
Создание флеш баннера в Aleo Flash Intro Banner Maker.
Данный программный продукт платный. Полная версия стоит 39,95$. Но, вы можете скачать и пробную версию. Подробная информация на официальном сайте, здесь.
Если вам необходимо создавать простые flash баннеры, то это то, что вам нужно.
Скачав пробную версию, после установки программы, при запуске будет появляться окно с предложением купить или зарегистрировать вашу копию. Для начала работы с программой нужно нажать на кнопку «Continue Evaluation». Для оценки возможностей программы у вас есть 30 дней.
Далее, перед вами откроется окно программы и рядом окно с предварительным просмотром готового баннера.
Первым делом нужно выбрать размер баннера. Для этого переходите в раздел «Size and sound», где задаёте параметры ширины и высоты в пикселях.
В этом же разделе вы можете задать параметры бордюра, установить фоновую музыку и указать качество графических изображений.
Далее, нужно сделать фон для баннера. Для этого открываете раздел «Background», где можно отключить фон, выбрать однотонную или градиентную заливку. А также выбрать изображения, которые будут представлены фоном для баннера.
Для выбора графических изображений нужно нажать на кнопку «Add». Изображений может быть несколько. Также в этом разделе вы можете настроить и позицию каждого изображения.
Если вы желаете создать анимационный эффект для фона, то переходите в раздел «Effect», где можно выбрать один или несколько эффектов для фона. Смотрятся они довольно эффектно.
Если эффекты вам не нужны, просто уберите галочку «Add background effect» и эффекты исчезнут.
Следующий раздел «Text, image and SWF» позволяет добавлять в баннер текст, изображение и другие анимации. Для добавления необходимого элемента нужно нажать на соответствующие кнопки «Add image», «Add text», «Add SWF».
После добавления элемента к нему можно применить настройки форматирования, добавления эффектов, позиционирования, вставки ссылки и определение временных параметров.
Ссылку вы можете добавить на один из элементов баннера, для этого в настройках элементов есть специальная закладка «Web link», а также можете прикрепить ссылку на весь баннер. Сделать это можно в разделе «Web Links».
На выбор представлено два варианта, ссылка срабатывает по клику и после проигрывания анимации. Но я всё, же предпочитаю закреплять ссылку за графическим элементом, таким как кнопка.
После того как элементы баннера настроены и ссылка добавлена, можно переходить к публикации баннера. Для этого открываете раздел «Publish to Banner». И нажимаете на кнопку «Publish». Далее, нужно выбрать формат баннера, в нашем случае это SWF. Остальные параметры можно не трогать, они настроены оптимально. И для получения баннера нажимаете на кнопку «ОК».
Сразу после публикации вы увидите готовый баннер и получите код для вставки на сайт. Правда, этот код можно сократить в два раза. И далее я покажу как.
И вот готовый баннер:
Установка флеш баннера на сайт WordPress
После того как баннер готов, есть файл в формате SWF. Можно приступать к размещению баннера на сайте.
Первым делом нужно загрузить файл с баннером на ваш хостинг. Сделать это можно через файловый менеджер хостинга или через ftp-соединение.
Примечание: при загрузке через административную панель WordPress появляется ошибка «Извините, тип этого файла не разрешён из соображений безопасности». Поэтому загружайте одним из вышеуказанных способов.
Загрузив файл можно приступать к размещению баннера. Баннер можно разместить в любом месте сайта, всё зависит от ваших навыков. Но наиболее распространённые места это шапка сайта, подвал, сайтбар и контент. Кстати, в статьях на рекламу кликают гораздо чаще, чем за её пределами.
Итак, для размещения баннера вам потребуется один из этих кодов:
Вы должны изменить путь к файлу баннера и указать размер. В примере эти места выделены оранжевым цветом.
Если вы размещаете баннер в статье, то делайте это через вкладку «Текст».
Итак, друзья теперь вы знаете, как самостоятельно создавать flash баннеры для сайта. И если вам часто приходится задумываться о создании таких баннеров или вы их просто заказываете, то подумайте, за стоимость одного баннера вы можете приобрести программу и делать эти баннеры самостоятельно.
А у меня на этом сегодня всё, статья получилась объемная. Некоторые мелочи, которые не описал в статье, я раскрыл в видеоуроке. Ну и, конечно же, если будут вопросы, задавайте их в комментариях. Всем желаю удачи и до встречи в новых статьях и видеоуроках.
В Google Chrome с 1 сентября этого года, по умолчанию включена настройка приостанавливать показ flash контента. Пользователь сам решает, будет он просматривать такой контент или нет.
Также AdWords в настоящее время поддерживает только Adobe Flash Player версий 4–10.1. Другие версии не загружаются.
А тут ещё и проблемы отображения flash-контента на мобильных устройствах.
И, выходит, что появилась необходимость конвертировать баннеры flash в html5. Так, например, рекламные сети AdWords и DoubleClick сами конвертируют баннеры SWF (флешь) в HTML5. Директ, кстати, тоже не отстаёт.
Конечно, не все анимированные баннеры флешь поддаются конвертации. Сложная анимация, конвертации, пока, не поддаётся.
Поэтому лучше, конечно, изучать Google Web Designer и сразу создавать красивые баннеры в формате html5.
Но, если вам всё, же нужно переделать баннер flash, то я расскажу, как это сделать.
Где конвертировать FLASH?
Google специально разработал сервис – Swiffy, который поможет определить можно ли ваш баннер конвертировать, а если да, то и скачать готовый баннер html5.
Использовать этот сервис можно либо напрямую в интернете, либо как расширение для Flash Professional.
Пользоваться сервисом довольно просто. Всё делается буквально в три действия.
В качестве альтернативы есть несколько программных продуктов позволяющих решить эту задачу. Но, они все платные и вряд ли оправдают вложения. И зачем они, если есть бесплатный сервис swiffy.
Как с помощью сервиса Swiffy конвертировать flash-баннер.
Первым делом переходите на страницу сервиса и нажимаете по ссылке «UPLOAD NOW».
Далее, выполняете три простых шага.
- Выбор файла flash. Вам нужно выбрать файл в формате SWF и размер его не должен превышать 1Мб (мегабайт).
- Установите чек-бокс, подтверждающий согласие с условиями использования сервиса.
- Жмёте кнопку «UPLOAD».
Если ваш баннер не содержит сложной анимации, то вы увидите предпросмотр готового баннера в формате HTML5. Время жизни такого предпросмотра — 15 минут. После чего ссылка перестаёт работать.
Для просмотра результат в отдельном окне можно нажать на кнопку «VIEW CONVERSION».
А теперь самое интересное. Нужно сохранить полученный результат в виде html страницы.
Для этого нажимаете правую кнопку мышки на кнопке «VIEW CONVERSION» и в контекстном меню выбираете пункт «Сохранить объект как…» или «Сохранить ссылку как…», зависит от браузера.
Вот и всё, баннер сконвертирован из flash в html5 и его можно использовать на любых сайтах.
Памятка: схема размещения баннера html5 на сайте
— загрузите файл на хостинг;
— вставьте код фрейма
Измените ссылки и имя файла, а также идентификатор в соответствии с размерами баннера.
— В таблицу стилей вставьте стили выравнивания для блока ДИВ и настройки фрейма.
А теперь предлагаю посмотреть видеоурок для закрепления материала, где вы увидите процесс конвертирования и размещения баннера html5 на сайте.
На этом сегодня всё. До встречи в новых видеоуроках и статьях. Желаю вам успехов, друзья.
Читайте также: