Сегодня
17 августа 2017
22:06
Вход Sign In Регистрация Sign Up Забыли пароль ? Forgot password ?
VARVE - Игра "Веселый Буквоежка" - история создания проекта
        Игра "Веселый Буквоежка" - история создания проекта &
подробнее...

Теги

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

Статьи сайта

Создание анимации вращающихся колес автомобиля

игра Нечто: Необъяснимое и в плену желаний

Основы 3D-анимации, экспорт скелетной анимации

Подготовка модели к использованию скелетной анимации

Продолжаем Создание скелета для данной модели

Построение ирерархических связей между объектами и основы 3d анимирования

Особенности экспорта моделей и анимации экспортером kWXPort080719 из 3ds max 2009 

Создание модели броневика (Хэд)

megainformatic cms e-mailer

Моделируем девушку в 3ds max - Моделируем руку

Моделируем девушку в 3ds max - Кисть руки

Бесплатная Система Управления Вашим Сайтом - megainformatic cms free

Путешествие в мир 3d

Путешествие в мир 3d - страница 2

Путешествие в мир 3d - страница 3

Путешествие в мир 3d - страница 4

Путешествие в мир 3d - страница 5

Путешествие в мир 3d - страница 6

Создание модели броневика (Хэд) - Анимация вращения колес

megainformatic cms express files

Моделируем девушку в 3ds max - Моделируем голову

Моделируем девушку в 3ds max - Моделируем голову страница 2

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

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

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

Уроки delphi directx 8.1

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

уроки Photoshop free

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

megainformatic cms express

Моделируем девушку в 3ds max - Соединяем все части тела в единую модель

Моделируем девушку в 3ds max - Соединяем все части тела в единую модель страница 2

Моделируем девушку в 3ds max - Соединяем все части тела в единую модель страница 3

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Моделируем девушку в 3ds max - Текстурируем модель

Моделируем девушку в 3ds max - Текстурируем модель страница 2

Моделируем девушку в 3ds max - Текстурируем модель страница 3

Моделируем девушку в 3ds max - Текстурируем модель страница 4

Моделируем девушку в 3ds max - Текстурируем модель страница 5

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

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

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

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

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

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

Добро пожаловать в систему управления сайтом megainformatic cms

Создание эскиза и макета страницы сайта

Верстка созданного макета

Добавление модулей обеспечивающих минимально необходимый функционал

Основы добавления контента на сайт, управления и поддержки сайта

Проверка работы сайта, установка на хостинг

Основы продвижения созданного сайта

Создание шаблонов

Создание интернет-магазина

Музыкальные мир - композиция Морозное утро - 10 версий

ЛЕТО

Нечто Необъяснимое - пре релиз

megainformatic cms admin

megainformatic cms admin

Основы создания 3d игр - проект Тайны Морских Глубин

уроки delphi directx 8.1 3d - Основы Вращений и Управления камерой

megainformatic cms seo

Моделируем девушку в 3ds max - Создаем скелет для модели

Моделируем девушку в 3d - Подготовка 2d-эскиза тела человека

megainformatic cms stat kit

megainformatic cms seo

Теория и практика 3d игр - О Кватернионах

Теория и практика 3d игр - Основы теории векторов

Теория и практика 3d игр - Важные замечания

Моделируем девушку в 3d используя 3ds max - Подготовка к моделированию ноги - готовим ширму

Моделируем девушку в 3d используя 3ds max - Выполняем моделирование ноги

Моделируем девушку в 3d используя 3ds max - Улучшаем созданную модель женской ножки

megainformatic cms stat kit

Подводная лодка и подводный мир

megainformatic cms - Форма для смены шаблонов сайта - модуль template selector

megainformatic cms social

megainformatic cms social Руководство пользователя

megainformatic cms - Форма для смены шаблонов сайта - модуль template selector

модуль слайдера

ТЗ на сайт коллективных покупок

Моделируем девушку в 3ds max - Знакомимся с основами анимации созданного персонажа

Моделируем девушку в 3ds max - Знакомимся с основами анимации созданного персонажа страница 2

Поддержка сайтом нескольких языков - модуль multi lang

Моделируем девушку в 3ds max - Выполняем экспорт созданной модели в формат X

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

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

К содержанию

 

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



Рейтинг@Mail.ru
Время загрузки: 0,3595