Transformer des graphiques en boutons dans Flash Catalyst

• Mai 3, 2024

Maintenant que nous avons importé notre fichier de projet de portfolio PhotoshopLayout.psd dans Adobe^R Éclat^R Catalyseur^TM et avons exploré l'espace de travail Catalyst, nous sommes prêts à travailler sur la navigation pour notre portefeuille.

Pour l'instant, nous n'avons qu'une seule page, ou état, pour notre projet. Nous devons créer deux pages supplémentaires afin d'afficher un logo différent sur chaque page.

1. Dans le panneau Pages / États, nous cliquerons deux fois sur le bouton États en double. Cela nous donnera Page2 et Page3. Mais, ils se ressemblent tous. Prenons soin de ça.

2. Cliquez sur l'icône Page1 et accédez au panneau Calques. Ouvrez le dossier Logos. Nous voulons seulement que le logo 1 soit visible sur cette page. Désactivez la visibilité des logos 2 et 3.

3. Cliquez sur l'icône Page2 et désactivez la visibilité du logo 1 et 3. Activez la visibilité du logo 2.

4. Cliquez sur l'icône Page3 et désactivez la visibilité du logo 1 et 2. Activez la visibilité du logo 3.

Ensuite, nous allons créer les boutons de notre portefeuille. Nous avons une vignette pour chaque logo. Ce seront les boutons.

5. Revenez à la page 1 en cliquant sur l'icône dans le panneau Pages / États. Dans le panneau Calques, ouvrez le dossier Miniatures. Sur le plan de travail, cliquez sur la vignette du logo 1. Lorsque vous faites cela, vous verrez le HUD ouvert et le panneau Propriétés changera.

Travaillons d'abord dans le HUD. C'est là que nous dirons à Catalyst que nous voulons transformer cette image bitmap en bouton.

6. Sous Convertir l'illustration, cliquez sur Convertir l'illustration en composant et choisissez Bouton dans la liste des composants. Le HUD va changer pour nous donner de nouveaux contrôles pour notre bouton. Développez la liste des interactions personnalisées, puis cliquez sur l'icône Plus. Choisissez On Click dans la liste. Vous obtiendrez un autre menu déroulant appelé Do Action. Dans ce menu, choisissez Play Transition to State. Dans le menu déroulant Choisir un état, choisissez Page1 car nous voulons que ce bouton amène le visualiseur à Page1.

7. Cliquez sur la vignette du logo 2 et répétez l'étape précédente. Définissez Choisir l'état sur Page2.

8. Cliquez sur la vignette du logo 3 et répétez l'étape précédente. Définissez Choisir l'état sur Page3.

Testons nos boutons. Dans la barre de menus, cliquez sur Fichier - Exécuter le projet. Il s'ouvrira dans votre navigateur Web. Lorsque vous cliquez sur chaque bouton, le logo correct doit être visible.

Dans le prochain tutoriel, nous allons estomper le bouton du logo visible et ajouter une transition entre les pages.

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: Adobe Flash CS6 : Ombre portée (Mai 2024).