На данной web странице Вашему вниманию представлены программы для создания и редактирования флеш анимации. С их помощью Вы сможете реализовать собственные идеи в анимированные ролики для Вашего сайта.
Флеш редактор – это программа для создания flash анимации и редактирования уже готовых флеш роликов.
Формат FLA - это исходный документ вашего клипа. Открыв его, вы попадаете в программу Macromedia Flash и можете дальше редактировать клип.
Формат SWF - это исполняемый файл Flash, при "клике" мышью на нем вы имеете возможность просмотреть клип с помощью программы Macromedia Flash Player.
Adobe Flash Professional CS3 – достоинства и функциональности данной программы можно описывать очень долго. Данная программа является безусловным лидером в среде флеш технологий. Adobe Flash Professional пользуются, как профессиональные разработчики Web-сайтов, так и flash дизайнеры.
С помощью этой программы можно реализовать во флеш даже самую больную фантазию. В общем если Вы решили создавать профессиональные анимированные флеш файлы , то Adobe Flash Professional – это именно та программа, без которой Вам не обойтись.
Объём зависит от версии от 500 Mb.
На данный момент Adobe Flash Professional CS5 - новая версия программы для работы с анимацией и мультимедиа.
ОС: Windows XP/Vista/7
Скриншот программы:
скачать Adobe Flash Professional CS3Возможно, для начинающего web мастера создание флеш анимации с помощью программы Adobe Flash Professional покажется, чем то сложным и не досягаемым.
В этом случаи не стоит отчаиваться и бросать начатое. Попробуйте свои флеш идеи с программой Swishmax.
SwishMAX – это альтернативная программа с дружественным и простым интерфейсом для создания flash-анимации, которая является менее функциональной, по сравнению с предыдущей, но при этом позволяет получить результат хорошего качества. Главное преимущество донного flash редактора - это простота использования. Даже начинающий пользователь, имея под руками видео уроки, за короткое время сможет создать с ее помощью профессиональные флеш - ролики.
Объём: 9.27 MB.
Язык интерфейса - русский есть.
Операционная система: Windows 98/Me/NT/2000/XP
Скриншот программы:
Следующая flash программа является ещё более простой, как по функциональности, так и по содержимому интерфейса. Возможности этого флеш редактора позволяют с лёгкостью за считанные минуты создавать flash баннер для сайта.
Имеется более 130 эффектов: исчезновение, изменение масштаба, вращение. Анимированные рисунки, фигуры или текст, и даже звук без проблем добавляются к Вашей Flash-анимации.
Здесь так же можно указать OnClick или OnOver.
Объём: 5.3 MB.
Язык интерфейса - русский есть.
ОС: Windows XP/Vista/7
Скриншот программы:
Ещё одна программа, которая не является flash редактором анимации, но её возможности необходимы для начинающего веб дизайнера.
Flash Decompiler Trillix – основное предназначение этой программы - экспорта SWF файлов обратно в FLA формат одним нажатием кнопки мыши. Извлекает все объекты Flash из SWF файла и сохраняет их во FLA файл, который в дальнейшем можно редактировать во Flash.
Достоинство Flash Decompiler - редактирование звуков, изображений, цвета, градиента, линий, динамических текстов и ссылок без конвертации во FLA.
Объём: 7.27 MB.
Язык интерфейса - русский есть.
ОС: Windows XP/Vista/7
Скриншот программы:
October 13, 2014
Для того, чтобы сделать простую анимацию подобную той, о которой мы говорили в предыдущем уроке нужно создать новый файл (документ).
1. В главном меню Adobe Flash Professional CS6 выберите File > New .
Перед вами появится диалоговое окно New Document (Новый документ).
2. Выберите вкладку General , а в ней ActionScript 3.0 .
Другие опции списка нацелены на другие среды воспроизведения, например, AIR for Android и AIR for iOS создадут новые файлы, которые сможет проигрывать AIR на устройствах под управлением операционной системы Android или устройствах, созданных компанией Apple (iPad, iPhone).
3. В правой части диалогового окна задайте нужные параметры для сцены.
Введите в соотвествующие поля необходимые значения:
4. Нажмите ОК.
Flash CS6 создаст новый файл с заданными установками.
5. Выберите File > Save .
Дайте имя вашему файлу 01_disneyland.fla . Из выпадающего списка Тип файла выберите Flash CS6 document (*.fla) . Сохраните его в папке Урок 01 . Сохранение файла в самом начале работы - это хорошая привычка. Обязательно выработайте ее у себя. Она здорово выручит в ситуациях, когда программа или компьютер зависнут или будут отключены по тем или иным причинам. Всегда сохраняйте ваш файл с расширением.fla .
Итак, в этом вы узнали как создавать новый файл (документ). В следующем уроке я подробно расскажу вам о рабочем пространстве этой программы.
Пожалуйста, включите JavaScript, чтобы увидеть комментарии.* Используемые программы
: Flash CS3, Photoshop CS3
* Сложность
: средняя
* Приблизительное время выполнения
: 3 часа
Сайт-портфолио имеет большое значение для любого современного художника, фотографа, дизайнера и даже музыканта. Он показывает серьезный подход к делу и профессионализм. Сегодня мы покажем как можно создать оригинальное и стильное фотопортфолио, на основе современной системы управления Flash контентом Moto CMS.
Мы будем использовать автономную версию Moto CMS , которая содержит разные утилиты, компоненты, встроенные примеры и чистые шаблоны сайта с разной структурой. И используем самый простой шаблон, то есть создадим сайт-фотопортфолио с нуля.
* Создание контейнеров.
* Создание слотов (кнопка «Закрыть», простая кнопка).
* Создание модулей (музыкальный плеер и галерея изображений).
* Редактирование прелоадера сайта
* Создание страниц сайта и наполнение их контентом.
Так же расскажем о возможностях и функциональности Панели управления Moto CMS.
Нам понадобится:
* Adobe Photoshop;
* Adobe Flash CS3;
* Автономная версия Moto CMS (бесплатная пробная версия);
* Дизайн сайта в. PSD формате.
Чтобы начать создавать наш сайт фотопортфолио необходимо загрузить автономную версию Moto Flash CMS. Для того, чтобы повторить все действия из этого руководства и понять возможности Moto CMS пробной версии будет достаточно.
Вот краткий обзор файлов и папок Moto CMS:
* Components
. В этой папке содержатся компоненты mxp, управляемые Adobe Extension Manager.
* Control panel
. Содержит все файлы Панели управления.
* Docs
. Эта папка содержит API документацию.
* Examples
. Содержит 4 примера готовых flash сайтов, от самого простого до сложного, с модулем галереи, модулем новостей, музыкальным и видео плеером, контакт формой и т.д.
* Templates
. 5 шаблонов, которые можно использовать для создания сайта на основе Moto CMS. Каждый шаблон имеет необходимый набор файлов и отличается по своей структуре. Сегодня мы будем использовать один из этих шаблонов, в частности шаблон № 1, в качестве основы нашего фотопортфолио.
* Readme файл
, где описано с чего начать работу по созданию сайта с Moto CMS.
Нашим следующим шагом будет запуск шаблона сайта, на основе которого мы собираемся сделать наш сайт-портфолио. Для этого нам понадобится локальный веб-сервер. Мы используем WampServer. Он позволяет создавать веб-приложения с Apache, PHP и базы данных MySQL.
Для запуска шаблона сайта №1 просто загрузите на локальный сервер содержимое папки template_01 из каталога /templates/, а также содержимое папки controlPanel .
После этого мы переходим в Панель управления Moto CMS, указав свой URL в адресной строке браузера, добавив в конце /admin
Примечание: Сейчас вы не сможете посмотреть сайт, так как он еще не содержит ни одной страницы. Появится страница с 404 ошибкой.
Все, что нам нужно сделать, это изменить ширину и высоту сайта и задать цвет фона.
Размер нашего проекта 980×800 пикселей. Для того, чтобы размер изменялся на большом экране, мы должны поставить «100%» для ширины и высоты сайта. А для того, чтобы он корректно отображался на экране с маленьким разрешением, мы должны указать минимальную ширину и высоту сайта (появятся полосы прокрутки). Фоновый цвет черный (# 000000).
Теперь мы должны открыть файл style.css и указать цвет фона (черный). Все остальное можно будет отредактировать с помощью Панели управления Moto CMS.
Исходные файлы moto.xfl и website.xfl находятся в папках flamoto и flawebsite, соответственно.
Прелоадер для сайта следует создавать в moto.xfl. Прелоадер может быть простым клипом, состоящим из 100 кадров.
В панели Actions этого клипа мы пишем: “Stop ();” для первого кадра. Затем анимируем остальные кадры так как нам нравится.
Также пишем “Stop ();” в действиях первого кадра временной шкалы во fla.
Не забудьте указать размеры сайта (минимальную ширину и высоту) в свойствах файла moto.fla.
Наш следующий шаг заключается в создании красивой анимации исчезновения прелоадера. На последнем кадре мы должны запустить сайт путем активации функции “showWebsite ()”.
Откройте файл website.xfl и обновите прелоадер.
Откройте Медиатеку Moto CMS (Настройки> Медиатека) и наряду с другими необходимыми изображениями (для главной страницы, основных страниц или галереи) загрузите фоновое изображение с помощью кнопки “Добавить медиа”.
После этого возвращайтесь в Панель управления, создайте новую страницу и вставьте фоновое изображение с помощью кнопки “Фото”. Перетащите изображение и отцентрируйте его.
Менеджер шрифтов позволяет пользователям управлять шрифтами сайта, которые хранятся в виде SWF файлов и могут быть загружены.
Перед загрузкой любого шрифта, мы должны в первую очередь преобразовать его в SWF формат. Для этого мы будем использовать Оnline Font Creator – удобное онлайн приложение, разработанное командой MotoCMS, которое позволяет с легкостью конвертировать TTF и OTF файлы в SWF. Все, что нам нужно сделать, это выбрать необходимый файл шрифта с.TTF или.OTF расширением, добавить его в Оnline Font Creator, нажать кнопку “Создать шрифт” и скачать готовый SWF файл, после чего мы можем использовать его на нашем сайте-портфолио.
Как только новый шрифт загружен, вы можете создать название сайта и слоган, используя инструмент “Текст” и применяя необходимый шрифт. Чтобы создать слоган мы используем шрифт Tahoma, размер: 10, цвет: # 727272. После этого откорректируйте название и слоган сайта в соответствии с дизайном в.PSD.
Разместим изображение галереи на главной странице сайта. Для этого выбираем изображение из Медиатеки, нажав «Фото» в левой панели инструментов. При необходимости откорректируйте его местоположение в соответствии с дизайном главной страницы.
С помощью инструмента «Фигура» создаем серый узкий прямоугольник и с помощью инструмента «Текст» создаем кнопки на нем. Откорректируйте все в соответствии с дизайном вашего сайта.
Сохраните все изменения и посмотрите полученный результат, нажав на «Предпросмотр».
Также для создания меню можно воспользоваться встроенным модулем меню.
Примечание: Контейнеры - это клипы в website.fla, где содержимое может быть добавлено динамически. Они могут быть 4-х видов: 1) контейнер с объектами, которые видны на всем сайте, 2) контейнер с объектами лейаута; 3) контейнер с объектами страницы; 4) контейнер с объектами всплывающего окна.
Шаблон сайта №1, который мы выбрали, имеет по умолчанию два контейнера: контейнер с объектами, видимыми на всем сайте и контейнер с объектами страницы. Если мы откроем файл website.fla мы их увидим:
Эти контейнеры отписаны в файле structure.xml. Убедитесь, что ширина 980, а высота 800 пикселей.
Контейнер с объектами, которые видны на всем сайте:
Контейнер с объектами страницы:
Чтобы создать такие элементы сайта, как фон, название сайта, слоган и нижнее меню с серым прямоугольником, видимыми на всех страницах, мы должны разместить их в контейнере с объектами всего сайта. Мы легко это можем сделать при помощи Панели управления Moto CMS. Просто щелкните по нужному элементу и выберите его расположение – Website . (On The Entire Website).
В левом верхнем углу нажимаем кнопку «Создать», которая позволит нам создать новую страницу.
Для этого возвращаемся на главную страницу и соединяем кнопку меню с новой страницей. Просто выделите текст кнопки меню и нажмите на иконку ссылки справа, чтобы открыть редактор ссылок. В нашем случае кнопка меню «Портфолио» ссылается на главную страницу сайта, а кнопка «О нас» на страницу «О нас».
Мы решили добавить на странице фон, черного цвета. Для этого переходим в Медиатеку, нажав кнопку «Фото» на левой панели, там выбираем предварительно загруженное изображение (обычный черный прямоугольник) и корректируем его расположение на странице в соответствии с дизайном.
Добавляем текстовую информацию на страницу с помощь инструмента «Текст». Встроенный WYSIWYG-редактор показывает все, что вы делаете, поэтому форматирование текста не создаст никаких затруднений. Контактный адрес тоже достаточно легко добавить, нужно просто открыть Редактор ссылок и указать адрес электронной почты.
Когда все будет готово, не забудьте поместить элементы страницы «О нас» в контейнер с объектами страницы. Выделите каждый элемент по одному и выберите размещение: Page (page content).
Возможно, вы заметили при переходе по страницам белые круговые прелоадеры. Для того, чтобы их настроить, откройте файл website.fla и пройдите в библиотеку. Щелкните правой кнопкой мыши на прелоадер и выберите Properties.
В окне свойств символа можно выбрать пункт “Edit Base class” и затем заанимировать прелоадер так как вы хотите. Мы же оставим прелоадер пустым и удалим графическое изображение.
Наконец-то, мы подошли к самой интересной части нашего руководства: анимации сайта. На данный момент, как вы уже могли заметить, сайт статичный, так как ни один контейнер не заанимирован. Поэтому нашим следующим шагом будет анимирование контейнеров и добавления другой анимации, для оживления нашего сайта.
Контейнер с контентом легко анимировать по временной шкале. Открываем файл 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 и отредактируем код.
После компиляции сайта, вы можете увидеть, что нижний контейнер придерживается нижней части экрана, независимо от того, как мы изменяем размеры экрана. Если разрешение экрана будет слишком маленьким, то нижний контейнер не будет накладываться на содержание сайта, и останется на месте.
Для того, чтобы заанимировать содержание сайта, мы должны будем заанимировать контейнер с объектами всего сайта так же, как мы это делали для верхнего и нижнего контейнеров.
Прежде чем создать новую страницу, давайте обновим шаблон страницы. Давайте сделаем шаблоном для всех новых страниц, страницу «О нас». Щелкните правой кнопкой мыши на странице «О нас» и выберите «Обновить шаблон страницы».
После того, как мы обновили шаблон страницы, нажмите на кнопку “Создать”, введите название страницы, заголовок, присвойте URL-адрес и выберете ее местоположение в структуре вашего сайта, так как это показано ниже, на скриншоте.
Страница «Контакты» готова. Теперь осталось отредактировать ее содержание с помощью удобного WYSIWYG-редактора, а с помощью редактора ссылок соединить ее с соответствующей кнопкой меню.
В 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».
Когда слот выбран, справа появится панель свойств. Перейдите к «Действия» → “при нажатии” поставьте галочку «Включить» → «Перейти к странице» → «Главная».
Затем скопируйте слот и вставьте его на другие страницы, где необходима кнопка «Закрыть». Сохраните изменения и проверьте результат.
В нашем случае сложность слота - это добавление динамически изменяющихся параметров. Давайте создадим слот-кнопку с некоторыми переменными параметрами. Для этого открываем файл website.fla, создаем новый клип и называем его SimpleButtonSlot. Base Class прописываем также как в шаге 17.
Base Class: com.moto.template.shell.view.components.AbstractMotoSlot.
Затем добавляем текстовое поле с именем “Label” и плоскость с этой кнопкой. Преобразовываем плосткость в клип с именем “ButtonLabelPlane”.
Для удобства будем конвертировать Label в мувиклип и назовем его “labelHolder”, а затем преобразуем ButtonLabelPlane в другой мувиклип и назовем его “planeHolder.
Откроем файл structure.xml и добавим новый слот с двумя свойствами. Просто скопируйте и вставьте следующий код в разделе слотов:
Для того, чтобы обработать эти два свойства класса 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 (т.е. фон). Например, он может вылететь и остановиться. На временной шкале это будет выглядеть вот так:
Скомпилируйте сайт и посмотрите полученные изменения. Теперь мы можем работать со слотом объекта. Использование панель управления слота (справа), мы можем отредактировать свойства слота и применить к нему различные эффекты.
Вот хороший пример того, как можно использовать этот слот на нашем сайте. Мы использовали его на странице «О нас» при указании электронного адреса почты.
Примечание: Модули - анимированные элементы, полученные из слотов, которые доступны в библиотеке или могут быть загружены из внешнего файла SWF. Они обладают набором свойств, что позволяет пользователям легко ими управлять. По сравнению со слотами, модули имеют большое преимущество: каждый модуль имеет свою собственную панель управления. Моtо Flash CMS предоставляет пять типов панелей управления для создания собственных пользовательских модулей. Это означает, что Flash разработчики могут заниматься созданием интерфейса, так как остальное уже создано разработчиками Moto CMS.
Например, шаблон № 1, который мы используем, имеет встроенный модуль с музыкальным плеером. Вы можете легко добавить этот модуль на любую страницу и открыть панель управления, дважды щелкнув на нем.
Давайте создадим простой музыкальный плеер с функцией включения/выключения. Открываем файл website.fla и создаем новый клип, называем его «MusicPlayerModule» и указываем базовый класс: modules.MusicPlayerModule. Затем добавляем на сцену и преобразовываем его в клип «musicPlayerIcon».
Открываем файл structure.xml и добавляем новый модуль. В разделе модулей добавляем следующий код:
Создаем новый файл ActionScript в папке src/modules и называем его MusicPlayerModule и добавляем следующий код, чтобы создать пустую оболочку для класса:
Скомпилируйте сайт и перезагрузите Панель управления Moto CMS. В левой панели найдите Модули и выбрав музыкальный плеер разместите его на странице.
Дважды щелкните по модулю, чтобы открыть панель управления и загрузить пару треков (с помощью кнопки «Добавить»). Теперь вы можете слышать музыку, но не можете ее остановить.
Чтобы это исправить перейдем в клип MusicPlayerModule и создадим форму. Преобразуем его в ролик с названием «Кнопка». Мы будем использовать его для обработки событий нажатия и включения/выключения звука.
Так как модуль Музыкальный плеер использует логику «общего объекта» и помнит включен ли звук или выключен, то при включении модуль должен проверить играет музыка или нет.
Этот шаг очень обширен. Сейчас мы опишем как быстро вставить галерею с предоставлением всех необходимых исходных файлов.
Открываем файл 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-ти профессиональных, функциональных и красивых шаблонов флеш сайтов
.
Удачи в разработке.
И снова, здравствуйте! В связи с массой вопросов и мнений по поводу флеш-книг и электронных книг вообще, давайте посмотрим, как создать флеш-книгу без привлечения сторонних программ.
С неделю назад, столкнулся с интересной проблемой: как вставить флеш-книгу, созданную с способом описанным вот в , в блог созданный на бесплатной платформе? Не знаете!
Казалось бы, все элементарно, закидываете, полученные в программе Flip PDF файлы на хостинг и выводите уже на нужной странице блога. Но… все это возможно, если у вас блог расположен на платном хостинге и у вас есть доступ к файлам сайта через файловый менеджер хостинга или ту же Filezilla.
А если доступа нет? Что делать в таком случае?
Вот мне и задали сей вопрос: как запихнуть флеш-книгу на блог, созданный на бесплатной платформе Weebly (интересная платформа, кстати, можно создавать шаблон блога не заморачиваясь кодами, версткой и тому подобным).
Так вот, все бы ничего, если бы был доступ к хостингу, но оказывается бесплатным аккаунтам доступ не предоставляется. Что делать?
Решение есть. Как говорится, из любой безвыходной ситуации всегда есть два выхода, даже если вас съели, у вас все равно будет два выхода.
Решение довольно элементарное, но при этом удобное до безобразия, получаем что-то типа Ютуб, но только для книг.
Итак. Сервис называется issuu .
Повторюсь, сей сервис работает по принципу Ютуба, вы загружаете на него свои книги в формате PDF (можно и не только в PDF, но об этом дальше), а потом размещаете на страницах блога или ссылку или код.
Давайте посмотрим, как это все выглядит. Заходим по вышеуказанной ссылочке
И регистрируемся. Можно с помощью Фейсбука, а можно просто электронной почтой воспользоваться.
Мне проще с социалок, потому у меня это вот так выглядит
Так, книжечку в PDF-формате подготовили? Нет?! Тогда вам вот или , создавайте PDF-файл и двигаемся дальше.
Можно и не PDF, данный сервис поддерживает довольно много форматов, но существуют и некоторые ограничения (смотрите в конце статьи технические требования).
Если у вас вдруг нет книги под рукой, то возьмите любой текст, я вот, например, взял свою . Сверстал в Word и сохранил в формате PDF.
Что-то я отвлекся, итак, загрузка книги. После регистрации, нажимаем кнопку Upload
и видим вот такое окно, в котором нам предлагают выбрать нужный файл или просто его перетащить в обозначенную область.
Можете, кстати, разрешить скачивание книги, и тогда, при вставке в блог появиться ссылка на скачивание. Нажимаем Publish now и…
покажите друзьям, что у вас получилось, но не советую. Посмотреть, конечно, как будет выглядеть ваша книга никто не запрещает, но вставить ее в блог не получиться.
Так что, нажимайте кнопку My Publucation и ждите, когда ваша книга загрузиться на сервер Issuu.
Что-то у них там косяки какие-то были, и мне два дня пришлось ждать и смотреть вот на такое.
«Подождите, мы загружаем ваши публикации…» и так два дня, в итоге выдал ошибку и пришлось процедуру загрузки файла по-новой проделывать. Но сейчас все в норме, и файлы загружаются на раз-два. Видимо, технические заморочки были…
Хорошо, что хорошо кончается и теперь давайте вставим книгу в блог, чтобы можно было листать книжку прямо в статье, причем в разных ориентациях.
Заходим в My Publucation и видим список загруженных книг, ну или то количество книги, которое вы загрузили.
Нажимаем левой кнопкой мыши на нужную книгу и выбираем
Видим окно настроек будущей флеш-книги
Настраиваете так, как вам интереснее:
После всех изменений нажимайте на кнопку Save style . Это обязательно, иначе у вас не откроется окно с кодом.
Кстати, можете поставить галочку Use on Tumblr, WordPress or similar, а можете и не ставить. Разницы в отображении книги я не заметил, там только сам код меняется, но у меня было, что после вставки кода “с галочкой” сама книга не отображалась на странице. Решайте сами.
А теперь давайте посмотрим, как выглядит книга в разных ориентациях.
Альбомная ориентация (двухстраничный разворот)
Книжная ориентация
Разница, конечно существенная. В плане чтения удобнее книжная ориентация, а вот для рассматривания картинок – альбомная.
Хотя и во всей этой прелести существуют недостатки. Например, мне говорили, что блики, имитирующие разворот книги, искажают фотографии, но тут уж ничего не сделаешь.
Вот и все не хитрые действия необходимые для получения флеш-книги.
Быстро, просто, удобно, да еще и место на хостинге не занимает. Только есть некоторые требования к исходным данным. Привожу выдержки из инструкции к сервису, в моей интерпретации
Вот как-то так.
Понятно, что флеш-книги довольно специфический контент, предназначение которых в основном – журналы, каталоги, комиксы и тому подобное. Но все же, все же…
Как вам сервис и статья? Жду в комментариях! Всем удачи! Пока!
Многие из нас любят коротать время, играя в короткие флэш-игры, однако мало кто задумывается о том, как эти произведения виртуального искусства создаются. Между тем, данная технология существует еще с конца 90-х гг. Ее создателем является американская компания Macromedia (ныне Adobe Systems). Эта система активно применяется не только для разработки игр, но и в веб-мастеринге. Именно на флэше работают большинство сайтов в Интернете (хотя, некоторые уже переходят на HTML 5). Также детищем Adobe Systems является программа для создания приложений Macromedia Flash. Освоить ее может любой человек, даже далекий от компьютерных технологий. Однако, прежде чем мы начнем рассказывать о том, как делать игры, рассмотрим основные плюсы и минусы данной платформы.
Несмотря на эти недостатки, флеш является незаменимой для создания небольших любительских мини-игр.
Создание анимаций на движке она напоминает детское увлечение, когда на уголках страниц по кадрам рисовался рисунок и при быстром перелистывании он начинал двигаться. Суть флэш-анимаций такая же — вы покадрово располагаете графические объекты на временной шкале и при воспроизведении они начинают двигаться. С играм все сложнее. Для того, чтобы создавать их, необходимо освоить язык программирования ActionScript 3.0. Изучить его можно при помощи специальных книг и учебников (например, книга Колина Мука «ActionScript 3.0 для Flash»). Также есть довольно много обучающих видео на YouTube. Достаточно проявить совсем немного старания, чтобы освоить эту программу. Сделав это, у вас вряд ли появятся вопросы о том, как написать flash-игру.
Сначала идет «Титульное окно». Это заставка, которая должна произвести первоначальное впечатление на игрока. Здесь важно проявить весь свой художественный талант и фантазию.
Следующим этапом станет создание страницы «Правила». Несмотря на то, что некоторые разработчики игнорируют данный этап, лучше все-таки сформировать правила игры, сделав ее более понятной и дружелюбной. Иногда они пишутся на внешней странице, либо в отдельном окошке.
«Фон» — это окружение, на котором будут находиться графические объекты. В отдельных случаях, объекты занимают весь экран. Игровой фон можно создать инструментами Adobe Macromedia, либо воспользоваться сторонними программами (например, Ogmo Editor превосходно справляется с созданием двухмерных сцен). Важно, чтобы он был тематическим и дополнял общую концепцию игры.
Конец игры знаменует «окно окончания игры». Игра может окончиться в разных случаях — при победе игрока, при проигрыше или просто по истечении времени/боеприпасов. Для каждого случая создается отдельное окно с соответствующим анимированным содержимым. Иногда в это окно вставляют список победителей.
Таким образом, после изучения adobe flash, как создать игру будет знать любой человек. Достаточно понять основные механизмы работы и уже достаточно скоро вы сможете создавать простенькие игры. Как и в любом деле, здесь главное проявить достаточно усидчивости и заинтересованности, и результат не заставит себя ждать.
uoimpskopin.ru - Строительный портал - Вентиляция. Водоснабжение. Душевая кабина. Законодательство. Канализация