Ajout de composants interactifs dans Flash Catalyst

• Avril 28, 2024

Dans ce tutoriel, nous allons terminer le diaporama du portfolio dans Adobe^R Éclat^R Catalyseur^R. Si vous avez suivi, nous avons créé nos boutons et sommes prêts à ajouter les effets spéciaux. Lorsque nous naviguons dans le portefeuille, nous voulons que le bouton du logo visible soit grisé et que les autres boutons soient visibles. Par conséquent, nous devons dire à Catalyst quel bouton est pour quelle page et quand estomper les boutons. Ensuite, nous ajouterons un effet de transition de fondu entre les pages.

Nous allons d'abord assombrir le bouton du logo actuel. Lorsque le logo 1 est visible sur l'état de Page1, nous voulons que le bouton correspondant soit grisé. Nous devons le faire pour les trois États ou pages de notre portefeuille.

1. Cliquez sur l'icône Page1 dans le panneau Pages / États pour travailler sur cette page. Cliquez sur l'image miniature qui est maintenant notre bouton pour le logo 1. Dans le panneau Propriétés, définissez l'opacité sur 40. Étant donné que le centre du tapis sous le bouton est noir, cela donnera l'impression que le bouton est grisé.

2. Cliquez sur l'icône Page2 dans le panneau Pages / États. Répétez l'étape précédente pour Page2 en grisant uniquement le bouton correspondant au logo 2. Cliquez sur l'icône Page3 dans le panneau Pages / States et répétez cette étape.

Cliquez sur Fichier - Exécuter le projet pour tester notre nouvel effet. Lorsque vous cliquez sur les boutons, le logo correspondant doit être visible et ce bouton doit être grisé.

La dernière chose que nous ajouterons à notre navigation est une transition en fondu entre les pages, en utilisant la chronologie. Revenez à Page1 en cliquant sur l'icône Page1. Jetez un œil aux calques de la timeline et vous verrez que nous avons un calque pour chaque transition possible entre les trois pages.

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

3. Cliquez sur le calque Page1> Page2. Vous verrez que Catalyst nous a donné les options de transition pour les logos 1 et 2 (grisé) et les boutons 1 et 2. Parce que nous allons nous éloigner du logo 1, nous avons une option Fade Out. Mais nous allons passer au logo 2. Nous avons une option Fade In pour ce logo.

Nous ajouterons uniquement l'effet de fondu au logo 1 et l'effet de fondu au logo 2. Nous n'avons pas besoin de l'effet de fondu appliqué à nos boutons. Cependant, vous souhaiterez peut-être utiliser cet effet dans un autre projet.

Cliquez sur le bouton Transition en douceur au bas de la timeline. Vous verrez que les commandes Fade Out / In ont été étendues à une demi-seconde sur tous les calques. Toujours sur le calque Page1> Page2, nous devons désactiver l'effet des deux boutons. Poussez le curseur vers la gauche pour chaque bouton.

Cliquez sur le calque Page1> Page3. Répétez l'étape précédente pour les deux boutons et logos. Répétez à nouveau pour le calque Page2> Page1 et le calque Page3> Page1.

Cela prend en charge toutes les transitions pour l'état Page1. Mais nous avons trois états dans notre portefeuille. Nous devons recommencer pour les deux autres États. Cliquez sur l'icône Page2 dans le panneau Pages / États.

Jetez un œil aux calques de la timeline. Vous remarquerez que les paramètres que nous venons de définir pour l'état Page1 sont reportés à l'état Page2 pour les transitions entre Page1> Page2 et Page2> Page3. Nous avons juste besoin d'ajouter la transition entre Page2> Page3 et Page3> Page2.

4. Répétez les étapes précédentes pour appliquer les transitions aux logos pour l'état Page2. Vous devez le faire pour chaque couche de la timeline.

5. Cliquez sur l'icône Page3 dans le panneau Pages / États. Vous remarquerez que les paramètres de transition ont été transférés des deux autres états. Si nous avions plus de pages, nous aurions besoin de travailler sur les couches pour cet état. Mais puisque c'est le dernier des trois états, nous sommes tous prêts.

Testez à nouveau votre projet. Si tout fonctionne, nous sommes prêts à enregistrer notre fichier sous LogoPortfolio.fxp.

6. Nous devons dire à Catalyst de générer les fichiers qui afficheront notre portefeuille Flash. Cliquez sur Fichier - Publier sur SWF. Accédez à l'emplacement correct sur votre disque dur et enregistrez votre projet. Vous verrez que Catalyst vous propose deux dossiers. Dans le dossier de déploiement sur le Web, nous avons les fichiers nécessaires pour exécuter le portefeuille sur un serveur Web. Dans le run-local, nous avons les fichiers pour exécuter le portefeuille sur notre bureau.

Copyright 2018 Adobe Systems Incorporated. Tous les droits sont réservés. Copies d'écran des produits Adobe reproduites avec la permission d'Adobe Systems Incorporated. Adobe, Photoshop, Photoshop Album, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Flash Catalyst et Flash Paper Paper est / sont [une] marque [s] déposée (s) ou une marque [s] d'Adobe Systems Incorporated aux États-Unis et / ou dans d'autres pays.

Instructions Vidéo: How to Create an Interactive Flash Map using Adobe Illustrator and Flash Catalyst (Avril 2024).