Swishmax Eselsohr – Peel - Closed Fold, Maximum Fold, Fold Radius, Fold Speed, Event Function, Opened

Swishmax Eselsohr – Peel

6. May 2009 |

Autor: Tom

Die Eselsohren oder Flashecken für Flashfilme werden mit am häufigsten nachgefragt. Das im folgenden vorgestellte “peelaway” funktioniert in Swishfilmen und ist als Komponente realisiert. Die Benutzung in Swishmax 2 und Swishminimax ist somit recht einfach. Das Eselsohr funktioniert nicht als Layer über HTMl-Seiten. Dafür empfehlen wir das sehr robuste Script vom XML-Peel, dass ausserdem sehr einfach anzupassen ist.

Die Ecke kann für vielfältige Zwecke eingesetzt werden. Ob nun Werbung oder Kontrollen für Musikplayer oder weitere Informationen, der Vorteil ist, dass Elemente ausgelagert werden und somit der Hauptbildschirm von unnöitgem Balast verschont wird.

Unglücklicherweise ist die Entwicklung solcher Ecken sehr schwierig. Daher wurde die Komponente “peelaway” entwickelt. Die Komponente wird in kommenden Versionen von Swishmax 2 und Swishminimax enthalten sein.

Voraussetzungen

Swishmax 2 oder Swishminimax 2

Hier ist ein Beispiel für die Funktionsweise des Peels.

Die Komponente kann wie gewohnt über Parameter konfiguriert werden. Die Parameter für das Beispiel sind rechts in dem Screenshot zu sehen. Die Farbparameter sind selbsterklärend. Die anderen Parameter werden weiter unten erklärt.

Closed Fold – Geschlossener Ordner – Das ist der Wert für das Eselsohr, dass bei geschlossenem Peel umgeklappt ist. Die Größe wird in Pixel angegeben. Hier kann auch 0 angegeben werden, aber nicht, wenn Mouse Over Area auf fold gesetzt wird, da sonst keine Reaktion auf die Maus erfolgt. peelawayparameters

Maximum Fold – Die maximale Größe beim Ausklappen in %, wobei die kürzeste Seite berücksichtigt wird. Die Größe beinhaltet den Fold-Radius. Setzen Sie den Wert am Anfang auf 100 und probieren Sie andere Werte aus.

Fold Radius – Der Radius der Ecke. 30 sah im Beispiel am besten aus. Eine kleinere Nummer gibt eine kleinere Ecke.

Fold Speed – Die Geschwindigkeit, je größer der Wert, desto schneller klappt die Ecke auf.

Event Function – Die Funktion, die aufgerufen wird, wenn ein Ereignis der Komponente aufgerufen wird. Folgende Ereignisse stehen zur Verfügung:

Opened – Das Peel ist komplett geöffnet
Closed – Das Peel ist komplett geschlossen
rollOut – Maus wird aus der mouse over area herausbewegt.
rollOver – Maus wird in die mouse over area bewegt

Als Parameter wird an die Funktion als erster Parameter der Name und als 2. Parameter der Status der Komponente (einer der oben angeführten Ereignisse als Textstring) übermittelt. Die Demonstration .swi zeigt ein Beispiel wie die Funktion arbeitet. Im Beispiel wird eine Sound abgespielt und die Hintergrundanimation wird gestartet.

Mouse Over Area – Fläche, die auf die Maus reagiert. Diese kann die ganze Seite sein (Page auswählen) oder die Mausecke selbst (Fold auswählen). Wenn Fold eingestellt wird, kann die sichtbare Fläche auch für andere Elemente genutzt werden. Der Page mode muss bei der genutzt werden, wenn Closed Fold= 0, sonst kann das Peel nicht gestarteet werden.

Die Komponente prüft die Sinnhaftigkeit der Parameter nicht. Daher überprüfen Sie immer:

Die kürzeste Seite des Filmes / Bildercontainer ist größer als der Closed Fold Parameter.
Der Maximum Fold Parameter ist größer als Closed Folder

Beispiel und Erklärung

Das Beispiel zeigt beim Öffnen eine Animation im geöffneten Bereich und spielt einen GONG ab.

Die erscheinende Schaltfläche kann einen Sound abspielen.

Rechts sehen Sie die Übersicht des Filmes.

Ist die Peelaway – Komponente geöffnet, wird das der imageholder MovieClip angezeigt. peelawaydemooutline Den Inhalt des imageholder MovieClips können Sie beliebig gestalten.

Löschen Sie einfach den MovieClip “demomovie” und fügen Sie beliebigen Inhalt ein.

Nach dem Einfügen des Inhaltes muß der Referenz- und Transformationspunkt auf rechts oben gesetzt werden und x=0 und y=0.

peelawayreferencepoint

Das ist wichtig für die korrekte Anzeige im peelaway. Die peelaway component richtet die Inhalte selbstständig korrekt im Film aus.

Die anderen Objekte sind:

Button_star – Eine Button Komponente als “toggle” button. Achten Sie darauf, dass die Event Variable Parameter auf _parent.G_NoSound gesetzt ist. Damit wird der aktuelle Status in den Hauptfilm geschickt. Der Soundeffekt wird nur beim Status G_NoSound =false abgespielt.

flashbgnd - Ein MovieClip mit dem Hintergrund.

sounds - Ein MovieClip mit dem Sound.

Wichtig: – Achten Sie darauf, dass das peelobject das oberste Objekt ist. Ansonsten klappt das Verstecken der anderen Objekte nicht.

Das Verhalten wird im Script definiert:

Demo Movie Script

function Events(n,v) {
    if ("peelaway" == n) {
        // Ereignis vom Peelaway ausgelöst
        if ("Opened" == v) {
            // komplett offen
            flashbgnd.play();    // start die Hiintergrundanimation
            flashbgnd._visible = true;    // Hintergrund sichtbar machen
            if (!G_NoSound) {
                // prüfen ob Sound abgespielt werden soll.
                // abhängig vom Status des Buttons on = no sound.
                sounds.play();
            }
        } else {
            // andere mögliche Variablen hier
            // rollOut, geschlossen und rollOver
            // für alle diese Ereignisse,  anhalten und Hintergrundanimation stoppen
            flashbgnd._visible = false;
            flashbgnd.stop();
        }
    }
}
onSelfEvent (load) {
    // G_NoSound ist gesetzt / zurücksetzen mit Button_star component via
    // der definierten event variable: _parent.G_NoSound.
    //Der Button hat den Anfangsstatus off,
    // G_NoSound to off. G_NoSound == false spielt den Sound ab
    G_NoSound = false;    //Sound beim ersten mal abspielen
 
    // anhalten und Hintergrund verstecken
    flashbgnd._visible = false;
    flashbgnd.stop();
 
    // Sound MovieClip anhalten
    sounds.stop();
}

Script Beschreibung

Das onSelfEvent (load) Ereignis wird für die Initialisierung benutzt. Die Variable G_NoSound wird auf false gesetzt, damit der Sound abgespielt wird. Diese Variable kann durch den Button verändert werden. “Button_star” zeigt den aktuellen Status an.

Der blinkende Hintergrund wird unsichtbar gemacht und der Sound MovieClip angehalten.

Die Ereignisbehandlungsroutine verarbeitet die Ereignisse der Komponente.

Kommt das Ereignis von der peelaway component (n, der name = “peelaway”) wird der Status überprüft.

Beim Status “Opened” (offen) wird der Hintergrund sichtbar gemacht und abgespielt (flashbgnd._visible = true, flashbgnd.play()) und abhängig von G_NoSound dem Button der Sound abgespielt.

Ist der Status nicht offen, wird der Hintergrund gestoppt und ausgeblendet (flashbgnd.stop(), flashbgnd._visible = false).

Möchten Sie das Script hinter peelaway sehen, so steht es Ihnen offen. Klicken Sie mit der rechten Maustaste in der Übersicht auf das peelaway. Klicken Sie auf Objektattribute. Entfernen Sie die Häkchen vor: Script verbergen, Kindobjekte verbergen , Schreibgeschützt.Das Script können Sie jetzt im Scriptpanel sehen.

Der Download enthält die Komponente (peelaway.swi and peelaway.swf) und das Demo in deutsch und englisch (peelawaydemo_de.swi).

Installation der Komponente

Schließen Sie Swishmax 2/Swishminimax.

Entpacken Sie die Dateien auf Ihrem Computer. Kopieren Sie peelaway.swi and peelaway.swf in den Komponentenfolder von SWiSH Max2 oder SWiSH miniMax2.

Typischerweise befinden sich diese in

C:\Program Files\SWiSH Max2\components\Effects\2D
oder
C:\Program Files\SWiSH miniMax2\components\Effects\2D

Starten Sie Swish erneut. Sie finden die Komponente jetztin der Komponentenübersicht im entsprechenden Ordner. Effekte – 2D

Download Komponente und Demo

Download: Freeware Peelaway Komponente Swishmax 2 / Swishminimax (265.7 kB - 690 x herunter geladen)

SwishKomponenten.de