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


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

Технологии WEB - AJAX-запросы
        Другие уроки можно посмотреть в разделе Статьи  
подробнее...

Теги

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

Статьи сайта

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

megainformatic - megainformatic cms express files + module slider

megainformatic - Создание сайта бесплатно или под заказ

megainformatic - Как создать flash баннер

megainformatic - Разработка flash-приложения для сайта: онлайн примерочная

megainformatic - Мои впечатления о книге - Владислав Крапивин - Журавленок и Молнии

megainformatic - Модуль отзывов/комментариев для вашего сайта

megainformatic - Модуль отзывов/комментариев для вашего сайта

megainformatic - Модуль отзывов/комментариев для вашего сайта

megainformatic - Модуль короткие ссылки short link

megainformatic - Работа с сокетами fsocket из php

megainformatic - Как создать игру Создание игровых панелей и индикаторов

megainformatic - Приключения Кости Коробкина - Как я провел лето - интерактивный комикс

megainformatic - Приключения Кости Коробкина - Как я провел лето - интерактивный комикс

megainformatic - Приключения Кости Коробкина - С новым годом - интерактивный комикс

megainformatic - Система управления сайтом на php - megainformatic cms admin files

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

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

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

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

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

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

megainformatic - GET и POST запросы

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

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

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

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

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

megainformatic - Убираем лимит на размер импортируемого файла в PhpMyAdmin

megainformatic - Как создать torrent файл

megainformatic - Нужна ли валидация вашему сайту ?

megainformatic - Антивирус DrWeb

megainformatic - Калькулятор рассчёта стоимости зубопротезирования для стоматологической клиники

megainformatic - Что такое BitTorrent (БитТоррент)

megainformatic - Миссис Даутфайр 1993 фильм torrent

megainformatic - Как скачивать торрент-раздачу ?

megainformatic - Автотелега фильтр

megainformatic - Фильмы

megainformatic - Fahrengeit Фаренгейт игра 2006 для PC

megainformatic - Fez игра для PC 2013

megainformatic - Дневник памяти - фильм 2004

megainformatic - Scooter - The night - Video and Lyrics - Скутер - Ночь - Видео и лирика

megainformatic - Если всё же неудача

megainformatic - Смерть или искупление или избавление

megainformatic - По ту сторону

cj megainformatic - музыкальный альбом БЕСКОНЕЧНОЕ ДВИЖЕНИЕ ОЖИДАНИЕ И ДЕЙСТВИЕ

megainformatic - Костя Коробкин - Секретный проект - интерактивный комикс

megainformatic - Основы анимации во флеш на примере анимирования простейшей окружности

megainformatic - Парсер сайтов Введение

megainformatic - Я пишу музыку для себя и для продажи

megainformatic - Статьи на околомузыкальные темы - осень 2014 часть 1

megainformatic - рассказ - Чужие воспоминания - автор Синицин Андрей - 24.09.2014

megainformatic - Сайты живущие вне поисковых систем. Есть ли такие и как их найти ?

megainformatic - Game craft - проект разработки игровых и мультимедийных проектов

megainformatic - Game craft - моделируем scv

megainformatic - Game craft - моделируем scv - шаг 1 (часть 2)

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