Adobe flash как сделать меню

Обновлено: 08.01.2025

Разработка Flash-баннеров часто сопровождается несколькими файлами, фрагментированным кодом и запутанными временными рамками. Из этого туториала вы узнаете, как создать шаблон проекта, который послужит прочной основой, которая поможет быстро разработать надежные флэш-баннеры, что позволит вам сосредоточиться на воплощении креативной идеи в жизнь.

Шаг 1. Настройка структуры папок проекта

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

Шаг 2: Создание шаблона Photoshop

Теперь мы собираемся создать набор шаблонов Photoshop, которые будут использоваться при разработке рекламной кампании на флеш-баннере. (Если у вас нет Photoshop, не беспокойтесь, вы можете перейти к шагу 5). Интерактивное рекламное бюро поддерживает Руководство по рекламным блокам, в котором перечислены общие размеры рекламных блоков (баннеров). Для целей этого урока мы собираемся создать три наиболее распространенных:

Широкий небоскреб (шириной 160 пикселей и высотой 600 пикселей)
Средний прямоугольник (шириной 300 пикселей и высотой 250 пикселей)
Таблица лидеров (728 х 90 х в высоту)

Давайте начнем с создания шаблона для широкого небоскреба. Откройте Photoshop и выберите «Файл»> «Создать». Настройте свойства для вашего нового документа Photoshop, как показано ниже:

Шаг 3: Добавление групп слоев

Чтобы слои в вашем файле Photoshop были такими же структурированными, как и папки вашего проекта, когда пришло время создавать дизайн баннера, мы добавим группы слоев в файл шаблона для хранения основных элементов дизайна.

Используя New Group из меню в правом верхнем углу панели Layers, создайте структуру Layer Group, показанную ниже:

Группа слоев «Фон» будет содержать элементы дизайна, которые всегда находятся на заднем плане вашего баннера, например, цвет или текстуру.

Группа слоев «Передний план» будет содержать элементы дизайна, которые всегда находятся на переднем плане вашего баннера, например логотип компании.

Шаг 4: Сохранить

Это ваш первый фантастический шаблон флеш баннера! Повторите эти шаги для среднего прямоугольника (шириной 300px и высотой 250px) и таблицы лидеров (728px x 90px ростом). С этими шаблонами Photoshop мы готовы перейти к Flash.

Шаг 5: Создание вашего Flash проекта

Начнем с создания Flash-проекта, чтобы вы могли перемещаться по структуре файлов в Flash IDE. Откройте Flash CS4 (процесс очень похож во Flash CS3, хотя интерфейс Flash будет отличаться) и перейдите в «Окно»> «Другие панели»> «Проект». На панели «Проект» щелкните раскрывающийся список «Проекты» и выберите «Новый проект». Укажите имя проекта как «BannerTemplate».

Для корневой папки перейдите к папке / banner_template / development /, которую вы создали в шаге 1, используя значок папки. Убедитесь, что версия ActionScript установлена на ActionScript 3.0, и нажмите «Создать проект».

Шаг 6: папка классов проекта Flash

Теперь мы собираемся установить свойства Flash Project, чтобы помочь Flash выполнить работу по заглушению наших классов для нас. Щелкните раскрывающийся список со значком шестеренки в правом верхнем углу панели «Проект» и выберите «Свойства проекта». В поле «Сохранить классы» перейдите в папку / as /, созданную на шаге 1, и нажмите кнопку «ОК».

Шаг 7: Папка с баннером

Если вы выполнили последний шаг правильно, вы должны увидеть маленькие скобки кода теперь на значке / as / folder. Сейчас мы собираемся создать папку для всех классов, специфичных для наших шаблонов баннеров. Выберите папку / as / и щелкните значок новой папки в нижней части панели. В появившемся диалоговом окне назовите вашу папку «banner» и нажмите «OK».

Шаг 8: Базовый класс документа Banner

Теперь (наконец-то!) Вы готовы создать базовый класс документа для баннера. Если вы не знакомы с использованием классов документов (или классов в целом), рекомендуется сначала прочитать этот быстрый совет .

Выбрав папку / as / banner /, щелкните значок «Создать класс» в нижней части панели. В поле Class добавьте имя класса Banner после имени пакета banner. и нажмите Создать класс.

Теперь нам нужно взять заглушку этого класса и изменить ее на функциональный базовый класс документа. Добавьте к ActionScript, чтобы отразить код, показанный ниже:

Давайте быстро рассмотрим изменения, которые мы внесли в класс Banner:

Импортирован класс MovieClip.
Сделано, чтобы класс Banner расширял MovieClip (чтобы его можно было использовать в качестве класса документа).
Сделано, чтобы функция инициализации документа Banner получала необязательный объект конфигурации, который мы можем использовать для передачи параметров.
Создана публичная функция init (), которая выводит трассировку при вызове. Причина, по которой это удобно, будет объяснена, когда мы начнем создавать баннер .FLA.

Сейчас это мало что дает, но здесь важно создать структуру классов, которая позволит нам централизовать логику баннера, уменьшая повторение кода. Теперь мы можем расширить класс Banner для создания наших отдельных классов баннерных документов.

Шаг 9: Баннерные классы документов

Давайте начнем с файла класса для широкого небоскреба. Создайте класс «WideSkyscraper» в своей папке Flash-проекта / as / banner /, как вы делали это для класса «Banner». Возьмите сгенерированный код заглушки класса и добавьте к нему, чтобы он выглядел так:

Давайте рассмотрим изменения, которые мы внесли в класс WideSkyscraper:

Откройте Flash CS4 и выберите «Файл»> «Создать». Выберите «Flash File (ActionScript 3.0)» в качестве Типа и нажмите «ОК». На панели «Свойства» измените параметры публикации и свойств, как показано ниже:

Шаг 11: установка относительного исходного пути

Теперь мы собираемся установить относительный исходный путь и относительный путь публикации. Это становится важным, когда вы хотите сделать копию своего шаблона шаблона баннера, переименовать его и начать работать, или когда вы хотите передать шаблон кому-то еще. Абсолютные пути могут быть реальной проблемой для обновления (особенно для нескольких файлов!) Каждый раз, когда вы хотите начать проект.

Чтобы установить исходный путь, выберите «Файл»> «Параметры публикации» и перейдите на вкладку «Flash». Теперь нажмите кнопку «Параметры» рядом с раскрывающимся списком «Сценарий», чтобы открыть окно «Дополнительные параметры ActionScript 3.0». Убедитесь, что Source Path является активной вкладкой, и нажмите «+», чтобы добавить путь «./as». Теперь вы можете добавить текст «banner.WideSkyscraper» в поле «Класс документа». Ваше окно должно выглядеть так:

Шаг 12: установка относительного пути публикации

Чтобы задать путь публикации, выберите «Файл»> «Параметры публикации» и перейдите на вкладку «Форматы». Нам не нужен файл HTML, поэтому снимите этот флажок. В пути публикации для SWF выберите папку / www / в папке вашего проекта, как показано ниже. Если все выглядит правильно, нажмите ОК. Ваш скомпилированный SWF-файл теперь будет помещен в папку / www / при предварительном просмотре или публикации.

Есть немного больше информации об этом в этом скринкасте Quick Tip .

Шаг 13: Основной график

По некоторым причинам некоторые системы показа рекламы требуют, чтобы первый кадр вашего фильма был пустым (например, Eyeblaster ), или импортировали свои классы / включали свой ActionScript в первый кадр. Часто расширения Flash, которые вы можете установить для этих систем показа рекламы, откажутся упаковать ваш файл, если вы не будете соблюдать это условие.

Если вы сейчас скомпилируете этот файл, вы должны получить на панели «Вывод» следующее, подтверждающее, что ваш класс документов WideSkyscraper и базовый класс документов Banner работают:

Язык ActionScript 3.0 можно использовать в нескольких средах разработки приложений, включая инструменты Flash Professional и Flash Builder, а также любой текстовый редактор.

В этом примере рассмотрены этапы создания и модернизации простого приложения ActionScript 3.0 с использованием инструмента Flash Professional или Flash Builder. Создаваемое приложение является простой моделью использования внешних файлов классов ActionScript 3.0 в инструментах Flash Professional и Flex.

Проектирование приложения ActionScript

В этом примере приводится стандартное приложение ActionScript, которое называется «Hello World» и имеет простую структуру.

Приложение называется HelloWorld.

В нем отображается одно текстовое поле со словами «Hello World!»

В приложении используется один объектно-ориентированный класс Greeter. Такая структура позволяет использовать класс в проекте Flash Professional или Flex.

В этом примере сначала создается базовая версия приложения. Затем добавляются функции, чтобы пользователь мог ввести свое имя, а приложение проверило наличие имени в списке известных пользователей.

После этого краткого определения можно приступать к созданию приложения.

Создание проекта HelloWorld и класса Greeter

В проектном задании для приложения Hello World говорится, что его код должен допускать простое повторное использование. Чтобы достичь этой цели, в приложении используется один объектно-ориентированный класс Greeter. Этот класс используется в приложении, создаваемом в инструменте Flash Builder или Flash Professional.

Создание проекта HelloWorld и класса Greeter в Flex

Введите HelloWorld в поле «Имя проекта». Убедитесь, что в качестве типа приложения выбрано значение «Web (выполняется в Adobe Flash Player)», а затем нажмите «Готово».

Flash Builder создает проект и показывает его в окне проводника пакетов. По умолчанию проект содержит файл с именем HelloWorld.mxml, который открывается в редакторе.

В диалоговом окне «Новый класс ActionScript» в поле «Имя» введите Greeter в качестве имени класса и нажмите кнопку «Готово».

Теперь появится окно редактирования нового файла ActionScript.

Чтобы создать класс Greeter в инструменте Flash Professional, выполните следующие действия:

В инструменте Flash Professional выберите «Файл» > «Создать».

В диалоговом окне «Создать документ» выберите файл ActionScript и нажмите кнопку «ОК».

Теперь появится окно редактирования нового файла ActionScript.

Выберите команды «Файл» > «Сохранить». Выберите папку для размещения приложения, присвойте файлу ActionScript имя Greeter.as и нажмите кнопку «ОК».

Добавление кода к классу Greeter

Класс Greeter определяет объект Greeter , который используется в приложении HelloWorld.

Добавление кода к классу Greeter

Введите следующий код в новом файле (часть кода может быть уже добавлена):

Класс Greeter включает один метод sayHello() , который возвращает строку с фразой «Hello World!».

Класс Greeter теперь готов для использования в приложении.

Создание приложения с использованием кода ActionScript

Класс Greeter, который был только что создан, определяет самодостаточный набор программных функций, однако он не представляет собой законченное приложение. Для использования класса необходимо создать документ Flash Professional или проект Flex.

При создании кода необходимо использовать экземпляр класса Greeter. Ниже описана процедура использования класса Greeter в приложении.

Чтобы создать приложение ActionScript с использованием инструмента Flash Professional, выполните следующие действия.

В диалоговом окне «Новый документ» выберите «Файл Flash (ActionScript 3.0)» и нажмите кнопку «ОК».

Открывается окно создания документа.

Выберите команды «Файл» > «Сохранить». Выберите папку, в которой находится файл класса Greeter.as, присвойте документу Flash имя HelloWorld.fla и нажмите кнопку «ОК».

В палитре инструментов Flash Professional выберите инструмент «Текст». Перетащите его в рабочей области, чтобы определить новое текстовое поле шириной приблизительно 300 пикселов и высотой 100 пикселов.

На панели «Свойства» при все еще выделенном в рабочей области текстовом поле задайте тип текста как «Динамический текст» и введите mainText в качестве имени экземпляра текстового поля.

Щелкните кнопкой мыши первый кадр временной шкалы. Откройте панель «Действия», выбрав меню «Окно» > «Действия».

На панели «Действия» введите следующий сценарий:

Чтобы создать приложение ActionScript с использованием инструмента Flash Builder, выполните следующие действия.

Откройте файл HelloWorld.mxml и добавьте код в соответствии со следующей распечаткой:

Этот проект Flex включает четыре тега MXML:

Тег <s:Application> определяет контейнер приложения.

Тег <s:layout> определяет стиль компоновки (вертикальная компоновка) для тега Application.

Тег <fx:Script> включает некоторую часть кода ActionScript.

Код в теге <fx:Script> определяет метод initApp() , который вызывается при загрузке приложения. Метод initApp() задает текстовое значение текстовой области mainTxt для строки «Hello World!», возвращенной методом sayHello() только что созданного класса Greeter.

Публикация и проверка приложения ActionScript

Разработка программного обеспечения — это интерактивный процесс. После написания кода его необходимо компилировать и редактировать до тех пор, пока он не будет полностью соответствовать поставленным задачам. Необходимо запустить скомпилированное приложение и проверить, что оно выполняет задачи, описанные в задании. Если нет, необходимо редактировать код, пока не будет получен нужный результат. В средах разработки Flash Professional и Flash Builder предусмотрено несколько способов для публикации, проверки и отладки приложений.

Ниже приводятся основные этапы проверки приложения HelloWorld в каждой из упомянутых сред.

Чтобы опубликовать и проверить приложение ActionScript с использованием инструмента Flash Professional, выполните следующие действия.

Если при тестировании приложения в окне «Вывод» отображаются ошибки и предупреждения, исправьте эти ошибки в файле HelloWorld.fla или HelloWorld.as. Затем повторно проверьте приложение.

При отсутствии ошибок компиляции приложение Hello World появится в окне Flash Player.

После успешного создания простого, но законченного объектно-ориентированного приложения ActionScript 3.0, можно приступить к Модернизация приложения HelloWorld.

Чтобы опубликовать и проверить приложение ActionScript с использованием инструмента Flash Builder, выполните следующие действия.

Приложение HelloWorld будет запущено.

Если при тестировании приложения в окне «Вывод» отображаются ошибки и предупреждения, исправьте эти ошибки в файле HelloWorld.mxml или Greeter.as. Затем повторно проверьте приложение.

При отсутствии ошибок компиляции приложение Hello World появится в открывшемся окне обозревателя. На экране должен отображаться текст «Hello World!»

После успешного создания простого, но законченного объектно-ориентированного приложения ActionScript 3.0 можно приступить к Модернизация приложения HelloWorld.

Модернизация приложения HelloWorld

Чтобы сделать приложение более интересным, можно ввести в него подтверждение имени пользователя после сверки с заданным списком имен.

Прежде всего нужно обновить класс Greeter, расширив его функциональные возможности. Затем следует обновить приложение, чтобы оно могло использовать новые функции.

Обновление файла Greeter.as

Откройте файл Greeter.as.

Измените содержимое файла следующим образом (новые и измененные строки выделены жирным шрифтом):

Класс Greeter имеет теперь новые свойства:

В массиве validNames содержится список разрешенных имен пользователей. При загрузке класса Greeter в массиве устанавливается список из трех имен.

Метод sayHello() принимает имя пользователя и изменяет приветствие в зависимости от определенных условий. Если имя пользователя userName задано пустой строкой ( "" ), свойство greeting устанавливается на запрос имени пользователя. Если имя пользователя принято, приветствие выглядит так: "Hello, userName ." И, наконец, при невыполнении предыдущих двух условий переменная greeting устанавливается таким образом: "Sorry userName , you are not on the list." («Извините, [имя пользователя], Вас нет в списке»).

Метод validName() возвращает истинное значение true , если введенное имя inputName найдено в массиве validNames , и возвращает ложное значение false , если имя не найдено. Инструкция validNames.indexOf(inputName) сверяет каждую строку массива validNames со строкой введенного имени inputName . Метод Array.indexOf() возвращает положение указателя первого экземпляра объекта в массиве. Он возвращает значение -1, если объект не найден в массиве.

Затем необходимо изменить файл приложения, в котором существует ссылка на этот класс ActionScript.

Чтобы изменить приложение с использованием инструмента Flash Professional, выполните следующие действия.

Откройте файл HelloWorld.fla.

Измените сценарий в Кадре 1 так, чтобы пустая строка ( "" ) перешла в метод sayHello() класса Greeter:

Выберите инструмент «Текст» в палитре инструментов. Создайте два новых текстовых поля в рабочей области. Расположите их рядом друг с другом под существующим текстовым полем mainText .

В первом новом текстовом поле, которое является меткой, введите текст Имя пользователя:.

Выберите другое текстовое поле и установите его тип в инспекторе свойств как «Вводимый текст». В качестве типа строки выберите Single line (отдельная строка). Введите textIn в качестве имени экземпляра.

Щелкните кнопкой мыши первый кадр временной шкалы.

На панели «Действия» добавьте следующие строки в конце имеющегося сценария:

Новый код добавляет следующие функциональные возможности:

Первые две строки просто задают границы для двух текстовых полей.

Настраиваемая функция keyPressed() проверяет, будет ли нажата именно клавиша Enter. Если требуемая клавиша нажата, метод sayHello() объекта myGreeter передает текст из текстового поля textIn в качестве параметра. Этот метод возвращает строку приветствия на основе переданного в него значения. Возвращенная строка затем назначается свойству text текстового поля mainText .

Полный сценарий для Кадра 1 выглядит следующим образом:

Чтобы изменить приложение с использованием инструмента Flash Builder, выполните следующие действия.

Откройте файл HelloWorld.mxml.

Затем измените тег <mx:TextArea> , чтобы показать пользователю, что текст используется только для отображения. Измените цвет фона на светло-серый и задайте для атрибута editable значение false :

Теперь добавьте следующие строки непосредственно после закрывающего тега <s:TextArea> . Эти строки создают компонент TextInput, который позволяет пользователю вводить значение имени пользователя:

Атрибут enter определяет действия, которые выполняются при нажатии пользователем клавиши Enter в поле userNameTxt . В этом примере код передает текст, введенный в поле, в метод Greeter.sayHello() . Приветствие в поле mainTxt изменяется соответственно.

Файл HelloWorld.mxml имеет следующий вид:

Сохраните отредактированный файл HelloWorld.mxml. Выберите «Выполнить» > «Выполнить HelloWorld» для выполнения приложения.

Навигация — один из самых важных элементов в веб-дизайне. От ее удобства, внешнего вида и функциональности зависит многое. И чем необычней реализована навигация, тем интереснее пользователю будет находится на сайте и тем больше рубрик он посетит. В то же время, меню не должно быть слишком сложным и загруженным. Сегодня мы представляем вашему вниманию подборку уроков по созданию анимированных меню, реализованных при помощи Flash, посетить которые вы можете перейдя по ссылке на первоисточник.

Разноцветное меню при помощи XML и Actionscript 3

Современное меню со звуком при помощи Flash

XML меню с Actionscript 3

Универсальное Actionscript 3.0 Меню с маской

Меню с бесконечной галереей

Flash-меню

Меню в стиле Vista при помощи Flash

Стильное Flash-меню со звуком

Стеклянное Flash-меню с прозрачным эффектом

Современное горизонтальное Flash-меню

AS3 выпадающее меню

Бизнес-меню при помощи Flash

Темное Flash-меню

Кубическое меню

Яркое меню для сайта

Как создать Flash-меню за 20 минут

Современное меню с фотографиями

Flash-меню эффектами и звуком

Flash-меню при помощи Actionscript 3

Профессиональное меню с эффектами при помощи Flash и CS3

Меню с фотографиями

Вертикальное меню при помощи Actionscript 3 и XML

Урок по созданию темного меню

Стильное меню при помощи AS3

Вращающиеся меню при помощи Actionscript 3

Голубое Flash-меню со звуком

Урок по созданию меню

Flash-меню со звуком и URL

Как создать анимированное меню при помощи Flash CS3

Деревянное меню при помощи Flash

Возможно, вас также заинтересуют статьи:

Никто не решил её похоронить. Просто они решили, что действительно — делать менюшки из 2х кнопок на флеше это тупо. Можно это на html делать. Только это было и раньше. А флеш решили развивать уже под игры. Adobe Air — тот же флеш. Работает уже как стандартное приложение в Android, iOS и на всех почти десктопах.

-5 0 +3

Те, кто говорят, что флеш идет вниз - заблуждаются. Принцип прост - если у тебя нет автомобиля, не надо говорить на тех, у кого он есть «козлы». Когда Microsoft продвигал свой Sliverlight - всё кричали, что он похоронит флеш. Однако, что вышло - просто существуют вместе. Появился Unity3d и что? Сосуществуют вместе. Html5 ? не смешите. html5 можно применять лишь в создании менюшек и примитивных анимаций и не очень сложных программных решений. Не более.

Игры, в том числе браузерные - на html5 сделать нельзя. Лишь жалкие пародии. Из серии «нажми и запомни». 3D в браузере - WebGL заглохло. Тормозит. Flash - не тормозит. html5 вообще не поддерживает.

— Покажите мне хотя бы одну баннерную сеть, которая готова принять баннер в виде 50 файлов, обеспечивающих работу баннера?

— Кто-либо расскажите, как мне в html5 сделать сайт со спецэффектами, сложными масками перекрытия и прочими приблудами видео и растровыми эффектами.

Вот то-то же. Кричать, что «флеш дно» могут лишь те, кто только версткой занимается и не более. А по факту — не знаешь, не пищи.

Я лишь могу выступить на счет html5 в отношении менюшек выше. Действительно, их можно делать не на флеше. Да и вообще — их делали и могли делать на html + javascript + css еще в далеком 2000—2003 году. Тогда было понятия DHTML. Так, что не надо вносить панику.

Запомните — флеш не умрет. Он лишь будет сосуществовать с другими технологиями. Приоткрою занавесы — готовится Flash Player Next, который будет в 2 раза быстрее, мощнее и более низкоуровневый.

1) Насчет баннеров вы правы, с этим я с вами полностью согласен. Но в тоже время можно сказать, что без флеша было бы гораздо меньше назойливой рекламы.

Неплохой пример из последнего — cinema-series.orange.fr/e. universeries/en/

И все это уверенно смотряший в будущее HTML5, консерватор вы мой! =)

-1 0

1) Всё в этой жизни делается для зарабатывания денег. Нет назойливой рекламы — нет денег. Нет денег — нет заказов на сайты. Нет заказов на сайты — нет интернета. Думаю, что вообще не в тему первый пункт.

2) «Графика конечно не ахти» — это уровень Flash софтверного рендера 2006—2007 года. Давайте говорить прямо — графика говно. Нет графики — нет игроков. Нет игроков — нет денег. Что-то притормаживает на моем i5 HD 3000. Флеш бы сделал запросто 60 fps. А тут на лицо — 25 fps

3) Ничего сложного на тех сайтах нет. По сложности это обычный javascript + html, который я делал не смотря на то, что я флешер. Более того — половину сайтов с ipad посмотрел — лучше бы их там не было вообще, чем были такие, которые заставят «не вернутся».

Я не увидел ничего того, что заставило бы меня обрадоваться. Технология сырая и будет сырой и дальше. html5 будет развиваться, не спорю. Но он никогда в жизни не переплюнет Flash плеер. Хотя бы потому, что флеш плеер работает как внешняя библиотека. Как плагин. А html5 встроен в браузер. А всё, что идет «в комплекте» — зависит лишь от браузера.

Кстати, как на счет кроссбраузерности? не раз видел, что в разных браузерах как-то что-то по-разному работает.

О да, кстати — и тормоза. Нет никакой плавности. Вся графика 3D графика слишком мультяшна. Засунуть в игру 5 текстур 1024х1024 и сделать 8х сглаживание — бразуер просто зависнет навсегда. А что флеш, что unity3d — легко просчитают сцену и не поперхнутся.

html5 это как apple. Красиво, интересно. Но толку мало.

Что касается «оличных игр на html5» — запомните. Вы никогда не добьетесь той производительности, которую делает флеш.

По-этому, я считаю вот так. Менюшки и прочий мосур можно делать без сомнений на html5 и это верно. Я сам давно уже на html5 делаю говнецо разное. Но делать хорошие вещи на нем невозможно.

Более того — отдавать клиенту под два десятка файлов со словами «это ваша фотогалерея» — клиент крутит у виска и говорит «пришли мне 1 swf». Ему говоришь, что ты на html5 сделал — он тебе говорит «сделай мне нормально на флеш».

Прювет чувак из 2015 года! Не поверишь но у нас давно никто не делает сайты во flash. Он умер еще в далеком 2012.

И да в 2015 99% всех сайтов делают на html5

Мы наверное с тобой в разных измерениях живём, потому что сайты как использовали флеш-технологию, так и используют. Количество успешных инди-флеш игр растёт в геометрической прогрессии, а количество инди-html5 проектов оставляет желать лучшего.

За три года мало что изменилось, разве что флеш стал ещё более развитой технологией, лол

Покажи мне хоть одИн сайт котоый создан по технологии flash за последние 5 лет. Никто в мире уже его не использует для построения сайта все эффекты делаются на css3. А про игры обращайся в детский сад

Сейчас на flash делают только баннеры. Да только. У меня например нет на компе flash плееера и я их попросту не вижу. Как и поьзователи планшетов и смартфонов, которые вообще забыли что такой flash

Как-то статья на пару лет опоздала

судя по тому, что в статье — её можно было не публиковать. Хотя бы потому, что там файлы 2009 года публикации.

Как бы я не любил флеш — это действительно правильнее делать в html.

Представьте, что вы пообещали своему клиенту, что у него будет идея меню, о которой вы ему рассказали позже сегодня, когда вы встретитесь. Вы открываете Flash и начинаете грубый, но отличный пример, который вы можете кодировать или расширить позже. В течение этого времени мы сосредоточимся на создании именно такого меню; максимально настраиваемый, без использования каких-либо классов, только параметры компонентов.

Разработка меню

Создайте новый файл ActionScript 3 Flash и установите размеры 960 x 70 пикселей. Меню будет отлично смотреться на HTML-шаблоне 960.gs для корпоративного сайта вашего клиента. Установите частоту кадров 25 кадров в секунду. Чтобы ускорить процесс, мы не будем использовать здесь Document Class; мы просто будем придерживаться Flash IDE.

Шаг 1: подготовьте кнопки

У нас будет пять основных кнопок с подменю, как на схеме ниже:

Создайте прямоугольник с размерами 192 х 40 пикселей. Я придумал ширину, разделив 960 на 5 кнопок. Раскрасьте его линейным градиентом следующими цветами:

Шаг 2: Главная кнопка

Нажмите «F8», чтобы превратить прямоугольник в мувиклип, и назовите его «button».

Шаг 3: Рамки кнопок

Дважды щелкните только что созданную кнопку и добавьте еще два кадра. Это будут состояния кнопки « вверх» и « вниз» . Мы будем использовать фрагмент ролика и добавлять к нему действия вместо кнопки, чтобы сделать кнопки подменю активными. Если бы вы использовали кнопку, нажатие на кнопку подменю вызовет щелчок на кнопке главного меню.

Шаг 4: Установите цвета штата

Для второго кадра (состояние «над» меню) измените цвета градиента, как на рисунке:

Сделайте то же самое для третьего кадра (состояние «вниз» меню) со следующими цветами:

Шаг 5: Текстовая метка

Переименуйте первый слой в «back», а над ним сделайте еще три слоя с именами «label», «bar» и «actions» соответственно.

Заблокируйте слой действий, затем на слое меток создайте новое динамическое текстовое поле с именем «label_txt». Это будет метка кнопки. Текст кнопки будет отличаться в зависимости от настройки мувиклипа на сцене. Для этого мы будем использовать параметры компонента, поэтому вместо пятикратного копирования кнопки мы можем повторно использовать компонент, и нам нужно будет только изменить переменную.

Шаг 6: Разделитель кнопок

С помощью инструмента «Линия» создайте две соседние линии следующих цветов и превратите их в один фрагмент ролика, называемый «полосой». Поместите этот мувиклип точно в 190 пикселей на оси x (используйте панель «Свойства»). Это будет разделитель кнопок, который добавит пространственное разделение между кнопками меню. Мы превращаем это в мувиклип, чтобы потом его можно было скрыть для последней кнопки.

Шаг 7: Определение компонента

Шаг 8: Параметры компонента

Добавьте следующие параметры компонента:

Эти параметры могут быть доступны в действиях фрагмента ролика как переменные. Мы будем использовать строку «textvar» для названия меню, логическое значение «hidebar» для скрытия разделителя и строку «подменю» в качестве имени ссылки для видеоклипа соответствующего подменю.

Шаг 9: Временная шкала Actionscript

Теперь вернитесь в мувиклип «button» и в слое действий нажмите «F9», чтобы открыть окно «Действия», затем введите следующий код:

Позвольте мне объяснить код:

Мы устанавливаем свойство «useHandCursor» в true и «trackAsMenu» в true. Первая заставляет курсор превращаться в руку, когда над кнопкой, а вторая говорит мувиклипу вести себя как меню. Это гарантирует, что последующее событие над дочерними элементами не повлияет на основной фрагмент ролика.

Мы останавливаем временную шкалу, чтобы фактически иметь функциональность кнопок, и устанавливаем «mouseEnabled» в значение false для текстового поля «label_txt». Если мы этого не сделаем, текстовое поле получит события ROLL_OVER, и меню внезапно развернется. В основном это отключает интерактивность с помощью мыши для текстового поля.

Затем мы проверяем, установлена ли переменная «textvar», и если да, то присваиваем ее текстовому свойству text text . Довольно просто Мы делаем проверку, потому что можем оставить параметр пустым, и в этом случае мы получим ошибку.

Мы делаем ту же проверку со свойством hidebar. Если мы выберем истину, мы скроем бар клипа

Наконец, мы выполняем функции over , out , down и up и добавляем события в мувиклип, превращая его в кнопку. Важно использовать события «ROLL_OVER» и «ROLL_OUT» вместо событий «MOUSE_OVER». Я пробовал это с «MOUSE_OVER», и это было беспорядок, потому что «MOUSE_OVER» срабатывал каждый раз, когда мышь двигалась, создавая эффект мерцания.

Шаг 10: больше кнопок!

Мы готовы выполнить тест. Сотрите кнопку со сцены и снова добавьте ее из библиотеки в (0,0) px. Для параметра типа «textvar» Home :

Читайте также: