Как создать flash анимацию. Как создать новый файл (документ) во Flash CS6
Все разделы сайта сайт
Flash анимация создание флеш
Создать и редактировать флэш
Тема создание и редактирование всевозможных флеш объектов : роликов, мультиков, баннеров, сайтов" - очень интересная, Профессионалом может Вы и не станете, но знать "азы" и применять на практике эти знания необходимо КАЖДОМУ!
Чем уникальна flash-технология ? Конечно, у нее масса преимуществ, она сделала Всемирную паутину более динамичной, более живой, интерактивной, позволила создавать красочные корпоративные презентации, рекламные ролики, баннеры и т.д. и т.п.
Баннер этот кликабельный:-)
Благодаря данной технологии впервыесоздание анимации стало доступно не только избранным (профессионалам), но и миллионам любителей.
Для решения этой задачи существует очень много программ - маленьких и больших, простеньких и сложных, мощных и не очень. Особняком (выше всех) стоят два Монстра в этой области!
Это Macromedia (Adobe) Flash и Macromedia Flash professional version 8 - она же всеми любимая Macromedia Flash 8 professional
Посмотрим на этих двух "Монстров" поближе
За Macromedia Flash MX
браться сложно, ведь
она по праву считается,
одной из самых сложных для освоения компьютерных программ.
Во-первых, уж ОЧЕНЬ она сложная. Понять и выучить Action Script (так называемый скриптовой програмный код) нормальному человеку просто нереально.
Одного желания тут мало! Нужно железное терпение, усидчивость и подойти к изучению с та-а-ким энтузиазмом...
Во-вторых, по этой программе более-менее понятных видеоуроков и видеокурсов - просто нет (кроме одного), а изучать программу по толстенным книгам пособиям, написанных профи в этом деле, причём на своём "заумном" языке - можно сказать, что и медведей на велосипеде кататься учат.
Хотите - пробуйте:-)
А вот с Macromedia Flash 8 Рrofessional - дела повеселее будут
И сама программа полегче и понятнее в изучении,
да и обучалок
всевозможных по ней найти можно очень много!
Казалось бы: бери - не хочу. Однако, изучение
толстых книг дело тоже не
простое, да и стоят они почему-то совсем не дешево. Лучший способ
изучения программ - видеоуроки. Ну а САМЫЙ лучший -
видеокурс
Естесственно, лучше один раз УВИДЕТЬ и УСЛЫШАТЬ, чем читать о
том,
как создавать и редактировать флеш ролики, мультики, баннеры
.
Как и всякое обучение - видеоуроки по Macromedia Flash 8 Рrofessional делятся на платные и бесплатные.
И как всегда, естественно, платные оказываются более высокого качества (не изображения, конечно, а качества обучения).
Хотя есть 11 бесплатных, но ВЕСЬМА неплохих и качественных видео-уроков по начальному изучению программы для создания и редактирования флэша.
Если Вы хотите научиться самостоятельно создавать или редактировать уже готовые флэш ролики , то без видео-курса по этому предмету просто не обойтись. Самостоятельно освоить такие программы ох как непросто.
И эти видео уроки будут очень хорошим подспорьем для начала совершенствования навыков работы с флэш анимацией.
Чтобы по-настоящему овладеть технологией флэш - нужны видео уроки посерьёзнее. Естественно, бесплатными они уже быть не могут. Сами понимаете почему:)
Flash технологии настолько плотно вжились в web дизайн, что в наши дни элементом современного web сайта всё чаще становится наличие в дизайне анимированных элементов – заставок, флеш картинок, баннеров и прочих подобных вставок – активных элементов сайта.
Эти элементы как бы «оживляют» дизайн сайта, делают его приятнее и удобнее в использовании пользователями вашего веб сайта, позволяют сайту выглядеть и быть более оригинальным и современным.
Flash элементы каканимационные ролики , представляют из себя новейшее визуальное средство в web дизайне, создааемые с помощью технологии Macromedia Flas.
И своим присутствием на сайте красивые флешки
выделяют ваш сайт из числа остальных, т.к. являются на данный
момент наиболее эффективным методом представления информации в
сжатых по размерам и времени образам.
Если Вы решили создавать красивые флеш-сайты и, зарабатывать на этом хорошие деньги ...
Наберите в Яндексе, запрос:"цены на Flash-сайты " ... и увидите, что цены на изготовление профессионального Flash-сайта, начинаются, как правило от 1000$.
Почему? За такую цену можно ведь сделать несколько html-сайтов?"Да, действительно можно, но каких сайтов? Сайтов призраков? Web-сарайчиков самостроев, попав на которые, сразу хочется убежать.
И ведь владельцы таких ресурсов, находятся в неведении и не понимают почему им никто не пишет или не звонит. Таких сайтов уже десятки миллионов в интернет...
Как Вы думаете, обладатели таких "чудесных" сайтов могут реально заинтересовать посетителей?Ответ очевиден - польза от таких творений - никакая!
И если цены на изготовление профессионального Flash-сайта, начинаются, как правило от 1000$, то если заказывать профессиональный Flash-сайт, то цена удваивается... и становится от 2000$ !!
Когда люди видят, что компания или человек может себе позволить иметь серьезный флэш-сайт, к такой компании и отношение совсем другое.Ваш сайт - это Ваше лицо и Внешность в интернет.
Другими словами, то, что вызывает положительные эмоции, в последствии запоминается, а как известно: "Эмоция - это королева продаж".
Таким образом получается, что профессиональный, стильный Flash-сайт, по сути - реальный инструмент для зарабатывания хороших денег и успешного позиционирования своего веб-имиджа в сети.
Причем люди, которые предлагают эти услуги по созданию таких сайтов, никогда Вам не раскажут и не покажут как создавался Flash-сайт. А за исходник с Вас попросят еще дополнительную плату.
Вы когда нибудь бывали в дачных поселках? Обращали внимание на разношерстные строения, всех мастей, из которых изредка выделяются добротные строения, с красивым фасадом, дизайном и т.д?
В 90% случаев, такие дома построены не одним человеком-самоучкой, а бригадой профессионалов, по уже стандартному, готовому, типовому проекту, по которому сделаны десятки подобных строений в разных районах.
К тому, что эти люди умеют правильно заливать фундамент, ставить стены крышу, стеклить окна и т.п., или другими словами они профессионалы, каждый в своей области, поэтому и дом получается красивый и надежный.
То-же самое и с созданием профессионального Flash-сайта.Так вот, чтобы создать профессиональный Flash-сайт, с нуля, нужно быть мульти-профессионалом.
То есть, необходимо сочетать, как минимум "три в одном".
1.) Уметь рисовать руками на профессиональном, электронном планшете
(не мышкой, а именно руками). Знать основы анимации.2.) Знать языки программирования: Acton Script 2 и Acton Script 3
(которые изучаются годами, даже теми, кто имеет способности к программированию).3.) Иметь талант, усидчивость и гигантское количество свободного времени.
Так вот, подавляющее большинство Flash-дизайнеров во всем мире и в России, создают сайты на заказ именно по типовым, готовым проектам, которые называются:
"Готовые исходники Flash-сайтов, сделанные командой профессиональных дизайнеров и программистов".
Схема создания такого исходника очень проста: собирается команда разработчиков и очень быстро и слажено делают несколько исходников, флеш-сайтов, причем каждый занимается своим делом.
Разумеется такие исходники получаются: профессиональными, презентабельными и качественными. Затем они выставляются на продажу в интернет. И таких исходников в интернет - сотни тысяч...
Только есть один ньюанс... Редактировать их мало кто умеет, потому, что они созданы в программе Macromedia Flash, которая по праву считается, одной из самых сложных в мире.
Теперь решение найдено. Хотите научиться легко отредактировать любой flash исходник самостоятельно?!
Вот краткое и лаконичное описание тем уроков Видео курса:
Введение. Из этого урока Вы узнаете какими панелями инструментов, в Macromedia Flash, мы будем пользоваться на протяжении всего видеокурса. |
|
1: Редактируем логотип. Вы узнаете каким образом
правильно отредактировать, графический или текстовый логотип,
чтобы он выглядел на Flash-сайте, наилучшим образом. |
|
2: Редактируем меню. В пошаговой форме будет рассказано где искать многослойные файлы которые задают динамичиские харрактеристики анимированному Flash-меню . | |
3: Редактируем текст на страницах. На протяжении этого урока, мы подробно пройдемся по всей библиотеке файлов и научимся правильно редактировать текстовые блоки, на всех страницах. | |
4: Редактируем заголовки в дополнительных, новостных страницах. Довольно обширный материал, по редактированию кнопок-баннеров в самом Flash-сайте. | |
5: Редактируем текст в дополнительных старницах. Еще один блок, посвященный нахождению ключевых кадров и правильного изменения динамических, текстовых блоков. | |
6: Редактируем гиперссылки 1-я часть. Данный раздел является определяющим, для правильного прописывания ссылок в формате языка программирования Action Script. | |
7: Редактируем гиперссылки 2-я часть. Материал посвящен созданию кнопок для гиперссылок, после прохождения этого урока Вы научитесь самостоятельно создавать дополнительные кнопки для гиперссылок. | |
8: Вставляем музыку. Из этой серии уроков, Вы научитесь вставлять любой музыкальный файл во Flash-сайт. |
|
9: Оптимизация и публикация. Очень важная тема, для успешной оптимизации исходника и загрузки всех папок и файлов в интернет. |
|
10: Flash+Php форма для отправки сообщение
прямо с Flash-сайта. В этой серии уроков Вы научитесь настраивать
форму для отправки сообщений в полных версиях исходников. |
К счастью, создать флеш игру под силу большей части активных пользователей Интернета. Новичкам в этом хорошо помогают пусть даже начальные навыки программирования (приобрести их, кстати, не так сложно - было бы желание). Правда, вам понадобится некоторое количество времени на то, чтобы освоить один из многочисленных специальных конструкторов флеш игр (к примеру, Macromedia Flash).
Многие сайты с программным обеспечением содержат, помимо всего прочего, как раз такие конструкторы. Установка их на компьютер, как правило, не создает для пользователя особых проблем. Помните о том, что выбранную программ следует зарегистрировать и установить все необходимы изменения - тогда она будет вам служить верой и правдой, то есть бесперебойно. Большинство конструкторов игр сделаны на английском языке, но вы можете поискать русификатор или версию на русском. Часто в самих настройках есть окно, где можно установить родной для вас язык.
Как создать флеш игру: предварительная подготовка
Еще до того как вы сядете за освоение конструктора, у вас уже должен быть намечен приблизительный сценарий игры, сюжетная линия. Неплохо заранее подумать и над анимацией и оформлением - это позволит существенно сэкономить ваше время. Перед тем как создать свою флеш игру, определитесь с ее желаемым типом. Для того чтобы вдохновиться, посетите сайты, где представлены библиотеки флеш игр.
Профессионалы рекомендуют новичкам начинать с создания простых приложений, таких, как аркады. А уже потом можно будет переходить к более сложным типам игр и даже создавать собственные стратегии. Выбрать тип будущей игрушки можно в том же конструкторе, где все жанры удобно рассортированы. Активируем, к примеру, аркаду (двойным кликом).
Как создать флеш игру: работаем в конструкторе игр
Откройте шаблон и перетащите на него нужные объекты, находящиеся в разделах «Анимационные объекты» и «Статические объекты». Создайте фон, выбрав текстуру и цвет. Для объектов подберите при помощи палитры цвета. При помощи проигрывателя анимации проверьте, какие еще функции не задействованы. В настройках выставите уровни движения игровых персонажей (в аркадах) или предметов (в логических игрушках).
После того как вы проделали все необходимое, запустите отладчик. В данном режиме вы можете пройти собственную игру, начиная с любого уровня, - это важно для того, чтобы проверить ее на работоспособность. Обнаруженные ошибки устраните и вновь проверьте флеш игру. Если все в порядке, сохраните изменения.
Как создать флеш игру: доводим игру «до ума»
Теперь вы можете придумать для своего флеш детища оригинальное название, сочинить краткую аннотацию. При помощи конструктора заставок сделайте к игре эффектную заставку. Все внесенные изменения также сохраните.
Пройдите собственную флеш игру от начала и до конца, для того чтобы найти (или не найти) в ней ошибки и неисправности, да и вообще не помешает окинуть критическим взглядом дело рук своих. Очень важно, чтобы игра имела логичные и четко выраженные части, как хорошая книга или фильм: начало, развитие событий, финал.
Чистовую версию своей игры отправьте друзьям - пусть самые честные критики оценят, каких результатов вы добились. Ну а после этого уже можно выкладывать флеш игру в Сеть.
Как создать флеш игру, если есть желание, но нет знаний?
Тем многочисленным пользователям, которых так волнует этот вопрос, мы непременно хотим дать ответ. Помните, что любые знания не могут взяться из ниоткуда. Любое новое дело приходится с чего-то начинать. Со временем вы станете понимать, каких именно знаний вам не достает для создания игр. Вы начнете спрашивать советов, искать рекомендации, читать соответствующую литературу, благодаря чему станете продвигаться в своем умении все дальше и дальше. Не бойтесь нового, иначе вы никогда не достигнете желаемого. Удачи!
* Используемые программы
: Flash CS3, Photoshop CS3
* Сложность
: средняя
* Приблизительное время выполнения
: 3 часа
Сайт-портфолио имеет большое значение для любого современного художника, фотографа, дизайнера и даже музыканта. Он показывает серьезный подход к делу и профессионализм. Сегодня мы покажем как можно создать оригинальное и стильное фотопортфолио, на основе современной системы управления Flash контентом Moto CMS.
Мы будем использовать автономную версию Moto CMS , которая содержит разные утилиты, компоненты, встроенные примеры и чистые шаблоны сайта с разной структурой. И используем самый простой шаблон, то есть создадим сайт-фотопортфолио с нуля.
В данном руководстве мы затронем следующие темы:
* Создание контейнеров.
* Создание слотов (кнопка «Закрыть», простая кнопка).
* Создание модулей (музыкальный плеер и галерея изображений).
* Редактирование прелоадера сайта
* Создание страниц сайта и наполнение их контентом.
Так же расскажем о возможностях и функциональности Панели управления Moto CMS.
Нам понадобится:
* Adobe Photoshop;
* Adobe Flash CS3;
* Автономная версия Moto CMS (бесплатная пробная версия);
* Дизайн сайта в. PSD формате.
Предварительный просмотр конечного результата
Шаг 1: Загрузите файлы Moto CMS
Чтобы начать создавать наш сайт фотопортфолио необходимо загрузить автономную версию Moto Flash CMS. Для того, чтобы повторить все действия из этого руководства и понять возможности Moto CMS пробной версии будет достаточно.
Шаг 2: Краткий обзор файлов Moto CMS
Вот краткий обзор файлов и папок Moto CMS:
* Components
. В этой папке содержатся компоненты mxp, управляемые Adobe Extension Manager.
* Control panel
. Содержит все файлы Панели управления.
* Docs
. Эта папка содержит API документацию.
* Examples
. Содержит 4 примера готовых flash сайтов, от самого простого до сложного, с модулем галереи, модулем новостей, музыкальным и видео плеером, контакт формой и т.д.
* Templates
. 5 шаблонов, которые можно использовать для создания сайта на основе Moto CMS. Каждый шаблон имеет необходимый набор файлов и отличается по своей структуре. Сегодня мы будем использовать один из этих шаблонов, в частности шаблон № 1, в качестве основы нашего фотопортфолио.
* Readme файл
, где описано с чего начать работу по созданию сайта с Moto CMS.
Шаг 3: Запуск на локальном хостинге
Нашим следующим шагом будет запуск шаблона сайта, на основе которого мы собираемся сделать наш сайт-портфолио. Для этого нам понадобится локальный веб-сервер. Мы используем WampServer. Он позволяет создавать веб-приложения с Apache, PHP и базы данных MySQL.
Для запуска шаблона сайта №1 просто загрузите на локальный сервер содержимое папки template_01 из каталога /templates/, а также содержимое папки controlPanel .
После этого мы переходим в Панель управления Moto CMS, указав свой URL в адресной строке браузера, добавив в конце /admin
Примечание: Сейчас вы не сможете посмотреть сайт, так как он еще не содержит ни одной страницы. Появится страница с 404 ошибкой.
Шаг 4: Редактирование config.xml
Все, что нам нужно сделать, это изменить ширину и высоту сайта и задать цвет фона.
Размер нашего проекта 980×800 пикселей. Для того, чтобы размер изменялся на большом экране, мы должны поставить «100%» для ширины и высоты сайта. А для того, чтобы он корректно отображался на экране с маленьким разрешением, мы должны указать минимальную ширину и высоту сайта (появятся полосы прокрутки). Фоновый цвет черный (# 000000).
Шаг 5: Изменяем style.css
Теперь мы должны открыть файл style.css и указать цвет фона (черный). Все остальное можно будет отредактировать с помощью Панели управления Moto CMS.
Шаг 6: Создаем preloader
Исходные файлы moto.xfl и website.xfl находятся в папках flamoto и flawebsite, соответственно.
Прелоадер для сайта следует создавать в moto.xfl. Прелоадер может быть простым клипом, состоящим из 100 кадров.
В панели Actions этого клипа мы пишем: “Stop ();” для первого кадра. Затем анимируем остальные кадры так как нам нравится.
Также пишем “Stop ();” в действиях первого кадра временной шкалы во fla.
Не забудьте указать размеры сайта (минимальную ширину и высоту) в свойствах файла moto.fla.
Наш следующий шаг заключается в создании красивой анимации исчезновения прелоадера. На последнем кадре мы должны запустить сайт путем активации функции “showWebsite ()”.
Откройте файл website.xfl и обновите прелоадер.
Шаг 7: Фон сайта
Откройте Медиатеку Moto CMS (Настройки> Медиатека) и наряду с другими необходимыми изображениями (для главной страницы, основных страниц или галереи) загрузите фоновое изображение с помощью кнопки “Добавить медиа”.
После этого возвращайтесь в Панель управления, создайте новую страницу и вставьте фоновое изображение с помощью кнопки “Фото”. Перетащите изображение и отцентрируйте его.
Менеджер шрифтов позволяет пользователям управлять шрифтами сайта, которые хранятся в виде SWF файлов и могут быть загружены.
Перед загрузкой любого шрифта, мы должны в первую очередь преобразовать его в SWF формат. Для этого мы будем использовать Оnline Font Creator – удобное онлайн приложение, разработанное командой MotoCMS, которое позволяет с легкостью конвертировать TTF и OTF файлы в SWF. Все, что нам нужно сделать, это выбрать необходимый файл шрифта с.TTF или.OTF расширением, добавить его в Оnline Font Creator, нажать кнопку “Создать шрифт” и скачать готовый SWF файл, после чего мы можем использовать его на нашем сайте-портфолио.
Создаем название сайта и слоган
Как только новый шрифт загружен, вы можете создать название сайта и слоган, используя инструмент “Текст” и применяя необходимый шрифт. Чтобы создать слоган мы используем шрифт Tahoma, размер: 10, цвет: # 727272. После этого откорректируйте название и слоган сайта в соответствии с дизайном в.PSD.
Шаг 9: Добавляем изображение на главную страницу
Разместим изображение галереи на главной странице сайта. Для этого выбираем изображение из Медиатеки, нажав «Фото» в левой панели инструментов. При необходимости откорректируйте его местоположение в соответствии с дизайном главной страницы.
Шаг 10: Создаем нижнее меню
С помощью инструмента «Фигура» создаем серый узкий прямоугольник и с помощью инструмента «Текст» создаем кнопки на нем. Откорректируйте все в соответствии с дизайном вашего сайта.
Сохраните все изменения и посмотрите полученный результат, нажав на «Предпросмотр».
Также для создания меню можно воспользоваться встроенным модулем меню.
Шаг 11: Создаем контейнеры с контентом
Примечание: Контейнеры - это клипы в website.fla, где содержимое может быть добавлено динамически. Они могут быть 4-х видов: 1) контейнер с объектами, которые видны на всем сайте, 2) контейнер с объектами лейаута; 3) контейнер с объектами страницы; 4) контейнер с объектами всплывающего окна.
Шаблон сайта №1, который мы выбрали, имеет по умолчанию два контейнера: контейнер с объектами, видимыми на всем сайте и контейнер с объектами страницы. Если мы откроем файл website.fla мы их увидим:
Эти контейнеры отписаны в файле structure.xml. Убедитесь, что ширина 980, а высота 800 пикселей.
Контейнер с объектами, которые видны на всем сайте:
Контейнер с объектами страницы:
Чтобы создать такие элементы сайта, как фон, название сайта, слоган и нижнее меню с серым прямоугольником, видимыми на всех страницах, мы должны разместить их в контейнере с объектами всего сайта. Мы легко это можем сделать при помощи Панели управления Moto CMS. Просто щелкните по нужному элементу и выберите его расположение – Website . (On The Entire Website).
Шаг 12: Создаем страницу «О нас»
Создаем пустую страницу
В левом верхнем углу нажимаем кнопку «Создать», которая позволит нам создать новую страницу.
Соединяем необходимые кнопки меню с новой страницей
Для этого возвращаемся на главную страницу и соединяем кнопку меню с новой страницей. Просто выделите текст кнопки меню и нажмите на иконку ссылки справа, чтобы открыть редактор ссылок. В нашем случае кнопка меню «Портфолио» ссылается на главную страницу сайта, а кнопка «О нас» на страницу «О нас».
Добавляем изображение фона на страницу «О нас»
Мы решили добавить на странице фон, черного цвета. Для этого переходим в Медиатеку, нажав кнопку «Фото» на левой панели, там выбираем предварительно загруженное изображение (обычный черный прямоугольник) и корректируем его расположение на странице в соответствии с дизайном.
Добавляем текст на страницу «О нас»
Добавляем текстовую информацию на страницу с помощь инструмента «Текст». Встроенный WYSIWYG-редактор показывает все, что вы делаете, поэтому форматирование текста не создаст никаких затруднений. Контактный адрес тоже достаточно легко добавить, нужно просто открыть Редактор ссылок и указать адрес электронной почты.
Когда все будет готово, не забудьте поместить элементы страницы «О нас» в контейнер с объектами страницы. Выделите каждый элемент по одному и выберите размещение: Page (page content).
Шаг 13: Изменяем изображение прелоадера
Возможно, вы заметили при переходе по страницам белые круговые прелоадеры. Для того, чтобы их настроить, откройте файл website.fla и пройдите в библиотеку. Щелкните правой кнопкой мыши на прелоадер и выберите Properties.
В окне свойств символа можно выбрать пункт “Edit Base class” и затем заанимировать прелоадер так как вы хотите. Мы же оставим прелоадер пустым и удалим графическое изображение.
Шаг 14: Анимация сайта
Наконец-то, мы подошли к самой интересной части нашего руководства: анимации сайта. На данный момент, как вы уже могли заметить, сайт статичный, так как ни один контейнер не заанимирован. Поэтому нашим следующим шагом будет анимирование контейнеров и добавления другой анимации, для оживления нашего сайта.
Анимируем контейнеры по умолчанию
Контейнер с контентом легко анимировать по временной шкале. Открываем файл website.fla и создаем анимацию постепенного появления для каждого контейнера.
Сначала, заанимируем основной контейнер с объектами, видимыми на всем сайте. Это слой website_holder_1. Мы делаем простую анимацию с прозрачностью, но чем-нибудь украсим его появление. Создаем второй ключевой кадр на слое, устанавливаем Alpha 0% для первого ключевого кадра (сделать его прозрачным), создаем промежуточный кадр от первого до второго, а затем добавляем смягчение.
Давайте точно также создадим анимацию для контейнера с объектами страницы (page_1_holder_2 слой), но сделаем его появление немного позже.
Таким образом, мы добавим еще два ключевых кадра на слое, сделаем прозрачным контейнер в первом и втором кадрах, и создадим промежуточный кадр со смягчением от второго ключевого кадра до третьего.
Когда мы скомпилируем и загрузим сайт, мы увидим, что каждый элемент появляется уже с анимацией. Но при переходе с одной страницы на другую никакой анимации нет, только необычные мигания. За это ответственна вторая часть временной шкалы.
Так мы делаем анимацию появления и исчезновения контейнера.
Так как шрифт текста из системных шрифтов, мы должны изменить режим наложения с нормального слоя до уровня для всех экземпляров movieclip на слоях контейнеров.
Создаем дополнительные контейнеры и анимируем их.
Для хорошего flash сайта данной анимации недостаточно, поэтому мы сделаем анимированными и другие части сайта, например верхнюю часть (выделена желтым цветом на изображении ниже), нижняя часть (выделена зеленым) и само содержание (на изображении в красной рамочке).
Поскольку верхняя и нижняя части лежат на уровне всего сайта, то мы добавим два контейнера для этих двух частей. Перед добавлением контейнеров мы должны определить их размеры и расположение. Это легко сделать с помощью инструмента «Раскройка» (Slice) в Photoshop.
Верхняя часть имеет следующие рзмеры: x=0, y=0, ширина=980, высота=120.
Нижняя зона: x=0, y=765, ширина=980, высота=35.
Верхний контейнер будет содержать название сайта, нижний контейнер будет содержать меню, и они будут отображаться по-разному. Кроме того, они будут придерживаться верхней и нижней части экрана соответственно при переходе в полноэкранный режим.
После определения размеров контейнеров мы открываем файл structure.xml и добавляем новые контейнеры (на уровень сайта), указав их координаты, ширину, высоту и глубину.
После добавления контейнеров в.xml файл, мы должны создать их в файле website.fla. Открываем файл website.fla и создаем новые слои для наших контейнеров. Порядок слоев должен соответствовать значениям глубины, которые мы установили в xml файле.
Мы можем скопировать пустой movieclip из слоя website_holder_1 и вставить его в website_holder_3 и website_holder_4.
В клипе устанавливаем те же координаты, что указаны в файле structure.xml.
Для 3-его контейнера: x = 0, y = 0;
Для 4-го контейнера: х = 0, y = 765.
Поскольку клип мы скопировали, остались старые названия. Мы изменяем их в соответствии с ID, так чтобы их было легко найти.
То же самое необходимо сделать и для контейнера 4.
На временной шкале первый ключевой кадр для контейнеров 3 и 4 ставим так, чтобы они начинали появление позже, чем контейнер с объектами всего сайта. Затем мы создаем вторые ключевые кадры и анимацию промежуточных кадров. Первый ключевые кадры содержат начальное положение контейнеров, а вторые ключевые кадры содержат заключительное положение контейнеров на сайте. Главный контейнер появляется из верхней части экрана, поэтому мы перемещаем его в первый ключевой кадр; нижний контейнер – с нижней стороны, поэтому его мы тоже перемещаем в первый ключевой кадр. И мы также добавляем easings для анимации промежуточных кадров.
Вот, что у нас получилось:
После этого мы должны добавить следующий код на слое actions на уровне первого ключевого кадра анимации наших контейнеров.
Затем компилируем сайт и обновляем Панель управления.
Размещаем объекты в контейнерах
При выборе любого объекта, вы увидите, что в списке возможных мест размещения в раскрывающемся меню появилось два новых контейнера: верхний и нижний.
Название сайта со слоганом необходимо разместить в верхнем контейнере, а меню сайта с серым прямоугольником в нижнем.
Изменяем содержание нижнего контейнера
Теперь желательно, чтобы на большом экране нижний контейнер придерживался нижней части экрана. Для этого мы должны переместить анимацию контейнера в другой клип, потому что, как вы знаете, мы не можем переместить анимируемый клип программно (анимация не будет работать). Назовем этот клип website_holder_4_c.
После этого перейдем на главную сцену, щелкнем по первым ключевым кадрам контейнеров 3 и 4 и отредактируем код.
После компиляции сайта, вы можете увидеть, что нижний контейнер придерживается нижней части экрана, независимо от того, как мы изменяем размеры экрана. Если разрешение экрана будет слишком маленьким, то нижний контейнер не будет накладываться на содержание сайта, и останется на месте.
Шаг 15: Анимируем контейнер с содержанием сайта
Для того, чтобы заанимировать содержание сайта, мы должны будем заанимировать контейнер с объектами всего сайта так же, как мы это делали для верхнего и нижнего контейнеров.
Шаг 16: Создаем страницу «Контакты»
Прежде чем создать новую страницу, давайте обновим шаблон страницы. Давайте сделаем шаблоном для всех новых страниц, страницу «О нас». Щелкните правой кнопкой мыши на странице «О нас» и выберите «Обновить шаблон страницы».
После того, как мы обновили шаблон страницы, нажмите на кнопку “Создать”, введите название страницы, заголовок, присвойте URL-адрес и выберете ее местоположение в структуре вашего сайта, так как это показано ниже, на скриншоте.
Страница «Контакты» готова. Теперь осталось отредактировать ее содержание с помощью удобного WYSIWYG-редактора, а с помощью редактора ссылок соединить ее с соответствующей кнопкой меню.
Шаг 17: Создаем простой слот
В Moto Flash CMS слоты играют роль анимированных объектов. Слот может содержать большое количество анимированных функций, которыми можно управлять непосредственно из Панели управления.
Сначала мы попробуем создать простой слот, а потом улучшить его.
Давайте начнем с кнопки «Закрыть», добавим ее на сайт как изображение, применим некоторые эффекты к ней и назначим действие «Перейти к странице» –> «Главная».
Анимируем кнопку «Закрыть», это совсем не сложно, потому что мы сделаем это, используя слот. Давайте создадим слот в файле website.fla. Для этого импортируем изображение кнопки «Закрыть» в библиотеку. В разделе Слоты мы должны создать новый movieclip и назвать его CloseButtonSlot.
Установим класс как CloseButtonSlot. Не нужно создавать новый класс, достаточно унаследовать класс AbstractMotoSlot. Просто скопируйте: com.moto.template.shell.view.components.AbstractMotoSlot, и вставьте его в поле Base Class.
Затем мы добавляем изображение кнопки «Закрыть» на сцену (CloseButtonSlot MovieClip должен быть открыт) и преобразовываем его в клип под названием CloseButtonIcon. Так как мы унаследовали наш слот от класса AbstractMotoSlot, то это дает нам основную анимацию. Сейчас мы сделаем красивый эффект разворачивания/сворачивания.
Следующим шагом будет создание нового слоя и создание ключевых кадров, в которые необходимо поместить “Stop ();”. Разместим основные метки “over” (между первым и вторым кадрами остановки) и “out” (между вторым и третьим ключевыми кадрами остановки) – см. скриншот:
Мы создаем те же ключевые и промежуточные кадры на слое с нашим клипом.
Например, наша кнопка «Закрыть» будет вращаться по часовой стрелке тогда, когда на нее навели курсор мыши и против, когда убрали.
Давайте добавим яркости при вращении и смягчение для анимации движения.
После того, как анимация сделана, мы компилируем файл website.fla с нашим новым слотом (Ctrl + Enter).
Для того, чтобы работать со слотом с помощью Moto CMS нам необходимо указать его параметры а файле: structure.xml:
librarySymbolLinkage=” ” – экспорт movieclip слота (Class name).
animated=”true” – атрибут, в котором указывается анимированный слот или нет.
resizable=”false” – есть ли логика для изменения размеров слота или нет.
locked=”false” – должен ли слот отображаться в Панели управления или нет.
– значения по умолчанию для всех свойств слота, необходимо добавить атрибут alpha=” “- прозрачность слота, от 0 до 1.
В нашем случае получилось вот что:
После этого перейдите в Панель управления и откройте любую страницу. В разделе “Слот” вы увидите все доступные слоты. Выберите слот кнопки Close и разместите его на странице вместо изображения кнопки «Close».
Когда слот выбран, справа появится панель свойств. Перейдите к «Действия» → “при нажатии” поставьте галочку «Включить» → «Перейти к странице» → «Главная».
Затем скопируйте слот и вставьте его на другие страницы, где необходима кнопка «Закрыть». Сохраните изменения и проверьте результат.
Шаг 18: Создаем более сложный слот
Создаем клип SimpleButtonSlot. Изменяем файл structure.xml
В нашем случае сложность слота - это добавление динамически изменяющихся параметров. Давайте создадим слот-кнопку с некоторыми переменными параметрами. Для этого открываем файл website.fla, создаем новый клип и называем его SimpleButtonSlot. Base Class прописываем также как в шаге 17.
Base Class: com.moto.template.shell.view.components.AbstractMotoSlot.
Затем добавляем текстовое поле с именем “Label” и плоскость с этой кнопкой. Преобразовываем плосткость в клип с именем “ButtonLabelPlane”.
Для удобства будем конвертировать Label в мувиклип и назовем его “labelHolder”, а затем преобразуем ButtonLabelPlane в другой мувиклип и назовем его “planeHolder.
Откроем файл structure.xml и добавим новый слот с двумя свойствами. Просто скопируйте и вставьте следующий код в разделе слотов:
Создаем класс SimpleButtonSlot
Для того, чтобы обработать эти два свойства класса Base не достаточно. Поэтому нам необходимо создать новый класс. Создаем новый файл ActionScript в папке src/slots, называем его SimpleButtonSlot.as и добавляем следующий код:
Теперь возвращаемся к клипу SimpleButtonSlot и указываем другой класс:
slots.SimpleButtonSlot.
После этого мы должны импортировать клип вот сюда:
Для того, чтобы обрабатывались оба свойства, мы должны переопределить функцию updateProperty (). В следующем фрагменте кода PropertyVO появляется со своим значением, типом, параметром и функцией getParameter (). Мы используем структуру “switch”, поскольку у нас есть два свойства: htmlText и Color.
Теперь давайте опишем наш TextField (labelHolder) и плоскость (planeHolder).
После этого нам нужно добавить функцию AutoSize:
Так как наш слот изменяемого размера, давайте отцентрируем текст в плоскости. Для этого мы должны переопределить функцию SetSize (). Кроме того, нам необходимо изменить размер плоскости в зависимости от ширины текстовой метки. Мы должны вызвать функцию SetSize () для updateProperty (), когда свойство метки обновлено.
Скомпилируйте сайт, чтобы сохранить изменения.
Анимируем слот
Открываем файл website.fla, переходим на основную сцену, а затем в клип SimpleButtonSlot. На Layer3 делаем три ключевых кадра и вставляем Stop ();. Размещаем основные метки “over” (между первым и вторым кадрами остановки) и “out” (между вторым и третьим ключевыми кадрами остановки).
Давайте заанимируем planeHolder (т.е. фон). Например, он может вылететь и остановиться. На временной шкале это будет выглядеть вот так:
Скомпилируйте сайт и посмотрите полученные изменения. Теперь мы можем работать со слотом объекта. Использование панель управления слота (справа), мы можем отредактировать свойства слота и применить к нему различные эффекты.
Вот хороший пример того, как можно использовать этот слот на нашем сайте. Мы использовали его на странице «О нас» при указании электронного адреса почты.
Шаг 19: Создаем музыкальный flash плеер
Примечание: Модули - анимированные элементы, полученные из слотов, которые доступны в библиотеке или могут быть загружены из внешнего файла SWF. Они обладают набором свойств, что позволяет пользователям легко ими управлять. По сравнению со слотами, модули имеют большое преимущество: каждый модуль имеет свою собственную панель управления. Моtо Flash CMS предоставляет пять типов панелей управления для создания собственных пользовательских модулей. Это означает, что Flash разработчики могут заниматься созданием интерфейса, так как остальное уже создано разработчиками Moto CMS.
Например, шаблон № 1, который мы используем, имеет встроенный модуль с музыкальным плеером. Вы можете легко добавить этот модуль на любую страницу и открыть панель управления, дважды щелкнув на нем.
Создание мувиклипа MusicPlayerModule. Изменение файла structure.xml
Давайте создадим простой музыкальный плеер с функцией включения/выключения. Открываем файл website.fla и создаем новый клип, называем его «MusicPlayerModule» и указываем базовый класс: modules.MusicPlayerModule. Затем добавляем на сцену и преобразовываем его в клип «musicPlayerIcon».
Открываем файл structure.xml и добавляем новый модуль. В разделе модулей добавляем следующий код:
Создаем класс MusicPlayerModule
Создаем новый файл ActionScript в папке src/modules и называем его MusicPlayerModule и добавляем следующий код, чтобы создать пустую оболочку для класса:
Скомпилируйте сайт и перезагрузите Панель управления Moto CMS. В левой панели найдите Модули и выбрав музыкальный плеер разместите его на странице.
Дважды щелкните по модулю, чтобы открыть панель управления и загрузить пару треков (с помощью кнопки «Добавить»). Теперь вы можете слышать музыку, но не можете ее остановить.
Чтобы это исправить перейдем в клип MusicPlayerModule и создадим форму. Преобразуем его в ролик с названием «Кнопка». Мы будем использовать его для обработки событий нажатия и включения/выключения звука.
Так как модуль Музыкальный плеер использует логику «общего объекта» и помнит включен ли звук или выключен, то при включении модуль должен проверить играет музыка или нет.
Шаг 20: Создаем Flash галерею изображений
Этот шаг очень обширен. Сейчас мы опишем как быстро вставить галерею с предоставлением всех необходимых исходных файлов.
Открываем файл structure.xml и вставляем модуль галереи.
Как только модуль добавлен, он должен появиться в Панели управления. Но для того, чтобы с ним работать, необходимо создать три класса: GalleryModule.as, Monitor.as и Scroll_bar.as, которые можно найти в папке /gallery_sources/.
Загрузите в папку src/modules эти классы (GalleryModule.as, Monitor.as и Scroll_bar.as).
В zip архиве вы также можете найти файл gallery.fla. Скопируйте movieclip галереи из gallery.fla в website.fla.
Как только все будет загружено на локальный сервер, вы можете начать работать с галереей. В левой панеле нажмите Модуль, выберите галерею изображений и разместите ее на странице. Дважды щелкните по модулю, чтобы открылась панель управления. Добавим несколько фотографий с помощью кнопки «Добавить».
Вы можете указать название и Alt для каждого изображения, добавить описание или соединить изображение ссылкой с любой страницей сайта, всплывающим окном или даже с внешним URL-адресом.
Сохраните изменения и посмотрите сайт.
Заключение
Вот мы и завершили рассказ о том, как создать с нуля сайт-фотопортфолио с помощью Moto flash CMS. Помните, что Моtо CMS
предоставляет множество дополнительных модулей и виджетов, на основе которых можно создавать собственные модули, что позволяет экономить ваше время и сократить расходы. Кроме того, это Flash CMS также предоставляет все необходимые SEO инструменты, которые могут помочь вам оптимизировать ваш сайт, чтобы он занял более высокое место в поисковой выдаче.
И в нашем онлайн-магазине вы найдете более 80-ти профессиональных, функциональных и красивых шаблонов флеш сайтов
.
Удачи в разработке.
Мы постоянно сталкиваемся с флеш-анимацией – в интернете и в телевизионных трансляциях. Создание простой флеш-анимации с помощью технологии Flash – довольно простая задача, так как Flash предлагает много полезных инструментов, которые упрощают весь процесс. Если вы хотите создать флеш-анимацию или мультфильм, то вы можете сделать его набросок всего за пару часов.
Шаги
Часть 1
Покадровая флеш-анимация- По умолчанию Flash воспроизводит 24 кадра в секунду (FPS). Это означает, что за одну секунду будут показаны 24 кадра, но не все из них должны быть обязательно разными. Вы можете изменить этот параметр (если хотите) на 12 кадров в секунду, но при 24 кадрах в секунду анимация будет воспроизводиться более «гладко».
-
Установите Flash Professional. Есть множество программ для создания флеш-анимации, но наиболее мощной является Adobe Flash Professional CC. Вы можете бесплатно установить пробную версию этой программы или использовать другой продукт (если вы не хотите регистрироваться на Adobe Creative Cloud). Далее в этой статье описывается работа с Flash Professional.
Так как покадровая анимация требует наличия нескольких изображений (которые немного отличаются друг от друга), то вам нужно создать эти изображения вручную. Для этого воспользуйтесь Adobe Flash Professional или нарисуйте изображения в любом графическом редакторе.
- Если вы хотите, чтобы размер ваших изображений легко менялся без потери их качества, создавайте изображения в векторной, а не в растровой графике. Векторные изображения будут перерисовывать себя при изменении их размера (то есть вы избежите пикселизации или сглаживания). Растровые изображения – это традиционные изображения, например, фотографии, нарисованные картинки и так далее. При попытке увеличить такие изображения вы получите сильно искаженную картинку.
-
Создайте первый кадр. При первом запуске Adobe Flash Professional вы увидите пустой холст (слой) и пустую временную шкалу. По мере добавления кадров временная шкала будет заполняться автоматически. Вы можете работать со слоями так же, как вы делаете это в Photoshop.
- Прежде чем добавить изображение, создайте базовый фон вашей анимации. Переименуйте «Слой 1» в «Фон», а затем закрепите его. Создайте второй слой и назовите его как угодно. Это будет слой, на котором вы будете создавать анимацию.
- Добавьте рисунок на холст первого кадра. Вы можете импортировать рисунок с вашего компьютера, или вы можете использовать инструменты для рисования, чтобы создать рисунок непосредственно в программе.
- Первый кадр – это «ключевой» кадр. Ключевой кадр – это кадр, который включает изображение и образует основу («костяк») анимации. Вы будете создавать новый ключевой кадр каждый раз при изменении изображения.
- Ключевые кадры на временной шкале обозначаются черной точкой.
- Вы не нужен ключевой кадр в каждом последующем кадре. Создавайте ключевой кадр через каждые четыре-пять кадров, чтобы сделать хорошую анимацию.
-
Преобразуйте изображение в символ. В этом случае вы сможете добавить изображение в кадр несколько раз. Это особенно полезно, если вам нужно быстро добавить несколько однотипных картинок в один кадр (например, рыбки в аквариуме).
- Выделите рисунок. Щелкните правой кнопкой мыши по рисунку и выберите «Convert to Symbol» (Преобразовать в символ). Изображение будет добавлено в библиотеку, что упростит его использование в будущем.
- Удалите рисунок. Не волнуйтесь - вы сможете добавлять его в кадр простым перетаскиванием из библиотеки. Так вы можете добавить в кадр один и тот же рисунок несколько раз.
-
Добавьте пустые кадры. Если ваш первый ключевой кадр готов, вставьте пустые кадры, а затем приступайте к созданию второго ключевого кадра. Нажмите F5 (четыре или пять раз), чтобы добавить пустые кадры после первого ключевого кадра.
-
Создайте второй ключевой кадр (после того, как вы добавили несколько пустых кадров). Есть два различных способа сделать это: вы можете скопировать существующий ключевой кадр и внести в него небольшие изменения, или вы можете создать пустой ключевой кадр и добавить в него новое изображение. Если вы используете рисунок, созданный в другой программе, воспользуйтесь вторым способом. Если вы вставляете изображение, созданное при помощи инструментов для рисования Adobe Flash Professional, воспользуйтесь первым методом.
- Чтобы создать ключевой кадр, используя содержимое предыдущего ключевого кадра, нажмите F6. Чтобы создать пустой ключевой кадр, щелкните правой кнопкой мыши по последнему кадру на временной шкале и выберите «Insert Blank Keyframe» (Вставить пустой ключевой кадр).
- После того как вы создали второй ключевой кадр, вам нужно внести изменения в его изображение, чтобы анимация «ожила». Если вы пользовались инструментами для рисования Adobe Flash Professional, выберите инструмент «Transform» (Преобразование), чтобы выделить элемент вашего рисунка (например, руку персонажа) и изменить его.
- Если в каждый ключевой кадр вы вставляете новое изображение, убедитесь, что оно находится в нужном месте (согласно логической последовательности кадров).
-
Повторите процесс. После создания двух ключевых кадров повторите процесс – добавьте несколько пустых кадров между каждыми ключевыми кадрами и убедитесь, что анимация будет проигрываться «гладко».
- Вносите небольшие изменения. Чем меньше (незаметнее) изменения, тем глаже воспроизводится анимация. Например, если вы хотите, чтобы персонаж поднимал руку, второй ключевой кадр не должен включать рисунок, на котором персонаж изображен с уже поднятой рукой. Вместо этого используйте несколько ключевых кадров для перехода от опущенной руки к поднятой руке. В этом случае анимация будет более плавной.
-
Преобразуйте рисунок. Если вы создали ключевые кадры и траекторию, вы можете преобразовать изображение так, чтобы оно плавно менялось при движении по траектории твина. Вы можете изменить форму, цвет, наклон, размер и любой другой параметр изображения.
- Выберите кадр, в котором рисунок будет преображаться.
- Откройте панель свойств рисунка. Для этого нажмите F3.
- Измените значения параметров в окне свойств рисунка. Например, вы можете изменить оттенок или цвет, добавить фильтры, изменить размер.
- Вы также можете использовать инструмент «Free Transform» (Свободное преобразование), чтобы менять рисунок так, как вам угодно.
-
Добавьте заключительные штрихи. Проверьте созданную анимацию, нажав Ctrl + Enter. Убедитесь, что рисунок (персонаж) правильно меняется и что анимация воспроизводится с правильной скоростью. Если анимация воспроизводится слишком быстро, уменьшите значение FPS или увеличьте продолжительность твина.
- По умолчанию FPS равен 24, поэтому попробуйте уменьшить это значение до 12. Измените значение FPS на панели свойств. Однако при FPS = 12 анимация может воспроизводиться недостаточно плавно.
- Чтобы изменить продолжительность твина, выберите слой, содержащий твин, и при помощи ползунка измените продолжительность твина. Если вы хотите удвоить продолжительность твина, передвиньте ползунок на 48 кадров. Не забудьте вставить фон в пустые кадры, чтобы фон не исчез посередине анимации. Для этого выберите фоновый слой, щелкните по последнему кадру анимации (на временной шкале), а затем нажмите F5.
Основы покадровой анимации. Этот метод считается основным методом создания «традиционной» анимации, в которой каждый последующий кадр включает одно, но чуть измененное изображение. При воспроизведении всех кадров изображение «оживает». Этот же метод используется аниматорами, рисующими мультфильмы от руки, и отнимает больше времени, чем твининг (смотрите следующий раздел).
Вы не задумывались, что скрывается за красивой анимацией баннеров в интернете? Или за новомодными мультиками, созданными с помощью компьютерных технологий? Чаще всего в их основе лежит «плоть », точнее так переводится с английского название технологии Flash . Сегодня мы поговорим о флеш анимация для сайта:
Технология Flash
Мультимедийная основа, была разработана компанией Macromedia . Но после ее поглощения (слияния ) все права на технологию перешли новому владельцу — компании Adobe Systems .
Область современного применения Adobe Flash :
- Создание веб-приложений – достаточно новое направление. Подразумевает полное или частичное применение Flash для создания сайтов. При частичном применении с помощью данной технологии создаются отдельные элементы дизайна: различные интерактивные меню, анимированные кнопки и т.д.
По сравнению с обычными ресурсами на основе html флеш-сайты обладают некоторыми особенностями, ограничивающими их применение. Сюда можно отнести большую стоимость разработки, требовательность к серверным ресурсам, долгое время загрузки при медленном соединении с интернетом и некоторые другие аспекты:
- Реализация мультимедийных возможностей – для прослушивания аудио и воспроизведения видео на сайтах часто используют медиа плееры, созданные на основе Flash . Их разработка включает в себя использование одного из скриптовых языков (чаще JavaScript ):
- В средствах интернет-рекламы – чаще всего технология используется для создания анимированных баннеров. Они подразумевают не только проигрывание мультимедийной рекламы, но и некое взаимодействие с пользователем на игровой основе.
Основы и инструментарий для разработки Flash
Для создания флеш анимации чаще всего используется традиционный инструментарий от Adobe :
- Adobe Flash Professional – программа для создания интерактивной анимации (аниматор );
- Adobe Flash Builder – среда для создания интерфейса веб-приложений;
- Adobe Flash Player – интегрируемый в браузер плеер для воспроизведения Flash .
Кроме него воспроизводить мультимедийное содержимое такого типа может ряд сторонних приложений. Наиболее популярными из них являются Gnash , QuickTime и некоторые другие:
Данная технология позволяет отображать любой тип графики (растровую, векторную, 3D ). А также поддерживает потоковую ретрансляцию аудио и видео данных. Специально для мобильных устройств была разработана облегченная версия Flash Lite .
Основным стандартом для флэш-файлов является расширение SWF . Аббревиатура расшифровывается как Small Web Format . Видео, записанное в Flash , имеет файловые расширения FLV , F4V .
В основе разработки интерактивной анимации на флэш лежит векторная графика. Именно благодаря этому удалось реализовать поддержку мультимедийной платформы и независимость качества анимации от разрешения экрана.
Размер файла флэш приложения одинаков для всех пользователей независимо от технических характеристик экрана (разрешения ).
Интерактивная анимация на Flash основана на морфинге (векторного типа ), при котором происходит медленное перетекание между ключевыми кадрами. Для воспроизведения данных используется флэш-плеер, работа которого во многом схожа с работой виртуальной машины JavaScript . Программная составляющая технологии реализована с помощью языка ActionScript .
К недостаткам технологии можно отнести следующие моменты:
- Сильная нагрузка на центральный процессор клиентской машины. Это связано с низкой эффективностью виртуальной машины флэш, встраиваемой вместе с проигрывателем в браузер пользователя;
- Высокая вероятность возникновения ошибок – проигрывание флэш анимации может происходить с высокой вероятностью возникновения ошибок. Причем сбои в проигрывании Flash негативно влияют на работу всего клиентского приложения (браузера ). Это связано это с недостаточным контролем отказоустойчивости программного кода при создании флэш-приложений;
- Невозможность индексирования – весь текстовый контент, отображаемый в содержимом Flash , не участвует в процессе индексации. Данное ограничение особенно проблематично для тех ресурсов, которые созданы на основе этой технологии.
Обзор стороннего программного обеспечения для создания Flash
В качестве опытного образца приложения, на котором мы будем демонстрировать основы создания Flash , был взят Sothink SWF Quicker . По мнению многих профессионалов, программа является наиболее понятной и простой для изучения.
Кроме создания и редактирования флэш редактор «умеет » работать со всеми остальными видами веб-анимации (GIF , HTML и другие стандарты):
После инсталляции заходим в дружественный интерфейс программы. К сожалению, после блуждания по всем закоулкам переключателя языка интерфейса мы не нашли.
Для того чтобы понять, как сделать флеш анимацию в этом приложении, воспользуемся встроенными шаблонами. Диалоговое окно «New From Template » появляется сразу после запуска программы. Кроме того его можно вызвать через пункт главного меню «File ». Среди предлагаемых вариантов мы выбрали создание баннера:
В следующем окне мастера из выпадающего списка нужно выбрать шаблон, по которому будет происходить создание анимации. Под ним находится небольшой фрейм, в котором проигрывается выбранный шаблон:
На следующих этапах нужно задать размеры баннера и ввести 5 фраз текста, которые будут проигрываться в анимации. Кроме того необходимо указать адрес ресурса, на который пользователя приведет клик по баннеру:
После компиляции проекта и закрытия окна мастера можно просмотреть получившийся ролик во встроенном проигрывателе. Для этого нужно нажать на зеленую стрелку вверху:
После закрытия проигрывателя давайте более подробно изучим интерфейс приложения. Обратите внимание, что он состоит из двух основных окон: верхнее предназначено для редактирования временного промежутка ролика, а нижнее представляет собой обычный графический редактор. Каждый из элементов расположен на отдельном слое, который доступен для изменения с помощью стандартных инструментов, расположенных на боковой панели:
Созданную флеш анимацию для сайта можно опубликовать. Способ публикации можно выбрать, нажав вверху на кнопку «Publish ». Предлагается на выбор три варианта, в том числе и вставка в html код. Детальная настройка этого процесса доступна в отдельном окне «Publish Settings ».