7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. ActionScript

Vergrößern Sie Ihren eigenen Inhaltsbereich

Scroll to top
Read Time: 21 mins

German (Deutsch) translation by Tatsiana Bochkareva (you can also view the original English article)

Bei einigen Gemälden müssen Sie genauer hinsehen, um alle Details zu sehen. Stellen Sie sich jetzt anstelle eines Gemäldes eine leere Leinwand vor, die mit Bildern, Text und dynamischen Beschreibungen gefüllt werden kann.

Wir haben diesen großartigen Autor dank FlashGameLicense.com gefunden, dem Ort, an dem Sie Flash-Spiele kaufen und verkaufen können.

Hinweis: Dieses Tutorial hat nichts mit dem HTML5-Canvas-Element zu tun!


Die Demo ist eine Viewer-Anwendung, die ihre Daten aus XML lädt. Der Inhalt wird auf der "Leinwand" platziert und der Benutzer kann in die Leinwand zoomen oder auf eines der Bilder klicken, um es auf dem Bildschirm zu zentrieren. Einstellungen wie Seitengröße, Hintergrundfarbe / Textur und andere Einstellungen werden dynamisch geladen. Als Bonus kann der Benutzer mehrere Seiten erstellen.

In diesem Tutorial werden wir uns mit den grundlegenden Konzepten zum Erstellen einer solchen Anwendung befassen. Es ist ratsam, den Quellcode beim Lesen des Tutorials neben sich zu lassen, da nicht jeder Teil erklärt wird. Der Quellcode kann mit FlashDevelop oder mit Flash CS3 Professional und höher verwendet werden.


Hinweis: Öffnen Sie die Anwendung lokal

Beachten Sie, dass Sie die Anwendung, bevor Sie versuchen, sie von Ihrer Festplatte zu öffnen, zur Liste "Vertrauenswürdige Speicherorte" hinzufügen müssen, die im unten gezeigten Bereich "Globale Sicherheitseinstellungen" angegeben ist. Andernfalls wird kein Zugriff gewährt, um die Bilder von Ihrer Festplatte abzurufen. Dies ist beim Hochladen auf eine Website nicht erforderlich, solange sich die Bilder auf demselben Webserver befinden.

Global Security Settings panelGlobal Security Settings panelGlobal Security Settings panel

Schritt 1: Einrichten der XML-Datei

Wenn Sie mit XML nicht vertraut sind, lesen Sie Dru Kepples AS3 101: XML. Unten sind die XML-Daten dargestellt, die einer Seite entsprechen, die mit einem Bild und einem Textfeld gefüllt ist. Die hier angegebenen Einstellungen gelten für alle Seiten. Wie Sie sehen, ist es einfach, mehrere Seiten zu erstellen und Inhalte hinzuzufügen. Zu Bildern können Sie einen Titel und eine Beschreibung hinzufügen, die angezeigt werden, wenn Sie mit der Maus darüber fahren. Mehrzeiliger Text wird hinzugefügt und Größe und Stil können angepasst werden. Jedes Textfeld verwendet eine benutzerdefinierte Schriftart in der .fla-Datei.


Schritt 2: Die Dokument- und Canvas-Klasse

Verwenden Sie den folgenden Code, um unsere Anwendung einzurichten. Es wird fast vollständig von FlashDevelop mithilfe der Vorlage "AS3 Project" generiert. Main ist die Dokumentklasse - die Klasse, die beim Starten von Flash zuerst geladen wird - und in Canvas erstellen wir unsere Anwendung.

Und eine vereinfachte Version von Canvas. Beachten Sie, dass wir einen Anzeigeobjektcontainer als Parameter verwenden, um das zusätzliche Steuerelement zum Hinzufügen / Entfernen des Canvas hinzuzufügen.


Schritt 3: Verwenden von Bulk Loader zum Laden von Assets

In dieser Anwendung verwenden wir den sogenannten BulkLoader: eine AS3-Bibliothek, die das Laden und Verwalten komplexer Ladeanforderungen einfacher und schneller machen soll. Beim ersten Laden verwenden wir es, um die XML-Datei und ein Hintergrundbild abzurufen. Der folgende Code zeigt, wie Sie den BulkLoader starten und der Ladewarteschlange zwei Elemente hinzufügen. Die Complete-Funktion wird aufgerufen, wenn alle Elemente geladen sind.


Schritt 4: Speichern der geladenen Assets

Wir speichern die geladenen Assets in der Klasse zur späteren Verwendung. Der BulkLoader bietet eine einfache Möglichkeit, die benötigten Gegenstände zu finden. Rufen Sie einfach die dem Objekttyp entsprechende Funktion auf und verwenden Sie die ID-Zeichenfolge des Objekts. Statische Variablen werden verwendet, um die XML-Daten global verfügbar zu machen (z. B. Zugriff auf eine statische Variable mit Canvas.viewerWidth). Die path-Variable gibt an, wo sich die extern geladenen Bilder befinden. Bilder können aus Sicherheitsgründen nur vom eigenen Webserver geladen werden.


Schritt 5: Einführung in die virtuelle Kamera

Wie Sie vielleicht erraten haben oder nicht, verwendet die Anwendung eine virtuelle Kamera, um einen Teil der Leinwand zu extrahieren und dem Benutzer anzuzeigen. Die Kamera wendet eine Skalierung und Übersetzung auf einen Anzeigeobjektcontainer an, sodass nur der Bereich unter der Kamera auf dem Bildschirm angezeigt wird. Die folgende Demonstration gibt Ihnen eine bessere Vorstellung davon, wie es funktioniert.

Der Quellcode dieser Demonstration ist ebenfalls im Archiv enthalten. Lassen Sie uns dieses Beispiel erklären, indem Sie mit der Konfiguration der Einstellungen beginnen. Wir möchten, dass der Betrachterbereich 305 x 230 ist, und der Inhaltsbereich - das sind die Abmessungen des Blumenbilds - sollte versuchen, das Seitenverhältnis des Betrachterbereichs beizubehalten, damit er sich nicht zu stark verformt. Unsere Blume ist 1000 x 750, was nah genug ist. Um die gesamte Blume im Betrachterbereich anzuzeigen, muss die Kamera dieselbe Größe wie die Blume haben (1000 x 750).

Der folgende Code legt die Dimensionseinstellungen fest. In diesem Beispiel sind sie fest codiert, ansonsten wird sie aus XML übernommen.

Als nächstes erstellen wir einen Viewer-Container. Mit der Option scrollRect können Sie alles außerhalb eines bestimmten Rechtecks abschneiden. Dies ist sehr nützlich, da beim Vergrößern nur ein Teil der Leinwand angezeigt werden muss. Dies ist eine übersichtlichere Lösung, als beispielsweise einen schwarzen Rand um die Anwendung zu setzen.

Zum Viewer-Container fügen wir ein weiteres Sprite namens viewerScroller hinzu. Die Funktion von viewerScroller besteht einfach darin, als Container für alles zu fungieren, was als Inhalt für die Kamera dienen muss. Dies erleichtert das Hinzufügen mehrerer Elemente zum Inhaltsbereich.

Fügen Sie dem viewerScroller Inhalte hinzu. In diesem Fall das Blumenbild.

Fügen Sie nun die Camera-Klasse hinzu. Obwohl wir die Camera-Klasse noch nicht erstellt haben, verwendet ihr Konstruktor die Viewer-Dimensionen als Parameter, und die Funktion SetTarget hat den Inhalt Sprite als Parameter. Wir positionieren die Camera in der Mitte des Inhalts und geben ihr ein erstes Update.

Mit all diesem Code können wir die Kamera rendern und bearbeiten. In einer Event.ENTER_FRAME-Schleife können Sie cam.Update() ausführen, um die Kameraansicht zu aktualisieren. Es ist jedoch effizienter, nur bei einer Änderung zu aktualisieren. Durch Ändern von cam.x und cam.y können Sie die Kamera bewegen, und durch Ändern von cam.scaleX und cam.scaleY können Sie den Maßstab ändern. Genau das tun die Tastaturtasten im Beispiel.


Schritt 6: Kamera Klasse A genauer hinsehen

Hier werfen wir einen Blick auf die Einbauten der Camera. In der Konstruktorfunktion fügen wir einige Grafiken hinzu, die für die Manipulation des Maßstabs der Kamera benötigt werden. Wir speichern die Dimensionen des Viewer-Inhalts auch lokal in der Klasse.

Befestigen Sie als Nächstes die Kamera an einem Objekt. Die Kamera hat den gleichen Maßstab wie das Objekt.

Dies ist der interessanteste Teil und der Motor der Kamera. Skalierung und Übersetzung werden auf das an der Kamera angebrachte Objekt angewendet, indem ihm eine neue Transformationsmatrix zugewiesen wird. Weitere Informationen zur Verwendung von Matrizen finden Sie in der Matrix-Klasse in der AS3-Dokumentation.


Schritt 7: Einrichten des Viewers

Wir kehren zu unserer Bewerbung zurück. In diesem Schritt legen wir den Grundstein für sogenannte Page objekte, die die Leinwand mit Bildern und Text enthalten. Erstellen Sie zunächst einen Hintergrund für die gesamte Anwendung. Die Farbe wird aus XML angegeben.

Wie im Beispiel mit der Camera und der Blume verwenden wir pageContainer und pageScroller und Camera. Das sollte ziemlich vertraut aussehen.

Als Nächstes werden alle erforderlichen Page-Objekte hinzugefügt, wie im XML angegeben. In unserem Beispiel haben wir nur eine Seite erstellt. Beachten Sie, dass die Page-Klasse noch nicht vorhanden ist, da wir diese im nächsten Schritt erstellen. pages ist ein Array, das alle Page-Referenzen zur späteren Verwendung enthält.

Von Page verwendete Parameter sind

  • pageScroller: Das Sprite, zu dem die Page hinzugefügt wird
  • p: Ein XML-Datenobjekt, das alle Informationen auf einer bestimmten Seite enthält (alle Bilder und Texte).
  • g_background: die Hintergrundtextur

Schritt 8: Erstellen einer Seite

Unten wird der Konstruktor von Page angezeigt. Wir speichern einfach alle Parameter lokal in der Klasse für die spätere Verwendung.

Jetzt ein bisschen interessanteres Zeug. Die Load-Funktion von Page beginnt damit, dass die zuvor geladene Hintergrundtextur über die Leinwand gewickelt wird. Dazu müssen wir die Größe des Hintergrundbilds, das wir durchlaufen, und die Größe der gesamten Leinwand kennen. Erstellen Sie ein Sprite mit dem Namen g_background, das als Grafikcontainer fungiert. Fügen Sie eine feste Hintergrundfarbe hinzu, um zu verhindern, dass Linien zwischen den anzuzeigenden Bitmap-Bildern angezeigt werden.

Beim Umschließen der Hintergrundtextur werden zwei Schleifen verwendet, nur vertikal und eine horizontal. Es wird so lange wiederholt, bis die Kante erreicht ist. Jede Kachel an einer geraden Position - wie(2,2),(4,2),(4,6) usw. - wird mit scaleX oder scaleY umgedreht. Dadurch fließt die Textur nahtlos zur nächsten über. Mit dem Modulo-Operator (%) wird überprüft, ob eine Zahl gerade ist. Wenn der Rest einer Zahl nach der Abweichung von 2 Null ist, muss diese Zahl gerade sein. An den Rändern schneiden wir alle Texturen ab, die außerhalb der in trueWidth und trueHeight angegebenen Inhaltsdimensionen liegen. Es ist wichtig, dass das Page-Objekt diese Größe beibehält, da durch Vergrößern das Seitenverhältnis geändert wird und sich der Bildschirm verformt.

Das Ergebnis des sich wiederholenden Hintergrunds sollte ungefähr so sein. Zur Verdeutlichung werden dunkle Ränder hinzugefügt.

Repeating backgroundRepeating backgroundRepeating background

Schritt 9: Laden von Text

Beginnen wir unsere Reise zum Füllen von Seiten mit dem Hinzufügen von Text. Gehen Sie alle XML-Einträge mit der Bezeichnung "Text" durch und übergeben Sie ihre Daten an die AddText-Funktion.

Die AddText-Funktion sieht folgendermaßen aus. Der erste Teil des Codes überprüft die XML-Daten. Falls einige Felder nicht ausgefüllt sind, wird ein Standardwert angehängt. QuickText ist eine Klasse, mit der ein Textfeld mit bestimmten Optionen erstellt wird. Schließlich muss der Text mit mouseEnabled = false und mouseChildren = false von der Mausinteraktion ausgeschlossen werden.

Das folgende Bild zeigt alle Optionen der QuickText-Klasse:

The options of the QuickText class.The options of the QuickText class.The options of the QuickText class.

Und das Ergebnis der neuen Seite mit Text:

Page with textPage with textPage with text

Schritt 10: Laden von Bildern

Der erste Schritt besteht darin, Picture-Objekte zu erstellen, die die XML-Daten, die Bitmap und einen beschreibenden Text enthalten. Listener werden direkt für die Mausinteraktion angewendet. Alle diese Picture-Objekte werden dann in einem Array gespeichert, um später leicht darauf zugreifen zu können.

Und hier ist die Basisversion der Picture-Klasse, die nur die XML-Daten enthält. Picture erweitert Sprite, wir können es schon irgendwo positionieren. Die Skalierungseinstellung wird vor der Verwendung überprüft. Wenn der Benutzer sie im XML weglässt, wird 0 zurückgegeben. Der Standardwert für die Skalierung ist 1.

Erstellen Sie einen neuen BulkLoader wie beim ersten Mal, aber jetzt, um Stapel von Bildern zu laden. Wir werden 5 Bilder gleichzeitig laden und diese anzeigen, wenn Sie fertig sind. Es werden so lange neue Bilder abgerufen, bis alle fertig sind. Die Funktion Complete wird nach Abschluss jeder Charge aufgerufen.


Schritt 11: Laden von Bildern (Fortsetzung)

In diesem Schritt fügen wir die geladenen Daten in Picture-Objekte ein. Die items-Eigenschaft des Loaders enthält alle Objekte, die geladen wurden. Durchlaufen Sie alle diese Objekte und prüfen Sie, ob es sich um ein Bild handelt. Jede Bitmap wird dem entsprechenden Picture-Objekt zugewiesen und das Picture wird der Leinwand hinzugefügt. Wir löschen auch das geladene Bild aus der Liste der Ladeelemente, um Konflikte mit einem späteren Stapel geladener Bilder zu vermeiden.

Und ein genauerer Blick auf die SetImage-Funktion von Picture.

Das Hinzufügen eines Bildes zur Zeichenfläche ist so einfach wie das Aufrufen von addChild.

Das Ergebnis wird nun:

Page with text and imagesPage with text and imagesPage with text and images

Schritt 12: Hinzufügen der Seite

Das Hinzufügen von Elementen zur Kameraansicht erfolgt durch Hinzufügen eines untergeordneten Elements zum viewerScroller-Container. Wir haben den viewerScroller zu jedem Page-Objekt als Parameter hinzugefügt, damit wir ihn als untergeordnetes Element hinzufügen können, indem wir die Show()-Funktion von Page aufrufen.

Kehren Sie zur Canvas-Klasse zurück und rufen Sie die Funktionen Load() und Show() auf, wenn Sie dem Benutzer eine Seite anzeigen möchten. Falls die Page bereits geladen ist, kehrt Load() direkt zurück, sodass keine unnötigen Aktionen ausgeführt werden. Die aktuelle Page, die wir anzeigen, wird in der Klasse als page gespeichert. Diese Referenz ist wichtig für die Seiteninteraktion.


Schritt 13: Zoom-Modi

Nachdem wir unsere Seite mit Bildern und Text erstellt haben, müssen Sie sie skalieren, damit sie in unseren Viewer-Bereich passt. Zu diesem Zweck verwenden wir die öffentlichen statischen Variablen zoom und magnifyStep. magnifyStep ist ein Array, das alle unterschiedlichen Skalierungswerte der Kamera enthält, und Zoom ist die aktuelle Position von magnifyStep, auf die die Kamera skaliert ist. Um zu wissen, welcher Skalierungswert erforderlich ist, um den Inhalt in den Viewer zu integrieren, müssen wir das Verhältnis zwischen dem Inhalt und den Viewer-Regionen kennen. Um falsche Seitenverhältnisse zu berücksichtigen, nehmen wir das minimale Verhältnis zwischen Breite und Höhe wie folgt:

Wir möchten beim Klicken auf die Leinwand zoomen. Fügen Sie dem Trefferfeld von Page ein Mausereignis hinzu. Das Trefferfeld besteht im Grunde nur aus den Grafiken im Hintergrund von Page. Da es sich um ein Sprite handelt, können wir eine Mausinteraktion darauf setzen.

Mit einem Mausklick möchten wir, dass die Kamera auf den Zoompunkt in der magnifyStepList verkleinert und zu dem Punkt auf der Leinwand bewegt wird, auf den wir geklickt haben. Denken Sie aus dem Beispiel daran, dass der Zoom auf der Leinwand größer wird, wenn die Kamera kleiner wird (verkleinert). Aus diesem Grund verringern wir den ganzzahligen Zoom um den Wert Eins. Mit page.mouseX und page.mouseY können Sie ganz einfach die Mausposition ermitteln, die wir auf die Leinwand geklickt haben. Flash konvertiert die Zahlen automatisch so, dass sie lokal angezeigt werden. Wenn die Seite beispielsweise um 50% verkleinert ist und Sie zur Hälfte klicken, werden 1000 Pixel zurückgegeben, obwohl die Mausposition auf den Skalierungskoordinaten viel kleiner ist.


Schritt 14: Korrigieren der Kameraposition

Um den Bereich der Kamera innerhalb der Leinwand zu halten, müssen wir die Position innerhalb der Grenzen der Kamera korrigieren. Schauen Sie sich das Kamerabeispiel noch einmal an, um dies zu demonstrieren. Die Kamera ist um sich selbst zentriert, sodass die horizontale Position beispielsweise innerhalb von 0 + camera half-width und contentWidth - camera half-width bleiben muss. Eine zuverlässige Methode zum Berechnen der Breite der Kamera beim Vergrößern ist contentWidth/2 * magnifyStepList[zoom], da die Kamera in ihrem anfänglichen nicht gezoomten Zustand die Größe contentWidth (dieselbe Größe wie die Leinwand) hat.

Im Bild unten sind die Kamera und die Leinwand dargestellt, die gleichzeitig gezoomt wurden. Die roten Linien zeigen die Ränder, die die Kamera nicht überschreiten kann und innerhalb bleiben muss.

Camera boundsCamera boundsCamera bounds

Schritt 15: Damit der Zoom funktioniert

Das Zoomen erfolgt durch Hinzufügen eines Maßstabs zur Kamera. Wir verwenden die Tweener-Klasse und den Übergang "easyOutQuint", um dies reibungslos zu ermöglichen. bZooming ist eine Variable, mit der festgestellt wird, ob die Kamera bereits zoomt oder nicht. Sie können die Seite nicht erneut zoomen, während sie noch vergrößert oder verkleinert wird. Bei jedem Update der Kamera wird die Funktion Update aufgerufen, die die Skalierung des Inhalts durchführt.


Schritt 16: Ein genauerer Blick auf Bilder

Denken Sie daran, dass wir allen Bildern auf der Seite MouseEvent-Listener hinzugefügt haben. Wir möchten ein Bild vergrößern, wenn Sie darauf klicken, und sicherstellen, dass es gut in den Betrachterbereich passt. Bilder, die kleiner als der tatsächliche Betrachterbereich sind, dürfen nicht über ihre Auflösung hinaus skaliert werden.

Das Grundkonzept hierbei ist, dass zuerst das Seitenverhältnis eines Bildes bestimmt werden muss. Wenn die Breite eines Bildes höher als die Höhe ist, gilt imgRatio < 1 und umgekehrt, wenn die Höhe größer als die Breite ist. Wir werden immer auf den größten Teil eines Bildes skalieren, was bedeutet, dass wir das Bild wie ein Quadrat von 400 x 400 Pixel behandeln, wenn das Bild beispielsweise 200 x 400 Pixel groß ist. Ein weiterer Zusatz ist, dass wir das Bild zuerst mit 1,05 skalieren, was bedeutet, dass das Bild 5% größer wird. Auf diese Weise berührt das Bild beim Vergrößern nicht die Seiten. Um den Maßstab eines Bildes im Vergleich zur Inhaltsgröße zu berechnen, teilen wir es durch die Höhe oder Breite des Inhalts.

Rufen Sie die Zoom-Funktion der Kamera auf und bewegen Sie sich in die Mitte des Bildes, auf das wir uns konzentrieren, und wenden Sie die neue Skala an, die wir berechnet haben.

Hier ist der in Aktion gezeigte Bildzoomvorgang. Beachten Sie, wie die Kamera innerhalb der Grenzen der Seite gehalten wird und wie das gesamte Bild einschließlich der Beschreibung perfekt in den Bildschirm passt.

Image zooming in actionImage zooming in actionImage zooming in action

Schritt 17: Scrollen der Seite

Wenn Sie es nicht bemerkt haben, können Sie beim Vergrößern einer Seite den Mauszeiger an die Ränder des Bildschirms bewegen, um einen Bildlauf durchzuführen und mehr von der Seite anzuzeigen. Der unten gezeigte Code sieht für Sie möglicherweise etwas bizarr aus. Es ist etwas, das ich vor einiger Zeit für eine Spiel-Engine im RTS-Stil geschrieben habe und das ich seitdem für alles wiederverwendete, was gescrollt werden muss. Grundprinzipien hierbei ist, dass Sie überprüfen, wo sich die Mausposition befindet, und dass sie sich ohne einen bestimmten Bereich um die Größen (mouse_scroll_areax_reduced und mouse_scroll_areay_reduced) mit einer Geschwindigkeit zu einer Seite bewegt, die proportional zu Ihrer Entfernung innerhalb dieses Bereichs ist. Wenn sich der Mauszeiger nicht innerhalb des Bereichs befindet, wird das Scrollen gezogen, um es eventuell zu verlangsamen.

Unten ist der Bereich dargestellt, in dem die Mausinteraktion zum Scrollen stattfindet. Denken Sie daran, dass dies nur beim Vergrößern passieren kann.

The scrolling borders visualised.The scrolling borders visualised.The scrolling borders visualised.

Abschluss

Ich glaube, dies fasst alle Lernziele zusammen, die ich für dieses Tutorial festgelegt habe. Leider konnte aufgrund des Umfangs des Tutorials nicht alles, was in der Anwendung gezeigt wird, besprochen werden, aber ich hoffe, Sie haben es geschafft, die Grundlagen zu XML-Daten, Seitenfüllung und Kameramanipulation zu erlernen. Danke fürs Lesen!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.