fle game engine - движок для создания игр
fle game engine - движок для создания игр


Вакансии
Игродельня
Сегодня
28 мая 2017
21:27
Вход Регистрация Забыли пароль ?

ТЗ на сайт коллективных покупок
ТЗ на сайт коллективных покупок. № задача по ТЗ краткое описание по решению, сроки, стоимость в % от бюджета проекта
подробнее...

Теги

создание сайтов, создание игр, дизайн, игры, информатика, уроки photshop, php, c++, музыка, delphi, cms, робосайт

Статьи сайта

megainformatic cms express files

megainformatic - Уроки Photoshop - Чудеса

megainformatic cms express files - Развертывание сайта на Вашем хостинге

megainformatic - Настольная игра "Веселый Буквоежка"

megainformatic - Уроки delphi directx 8.1

megainformatic - Уроки delphi directx 8.1 - Урок 1 - Введение в Delphi DirectX 8.1. Создание шаблона стартового приложения.

megainformatic - Уроки delphi directx 8.1 - Урок 1 - Введение в Delphi DirectX 8.1. Создание шаблона стартового приложения. Страница 2

megainformatic - Урок 2 Создаем и обрабатываем команды меню.

megainformatic - Урок 2 Создаем и обрабатываем команды меню. Страница 2

megainformatic - Урок 3 Оконный и полноэкранный режимы работы D3D-приложения. Управление игрой средствами DirectInput8

megainformatic - Урок 3 Оконный и полноэкранный режимы работы D3D-приложения. Управление игрой средствами DirectInput8 - Страница 2

megainformatic - Урок 3 Оконный и полноэкранный режимы работы D3D-приложения. Управление игрой средствами DirectInput8 - Страница 3

megainformatic - Урок 4 Построение класса приложения

megainformatic - Урок 4 Построение класса приложения - Страница 2

megainformatic - Урок 5 Построение классов игровых объектов и других необходимых классов

megainformatic - Урок 5 Построение классов игровых объектов и других необходимых классов - Страница 2

megainformatic - Урок 6 Игровая логика

megainformatic - Заметки по joomla - JFolder::create: Path not in open_basedir paths. Что это?

megainformatic cms express files - Добавление статей на сайт под управлением megainfromatic cms express files

megainformatic - Урок 7 2D-анимация

megainformatic - Урок 8 Загрузка/Сохранение текущей игры, режим паузы, режимы часов/будильника, запуск браузера Internet Explorer для показа сайта разработчика и других интернет-ресурсов

megainformatic - Урок 9 Тестирование и отладка приложения

megainformatic - Мои Музыкальные Миры

megainformatic - уроки Photoshop free

megainformatic cms express

megainformatic cms express

megainformatic cms express

megainformatic cms express files

megainformatic - Методы создания растровых изображений в Adobe Photoshop

megainformatic - Создание фотореалистичной текстуры травы

megainformatic - Рабочее пространство Adobe Photoshop

megainformatic - Бесшовные (тайловые) текстуры

megainformatic - Создание изображений огня, воды, неба

megainformatic - Создание текстур горных пород и суши (урок 5)

megainformatic - Рисование персонажей (урок 6)

megainformatic - Рисование фона (урок 6 часть 2)

megainformatic - Рельефные изображения

Добавление статей на сайт под управлением megainformatic cms express

megainformatic - Воспроизведение файлов в форматах it, xm, s3m, mod

megainformatic - Воспроизведение файлов в форматах it, xm, s3m, mod - страница 2

megainformatic - Воспроизведение в игре музыки в формате XM

megainformatic - Воспроизведение файлов в формате OGG Vorbis

megainformatic - игра "Веселый Буквоежка" - инструменты разработки

megainformatic - Игра "Веселый Буквоежка" - история создания проекта

megainformatic - Как анимировать паука ?

megainformatic - Уроки Photoshop

megainformatic - Купить Уроки Photoshop - Чудеса

megainformatic - Купить Уроки Photoshop - Рисуем и Анимируем

megainformatic - Эмулятор игры Ну, Погоди!

сайт megainformatic - Говорящий Комикс Веселый Буквоежка

megainformatic - Что нужно для создания собственного сайта ?

megainformatic - Моделируем девушку в 3d используя 3ds max

megainformatic - Уроки Fruity Loops Studio - пишем свою музыку

megainformatic - Уроки Fruity Loops Studio - пишем свою музыку - урок 1 - Быстрый старт

megainformatic - Сброник статей по дизайну и компьютерной графике. Обзор.

megainformatic - Уроки 3d на delphi directx - Вывод Заставки

Как создаются 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).

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

К содержанию

 

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



fle game engine - движок для создания игр
fle game engine - движок для создания игр


визиты
сегодня: 1759
всего: 16451
посетители
сегодня: 288
всего: 20919
Время загрузки: 2,9811