Share
Dies ist ein Basix-Tutorial, in dem wir unser erstes Projekt in Flash Catalyst aus einer vorgefertigten PSD-Datei erstellen. Wir werden über Catalyst-Grundlagen berichten: Kunst in Komponenten umwandeln, einige Effekte erzeugen und diese Komponenten lebendig machen - kein Code erforderlich!
In diesem Lernprogramm erfahren Sie, wie Sie mit Flash Catalyst mit Grafiken umgehen und sie lebendig werden lassen.
Nachdem Sie sich mit dem Programm vertraut gemacht haben, werden wir im zweiten Teil des Tut einige kompliziertere Dinge erstellen und mehr Interaktivität hinzufügen.
Hinweis: Sie können Ihr Flash Catalyst-Projekt jederzeit speichern und dann fortfahren, wenn es Ihnen angenehm ist. Dazu gehen Sie zu Datei> Speichern unter…, geben Sie dem Projekt einen Namen und speichern Sie es wo immer Sie möchten.
Hier ist das Endergebnis, das wir erzielen werden. Durch das Erlernen der Grundlagen der Arbeit mit einem der neuesten Produkte von Adobe konvertieren wir unser Bildmaterial in Komponenten, erstellen Glüheffekte, legen Symbole fest und machen Übergänge zu Seiten. Wir erstellen auch ein Adobe-Symbol als Schaltfläche, die zu einer angegebenen URL führt: http://active.tutsplus.com
Dies kann ein äußerst grundlegendes Beispiel sein. Wichtig ist die Art und Weise, wie wir die Interaktivität erreichen. Der ganze Prozess ist zeigen und Klicken, es ist nicht eine einzige Zeile der Codierung beteiligt.
Öffnen Sie Adobe Flash Catalyst, und wählen Sie im Startfenster "Neues Projekt aus Designdatei erstellen"> "Aus Adobe Photoshop PSD-Datei ..." aus..
Wählen Galaxy.PSD (Sie können dies vom Source-Download oben im Tutorial erhalten). Stellen Sie sicher, dass die Option "Nicht sichtbare Ebenen importieren" aktiviert ist, und drücken Sie OK.
Zunächst sollten wir die sogenannten "Staaten" für unser Projekt vergeben. Zustände (auch als "Seiten" bezeichnet) stellen die Änderungen dar, die ausgeführt werden, nachdem Benutzer bestimmte Aktionen ausgeführt haben (z. B. wenn sie auf eine Schaltfläche klicken)..
In unserem Projekt gilt Folgendes: Nachdem der Benutzer auf eines der Symbole (Flash, Photoshop oder Dreamweaver) geklickt hat, wird ein Rechteck mit Informationen zum Produkt angezeigt. Da wir drei Symbole haben, sollten wir drei zusätzliche Zustände (Seiten) hinzufügen. Um dies zu tun, klicken Sie im Fenster "Seiten / Status" dreimal auf "Duplicate State". Dadurch werden drei Kopien unserer Hauptseite erstellt, in denen wir einige Änderungen vornehmen werden.
Es ist jetzt ratsam, die Namen der Staaten festzulegen. Doppelklicken Sie auf den Namen jedes Bundesstaates und ändern Sie ihn in einen sinnvollen Zustand. Ich habe folgende Namen gewählt, beginnend mit dem ersten Status: Main, Photoshop, Flash, Dreamweaver. Ich empfehle Ihnen, diesen Zuständen die gleichen Namen zu geben - dies wird Ihnen helfen, dem Tutorial zu folgen und Verwirrung zu vermeiden.
Hinweis: Es ist sehr wichtig, dass Ihr Projekt strukturiert bleibt und Ihren Komponenten sinnvolle Namen geben. Auf diese Weise können Sie finden, was Sie benötigen, und entscheiden, wo Sie zukünftige Vermögenswerte platzieren möchten.
Also haben wir die Staaten für unser Projekt zugewiesen. Lassen Sie uns nun einige Schaltflächen erstellen. Wählen Sie dazu die Flash-Layer-Gruppe. Das HUD-Bedienfeld sollte angezeigt werden (wenn nicht, drücken Sie F7). In Klammern sehen Sie "2 Elemente", um anzuzeigen, dass zwei Elemente ausgewählt sind. Klicken Sie jetzt auf Grafik in Komponente konvertieren> Komponente auswählen und aus dem Menü wählen Sie Button und klicken Sie darauf. Dadurch wird unsere Gruppe von Ebenen in einen Button umgewandelt. Machen Sie dasselbe mit Photoshop- und Dreamweaver-Gruppen.
Nachdem Sie dies im Ebenenfenster und im HUD-Bedienfeld ausgeführt haben, sollte es folgendermaßen aussehen (beachten Sie "Button" im HUD-Bedienfeld und im Ebenenfenster werden unsere Gruppen in die Ebenen mit dem Namen Button konvertiert):
Als nächstes sollten wir den Buttons Zustände zuweisen. Wenn Sie mit Flash Professional vertraut sind, wissen Sie, dass Schaltflächen mit vier Zuständen vorhanden sind - hier gilt dasselbe. In unserem Projekt interessieren wir uns für die Over- und Down-Staaten.
Lassen Sie mich die Bedeutungen aller Staaten für diejenigen erklären, die mit ihnen nicht vertraut sind.
Beginnen wir mit dem Over-Status der Photoshop-Schaltfläche. Klicken Sie im HUD-Bedienfeld auf "Over-Status". Weisen Sie Ihre Aufmerksamkeit auf das Seiten- / Status-Panel, in dem wir derzeit nur vier Staaten haben (Up, Over, Down, Disabled). Sie können auch sehen, dass nur unsere Schaltfläche vollständig sichtbar ist und das andere Bildmaterial im Hintergrund ausgeblendet ist.
Schauen Sie sich auch unser Ebenenfenster an, in dem Sie die Photoshop-Gruppe sehen können:
Erweitern Sie die Photoshop-Gruppe. Wählen Sie den PhotoshopIcon-Layer aus dem Ebenenfenster aus und gehen Sie zu Eigenschaftenfenster> Filter> Filter hinzufügen> Glühen. Wählen Sie die Farbe aus, die Sie möchten (ich habe die Farbe aus dem Symbol verwendet - # 179AFF), setzen Sie Blur auf 16 und Strength auf 1.
Hinweis: Denken Sie daran, dass dies alles im Over-State des Pages / States-Panels geschieht.
Wählen Sie im Ebenenbereich die Ebene "Rechteck". Schauen Sie sich die Szene an und Sie werden sehen, dass das Objekt ausgewählt ist, aber es liegt hinter dem PhotoshopIcon. Erweitern Sie das Rechteck einfach, indem Sie die Maus auf die rechte Seite des Rechtecks bringen und den Pfeil in die Mitte zwischen oberer und unterer Ecke setzen. Erweitern Sie es so, dass wir Platz haben, um das Label "Photoshop" zu schreiben..
Also haben wir das Rechteck erweitert. Nehmen Sie nun das Textwerkzeug (Abkürzung T) und schreiben Sie über das Rechteck das Wort "Photoshop". Im Eigenschaftenbereich des Textwerkzeugs habe ich die folgenden Eigenschaften ausgewählt (Sie können diese auswählen):
Für jetzt sollten Sie etwas haben, das so aussieht (ich habe die Ebenen deaktiviert):
OK, wir haben den Over-Status für die Photoshop-Schaltfläche festgelegt. Sie können Ihr Projekt mit der Tastenkombination Strg + Eingabetaste testen oder gehen Datei> Projekt ausführen. Wenn Sie dem Tutorial gefolgt sind und alles richtig gemacht haben, sollte das Photoshop-Symbol leuchten und der Text mit Rechteck sollte angezeigt werden, wenn Sie mit der Maus über die Schaltfläche fahren.
Zurück in unserem Projekt können Sie zur Hauptszene wechseln, indem Sie einfach zweimal auf die leere Stelle klicken oder die Esc-Taste auf der Tastatur drücken. Sie können auch auf die Breadcrumb-Links in der oberen linken Ecke der Szene klicken, in der Sie sehen Galaxy / PhotoshopButton.
Wiederholen Sie die Schritte 7 bis 9 mit den Flash- und Dreamweaver-Tasten. Beachten Sie, dass Sie in Ihren Glow-Effekten am besten die Farben der Symbole verwenden.
Dieser Schritt ist optional. Ich möchte etwas Glühen hinzufügen, wenn ein Benutzer auf eine der Schaltflächen klickt. Dazu wählen wir eine der Schaltflächen im Ebenenbereich aus und wählen dann im HUD-Bereich die Option Abwärtsstatus. Gehen Sie dann im Ebenenfenster zur Dreamweaver-Gruppe (oder der Gruppe, die Sie zuerst bearbeiten möchten), und wählen Sie die Ebene DreamweaverIcon aus. Wenn Sie dort sind, gehen Sie zum Eigenschaftenbereich, wählen Sie "Filter"> "Filter hinzufügen"> "Glühen" und wählen Sie die gewünschten Einstellungen aus (ich habe dunkelgrau verwendet- # 333333). Wiederholen Sie diesen Schritt für die anderen Gruppen.
In diesem Schritt konvertieren wir die AdobeIcon-Ebene in eine Schaltfläche und weisen Hand-Cursors für unsere Symbole zu. Wählen Sie zunächst die AdobeIcon-Ebene aus. Gehen Sie zum HUD-Bedienfeld und klicken Sie auf die Schaltfläche Choose Component>. Wenn Sie fertig sind, wählen Sie den neuen Button aus, gehen Sie zu Aussehen und überprüfen Sie das Feld "Handcursor". Tun Sie dies für alle anderen Schaltflächen (Photoshop, Flash und Dreamweaver)..
Wenn Sie Ihr Projekt testen, werden Sie feststellen, dass der Handcursor angezeigt wird, wenn Sie mit der Maus über die Symbole fahren. Wir haben unseren Benutzern gezeigt, dass diese Symbole Schaltflächen sind. Im nächsten Schritt weisen Sie diese Option anderen Seiten zu. Das geht ganz einfach - wählen Sie dazu einfach eines der Icons aus, gehen Sie zum HUD-Bedienfeld und wählen Sie dort die Option "In allen anderen Staaten gleich". Auf diese Weise erscheint der Handcursor auch auf den anderen Seiten.
Hinweis: Sie werden auch feststellen, dass die Ebenen mit Symbolen den gleichen Namen "Button" haben. Dies ist für ein einfaches Projekt wie dieses in Ordnung, aber für andere, kompliziertere Projekte empfehle ich dringend, die Ebenen umzubenennen und ihnen sinnvolle Namen zu geben.
Wir sind dem Ende einen Schritt näher gekommen. Lassen Sie uns jetzt mit Interaktionen umgehen. In Flash Catalyst-Interaktionen können Sie zwischen verschiedenen Seiten (Status) wechseln, zu einer bestimmten URL gehen, Video abspielen, anhalten oder anhalten.
Beginnen wir mit unserer ersten Interaktion. Wählen Sie die AdobeIcon-Schaltfläche aus und doppelklicken Sie im Interaktionsbereich, falls dieser verborgen ist. Klicken Sie bei ausgewählter Ebene auf die Schaltfläche Interaktion hinzufügen:
Hier sehen Sie die Dropdown-Liste. Da wir an der URL-Interaktion interessiert sind, wählen Sie die folgenden Optionen aus:
Mit diesen Parametern teilen wir Catalyst mit, dass ein Benutzer, der auf die Schaltfläche klickt, an die von uns zugewiesene URL gesendet wird und dass die Website in einem neuen Browserfenster geöffnet wird. Wir haben auch definiert, dass diese Interaktion nur möglich ist, wenn wir uns im Hauptzustand befinden (Seite)..
Erstellen wir nun die Interaktionen zwischen den Seiten. Zunächst müssen wir die AdobeIcon-Ebene so verschieben, dass sie unter der Gruppenebene "Rechtecke" liegt. Dadurch können Sie Rechtecke über den anderen Objekten sehen. Ziehen Sie dazu einfach die Ebenen, um ihre Reihenfolge zu ändern. Die folgende Ebenenreihenfolge wird auf alle anderen Staaten angewendet:
Als nächstes müssen wir das Aussehen bestimmter Seiten ändern, indem Sie den Inhalt bearbeiten. Wählen Sie die Seite Photoshop. Wählen Sie im Ebenenfenster die Gruppenebene Rechtecke aus und zeigen Sie sie an, indem Sie auf die hier angegebene Stelle klicken:
Das Augensymbol wird angezeigt. Auf der Seite wird das Adobe Dreamweaver-Rechteck mit dem Text und dem Symbol angezeigt. Da es sich um die Photoshop-Seite handelt, sollten wir nur die relevanten Inhalte preisgeben. Erweitern Sie die Gruppenebene Rechteck und deaktivieren Sie die Augensymbole der Flash- und Dreamweaver-Gruppen. Auf diese Weise können Sie nur Photoshop-relevante Inhalte anzeigen:
Wiederholen Sie diese Aktionen für die Flash- und Dreamweaver-Seiten, damit die sichtbaren Rechtecke für die Software relevant sind.
Wenn Sie alles richtig gemacht haben, sollten die Daumen in Ihrem Seiten- / Statusfenster folgendermaßen aussehen:
Lassen Sie uns nun Interaktion zwischen unseren Haupt- und Photoshop-Seiten hinzufügen. Wählen Sie im Fenster Seiten / Staaten unsere Hauptseite aus. Gehen Sie dann zum Ebenenfenster und wählen Sie die Schaltfläche PhotoshopIcon. Gehen Sie wie zuvor in das Interaktionspanel und wählen Sie die folgenden Optionen:
Wiederholen Sie diesen Schritt für Dreamweaver und Flash Pages, sodass Sie durch Klicken auf ein Symbol zur entsprechenden Seite gelangen.
Im nächsten Schritt müssen Sie ein weiteres Bild in die Bibliothek importieren, damit wir den Übergang zur Hauptseite wiedergeben können. Gehen Sie zur Photoshop-Seite. Wählen Sie im Ebenenbereich die Gruppenebene Rechteck. Wählen Datei> Importieren und wählen Sie das exit.gif-Symbol (dieses ist ebenfalls im Quelldownload oben im Tutorial verfügbar):
Das Bild sollte in der Mitte des Rechtecks erscheinen:
Und das Ebenenfenster sollte so aussehen:
Jetzt positionieren Sie einfach mit der Maus das Exit-Symbol in der rechten unteren Seite des weißen Rechtecks:
Flash Catalyst ist intelligent genug, um das Bild auf anderen Seiten an der richtigen Stelle zu positionieren. Das Bild muss nur durch Klicken auf das Augensymbol angezeigt werden:
Wir müssen jetzt das Exit-Symbol in eine Schaltfläche konvertieren und einen Effekt einstellen.
Wählen Sie das Exit-Symbol, gehen Sie zum HUD-Bedienfeld und konvertieren Sie es wie zuvor in eine Schaltfläche.
Wählen Sie den Up-Status aus, und wählen Sie im Eigenschaftenbereich aus Allgemein> Deckkraft. Setzen Sie die Deckkraft auf 50. Dadurch können Sie die volle Deckkraft nur dann anzeigen, wenn Sie mit der Maus über die Schaltfläche fahren oder darauf drücken:
Fügen Sie unserem Exit-Button eine einfache Interaktion hinzu. Wählen Sie auf der Photoshop-Seite die Ebene mit dem Symbol aus, klicken Sie wie zuvor auf Interaktion hinzufügen, und legen Sie die Optionen fest, die im Bild unten angezeigt werden. Der einzige Unterschied besteht darin, dass der Übergang zum Hauptstaat in einem beliebigen Staat erfolgen sollte:
Sie haben den ersten Teil dieses zweiteiligen Lernprogramms zu Grundlagen von Flash Catalyst durchgeführt. Drücken Sie Strg + Eingabetaste oder Datei> Projekt ausführen um zu überprüfen, ob alles gut funktioniert. Im Moment sollten Glüheffekte auftreten, und das Adobe-Symbol sollte zu der von Ihnen angegebenen URL führen. Die anderen Symbole (Photoshop, Flash, Dreamweaver) sollten Übergänge zu ihren Seiten wiedergeben, und das Beendigungssymbol sollte einen Übergang zur Hauptseite wiedergeben.
Im folgenden Teil des Tutorials erfahren Sie, wie Sie unserem Projekt eine Animation hinzufügen, Sound hinzufügen und ein Video einstellen.
Accentsconagua