Große Fotos scrollen mit Swishmax 2

25. June 2009 |

Autor: Tom

Aus immer mehr modernen Bildquellen gibt es immer größere Bilder. Diese sind oftmals zu groß für die Webseiten, sollen aber trotzdem angeschaut werden. Beispielhaft seien hier Panoramafotos genannt, die man heute mit entsprechender Software schon aus Handybildern zusammen setzen kann. Mit einer Erweiterung der Scrollbar aus Swishmax 2 kann man diese Bilder sehr gut scrollen.

In diesem Artikel geht es um das Scrollen von großen Bildern. Ausserdem fügen wir einen Preloader hinzu. Den Download gibt es wie immer am Ende.

Voraussetzungen

Swishmax 2 oder Swishminimax 2

Schritt für Schritt Anleitung Swishmax 2 /Swishminimax 2

Schritt 1.Legen Sie die Größe des Films fest. Drücken Sie Strg+j und geben Sie die Filmgröße 400×300 ein.

Schritt 2. Richten Sie das Bild aus. Das Bild muss 300 Pixel hoch sein. Benutzen Sie ein Bildbearbeitungsprogramm um das Bild auf die 300 Pixel Höhe zu bringen.

Schritt 3. Importieren Sie das Bild. Benutzen Sie Menü-> Einfügen -> Bild importieren. Klicken Sie O=X Knopf im Transformieren Fenster und setzen Sie den Transformations und Referenzpunkt auf Links oben, Setzen Sie _xuand _y position auf 0, 0.

Merken Sie sich die Breite des Bildes. Im Beispiel sind es 1377 Pixel. Wir benötigen die Zahl später.

Schritt 4. Benennen Sie das Bild zu “image” um und markieren Sie die Ziel – Box bei den Eigenschaften. swishmax2_image_edit

Schritte 5. Wählen Sie aus dem Komponentenfenster Kontrollen | Scrollers | Scroll_silver und ziehen Sie die Komponente auf die Bühne. Das Komponentenfenster können Sie über Menü -> Fenster -> Komponenten (Strg+F7) einblenden.

Schritt 6. Passen Sie die Parameter für die Scrollbar wie im Bild an:

swishmax2_image_component

Scroll bar Length: 400
Direction: Horizontal
Window Size: 400
Document Size: 1377
Reverse Output?: true
Event Function: blank.
Event Variable: _parent.image._x

Die Fenstergröße von 400 Pixeln, ist die Größe, die wir sehen wollen. Die Dokumentengröße von 1377 Pixeln ist die Größe unseres Bildes.

Wenn die Parameter geändert sind, verschieben Sie die Scrollbar an die linke untere Ecke Ihres Filmes.

Sie können den Film testen – der Scroller sollte funktionieren. Sollte es Probleme geben, lesen Sie bitte weiter unten den Abschnitt Problemlösungen.

Damit ist das Scrollen des Bildes schon erledigt. Jetzt können einige Extras hinzugefügt werden, die den Film aufwerten.

Extra Nr. 1 Maske hinzufügen

Um nicht immer von der Größe des Filmes abhängig zu sein, werden wir den Panorama Scroller in einen MovieClip mit Maske verpacken. Das erhöht die Flexibilität.

1. Fügen Sie ein Rechteck für die Maske hinzu. Nutzen Sie dazu das Zeichenwerkzeug. Im Fenter Umformen setzen Sie O=X und den Transformations- und Referenzpunkt auf links oben. Setzen Sie _x und _y auf 0, 0. Die Breite wird auf 400 und die Höhe auf 300 Pixel gesetzt. Benennen Sie das Rechteck zu “mask” um. swishmax2_image_umformen

2. Bewegen Sie die Maske ganz nach unten in der Übersicht. swishmax2_image_overview

3. Wählen Sie in der Übersicht die Objekte Scroll_silver, image und mask mit der gedrückten Shift-Taste aus. Jetzt sollten alle 3 Objekte markiert sein. Wählen Sie aus dem Menü -> Verändern -> Gruppieren-> Als MovieClip konvertieren. Klicken Sie den neuen MovieClip an und benennen Sie ihn zu “scrollpano” um. Setzen Sie bei den Parametern die Option “unterstes Objekt als Maskte benutzen”.

Sie können den Panoramascroller aus diesem Film kopieren und in einen beliebigen anderen Film (der auch größer sein kann) einfügen.

Extra Nr. 2 Preloader hinzufügen

Da die Fotos sehr groß werden können, bietet sich an dieser Stelle das Einfügen eines Preloaders an. Dieser zeigt dem Benutzer das Laden des Inhaltes, was bei einem sehr großen Bild durchaus ein paar Sekunden dauern kann.

1. Wählen Sie Scene_1 in der Select Scene_1 in the Outline panel. In the Properties panel, set the “Stop playing at end” checkbox.

2. Fügen Sie in der Übersicht eine neue Szene ein. Benennen Sie diese “Preloader” und verschieben Sie diese an die 1. Stelle.

3. Fügen Sie aus den Komponenten Fortschrittsanzeige -> Preloader silber in die Szene ein. Ändern Sie die Parameter für den Preloader auf folgende Werte:
Event Function: blank
When Loaded: Play Next Scene

Bei der Vorschau des Filmes sieht man den Preloader nur ganz kurz. Sie können eine langsamere Internetverbindung simulieren, wenn Sie im Debugfenster die Geschwindigkeit z.b. auf ISDN stellen. Jetzt können Sie den Preloader in seiner ganzen Pracht bewundern .

swishmax2_image_debug

Problemlösungen

Wenn das Bild nicht scrollt:

Prüfen Sie, ob das Bild “image” heißt und die Ziel-Checkbox markiert ist
Stellen Sie sich, dass die Event Variable der scrollbar auf _parent.image._x eingestellt ist

Funktioniert der Preloader nicht:

Stellen Sie sicher, dass für beide Szenen “Am Ende anhalten” markiert ist
Stellen Sie sicher, dass der Preloaderparameter “When Loaded” auf Play Next Scene gesetzt ist

Download

Download: Download Panorama Scroller Swishmax 2 Freeware (145.64 kB - 401 x herunter geladen)

SwishKomponenten.de