Share
In diesem Basix-Lernprogramm erfahren Sie, wie Sie unserem vorhandenen Flash Catalyst-Projekt die endgültigen Funktionen hinzufügen. Wir betrachten die reibungslose Interaktion zwischen Seiten, zusätzliche Hover-Aktionen, Sounds und Videos. Wie beim vorherigen Tutorial ist kein Code erforderlich!
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 in einem entsprechenden Verzeichnis.
Schauen Sie sich das Endergebnis an, das wir erreichen wollen. In den Grundlagen zu Catalyst erfahren Sie, wie Sie glatte Seitenübergänge erstellen, 3D-Animationen anwenden, unseren Schaltflächen Sound hinzufügen und auch Videos hinzufügen.
Öffnen Sie Adobe Flash Catalyst. Wählen Sie im Startfenster Projekt öffnen> Heruntergeladene Datei. Wählen Sie Galaxy2.fxp aus, das Sie über den Quelldownload oben auf der Seite herunterladen können.
Öffnen Sie das Zeitleistenfenster mit einem Doppelklick auf den Namen. Es werden alle möglichen Interaktionen zwischen den Seiten dargestellt:
Wenn Sie Interaktionen anzeigen möchten, die sich auf eine bestimmte Seite beziehen, geben Sie ihren Namen in das Suchfenster ein:
Sie können dies auch mit dem Dropdown-Menü tun:
Lassen Sie uns nun einige Dinge in Bezug auf die Timeline selbst behandeln. Hier haben wir 5 wichtige Punkte:
Ok, jetzt kennen Sie die Zeitleiste, sodass wir unseren Seiten einige Animationen hinzufügen können. Beginnen wir mit dem Übergang zwischen der Hauptseite und der Photoshop-Seite. Klicken Sie im Schnittfenster mit ausgewählter Photoshop-Ebene (wenn ausgewählt, sehen Sie die blaue Füllung) auf den Pfeil in der Nähe der Schaltfläche "Übergang glätten":
Hier sehen wir das Menü, mit dem wir bestimmte Parameter einstellen können. "Dauer" ist die Dauer der Animation; Ich habe mich entschlossen, es auf 1 Sekunde einzustellen, und für das Timing habe ich die Option "Intelligente Glättung" verwendet. Wir brauchen kein "Simultaneous", da wir nur Animationen auf eine Ebene anwenden. Natürlich müssen wir nichts überschreiben, lassen Sie das Häkchen leer.
Wir haben eine glatte Überblendung auf eine der Seiten angewendet. Schauen wir uns das Bild an und sehen, was sich geändert hat:
Zunächst können Sie den von uns eingestellten Effekt mit der Wiedergabetaste in der Vorschau anzeigen. Hier sehen Sie, dass wir jetzt eine blaue durchgezogene Linie mit den Worten "Einblenden" haben. Dies bedeutet, dass wir die Animation auf unsere Photoshop-Ebene angewendet haben. Klicken Sie auf diese blaue durchgezogene Linie und untersuchen Sie das Eigenschaftenfenster:
Wir sehen, dass es oben Fade sagt; Dies zeigt den Namen des angewendeten Effekts an. Wir haben einige zusätzliche Optionen: Die Deckkraft ist auf Auto eingestellt. Wenn Sie die Einstellung jedoch selbst vornehmen möchten, deaktivieren Sie das Häkchen und setzen Sie Ihre eigenen Parameter in "Von" und "Bis". Sie können auch sehen, dass wir die Dauer ändern und sogar die Verzögerungszeit für den Effekt einstellen können. Die Erleichterung ist eine weitere wichtige Option, insbesondere wenn Sie mit Flash Professional vertraut sind. Ich überlasse es dem Standard, aber experimentiere gerne damit.
Als nächstes sollten wir die Animation auf die Schaltfläche "Exit" anwenden. Wählen Sie im Timelines-Bedienfeld die Ebene "Button" aus (Denken Sie daran, dass im Hauptfenster des Timelines-Fensters der Übergang Main> Photoshop ausgewählt sein muss), und klicken Sie erneut auf den Pfeil neben der Schaltfläche "Übergang glätten". Setzen Sie im Dialogfeld die Dauer auf 0,5 Sekunden:
Trennen wir die Zeit der Animation. Wählen Sie die Ebene "Exit-Button". Dafür haben wir zwei Methoden.
Gehen Sie zum Eigenschaftenbereich und setzen Sie die Verzögerung für die Ebenenebene "Exit" auf 1 Sekunde:
Alternativ können Sie die grüne Linie in der Exit-Button-Ebene so auswählen, dass sie durchgängig blau wird. Klicken Sie dann auf die Zeitleiste, die zu uns passt, und ziehen Sie sie auf das Zeitfenster (in unserem Fall 1 Sekunde):
Es gibt eine weitere Möglichkeit, die Länge der Animation anzupassen. Es ist sehr wichtig und sehr einfach zu bedienen. Um die Animationsdauer einfach mit ausgewählter Ebene zu ändern, bewegen Sie den Mauszeiger über den kleinen Pfeil am Ende des Animationssegments, halten Sie die linke Maustaste gedrückt und ziehen Sie in die gewünschte Richtung (rechts erweitern, links verkürzen):
Wechseln wir zu einer anderen Seite. die Flash-Seite. Wählen Sie im Bereich "Zeitleisten" Haupt> Flash-Übergang. Richten Sie wieder den gleichen Fade-In-Effekt für beide Ebenen ein, den wir in den Schritten 5-7 hatten:
Lassen Sie uns noch mehr Interaktion hinzufügen. Klicken Sie im Bereich "Zeitleisten" mit der ausgewählten Ebene "Flash" auf die Schaltfläche "+ Aktion hinzufügen" in der Mitte. Wählen Sie im Dropdown-Menü die Option Drehen:
Jetzt haben wir drei Elemente aus unserer Flash-Ebene ausgewählt, und Sie können sehen, dass alle den Rotate-Effekt angewendet haben:
Ok, wählen Sie einen der Rotate-Effekte (der Rotate-Effekt, auf den Sie geklickt haben, wird blau), und klicken Sie im Fenster "Timelines" auf das Fenster "Eigenschaften". Wenn Sie dort die erste Option auf einen bestimmten Winkel und den Winkel auf 360 ° eingestellt haben, wird die Drehung abgeschlossen. Die Dauer von 0,5 Sekunden sollte in Ordnung sein, aber Sie können frei experimentieren. Mein Ziel ist es, Ihnen nur zu zeigen, was Sie tun können :)
Nachdem Sie es auf eines der Elemente angewendet haben, setzen Sie die gleichen Einstellungen auf die beiden verbleibenden, sodass alle drei um 360 ° gedreht werden und dieselbe Dauer haben. Anschließend können Sie die Animation in der Vorschau anzeigen. Wir haben jetzt Rotations- und Einblendeffekte für diese Flash-Seite.
Fahren Sie fort und fügen Sie der Dreamweaver-Seite Effekte hinzu. Wählen Sie im Zeitleistenfenster „Main“> „Dreamweaver-Übergang“ aus. Wiederholen Sie die Schritte 5-7 auf der Seite, so dass der Effekt „Einblenden“ erscheint:
Klicken Sie bei ausgewähltem Dreamweaver-Layer auf die Schaltfläche "+ Aktion hinzufügen" und wählen Sie "3D drehen" aus dem Dropdown-Menü.
Sie sollten sich jetzt etwas ähnliches ansehen (Der 3D-Effekt wird auf alle drei Elemente der Timeline angewendet):
Lass uns sie anpassen. Wählen Sie eine der 3D-Animationen aus, und wechseln Sie zum Eigenschaftenbereich. Dort haben wir einige Möglichkeiten. Neben Dauer, Verzögerung und Erleichterung haben wir drei Arten von Rotation. Also von links nach rechts: Erstens - dreht das Objekt um die X-Achse, Zweitens - dreht das Objekt um die Y-Achse, und der dritte - es ist eine einfache Drehung, die wir auf der Flash-Seite hatten. Und für jede Art von Drehung können wir den Startwinkel und den Endwert festlegen.
Für DreamweaverRect verwende ich die Drehung von 0 bis 360 ° um die Y-Achse:
Für DreamweaverIcon und Text verwende ich die Drehung von 0 bis 360 ° um die X-Achse mit 0,5 Verzögerung:
Sie sollten also folgendes Bild haben und Ihre Animation mit der Wiedergabetaste testen können:
Als nächstes sollten wir das Video einstellen. Wir werden der Flash-Seite ein Video hinzufügen, da es sich um Flash Catalyst und Flash Player handelt. Wählen Sie dazu unsere Flash-Seite. Gehen Sie dann zu Datei> Importieren> Video- / Sounddatei. Wählen Sie die heruntergeladene Adobe.flv-Datei aus der Source-Zip-Datei, die oben im Lernprogramm verlinkt ist.
Als nächstes müssen wir die Datei der Flash-Gruppe zuweisen. Wählen Sie einfach den Video Player aus dem Ebenenfenster aus, halten Sie die linke Maustaste gedrückt, und ziehen Sie den Video Player auf die Flash-Gruppenebene, bis er erweitert wird, und fügen Sie ihn ein. Nachdem Sie dies getan haben, sollten Sie Folgendes sehen:
Lassen Sie uns nun das Flash-Symbol und den Text ausblenden, sodass nur noch Video angezeigt wird. Klicken Sie dazu auf die Augensymbole dieser Ebenen, damit sie nicht mehr angezeigt werden. Sie können diese Ebenen auch löschen. Sie können diese Ebenen selbst auswählen. Wählen Sie diese Ebenen einfach aus und klicken Sie auf das Papierkorbsymbol unten rechts im Ebenenfenster..
Als Nächstes müssen Sie die Größe des Videos ändern, damit es in das Rechteck passt. Wählen Sie die Ebene "Video Player" und die Maus über der linken oberen Ecke des Videos, sodass Sie zwei Pfeile sehen können, die in unterschiedliche Richtungen zeigen (die Maus sollte sich über dem weißen Quadrat befinden). Halten Sie die linke Maustaste gedrückt und beginnen Sie mit dem Ziehen. Sie werden auch bemerken, dass es andere weiße Quadrate und das blaue Quadrat in der Mitte gibt. Ziehen Sie sie auf die gleiche Weise, um das Video zentral zu positionieren (wenn Sie das Video selbst und nicht seine Ecken ziehen möchten, zeigen Sie mit der Maus in die Mitte des Videos und ziehen Sie es.).
Gehen wir zum Eigenschaftenbereich und untersuchen Sie das Angebot.
Zuerst sehen wir die Position des Videos auf der Bühne, seine Breite und Höhe. Wenn Sie sie anpassen möchten, habe ich die folgenden Optionen eingestellt: X - 179, Y - 89, Breite (W) - 281, Höhe (H) - 154. Dann werden Sie feststellen, dass wir bereits die Videosteuerelemente haben - die Das Eigenschaftenfenster bietet zwei vorgefertigte Videosteuerelemente (Wireframe und Standard), wir fügen jedoch eigene Schaltflächen zur Steuerung des Videos hinzu.
Für den Skalenmodus habe ich auch "Keine" eingestellt. Neben "None" können Sie den Skalierungsmodus auf "Stretch", "Letterbox" oder "Zoom" setzen. Hier können Sie experimentieren und das Beste einstellen, das zu Ihnen passt. Wenn Sie eine Vorschau des Aussehens anzeigen möchten, aktivieren Sie die Option "Auto Play" (Denken Sie daran, wenn Sie mit dem Experimentieren fertig sind, deaktivieren Sie die Option "Auto Play".).
Neben Auto Play haben wir die Option "Loop" und "Muted". Wir müssen kein Video schleifen, also lassen Sie es nicht aktiviert und wir möchten auch den Ton hören, sodass die Option Stummgeschaltet sein muss.
Gehen wir nun zu den Untermenüs Component und Appearance. Vergewissern Sie sich, dass die Option "Mausereignis akzeptieren" aktiviert ist (wenn dies nicht aktiviert ist, können wir keine eigenen Schaltflächen für das Video festlegen). Mit der Option "QuickInfo" können Sie die Beschreibung des Videos schreiben. Wenn der Benutzer darüber mausiert, wird ihm die Beschreibung angezeigt.
"Volume", denke ich, ist klar., /
In der Option Aussehen können Sie einen bestimmten "Überblendungsmodus" festlegen. Außerdem können Sie die Option "Handcursor" aktivieren, sodass der Mauspfeil beim Bewegen des Videos über dem Video zum Handcursor wird.
Jetzt ist es Zeit, die Steuertasten für unser Video einzustellen. Wenn die Flash-Ebenengruppe ausgewählt ist, gehen Sie zu Datei> Importieren> Bild und importieren Play.png. Machen Sie dasselbe für Stop.png. Wandeln Sie sie in Schaltflächen um und platzieren Sie sie unter dem Video (es empfiehlt sich immer, sie umzubenennen). Sie können auch einige Effekte anwenden, die jedoch nicht erforderlich sind. Ich habe die Opazität im Up-Status für sie auf 75 festgelegt. Wenn Sie nicht wissen, wie Sie dies tun, sollten Sie unbedingt mein erstes Tutorial zu Flash Catalyst sehen besprechen Sie solche Dinge).
… Und die Situation im Ebenenfenster sollte so sein:
Nun zum einfachsten Teil - gehen Sie zum Interaction Panel, wählen Sie die Play-Schaltfläche und im Interactions-Panel die folgenden Optionen: First - On Click, Second - Play Video, Third - Wählen Sie unser "Adobe1.flv" Video aus. Nur in Flash-Seite:
Machen Sie dasselbe für die Stop-Taste, aber statt "Video abspielen" stellen Sie "Stop Video" ein..
Nachdem wir nun die Steuerelemente auf unser Video eingestellt haben, testen wir es - drücken Sie Strg + Eingabetaste oder gehen Sie zu Datei> Projekt ausführen.
Das letzte, was wir tun müssen, ist, die Tasten mit Sound zu versehen. Lassen Sie uns zunächst den Sound importieren. Wechseln Sie zu Datei> Importieren> Video- / Sounddatei und navigieren Sie zu Ihrem installierten Flash Catalyst-Stammverzeichnis. Wählen Sie dort "Sound Effects / Flash Beep.mp3". Natürlich können wir unsere eigenen Sounds verwenden, aber ich wollte Ihnen zeigen, dass Flash Catalyst ein vorinstalliertes Soundpaket enthält. Wählen Sie eine, die zu Ihnen passt. Nach dem Import können Sie eine Vorschau anzeigen. Gehen Sie zum Bibliotheksbereich und navigieren Sie im unteren Bereich zum Unterordner "Media". Wählen Sie "Flash Beep.mp3". Im oberen Fenster wird die Schaltfläche "Abspielen" angezeigt. Wenn Sie darauf klicken, hören Sie den Sound der Schaltfläche:
Hinweis: Hier finden Sie auch alle unsere Grafikdateien, Medien und Komponenten.
Lassen Sie uns unser Projekt abschließen und die Tasten während ihres Over-Zustands mit Sound versehen. Wählen Sie dazu eine der Schaltflächen im Bereich "Ebenen" aus, und wechseln Sie zum übergeordneten Status. Klicken Sie im Bereich "Zeitleisten" mit ausgewähltem Symbol auf der Bühne auf die Schaltfläche "+ Aktion hinzufügen" und wählen Sie Soundeffekt:
Wählen Sie im Dialogfeld "Flash Beep" und klicken Sie auf OK:
Die Situation auf der Zeitleiste sollte wie folgt aussehen:
Wiederholen Sie diesen Schritt mit den Flash- und Photoshop-Symbolen, und Sie sind fertig. Führen Sie das Projekt aus!
Jetzt wissen Sie nicht nur, wie Sie Ihr Bildmaterial in Komponenten umwandeln, sondern auch, wie Sie eine reibungslose Interaktion zwischen Seiten hinzufügen, verschiedene Animationsvarianten anwenden, Video und Sound in Ihren Projekten verwenden und diese steuern können. Flash Catalyst ist eine erstaunliche Anwendung, und Sie können jetzt ohne das Schreiben einer einzigen Codezeile Ihr Bildmaterial zum Leben erwecken.
Ich hoffe, es hat Ihnen Spaß gemacht, dieses Projekt zu verfolgen und zu lernen, wie man Flash Catalyst verwendet. Üben Sie und Sie werden großartige Ergebnisse erzielen! Danke auch für das Lesen meines Tutorials :)
Accentsconagua