Interactieve componenten toevoegen in Flash Catalyst

• Mei 11, 2024

In deze zelfstudie maken we de diavoorstelling van de portfolio in Adobe af^R Flash^R Catalyst^R. Als je het hebt gevolgd, hebben we onze knoppen gemaakt en zijn we klaar om de speciale effecten toe te voegen. Terwijl we door de portfolio navigeren, willen we dat de knop voor het zichtbare logo grijs wordt weergegeven en de andere knoppen zichtbaar. Daarom moeten we Catalyst vertellen welke knop voor welke pagina is en wanneer de knoppen moeten worden gedimd. Vervolgens voegen we een overgangseffect tussen vervagen toe.

Eerst dimmen we de knop voor het huidige logo. Wanneer logo 1 zichtbaar is op de pagina Page 1, willen we dat de overeenkomende knop grijs wordt weergegeven. We moeten dit doen voor alle drie staten of pagina's van onze portfolio.

1. Klik op het pictogram Pagina1 in het paneel Pagina's / Staten om aan die pagina te werken. Klik op de miniatuurafbeelding die nu onze knop is voor logo 1. Stel in het deelvenster Eigenschappen de dekking in op 40. Omdat het midden van de mat onder de knop zwart is, lijkt de knop gedimd.

2. Klik op het pictogram Page2 in het paneel Pagina's / Staten. Herhaal de vorige stap voor Pagina2 door alleen de knop te dimmen die overeenkomt met logo 2. Klik op het pictogram Pagina3 in het paneel Pagina's / Staten en herhaal deze stap.

Klik op Bestand - Project uitvoeren om ons nieuwe effect te testen. Terwijl u op de knoppen klikt, moet het bijbehorende logo zichtbaar zijn en moet die knop grijs zijn.

Het laatste dat we aan onze navigatie zullen toevoegen, is een overgang tussen pagina's met behulp van de tijdlijn. Ga terug naar Pagina1 door op het pictogram Pagina1 te klikken. Bekijk de lagen in de tijdlijn en je zult zien dat we een laag hebben voor elke mogelijke overgang tussen alle drie pagina's.

Pagina1> Pagina2
Pagina1> Pagina3
Pagina2> Pagina1
Pagina3> Pagina1

3. Klik op de laag Pagina1> Pagina2. U zult zien dat Catalyst ons de overgangsopties voor logo's 1 en 2 (grijs) en knoppen 1 en 2 heeft gegeven. Omdat we weggaan van logo 1, hebben we een Fade Out-optie. Maar we gaan naar logo 2. We hebben een Fade In-optie voor dit logo.

We voegen alleen het Fade Out-effect toe aan logo 1 en het Fade In-effect aan logo 2. We hebben geen Fade-effect nodig op onze knoppen. Mogelijk wilt u dit effect echter in een ander project gebruiken.

Klik op de knop Vloeiende overgang onderaan de tijdlijn. U zult zien dat de Fade Out / In-besturingselementen zijn uitgebreid tot een halve seconde op alle lagen. Nog steeds op de laag Pagina1> Pagina2 moeten we het effect voor de twee knoppen uitschakelen. Duw de schuifregelaar naar links voor elke knop.

Klik op de pagina Pagina1> Pagina3. Herhaal de vorige stap voor de twee knoppen en logo's. Herhaal dit opnieuw voor de laag Pagina2> Pagina1 en de laag Pagina3> Pagina1.

Dat zorgt voor alle overgangen voor de Page1-staat. Maar we hebben drie staten in onze portefeuille. We moeten dit opnieuw doen voor de andere twee staten. Klik op het pictogram Page2 in het paneel Pagina's / Staten.

Bekijk de lagen in de tijdlijn. U zult merken dat de instellingen die we zojuist hebben ingesteld voor de status Pagina1 worden overgedragen naar de status Pagina2 voor de overgangen tussen Pagina1> Pagina2 en Pagina2> Pagina3. We moeten alleen de overgang toevoegen tussen Pagina2> Pagina3 en Pagina3> Pagina2.

4. Herhaal de vorige stappen om de overgangen toe te passen op de logo's voor de status Page2. U moet dit voor elke laag in de tijdlijn doen.

5. Klik op het pictogram Pagina3 in het paneel Pagina's / Staten. U zult merken dat de overgangsinstellingen zijn overgenomen van de andere twee staten. Als we meer pagina's hadden, zouden we moeten werken aan de lagen voor deze status. Maar aangezien dit de laatste van de drie staten is, zijn we er helemaal klaar voor.

Test je project opnieuw. Als alles werkt, zijn we klaar om ons bestand op te slaan als LogoPortfolio.fxp.

6. We moeten Catalyst vertellen om de bestanden te genereren die onze Flash-portfolio weergeven. Klik op Bestand - Publiceren naar SWF. Blader naar de juiste locatie op uw harde schijf en sla uw project op. U zult zien dat Catalyst u twee mappen geeft. In de map deploy-to-web hebben we de bestanden die nodig zijn om de portfolio op een webserver uit te voeren. In de run-local hebben we de bestanden voor het uitvoeren van de portfolio op onze desktop.

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.

Video-Instructies: BUY vs DIY - $3000 Cloud Lamp (w/ speaker & responsive lights!) (Mei 2024).