Добавление интерактивных компонентов в Flash Catalyst

• May 21, 2024

В этом уроке мы завершим слайд-шоу портфолио в Adobe^р вспышка^р катализатор^р, Если вы следили за нами, мы сделали наши кнопки и готовы добавить специальные эффекты. Когда мы перемещаемся по портфелю, мы хотим, чтобы кнопка для видимого логотипа была затемнена, а другие кнопки - видимыми. Поэтому нам нужно сообщить Catalyst, какая кнопка для какой страницы и когда нужно затемнить кнопки. Затем мы добавим эффект перехода Fade между страницами.

Сначала мы потемнеем кнопку для текущего логотипа. Когда логотип 1 виден в состоянии Page1, мы хотим, чтобы соответствующая кнопка была затемнена. Мы должны сделать это для всех трех государств или страниц нашего портфолио.

1. Нажмите на значок Page1 на панели «Страницы / Состояния», чтобы работать на этой странице. Нажмите на уменьшенное изображение, которое теперь является нашей кнопкой для логотипа 1. На панели «Свойства» установите «Непрозрачность» на 40. Поскольку центр циновки под кнопкой имеет черный цвет, кнопка будет выглядеть тусклой.

2. Нажмите значок Page2 на панели «Страницы / Состояния». Повторите предыдущий шаг для Page2, затемнив только ту кнопку, которая соответствует логотипу 2. Нажмите значок Page3 на панели «Страницы / Состояния» и повторите этот шаг.

Нажмите File - Run Project, чтобы проверить наш новый эффект. Когда вы нажимаете на кнопки, соответствующий логотип должен быть виден, и эта кнопка должна быть затемнена.

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

Page1> Page2
Page1> Page3
Page2> Page1
Page3> Page1

3. Нажмите на слой Page1> Page2. Вы увидите, что Catalyst предоставил нам варианты перехода для логотипов 1 и 2 (затемнены) и кнопок 1 и 2. Поскольку мы будем отходить от логотипа 1, у нас есть опция Fade Out. Но мы перейдем к логотипу 2. У нас есть опция Fade In для этого логотипа.

Мы добавим только эффект Fade Out к логотипу 1 и эффект Fade In к логотипу 2. Нам не нужен эффект Fade, применяемый к нашим кнопкам. Однако вы можете использовать этот эффект в другом проекте.

Нажмите кнопку «Плавный переход» в нижней части временной шкалы. Вы увидите, что элементы управления Fade Out / In были расширены до половины секунды на всех слоях. Все еще на слое Page1> Page2 нам нужно отключить эффект для двух кнопок. Нажмите ползунок влево для каждой кнопки.

Нажмите на слой Page1> Page3. Повторите предыдущий шаг для двух кнопок и логотипов. Повторите эти действия еще раз для слоя Page2> Page1 и слоя Page3> Page1.

Это заботится обо всех переходах для состояния Page1. Но у нас есть три состояния в нашем портфолио. Нам нужно сделать это снова для двух других государств. Нажмите на значок Page2 на панели «Страницы / Состояния».

Посмотрите на слои на временной шкале. Вы заметите, что настройки, которые мы только что установили для состояния Page1, переносятся в состояние Page2 для переходов между Page1> Page2 и Page2> Page3. Нам просто нужно добавить переход между Page2> Page3 и Page3> Page2.

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

5. Нажмите значок Page3 на панели «Страницы / Состояния». Вы заметите, что настройки перехода перенесены из двух других состояний. Если бы у нас было больше страниц, нам нужно было бы работать со слоями для этого состояния. Но так как это последнее из трех состояний, у нас все готово.

Протестируйте свой проект снова. Если все работает, мы готовы сохранить наш файл как LogoPortfolio.fxp.

6. Нам нужно сказать Catalyst сгенерировать файлы, которые будут отображать наше портфолио Flash. Нажмите Файл - Опубликовать в SWF. Найдите правильное место на жестком диске и сохраните проект. Вы увидите, что Catalyst дает вам две папки. В папке deploy-to-web у нас есть файлы, необходимые для запуска портфолио на веб-сервере. В run-local у нас есть файлы для запуска портфолио на нашем рабочем столе.

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 в США и / или других странах.

Видео инструкция: Урок 9 Интерактивная карта для вашего сайта (2Gis, Google, Yandex) (May 2024).