Heute beenden wir unser zweiteiliges cu3er-Tutorial.
Für diejenigen, die es nicht wissen, ist Cu3er ein fantastischer 3D-Bildschieber, den Sie kostenlos verwenden und einfach einrichten können.
In diesem Abschnitt wird beschrieben, wie Sie Ihre Diashow mithilfe einiger der vielen Anpassungsoptionen von Cu3er optimieren können. Wir werden hauptsächlich eine XML-Seite bearbeiten, aber machen Sie sich keine Sorgen, dass diese zu technisch ausfällt. Auch wenn Sie nicht wissen, was XML ist, ist das alles ziemlich unkompliziert und leicht verständlich.
Bisher bei Design Shack
In Teil 1 des Cu3er-Tutorials haben wir Cu3er heruntergeladen und die Beispielseite modifiziert, um zu sehen, wie einfach es ist, die Diashow in Ihre Entwürfe zu integrieren.
Bevor wir beginnen, sollten Sie die Demo auschecken und die Quelldateien herunterladen.
Die Config-Datei
Wenn Sie beim letzten Mal die config.xml-Datei von der Originaldatei, die wir von der cu3er-Website heruntergeladen haben, nicht mehr berührt haben.
Die Demo und die zugehörigen Dateien wurden geringfügig um eine Autostart-Funktion erweitert. Heute beginnen wir wieder mit der Standarddatei, nur um eine saubere Seite zu haben.
Machen Sie Ihr Beispiel bereit und öffnen Sie die Konfigurationsdatei. Wir fangen an! Diese Datei sollte nur zwei Abschnitte enthalten: Einstellungen und Folien. Standardmäßig enthält der Einstellungsbereich nur den Code für die vorherigen und nächsten Schaltflächen zum Navigieren in der Diashow. Fühlen Sie sich frei, mit diesen Einstellungen selbst zu spielen oder sie zu entfernen, aber wir werden sie so belassen, weil ich es mag, dass ich die Diashow manuell navigieren kann.
Auto-Start
Die Cu3er-Diaschau ist standardmäßig statisch und ändert Bilder nicht, bis Sie auf die nächste Schaltfläche klicken. Es gibt jedoch viele Fälle, in denen Sie möchten, dass die Diashow beim Laden der Seite automatisch ausgeführt wird.
Kopieren Sie dazu den folgenden Code aus der Cu3er-Dokumentation in den Einstellungsbereich Ihrer XML-Datei.
Der erste Teil dieses Codes steuert, wie lange der Timer auf jeder Folie ist und wie er aussieht. Sie haben hier zwei Möglichkeiten: linear oder kreisförmig. Die kreisförmige Option ist ein Kreisdiagramm, das sich allmählich füllt, und die lineare Option ist ein Rechteck mit horizontalem Verlauf. Die Zeit ist die Anzahl der Sekunden, die die Folie angezeigt wird, bevor Sie fortfahren.
Der Tweening-Teil ist ein Animationsprinzip und hat mit der Linearität der Geschwindigkeit der Animation über die Zeit zu tun. Die wichtigsten Werte hier sind die XY-Koordinaten, mit denen Sie die Position des Timers einstellen können, die Höhe und Breite, mit denen Sie die Größe des Timers einstellen können, und den Farbton, mit dem Sie die Farbe des Timers steuern können.
Wenn wir also einen Zirkeltimer mit einer Dauer von zwei Sekunden mit einer Größe von 50px und einer Farbe von Blau wünschen, würden wir den folgenden Code verwenden:
Folien anpassen
Das Hinzufügen zusätzlicher Folien ist sehr einfach. Gehen Sie einfach zum Folienabschnitt und kopieren und fügen Sie einen Teil des Codeteils zwischen den Folien-Tags ein und ändern Sie den Bildnamen in den Namen Ihres JPGs.
Wenn Sie ein Bild namens sunrise.jpg platzieren möchten, würde der Code folgendermaßen aussehen:
Links zu Folien hinzufügen
Verwenden Sie das folgende Snippet, um einen Link hinzuzufügen. Wenn ein Benutzer auf eine Folie klickt, wird der Link geöffnet (ersetzen Sie den Link durch einen eigenen).
Beschreibungen zu Folien hinzufügen
Mit Cu3er können Sie jeder Folie eine Überschrift und einen Absatz hinzufügen. Diese Beschreibung kann optional einen verknüpften Link enthalten, der sich von dem an der Folie angebrachten Link unterscheidet.
Der Code-Snippet, um dies zu erreichen, kommt direkt nach der Folien-URL.
Dies führt zu einem Ergebnis ähnlich dem unten stehenden.
Anpassen des Beschreibungsfelds
Um die Beschreibungseinstellungen anzupassen, fügen Sie den folgenden Code in den Einstellungsbereich ein und passen Sie ihn an Ihre eigenen Einstellungen an.
Hier können Sie Schriftarten, Textgröße, Textfarbe und Textrand sowohl für die Überschrift als auch für den Absatz festlegen. Mithilfe der Tween-Informationen können Sie die Box mit dem Text positionieren sowie Höhe, Farbe und Animationseigenschaften festlegen. Da meine Folien 600 Pixel breit sind, stelle ich meinen x-Wert und meine Breite so ein, dass x mal zwei plus Breite gleich 600 (150 * 2 + 300) ist, um die Beschreibung horizontal auf der Folie zu zentrieren.
Diese Einstellung gibt mir die folgenden Ergebnisse:
Definieren des 3D-Übergangs
Das letzte anpassbare Attribut, das wir besprechen, macht am meisten Spaß: die 3D-Übergänge. Cu3er gibt Ihnen die vollständige Kontrolle über die Art dieser Übergänge. Schauen wir uns den folgenden Code an:
Wie Sie sehen, haben wir hier einige Übergangsattribute zwischen zwei Folien eingefügt. Zuerst teilen wir Cu3er mit, wie viele Scheiben wir im Übergang haben wollen. Dies kann eine beliebige Zahl sein. Denken Sie daran, dass die Animation bei 30 abgehackt wird. Sie können auch entscheiden, ob Sie das Bild vertikal oder horizontal schneiden möchten. Wenn Sie vertikal wählen, legen Sie fest, ob die Richtung nach oben oder unten sein soll. Bei horizontaler Ausrichtung wählen Sie eine Richtung nach links oder rechts.
Oben ist auch der Shader dargestellt. Die Optionen hier sind keine, flach und phong, wobei letztere eine Art Vignette sind.
Sie können auch die Würfelfarbe (0x333333), die Dauer (in Sekunden) und die Verzögerung (in Sekunden) für jeden Übergang einstellen. Denken Sie daran, die Übergangseigenschaften immer zwischen zwei Folien und nicht innerhalb einer Folie zu platzieren.
Fazit
Hoffentlich können Sie jetzt eine Cu3er-Diaschau einfach in eine Webseite einfügen und die meisten Einstellungen anpassen. Weitere Informationen zum Optimieren der Diashow erhalten Sie auf der Dokumentationsseite.
Cu3er ist ein heißer Gegenstand und wird in einer Reihe von meistverkauften Themen bei ThemeForest verwendet.Durch die Einbindung in Ihr Angebotsportfolio können Sie potenzielle Kunden auf einfachste Weise überzeugen.
Teilen Sie uns mit, ob es andere Plugins oder glänzende Web-Spielzeuge gibt, die Sie gerne sehen würden. Wir sind immer auf der Suche nach coolen neuen Technologien zum Lernen und Teilen!