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.

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:

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.

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

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 .

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 - 273 x herunter geladen)

Den Download gibt es wie immer am Ende.

Das Projekt demonstriert einige wichtige Techniken:

• Preloader
• startDrag und stopDrag
• Masken
• Benutzung der Bibliothek (ist nicht in SWiSH miniMax2 enthalten)

Voraussetzungen

Swishmax 2 oder Swishminimax 2

Wie im Bild zu sehen, ist der Aufbau und die Datei nicht wirklich schwierig.

Das  sharedImage Objekt verlinkt auf ein Bibliotheksobjekt, dass die Detailinformationen enthält. Weil das Bild etwas größer ist, wurde der Film in 2 Szenen geteilt. In die erste Szene wurde ein Preloader eingefügt. Beide Szenen müssen daher die Option “Am Ende anhalten” in den Parametern gesetzt haben.

Scene_1

Der Preloader ist aus den enthaltenen Komponenten| Fortschrittsanzeigen|Preloader silber. Der Parameter  When Loaded muss auf  “Play Next Scene” gesetzt werden. Alle anderen Einstellungen können so bleiben, wie sie sind.

Scene_2

Hintergrund sharedImage

Das Hintergrund (Background) sharedImage Objekt (am unteren Ende der Übersicht (Outline)) ist eine Instanz des MovieClips sharedImage, welcher in der Bibliothek gespeichert ist.

Wird das Hintergrundbild im Transformieren Fenster geändert,so sollte es auf die Größe des Hintergrundes angepasst werden. In diesem Fall auf  400×300. Der Referenz- und Transformationspunkt muss auf links oben und x,y =0,0 gesetzt werden.

Das Actionscript erwartet das Objekt mit dem Namen “sharedImage”.

Lupenobjekt (magnify object)

Der MovieClip magnify enthält alle notwendigen Scripte für den Effekt. Referenz- und Transformationspunkt sind zentriert und die x,y-Werte auf 0 gesetzt. Das Script geht von diesen Werten aus. Änderungen sollten an dieser Stelle nicht erfolgen.

Folgende Objekte befinden sich im Film:

• lens ist ein 200 Pixel großer kreis mit einem weißen radialen Farbverlauf, der von weiß 0% Alpha bis zu weiß 50% Alpha verläuft. Das erzeugt den Glasseffekt.
• sharedImage ist eine Instanz des Bibliotheksobjektes sharedImage. Die Instanz muss den Namen sharedImage haben. Das Bild wird proportional bis auf 150 % vergrößert. Das Objekt wird im Layout ausgeblendet, da es größer als der Film ist. Referenz- und Transformationspunkt sind auf oben links und x,y Position auf 0, 0 gesetzt.
• bgnd ist eine weitere Kreisform. 200 Pixels, weiß mit solider Füllung.
• moviclip_mask ist die Maske, die den sichtbaren Bereich definiert. Das ist ein Kreis mit 200 Pixeln in einer beliebigen Farbe. Hinweis: Es muss beim MovieClip die Option “Unterstes Objekt als Maske verw.“  aktiviert sein.

Actionscript

Hier kommt das Script:

function SetImagePosition() {
    // Wenn die Lupe bewegt wird, muus das große Bild in die
    // entgegengesetzte Richtung bewegt werden
    sharedImage._x = -_x * magscalex;
    sharedImage._y = -_y * magscaley;
}
onSelfEvent (press) {
    this.startDrag(false);
    dragging = true;
}
onSelfEvent (release) {
    this.stopDrag();
    dragging = false;
}
onSelfEvent (load) {
    dragging = false;
    magscalex = sharedImage._xscale / _parent.sharedImage._xscale;
    magscaley = sharedImage._yscale / _parent.sharedImage._yscale;
 
    // aus der Ecke bewegen
    _x = 270;
    _y = 27;
    SetImagePosition();
}
onSelfEvent (enterFrame) {
    if (dragging) {
        //Bild in der Lupe neu positionieren
        SetImagePosition();
    }
}

Actionscript Beschreibung

Die Funktion SetImagePositon() positioniert das Bild unter der Lupe in die richtige Position.

magscalex, magscaley sind die kalkulierten Vergrößerungen der Lupe. Für jeden Pixel, die die Lupe nach links bewegt wird, muss magscalex Pixels nach rechts. Die Berechnung für hoch und runter ist ähnlich (magscaley).

Im onSelfEvent (load) werden die Werte initialisiert. Der drag state wird auf false gesetzt, die Vergrößerung zwischen magnify.sharedImage und _root.sharedImage (Refernz im Script auf sharedImage und _parent.sharedImage ) wird errechnet, die Lupe wird auf die Werte x,y (270, 27) gesetzt und dann wird die Funktion SetImagePositon() aufgerufen.

Die Funktion onSelfEvent (press) und onSelfEvent (release) reagieren auf die Maustaste  und  setzen den  drag state vom MovieClip magnify auf den entsprechenden Wert.

Der onSelfEvent (enterFrame) setzt das vergrößerte Bild auf die richtige Position mittels SetImagePosition().

Änderungen

Um das Bild auszutauschen muss der MovieClip sharedImage in der Bibliothek verändert werden. Doppelklicken Sie in der Bibliothek auf sharedImage und tauschen Sie anschließend das Bild aus.Nach dem Austausch setzen Sie den Referenzpunkt des Bildes auf links oben und x, y auf 0,0 . Die anderen Objekte in dem MovieClip können Sie löschen.

Hinweise

Wenn es nicht funktioniert, dann folgendes überprüfen:

• Beide Szenen halten am Ende an
• Die Instanz  von sharedImage heißt auch sharedImage und Referenz- und Transformationspunkt sind auf links oben und x, y auf 0,0
• Magnify Movieclip  Referenz- und Transformationspunkt sind auf links oben und x, y auf 0,0
• Magnify MovieClip wird das unterste Objekt als Maske verwendet.

Download

Download: Lupe mit Swishmax 2 - Magnifying Glass (377.67 KB - 299 x herunter geladen)

Diese Komponente ermöglicht die einfache Spieglung von verschiedenen Objekten mit Swishmax 2 oder Swish Minimax.

Beispiel für den Spiegeleffekt

Spiegeleffekt für Swishmax 2 /Swishminimax

Einfach die Komponente in die Bühne ziehen und die Objekte, die gespiegelt werden sollen,  innerhalb des MovieClip Mirror platzieren.

Nach dem Platzieren den Effekt Mirror (Spiegel) oder Reflect auswählen. Um die Aktion zu wiederholen, den Effekt erneut auswählen. Das kann solange wiederholt werden, bis die Ansicht wieder normal ist.

Voraussetzungen

Parameters

Eigenschaften

Keine verfügbaren Eigenschaften

Methoden

Keine verfügbaren Methoden.

History

Diese kostenlose Scroller-Komponente (Multiscroller)  kann beliebigen Inhalt scrollen.  Die Komponente kann einfach angepasst und konfiguriert werden. Es kann statischer, dynamischer und Eingabetext, MovieClips und externe Inhalte verarbeitet und damit gescrollt werden.

Die Komponente wird in den nächsten Releases von Swish Max 2 und SwishminiMax enthalten sein. Den Download der Komponente finden Sie am Ende des Beitrages.

Die Installation

Schließen Sie Swishmax2/Swishminimax und entpacken Sie das Ziparchiv. Die beiden Dateien aus dem Ordner Component kopieren Sie einfach in den Komponentenordner Ihrer Swishmax/miniMax – Installation. Normalerweise finden Sie diese in

C:ProgrammeSWiSH Max2components
oder,
C:Program FilesSWiSH miniMax2components

Die Benutzung

Im folgenden Abschnitt geht es um die Einbindung von verschiedenen Inhalten. Es gibt einige wichtige Dinge, die beachtet werden müssen!

Nur Text scrollen

Die Komponente kommt mit einem Textfeld.  Dieses kann einfach geändert werden, was Text, Font, Farbe etc. betrifft.

1. Ziehen Sie die Komponente in den Film
2. Markieren Sie den ContentScroller MovieClip in der Übersicht und öffnen Sie das Parameterfenster.
3. Stellen Sie sicher, dass  Target | Scroll Target auf  ‘textArea’ gesetzt ist. textArea ist das Textfeld, dass den zu scrollenden Text enthält.
4. Ändern Sie die General Settings | Area Width and Area Height – Width=Breite und Height=Höhe auf die benötigten Werten.
5. In der Übersicht öffnen Sie den ContentScroller MovieClip und wählen Sie die “textArea” aus.
6. Ändern Sie die Eigenschaften für den Text im Eigenschaftenfenster. Wenn Sie dynamischen oder Eingabetext nutzen, stellen Sie sicher, dass die “Autogröße Höhe” Eigenschaft deaktiviert ist.» Höhe automatisch anpassen (steht nicht für statischen Text zur Verfügung)

Hinweis: Wenn Sie den texttyp zu statisch und zurück zu dynamisch oder Eingabe wechseln, wird die Autohöhe automatisch aktiviert. Sie müssen diese von Hand deaktivieren.

Statischen Inhalt scrollen

Am besten ist es, wenn Sie Ihren zu scrollenden Inhalt zuerst auf der Hauptzeitleiste sortieren und anordnen. Bitte denken Sie daran, dass Sie NUR ein Objekt scrollen können. Sie müssen also Ihre Objekte, die Sie scrollen möchten in einem MovieClip, einer Grupper oder einem Knopf gruppieren.

Outline = Übersicht, Content=Inhalt, Component=Komponente

Wenn der statische Inhalt gruppiert ist, kopieren Sie diese Gruppe und fügen Sie diese in den Scroller ein.

Sollten Sie andere Inhalte als MovieClips scrollen wollen, so stellen Sie sicher, dass das Objekt einen Namen hat und als Ziel markiert ist.

Ändern Sie zum Schluß den Scroll Target Parameter für die Komponente zum Namen des Objektes, dass Ihren Inhalt hat.

Der Scroller wird natürlich nicht angezeigt, wenn der Inhalt in den durch Höhe und Breite definierten Bereich passt.

Externen Inhalt scrollen

Eine detaillierte Beschreibung um externen Inhalt zu scrollen, würde diesen Beitrag sprengen.Wenn Sie dynamischen Text  laden, dann laden Sie diesen in ‘textArea’ und setzen beim Scrolltarget den Parameter auf textArea.

Statischen Inhalt können Sie dynamisch in einen MovieClip laden und diesen als Scroll Target festlegen.

Beim Laden von externen Inhalten setzen Sie den Parameter Start on Load? auf false, wenn der externe Inhalt Probleme beim Laden verursacht. Nutzen Sie eigene Methoden, um festzustellen, wann der Inhalt geladen ist. Nach dem der Inhalt geladen ist, rufen Sie SetScroll() auf, um den Scroller zu initialisieren.

Beispiel:

ContentScroller.SetScroll();

Weiter unten können Sie einen Kommentar hinterlassen oder Fragen stellen. Sie können auch unser Forum www.swishzone.de für Fragen nutzen.

Wichtige Hinweise

1. Ändern Sie nicht den Namen oder löschen Sie die folgenden Objekte: vertScroll, textArea, or scrollArea
2. Nutzen Sie immer Area Width and Area Height um die Größe zu ändern
3. Das textArea object muss im Film bleiben und darf nicht gelöscht werden. Auch wenn Sie andere Objekte scrollen wie MovieClips, Gruppen, Formen oder Bilder, wird das textobjekt textArea für die korrekte Funktion benötigt!
4. Wenn Sie nur Text scrollen möchten, dann schreiben Sie den Text in das Textfeld textArea und ändern Sie die Eigenschaften über das Eigenschaftenpanel.
5. Die “scrollArea” ist eine Maske und dient zur Visualisierung. Sie wird später nicht mehr angezeigt. Stellen Sie sich das als Fenster vor, alles was hinter diesem Fenster ist, können Sie sehen. Alle Objekte ausserhalb des Fensters verschwinden. Das “scrollArea” Object legt die Höhe und Position der Scrollbar fest.

Beim Scroll Target Objekt wird automatisch Referenz- und Transformationspunkt auf oben links gesetzt. Die X- und Y-Koordinaten werden auf 0 gesetzt, um sich dem scrollArea Objekt anzupassen.

Parameter

Methoden

Download: Freeware Scrollbar Swishmax 2 - MovieClipScroller (23.06 KB - 597 x herunter geladen)

Update: SetSize neu hinzugefügt und Download erneuert

Übersetzung und Änderungen www.swishkaufen.de