Сегодня
22 октября 2017
2:02
Вход Sign In Регистрация Sign Up Забыли пароль ? Forgot password ?
VARVE - Программируем на C++ с использованием MFC - Создание MFC приложения - hello, world !
Создание MFC приложения - hello, world ! [содержание]  [назад]  ]далее] В предыдущем уроке мы познакомились с тем, как создать MFC - приложение в среде MSVS на языке программирования c++ В данном уроке Мы добавим в приложение
подробнее...

Теги

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

Статьи сайта

Код для модуля регистрации пользователя на сайте

Быстрый подсчёт ключевых слов в статье

Модуль подсчёта ключевых слов в статье

Онлайн-сервис для подсчёта статистики ключевых слов

Пишем слайдер на javascript с нуля

Логика работы слайдера на javascript

Пишем свою соц. сеть - модуль предложений для webjob

Пишем свою соц. сеть - модуль предложений для webjob - часть реализации для личного кабинета

Пишем свою соц. сеть - Реализация файлового хранилища предложений в csv-файле

Тестирование подключения к платежной системе ЕДИНЫЙ КОШЕЛЕК (w1.ru) с использованием скрипта эмулятора

Пишем свою cms - шаг 1

Пишем свою cms - шаг 2

Пишем свою cms - шаг 3

бесплатная флеш игра freeway fury 2 - разработчик Serius Games

бесплатные флеш игры сторонних разработчиков

Как я осваивал Flash

Список уроков на тему создания flash приложений и игр

Как я осваивал Flash - шаг 2 - Основы создания простейших flash - игр

проект портала Идеи Комфорта

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

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

Использование cron, crontab и планировщика задач

Совместное использование jquery и mootools или других js-фреймворков

Модуль content php performer для megainformatic cms

Пишем компактный слайдер

Что нужно знать для создания сайта ?

Что нужно знать для создания сайта ? Глава 2 - Кодировки и DOCTYPE

Что нужно знать для создания сайта ? Глава 3 - Идём дальше - нанизываем новый код - где объявляются стили css и код javascript

Что нужно знать для создания сайта ? Содержание

Что нужно знать для создания сайта ? css - стили

preg_match или Использование регулярных выражений в php

статьи Тимонина Андрея - Flash. Содержание

статья Тимонина Андрея - Flash. Подготовка к работе.

статья Тимонина Андрея - Flash. Hello world.

статья Тимонина Андрея - Flash. Экспорт SWC библиотеки.

Тимонин Андрей - Несколько слов о себе

статьи Тимонина Андрея - уроки из области веб программирования, создания казуальных игр

статья Тимонина Андрея - Обеспечиваем доступ к объекту из любой точки программы. Singleton

статья Тимонина Андрея - Хронология работы программы. Создаем Лог

статья Тимонина Андрея - Поиск файлов. Получаем список файлов каталога.

статья Тимонина Андрея - Исключения. Создаем класс обработки исключений.

статья Тимонина Андрея - States. Создаем менеджер состояний игры.

статья Тимонина Андрея - Регистрация. Часть 1. Создаем страничку регистрации на сайте.

статья Тимонина Андрея - Регистрация. Часть 2. Создаем обработчик, и заносим информацию о пользователе в Б.Д.

статья Тимонина Андрея - Таймер. Выводим время игры.

статья Тимонина Андрея - DirectX9. Создаем основной класс обработки графики.

статья Тимонина Андрея - DirectX9. Создаем первое приложение.

Что нужно знать для создания сайта ? float - использование в css - стилях

Уроки Fruity Loops Studio (FL Studio) - урок 2 - пишем свою композицию COLD

Уроки Fruity Loops Studio (FL Studio) - урок 3 - экспериментируем с композицией COLD

Что нужно знать для создания сайта ? Стандартные шрифты для сайта

Что нужно знать для создания сайта ? ASC II Коды символов

Уроки Fruity Loops Studio (FL Studio) - урок 4 - пишем первый вариант композиции COLD

Популяризация Современных Научных Знаний и Размышления на околонаучные темы. СОДЕРЖАНИЕ

Популяризация Современных Научных Знаний и Размышления на околонаучные темы. Энергетический кокон

Модуль галерей для любой cms

Уроки Photoshop - Быстрый старт

Мои Музыкальные Миры - страница 2

megainformatic cms rs

Мега Информатик - Примеры моих работ

Мега Информатик - Портфолио выполненных проектов сайтов и приложений

Уроки Photoshop - Текстуры

Уроки Photoshop - Создаем текстуру горной породы

Уроки Photoshop - Создание вариантов на тему созданной текстуры

Уроки Photoshop - Рисование текстуры травы

Уроки css - атрибут position

Уроки Photoshop - Рисование текстуры песка

Уроки Photoshop - Подготовка набора текстур

Уроки Photoshop - Рисование текстур глина, грязь

Новогодняя дискотека 2013 на megainformatic точка ru

Программируем на C++ с использованием MFC

Программируем на C++ с использованием MFC - Создание MFC приложения

Программируем на C++ с использованием MFC - Создание MFC приложения - hello, world !

Как создать игру ? - Пишем игровой движок с нуля

Как создать игру ? - Пишем игровой движок с нуля - Вступление

Как создать игру ? - Пишем игровой движок с нуля - Общая структура будущего игрового движка

Разное

Как создать игру ? - Пишем игровой движок с нуля - DXUTMainLoop - цикл работы DirectX-приложения

Варианты макетов Психолог 911

Шаблоны для сайтов - что это и какие они бывают ?

Уроки Photoshop - текстуры

Мои Музыкальные Миры - готовая музыка mp3 - новинки 2013 года

Уроки Photoshop - Огонь, создание огня

Уроки Photoshop - Создание растительных текстур и объектов

Fruity Loops Studio 9 - Как синтезировать свои сэмплы - изучаем возможности плагина Sytrus

Видоизменяем тему для Wordpress под свои нужды

Уроки Photoshop - Продолжаем создавать основные типы текстур - металл

Уроки Photoshop - Остановимся на создании элементно-упорядоченных текстур на примере создания чешуевидной текстуры

Уроки Photoshop - Займемся рисованием небесных текстур - небо и облака

Человеко-понятный УРЛ - рассматриваем достоинства и недостатки

Все уроки Photoshop на varve точка ru

Из жизни известных программистов - юмор

Dr Web проверка сайта на вирусы

Основы верстки

Что нужно знать для создания антивируса ?

С Днём Святого Валентина

С Днём рождения !

Мои Музыкальные Миры - готовая музыка mp3 - новинки 2013 года - музыка и звуки для игры Brain Storm / Мозговая Атака

С Праздником 8 Марта Вас Дорогие женщины !!!

Разное - 8 марта 2013 - Шашлыки :))))

Программирование на языке ассемблера - Урок 2 - первая полезная программа - выполнение арифметических вычислений - сложения, вычитания, умножения и деления

Программирование на языке ассемблера - содержание

Мои Музыкальные Миры - готовая музыка mp3 - новинки 2013 года - музыка и звуки для игры Zomby Brain Burger

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

zbb

Программирование на языке ассемблера - Урок 3 - первая полезная программа - выполнение арифметических вычислений - сложения, вычитания, умножения и деления - разбираем логические ошибки

Мои Музыкальные Миры - готовая музыка mp3 - новинки 2013 года - альбом Бесконечное Движение

Уроки Photoshop - Создание тканеподобных текстур

Уроки Photoshop - Раскраска

Уроки Photoshop - Варианты раскраски

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

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

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

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

Новогодняя вечеринка 2014 на varve.ru

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

Как создаются 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
Время загрузки: 1,4829