Сегодня
11 декабря 2017
3:18
Вход Sign In Регистрация Sign Up Забыли пароль ? Forgot password ?
VARVE - Как создать игру - Веселый Единственный Буквоежка - программируем основу будущей игры
       
подробнее...

Теги

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

Статьи сайта

Создаем Сайт Своими Руками - Экспорт/импорт данных из баз данных MySQL

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

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

игра Веселый Буквоежка

Что нужно знать для создания сайта ? Массивы в языке php

уроки php

Уроки 3ds max

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

обзор антивирусных средств защиты

как работает антивирус ?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Уроки Photoshop

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

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

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

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

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

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

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

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

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

Создание сайта для бизнеса

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

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

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

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

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

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

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

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

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

Новый взгляд на очевидные вещи

Разработка программ на c++

Немного о музыке

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

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

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

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

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

GET и POST запросы

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

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

Темы для WordPress

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

Макет дизайна Вашего сайта

скачать megainformatic cms

для чего нужна карта сайта

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

как создать инсталлятор для собственной cms

новые идеи, новые решения

Нововведения в megainformatic cms

Web Администрирование

Уроки Верстки

Система автоматизированной е-майл рассылки

Мысли о разном

Выгрузка файла на сайт

выпадающее меню на html и css

Использование checkbox

Краеугольная особенность работы Web-form на примере смены состояния checkbox

Технологии WEB

Технологии WEB - AJAX-запросы

Легко ли быть программистом

От идеи к реализации - трудно ли создавать сайты ?

Проблемы с кодировками при отображении страниц

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

Система Автоматизации Доставки Электронных Заказов megainformatic cms e-pro

megainformatic cms e-pro Автоматизация Обработки Уведомлений о Заказах по партнерским программам

Глубины программирования на C++

VARVE: Музыкальная страничка трэкера

Создание музыки и звука

VARVE: Создание музыки и звука: урок 2

Создание музыки и звука: урок 3 - настройка Impulse Tracker для работы в WinXP

Создание музыки и звука: урок 4 - Введение в Mod Plug Tracker

Создание музыки и звука: урок 5 - Первая композиция в Mod Plug Tracker

Создание музыки в Impulse Tracker 2.14 - урок 6 - Ввод Нот

Создание музыки в Impulse Tracker 2.14 Первая мелодия

Создание музыки в Impulse Tracker 2.14 Настройка параметров сэмплов

Создание музыки и звука: теория и практика создания трэкерской музыки

Что такое VARVE ?

Основы работы в Microsoft Visual Studio 2008 и DirectX 9 (DX SDK Aug 2008)

Введение в программирование игр на С++ для платформы DirectX 9 - Первый старт

Введение в программирование игр на С++ для платформы DirectX 9 - Меняем иконку приложения

Введение в программирование игр на С++ для платформы DirectX 9 Добавляем другую модель

Введение в программирование игр на С++ для платформы DirectX 9 Программирование игр в directx. Hello, World!

Введение в программирование игр на С++ для платформы DirectX 9 Разбираем конструкции языка C++ на примере работы в Microsoft Visual Studio 2008

Разбираем конструкции языка C++ на примере работы в Microsoft Visual Studio 2008 - Урок 1 Основные операторы языка C++

Разбираем конструкции языка C++ на примере работы в Microsoft Visual Studio 2008 - Урок 1 Основные операторы языка C++ (часть 2)

Урок 2 Написание Win32-приложений. Обзор стартового кода Win32-приложения. Добавление ресурса текстовая строка

Урок 3 Создание Win32-приложений. Создание меню и простых диалоговых окон.

Урок 4 Создание Win32-приложений. Стандартные диалоги. Изучение сопутствующих конструкций языка. Консольные Win32-приложения. Указатели. Ссылочный тип. Массивы.

Урок 4 часть 2 Win32. Диалог выбора цвета, смена цвета фона окна приложения

Написание приложения DirectX9c + MFC в среде MSVS 2005

Создание компьютерных игр на основе DirectX в среде Delphi 6, 7

Создание компьютерных игр на основе DirectX в среде Delphi 6, 7 - Почему избраны DX8 и Delphi ?

Основы IDirectMusic8 в среде Delphi6-7

Основы DirectInput8 в среде Delphi 7

Основы DirectSound8 в среде Delphi6-7

Плагин для 3DS MAX из DX9 SDK

Мастер-класс: Создание модели и текстуры Коммандного Центра (как в StarCraft 2)

Мастер-класс: Создание модели и текстуры Коммандного Центра (как в StarCraft 2) Часть 2

Мастер-класс: Создание модели и текстуры Коммандного Центра (как в StarCraft 2) Часть 3

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