Вакансии
Игродельня
Сегодня
19 января 2020
19:47
Вход Регистрация Забыли пароль ?

Skyscraper of Doom | ZX Spectrum | quest game | Rafal Miazga, 2009
Skyscraper of Doom | ZX Spectrum | quest game | Rafal Miazga, 2009 Автор(ы): Rafal Miazga
подробнее...

Теги

сайты, игры, дизайн, продвижение, php, html, css, my sql, c++, delphi, photoshop, 3ds max, fl studio, трекерская музыка, уроки

Статьи сайта

webinformatic - статья Тимонина Андрея - Flash. Hello world.

webinformatic - статья Тимонина Андрея - Flash. Экспорт SWC библиотеки.

webinformatic - Тимонин Андрей - Несколько слов о себе

webinformatic - статьи Тимонина Андрея - уроки из области веб программирования, создания казуальных игр

webinformatic - статья Тимонина Андрея - Обеспечиваем доступ к объекту из любой точки программы. Singleton

webinformatic - статья Тимонина Андрея - Хронология работы программы. Создаем Лог

webinformatic - статья Тимонина Андрея - Поиск файлов. Получаем список файлов каталога.

webinformatic - статья Тимонина Андрея - Исключения. Создаем класс обработки исключений.

webinformatic - статья Тимонина Андрея - States. Создаем менеджер состояний игры.

webinformatic - статья Тимонина Андрея - Регистрация. Часть 1. Создаем страничку регистрации на сайте.

webinformatic - статья Тимонина Андрея - Регистрация. Часть 2. Создаем обработчик, и заносим информацию о пользователе в Б.Д.

webinformatic - статья Тимонина Андрея - Таймер. Выводим время игры.

webinformatic - статья Тимонина Андрея - DirectX9. Создаем основной класс обработки графики.

webinformatic - статья Тимонина Андрея - DirectX9. Создаем первое приложение.

webinformatic - Что нужно знать для создания сайта ? float - использование в css - стилях

webinformatic - Уроки Fruity Loops Studio (FL Studio) - урок 2 - пишем свою композицию COLD

webinformatic - Уроки Fruity Loops Studio (FL Studio) - урок 3 - экспериментируем с композицией COLD

webinformatic - Что нужно знать для создания сайта ? Стандартные шрифты для сайта

webinformatic - Что нужно знать для создания сайта ? ASC II Коды символов

webinformatic - Уроки Fruity Loops Studio (FL Studio) - урок 4 - пишем первый вариант композиции COLD

webinformatic - Популяризация Современных Научных Знаний и Размышления на околонаучные темы. СОДЕРЖАНИЕ

webinformatic - Популяризация Современных Научных Знаний и Размышления на околонаучные темы. Энергетический кокон

webinformatic - Модуль галерей для любой cms

webinformatic - Портфолио выполненных проектов сайтов и приложений

webinformatic - Мои Музыкальные Миры - страница 2

webinformatic - megainformatic cms rs

webinformatic - модуль Падающий снег

webinformatic - проект Open Shop

webinformatic - Рисуем красивую девушку всего за 6 шагов

webinformatic - Галерея красивых рисованных девушек

webinformatic - НОВОГОДНЕЕ ОБРАЩЕНИЕ СОЗДАТЕЛЯ webinformatic К ЖИТЕЛЯМ ПЛАНЕТЫ интернет

webinformatic - Отзывы оставленные пользователями как впечатление о проделанной работе или что-либо понравившееся на сайте

webinformatic - Уроки css - атрибут position

webinformatic - Ива Ден энд КуХа - КОДЕКС ФРИЛАНСЕРА - СОДЕРЖАНИЕ

webinformatic - Ива Ден энд КуХа - КОДЕКС ФРИЛАНСЕРА - Глава 1 - Обычный день

webinformatic - Ива Ден энд КуХа - КОДЕКС ФРИЛАНСЕРА - Глава 2 - Начало (begin)

Новогодняя дискотека 2013 на megainformatic точка ru

webinformatic - Программируем на C++ с использованием MFC

webinformatic - Программируем на C++ с использованием MFC - Создание MFC приложения

webinformatic - Программируем на C++ с использованием MFC - Создание MFC приложения - hello, world !

webinformatic - Как создать игру ? - Пишем игровой движок с нуля

webinformatic - Как создать игру ? - Пишем игровой движок с нуля - Вступление

webinformatic - Как создать игру ? - Пишем игровой движок с нуля - Общая структура будущего игрового движка

Разное

webinformatic - Как создать игру ? - Пишем игровой движок с нуля - DXUTMainLoop - цикл работы DirectX-приложения

webinformatic - Варианты макетов Психолог 911

webinformatic - Шаблоны для сайтов - что это и какие они бывают ?

webinformatic - Ива Ден энд КуХа - КОДЕКС ФРИЛАНСЕРА - Глава 3 - Кто он ? (who is ?)

webinformatic - Мои Музыкальные Миры - готовая музыка mp3 - новинки 2013 года

webinformatic - Теория и практика хакерских атак - самозащита от нападения

webinformatic - Теория и практика хакерских атак - самозащита от нападения - Способы подмены реального IP

webinformatic - Fruity Loops Studio 9 - Как синтезировать свои сэмплы - изучаем возможности плагина Sytrus

webinformatic - Видоизменяем тему для Wordpress под свои нужды

webinformatic - Flash приложения и игры - Шаг 3 - управляемый шарик

webinformatic - Учимся создавать флеш-игры, что нужно знать для того, чтобы заняться созданием flash приложений и игр ?

webinformatic - Шаг 4 в освоении Flash-технологий - как анимировать персонажа и управлять им

Как создаются flash баннеры ?

К содержанию

Некоторое время назад, я не интересовался темой Как создать флеш-баннер ?, однако пришел момент, когда возникла задача по созданию анимированного флеш баннера и мне пришлось освоить азы этой технологии.

В первую очередь вам понадобится программа Adobe Flash CS5 или более свежих версий.

Далее надо подготовить изображения, которые вы будете использовать внутри вашего флеш-баннера.

После того как изображения подобраны, сценарий флеш-баннера (что и в каком порядке и виде будет показано) примерно известен, можно приступать к его созданию.

В среде Flash CS5 (или других версий, далее просто Flash CS для краткости), создаем новый проект

1) Файл > Создать > Action script 2.0 (можно выбрать и 3.0), но 2.0 гарантированно будет работать у большинства пользователей.

После появления пустого белого листа на экране, кликаем по нему правой кнопкой мыши и выбираем свойства документа. К примеру нам нужен баннер 468 х 60 пиксель. Тогда зададим соответствующие ширину и высоту.

новый баннер 468 на 60 пиксель

Нажмём ОК.

Сценарий нашего баннера будет предельно прост. На нём будет постепенно появляться и исчезать вот такая картинка -

привет я ваш баннер

2) Для этого импортируем данную картинку в наш проект flash.

Файл > Импорт > Импортировать в библиотеку

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

Окно > Библиотека (ставим галочку, чтобы панель отобразилась)

библиотека флеш проекта

В окне библиотеки видим только что импортированную нами картинку, а также некий объект Символ 1.

Символы - это специальные объекты, которые представляют экземпляр импортированных объектов (в нашем случае - картинку), а название Символ 1 создано автоматически. Поэтому дайте такое название, чтобы было понятно.

Дважды кликните фразу Символ 1 и впишите например hello.

Символы - это внутренний формат любых объектов проекта флеш. К символам применяются трансформации, которые позволяют анимировать объекты путём перемещения, изменения размеров, цвета и другие эффекты, причём воздействие происходит не на сам объект (например картинку), а на его экземпляр, т. е. символ. Тем самым удается сократить размер флеш-файлов, а также применять различные операции к уже созданным символам (например копирование), что делает их универсальным инструментом.

Тем, кто еще только осваивает азы флеш, применение символов может показаться чем-то ненужным. Однако это основное правило - сначала преобразовывать любые импортированные объекты в символы, а затем уже перемещать их в сцену и применять к ним анимации различных трансформаций.

В первую очередь преобразуем наш символ hello в тип Фрагмент ролика (Movie clip).

символ фрагмент ролика Movie clip

Для этого в панели библиотеки выберите символ hello, правой кнопкой, свойства и в качестве ТИПа задайте Фрагмент ролика.

Для импортированных прямо в рабочую среду объектов можно выполнять преобразование клавишей F8 (пока импортированный объект является текущим). Это приведет к появлению аналогичного окна. А вот сам импортированный объект продолжит находиться в пространстве рабочей среды.

3) Выполнение анимации.

Анимацию каждого объекта выполняйте на отдельном слое. Это удобнее во всех отношениях, позволяя логически изолировать объекты друг от друга, а также легче манипулировать ими при выборе или внесении необходимых изменений.

Таким образом для фона создаем отдельный слой, например bg, а для объекта hello - отдельный, можно также назвать его hello.

символ фрагмент ролика Movie clip

Слои - это прозрачные пленки, которые расположены друг над другом. Слой bg располагается под слоем hello, поэтому если мы например поменяем содержимое слоя bg (фона), то оно никак не отразится на слое hello, а будет играть роль его фона. Если же слой bg скрыть или переместить выше слоя hello, то можете сами увидеть к каким это приведет изменениям. (В данном случае пока ни к каким, т. к. слой hello у нас пока пуст).

Сделайте текущим слой hello и перенесите символ hello в рабочее пространство (белый прямоугольник).

добавление символа в сцену рабочей среды flash проекта







Расположение объекта (символа hello) в сцене можно задать более точно через свойства:

Для этого правой кнопкой кликаем символ hello в сцене и выбираем пункт ПРАВКА.

редактирование символа во flash проекте

После этого можно вызвать свойства объекта и на вкладке СВОЙСТВА задать нужные координаты.

задать нужные координаты символа во flash проекте

Вы также заметите, что у символа может быть своя сложная структура - свои слои и свои вложенные символы, вставленные из библиотеки проекта.





Чтобы вернуться к работе в основной сцене выбираем МОНТАЖНЫЙ КАДР 1.

вернуться к основной сцене flash проекта

Теперь создадим анимацию постепенного появления, а затем исчезновения символа hello.

3.1) Выберем слой hello. (Шаг 1 на рисунке)

3.2) Кликнем по символ hello в этом слое, вокруг него должна появиться голубая рамка и кружок в центре. (Шаг 2 на рисунке)

3.3) Выполним вставку анимации - ВСТАВКА > Классическая анимация. ВАЖНО чтобы символ hello являлся выбранным !!! Иначе команда будет неприменима. (Шаги 3 и 4 на рисунке)

вставка анимации в символ flash проекта

После этого вы будете иметь анимацию примененную к символу hello. Остается только создать сценарий для этой анимации, т. е. покадровое изменение.

Во временной шкале слоя hello вы можете видеть черный жирный кружок, который появился в сцене в данном кадре, когда вы первый раз перенесли символ hello в сцену рабочей среды. Этот кадр является первым и ключевым.

Чтобы создать анимацию перемещения символа из одного положения в другое нужно выполнить следующие шаги:

Во временной шкале найти кадр, который будет последним, пусть это будет 24 кадр. Тогда сделаем его ключевым - кликнем правой кнопкой и вставим его в данную позицию. ОБРАТИТЕ ВНИМАНИЕ !!! Обязательно должны быть текущими слой hello и символ hello (как в пунктах 3.1 и 3.2)

вставка ключевого кадра анимации в цепочку анимации символа во flash проекте

Вы увидите появление анимационной цепочки в виде -

цепочка анимации символа между двумя ключевыми кадрами во flash проекте

Остается создать анимацию, для начала пусть наша надпись будет исчезать с экрана путём перемещения за его пределы.

Для этого нам достаточно оставаясь на выделенном ключевом кадре 24 слоя hello, при выделенном символе hello и используя инструмент СТРЕЛКА (черная стрелка), навести указатель мыши на символ hello в сцене и нажав и удерживая нажатой левую кнопку мыши перенести символ hello за пределы рабочей области в любом направлении. Например так -

анимация перемещения во flash проекте

Теперь остается нажать клавишу ENTER для воспроизведения полученной анимации.

Также вы можете использовать комбинацию клавиш [Ctrl] + [Enter] чтобы увидеть как будет работать ваш flash-баннер.

Что касается анимации путём изменения положения символа в сцене - думаю тут всё понятно, другие анимации - масштабирование, изменение прозрачности, цвета и других свойств осуществляются по аналогии. Т. е. обязательно нужно иметь вставленную анимацию и пару ключевых кадров, между которыми происходит данная трансформация.

Нашей задачей было сделать постепенное появление, а затем исчезновение надписи.



Для этого используется свойство альфа. Давайте отменим сделанную нами анимацию перемещения - ПРАВКА > ОТМЕНИТЬ ... и отменяйте действия пока не появится ОТМЕНИТЬ ПЕРЕМЕСТИТЬ. Это действие также отмените.

Теперь если вы еще до сих пор не сохраняли ваш проект - сохраните его. Например под именем banner_468x60_v1.fla

Выберите символ hello на слое hello (как описано в пунктах 3.1 и 3.2 см. выше).

Также выберите 24 кадр (если он не является текущим), путём клика по нему.

Откройте панель свойств объекта (Окно > Свойства или через кнопку на правой панели) возможно еще вам придется еще раз кликнуть символ hello в сцене, чтобы текущим стал именно символ !!! а не его кадр анимации.

Задайте ЦВЕТОВОЙ ЭФФЕКТ - Альфа канал и значение 0 (на рисунке показано значение 19% для наглядности).

анимация полупрозрачности (альфа-канала) во flash проекте

Посмотрите как работает анимация - нажмите ENTER.

Как видим надпись постепенно затухает, а затем появляется снова (если анимацию воспроизводить циклически).

Чтобы не было резкого перехода от последнего кадра (когда надпись полностью невидна) к первому (когда она полностью видна) при циклическом воспроизведении анимации в баннере (обычно анимация всегда циклична), добавим в 48 поцизию еще 1 ключевой кадр, но в нём зададим альфа-канал равным 100%.

Увидим что баннер стал воспроизводить анимацию дольше - 2 секунды вместо одной (при скорости 24 кадра/сек), но надпись на нём сначала плавно исчезает (на протяжении первой цепочки анимации), а затем плавно появляется (на протяжении второй цепочки).

Готовый флеш баннер выглядит так -

Если у вас еще остались вопросы о том, как создается данный баннер - вы можете скачать файл готового флеш-проекта (в формате CS5).

Спасибо за внимание ! Надеюсь вам был полезен данный урок.

К содержанию

X
первый независимый онлайн-журнал комиксов ККК Костя Коробкин Комикс номер 1 март 2016
 

Оставленные комментарии



Something: Unexplained 2 captive of desires / Нечто: Необъяснимое 2 в плену желаний
Костя Коробкин Комикс Коллекционное издание - 6 комиксов, 81 страница, 220 mp3 треков
Время загрузки: 0,1228