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


Balls and holes PC game / Balls and Holes PC игра
Вакансии
Игродельня
Сегодня
21 сентября 2017
11:30
Вход Регистрация Забыли пароль ?

We all live in a yellow submarine !
We all live in a yellow submarine ! То есть - Все мы живем в желтой подлодке. Давайте представим что наш земной шар - это большая пребольшая подлодка, которая парит в океане космоса. Представили ? Дух захватывает. Правда масштабы Земли не позволяют это представить. Тогда можно представить что-то поменьше - дом в котором Вы живете.
подробнее...

Теги

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

Статьи сайта

megainformatic - СССР - Создаем Сайт Своими руками - Введение в php

megainformatic - СССР - Создаем Сайт Своими Руками - Выводим дату и время в формате RU

сайт megainformatic - уроки php

megainformatic - Уроки 3ds max

megainformatic - КАК СОЗДАТЬ СВОЮ ИГРУ - Веселый Буквоежка Ваше Визуальное Шоу / Fun Letter Eater You Visual Show

megainformatic - Формы оплаты заказа

megainformatic - оплата через систему QIWI - выбор продукта

megainformatic - КАК СОЗДАТЬ СВОЮ ИГРУ - Набор разработчика игр - Нечто: Необъяснимое - в плену желаний

megainformatic - Как создать игру ? - Программируем сами - Самый первый шаг

megainformatic - Как создать игру ? - Программируем сами - Самый первый шаг - страница 2

megainformatic - Как создать игру ? - Программируем сами - Содержание

megainformatic - Как создать игру ? - Программируем сами - Самый первый шаг - страница 3

megainformatic - Как создать игру ? - Программируем сами - Изучаем и модифицируем пример CreateDevice

megainformatic - Как создать игру ? - Программируем сами - пример CreateDevice страница 2

megainformatic - Как создать игру ? - Программируем сами - пример CreateDevice страница 3

megainformatic - Как создать игру - Vertices - Вершины - страница 1

megainformatic - Как создать игру - пример Matrices

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

megainformatic - Уроки Photoshop - Чудеса - Коллаж от нуля

megainformatic - Уроки Photoshop - Чудеса - Коллаж от нуля - страница 2

megainformatic - Уроки Photoshop - Чудеса - Коллаж от нуля - страница 3

megainformatic - Уроки Photoshop - Чудеса - Коллаж от нуля - страница 4

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

megainformatic - Уроки Photoshop

megainformatic - Уроки Photoshop - Рисуем волка из мультфильма

megainformatic - Уроки Photoshop - Рисуем волка из мультфильма стр 2

megainformatic - Уроки Photoshop - Рисуем волка из мультфильма стр 3

megainformatic - Уроки Photoshop - Рисуем волка из мультфильма стр 4

megainformatic - Уроки Photoshop - Анимируем волка из мультфильма

megainformatic - Уроки Photoshop - Анимируем волка из мультфильма стр 2

megainformatic - Уроки Photoshop - Анимируем волка из мультфильма стр 3

megainformatic - Уроки Photoshop - Анимируем волка из мультфильма стр 4

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

megainformatic - Оплата заказа через Сбербанк

megainformatic - Пример игры с исходным кодом Donuts3D

megainformatic - Как создать игру ВЕСЕЛЫЙ БУКВОЕЖКА - программируем сами

megainformatic - Как создать игру ВЕСЕЛЫЙ БУКВОЕЖКА - создаем игровую оболочку

megainformatic - Открытый Полный Исходный код игры Дорога в Город

megainformatic - Как создать игру - Веселый Единственный Буквоежка - программируем основу будущей игры

megainformatic - Как создать игру - Веселый Единственный Буквоежка - выводим заставку

megainformatic - Как создать игру - Веселый Единственный Буквоежка - игровое меню

megainformatic - Как создать игру - Веселый Единственный Буквоежка - движение и анимация героя

Как Создать игру ВЕБ - Веселый Единственный Буквоежка - Программируем сами

Как Создать игру ВЕБ - Веселый Единственный Буквоежка - Программируем сами

megainformatic - Примеры моих работ

megainformatic - Музыкальные темы

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

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

megainformatic - Онлайн Обучение, Репетитор

megainformatic - Уроки Photoshop - Рисуем и Анимируем

megainformatic - Уроки Photoshop - Рисуем и Анимируем - Урок 1 - Старт

megainformatic - Уроки Photoshop - Рисуем и Анимируем на AllSoft.ru

megainformatic - DirectX 9c - Изучаем пример MultAnimation

megainformatic - megainformatic cms Система Управления Контентом

megainformatic - Темы для WordPress

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

Как создаются 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 - движок для создания игр


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