Hinzufügen interaktiver Komponenten in Flash Catalyst

• April 25, 2024

In diesem Tutorial beenden wir die Portfolio-Diashow in Adobe^R. Blitz^R. Katalysator^R.. Wenn Sie mitgemacht haben, haben wir unsere Schaltflächen erstellt und sind bereit, die Spezialeffekte hinzuzufügen. Während wir durch das Portfolio navigieren, möchten wir, dass die Schaltfläche für das sichtbare Logo abgeblendet und die anderen Schaltflächen sichtbar sind. Daher müssen wir Catalyst mitteilen, welche Schaltfläche für welche Seite bestimmt ist und wann die Schaltflächen gedimmt werden sollen. Dann fügen wir einen Fade-Übergangseffekt zwischen den Seiten hinzu.

Zuerst werden wir die Schaltfläche für das aktuelle Logo dimmen. Wenn das Logo 1 im Status Seite 1 sichtbar ist, soll die entsprechende Schaltfläche abgeblendet werden. Wir müssen dies für alle drei Staaten oder Seiten unseres Portfolios tun.

1. Klicken Sie im Bedienfeld Seiten / Status auf das Symbol Seite1, um an dieser Seite zu arbeiten. Klicken Sie auf das Miniaturbild, das jetzt unsere Schaltfläche für das Logo 1 ist. Stellen Sie im Eigenschaftenfenster die Deckkraft auf 40 ein. Da die Mitte der Matte unter der Schaltfläche schwarz ist, wird die Schaltfläche abgeblendet angezeigt.

2. Klicken Sie im Bereich Seiten / Status auf das Symbol Seite2. Wiederholen Sie den vorherigen Schritt für Seite 2, indem Sie nur die Schaltfläche abblenden, die dem Logo 2 entspricht. Klicken Sie im Bedienfeld Seiten / Status auf das Symbol Seite 3 und wiederholen Sie diesen Schritt.

Klicken Sie auf Datei - Projekt ausführen, um unseren neuen Effekt zu testen. Wenn Sie auf die Schaltflächen klicken, sollte das entsprechende Logo sichtbar sein und diese Schaltfläche sollte abgeblendet sein.

Das Letzte, was wir unserer Navigation hinzufügen werden, ist ein Überblendungsübergang zwischen Seiten mithilfe der Zeitleiste. Kehren Sie zu Seite 1 zurück, indem Sie auf das Symbol Seite 1 klicken. Werfen Sie einen Blick auf die Ebenen in der Zeitleiste und Sie werden sehen, dass wir für jeden möglichen Übergang zwischen allen drei Seiten eine Ebene haben.

Seite1> Seite2
Seite1> Seite3
Seite2> Seite1
Seite 3> Seite 1

3. Klicken Sie auf die Ebene Seite1> Seite2. Sie werden sehen, dass Catalyst uns die Übergangsoptionen für die Logos 1 und 2 (abgeblendet) sowie die Schaltflächen 1 und 2 gegeben hat. Da wir uns von Logo 1 entfernen, haben wir eine Ausblendoption. Wir werden jedoch zu Logo 2 übergehen. Wir haben eine Einblendoption für dieses Logo.

Wir werden nur den Fade-Out-Effekt zu Logo 1 und den Fade-In-Effekt zu Logo 2 hinzufügen. Der Fade-Effekt muss nicht auf unsere Schaltflächen angewendet werden. Möglicherweise möchten Sie diesen Effekt jedoch in einem anderen Projekt verwenden.

Klicken Sie unten in der Timeline auf die Schaltfläche Smooth Transition. Sie werden sehen, dass die Steuerelemente zum Ausblenden / Einblenden auf allen Ebenen auf eine halbe Sekunde erweitert wurden. Noch auf der Ebene Seite1> Seite2 müssen wir den Effekt für die beiden Schaltflächen deaktivieren. Drücken Sie den Schieberegler für jede Taste nach links.

Klicken Sie auf die Ebene Seite1> Seite3. Wiederholen Sie den vorherigen Schritt für die beiden Schaltflächen und Logos. Wiederholen Sie diesen Vorgang erneut für die Ebene Seite2> Seite1 und die Ebene Seite3> Seite1.

Das kümmert sich um alle Übergänge für den Zustand. Wir haben jedoch drei Staaten in unserem Portfolio. Wir müssen dies für die beiden anderen Staaten erneut tun. Klicken Sie im Bedienfeld Seiten / Status auf das Symbol Seite2.

Schauen Sie sich die Ebenen in der Timeline an. Sie werden feststellen, dass die Einstellungen, die wir gerade für den Status Seite1 festgelegt haben, für die Übergänge zwischen Seite1> Seite2 und Seite2> Seite3 in den Status Seite2 übernommen werden. Wir müssen nur den Übergang zwischen Seite2> Seite3 und Seite3> Seite2 hinzufügen.

4. Wiederholen Sie die vorherigen Schritte, um die Übergänge auf die Logos für den Status Seite 2 anzuwenden. Sie müssen dies für jede Ebene in der Zeitleiste tun.

5. Klicken Sie im Seiten- / Statusfenster auf das Symbol Seite3. Sie werden feststellen, dass die Übergangseinstellungen von den beiden anderen Zuständen übernommen wurden. Wenn wir mehr Seiten hätten, müssten wir an den Ebenen für diesen Status arbeiten. Aber da dies der letzte der drei Staaten ist, sind wir alle bereit.

Testen Sie Ihr Projekt erneut. Wenn alles funktioniert, können wir unsere Datei als LogoPortfolio.fxp speichern.

6. Wir müssen Catalyst anweisen, die Dateien zu generieren, die unser Flash-Portfolio anzeigen. Klicken Sie auf Datei - In SWF veröffentlichen. Navigieren Sie zum richtigen Speicherort auf Ihrer Festplatte und speichern Sie Ihr Projekt. Sie werden sehen, dass Catalyst Ihnen zwei Ordner zur Verfügung stellt. Im Ordner "Deploy-to-Web" befinden sich die Dateien, die zum Ausführen des Portfolios auf einem Webserver erforderlich sind. Im Run-Local haben wir die Dateien zum Ausführen des Portfolios auf unserem Desktop.

Copyright 2018 Adobe Systems Incorporated. Alle Rechte vorbehalten. Screenshots von Adobe-Produkten mit Genehmigung von Adobe Systems Incorporated. Adobe, Photoshop, Photoshop-Album, Photoshop-Elemente, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere-Elemente, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Flash Catalyst und Flash Paper ist / sind entweder [eine] eingetragene Marke (n) oder eine Marke (n) von Adobe Systems Incorporated in den USA und / oder anderen Ländern.

Video-Anleitungen: QuickHMI Eagle | Editor: First Steps (April 2024).