Превращение графики в кнопки в Flash Catalyst

• May 3, 2024

Теперь, когда мы импортировали наш файл проекта портфолио PhotoshopLayout.psd в Adobe^р вспышка^р катализатор^TM и изучили рабочее пространство Catalyst, мы готовы работать над навигацией для нашего портфолио.

Прямо сейчас у нас есть только одна страница или состояние нашего проекта. Нам нужно создать еще две страницы, чтобы мы могли отображать разные логотипы на каждой странице.

1. На панели «Страницы / Состояния» дважды нажмите кнопку «Дублировать состояния». Это даст нам Page2 и Page3. Но они все похожи. Давайте позаботимся об этом.

2. Нажмите на значок Page1 и перейдите на панель «Слои». Откройте папку с логотипами. Мы хотим, чтобы логотип 1 был виден на этой странице. Выключите видимость для логотипов 2 и 3.

3. Нажмите на значок Page2 и отключите видимость логотипа 1 и 3. Включите видимость логотипа 2.

4. Нажмите на значок Page3 и отключите видимость логотипа 1 и 2. Включите видимость логотипа 3.

Далее мы создадим кнопки для нашего портфолио. У нас есть миниатюра для каждого логотипа. Это будут кнопки.

5. Вернитесь на страницу Page1, щелкнув значок на панели «Страницы / Состояния». На панели «Слои» откройте папку «Миниатюры». На артборде нажмите на миниатюру логотипа 1. Когда вы это сделаете, вы увидите, что HUD открыт, и панель свойств изменится.

Давайте сначала поработаем в HUD. Здесь мы скажем Catalyst, что хотим превратить это растровое изображение в кнопку.

6. В разделе «Преобразовать иллюстрацию» нажмите «Преобразовать иллюстрацию в компонент» и выберите «Кнопка» в списке компонентов. HUD изменится, чтобы дать нам новые элементы управления для нашей кнопки. Разверните список «Пользовательские взаимодействия» и щелкните значок «Плюс». Выберите On Click из списка. Вы получите еще одно выпадающее меню под названием Do Action. В этом меню выберите Play Transition to State. В раскрывающемся меню «Выберите состояние» выберите «Страница 1», потому что мы хотим, чтобы эта кнопка перенаправила зрителя на страницу «1».

7. Нажмите на миниатюру логотипа 2 и повторите предыдущий шаг. Установите Выбор состояния на Page2.

8. Нажмите на миниатюру логотипа 3 и повторите предыдущий шаг. Установите Выбор состояния на Page3.

Давайте проверим наши кнопки. В меню выберите Файл - Запустить проект. Он откроется в вашем веб-браузере. При нажатии на каждую кнопку правильный логотип должен быть виден.

В следующем уроке мы померкнем кнопку для видимого логотипа и добавим переход между страницами.

Copyright 2018 Adobe Systems Incorporated. Все права защищены. Снимки экрана продукта Adobe перепечатаны с разрешения Adobe Systems Incorporated. Adobe, Photoshop, альбом Photoshop, элементы Photoshop, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, фейерверки, содействие, увлечение, Flash Catalyst и Flash Paper является или является [a] зарегистрированным товарным знаком (-ами) или товарным знаком (-ами) Adobe Systems Incorporated в США и / или других странах.

Видео инструкция: Поддержка видео и публикация проекта в Adobe Flash Catalyst (14/25) (May 2024).