Vergrößerungsglas / Lupe mit Swishmax 2

26. May 2009 |

Autor: Tom

Im folgenden stellen wir eine Lupe / Vergrößerungsglas für Swishmax 2 / Swishminimax vor. Um die Lupe zu benutzen einfach die Lupe über die Elemente ziehen.

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.

am_ende_anhalten_swishmax2 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)

SwishKomponenten.de