Grafische afbeeldingen veranderen in knoppen in Flash Catalyst

• April 26, 2024

Nu we ons PhotoshopLayout.psd-portfolioprojectbestand in Adobe hebben geïmporteerd^R Flash^R Catalyst^TM en de Catalyst-werkruimte hebben verkend, zijn we klaar om te werken aan de navigatie voor onze portfolio.

Op dit moment hebben we slechts één pagina of staat voor ons project. We moeten nog twee pagina's maken zodat we op elke pagina een ander logo kunnen weergeven.

1. In het paneel Pagina's / Staten klikken we twee keer op de knop Dubbele staten. Dit geeft ons Page2 en Page3. Maar ze zijn allemaal hetzelfde. Laten we daar voor zorgen.

2. Klik op het pictogram Pagina1 en ga naar het deelvenster Lagen. Open de map Logos. We willen alleen dat logo 1 op deze pagina zichtbaar is. Schakel de zichtbaarheid voor logo 2 en 3 uit.

3. Klik op het pictogram Page2 en schakel de zichtbaarheid uit voor logo 1 en 3. Schakel de zichtbaarheid uit voor logo 2.

4. Klik op het pictogram Pagina3 en schakel de zichtbaarheid uit voor logo 1 en 2. Schakel de zichtbaarheid uit voor logo 3.

Vervolgens maken we de knoppen voor onze portfolio. We hebben een miniatuur voor elk logo. Dit zijn de knoppen.

5. Ga terug naar Pagina1 door op het pictogram in het paneel Pagina's / Staten te klikken. Open de map Miniaturen in het deelvenster Lagen. Klik op het tekengebied op de miniatuur voor logo 1. Wanneer u dit doet, wordt de HUD geopend en wordt het eigenschappenvenster gewijzigd.

Laten we eerst in de HUD werken. Hier zullen we Catalyst vertellen dat we van deze bitmapafbeelding een knop willen maken.

6. Klik onder Illustratie converteren op Illustratie converteren naar component en kies Knop in de lijst met componenten. De HUD zal veranderen om ons nieuwe bedieningselementen voor onze knop te geven. Vouw de lijst Aangepaste interacties uit en klik vervolgens op het pluspictogram. Kies Bij klikken in de lijst. U krijgt nog een vervolgkeuzemenu genaamd Actie uitvoeren. Kies in dit menu Play Transition to State. Kies Pagina 1 in het vervolgkeuzemenu Status kiezen omdat we willen dat deze knop de kijker naar Pagina 1 brengt.

7. Klik op de miniatuur voor logo 2 en herhaal de vorige stap. Stel Kies staat in op Pagina2.

8. Klik op de miniatuur voor logo 3 en herhaal de vorige stap. Stel Kies staat in op Pagina3.

Laten we onze knoppen testen. Klik in de menubalk op Bestand - Project uitvoeren. Het wordt geopend in uw webbrowser. Terwijl u op elke knop klikt, moet het juiste logo zichtbaar zijn.

In de volgende tutorial zullen we de knop voor het zichtbare logo dimmen en een overgang tussen pagina's toevoegen.

Copyright 2018 Adobe Systems Incorporated. Alle rechten voorbehouden. Schermafbeeldingen van Adobe-producten herdrukt met toestemming van 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 en Flash Paper is / zijn ofwel [a] geregistreerde handelsmerken [s] of een handelsmerk [s] van Adobe Systems Incorporated in de Verenigde Staten en / of andere landen.