Kategorien
Webdesign

Flash: Der dynamische Bilderrahmen – Teil 3

Setzen Sie diesen neutralen Player ein, der sogar mit Bildern unterschiedlicher Größe umgehen kann. Nun sorgen wir für die dynamische Veränderung des Rahmens und blenden das Bild sanft ein und aus. Der dynamische Bilderrahmen – Teil 1 Der dynamische Bilderrahmen…

Setzen Sie diesen neutralen Player ein, der sogar mit Bildern unterschiedlicher Größe umgehen kann. Nun sorgen wir für die dynamische Veränderung des Rahmens und blenden das Bild sanft ein und aus.

Sperren Sie die Aktions-Ebene. Sie ist fertig. Erzeugen Sie eine neue. Hier zeichnen Sie ein Rechteck samt Rand auf die Bühne und wandeln es in ein Movieclip um. Instanz- und Symbolname ist „rahmen“. Klicken Sie doppelt auf das Rechteck, um in den Bearbeitungsmodus des MovieClips zu gelangen. Nun Klicken Sie nur auf den Rand doppelt, um ihn auszuwählen. Schneiden Sie ihn aus (STRG+X). Klicken Sie auf die Fläche und wählen Sie „Modifizieren/Form/Füllung erweitern“. Nehmen Sie einen Wert von 4 Pixel.

Screenshot
Der optische Rand ist eigentlich eine beschnittene Füllung

Drücken Sie jetzt die Tastenkombination „STRG+SHIFT+V“. So fügen Sie den Rand exakt an der Position ein, wo Sie ihn hergeholt haben. Klicken Sie nun neben die Bühne, um die Auswahl aufzuheben. Klicken Sie in die Mitte des Rechtecks und entfernen Sie die Füllung. Doppelklicken Sie auf den Rand und entfernen Sie diesen Ebenso. Es bleibt eine feine Linie.

Der Grund für diesen Kunstgriff liegt in der dynamischen Skalierung. Wenn Sie einen Rand verwenden, so wird dieser bei sehr breiten oder sehr hohen Bildern deutlich dicker. Die „entkernte“ Füllung skaliert zwar auch, aber nur sehr wenig.

Kehren Sie zurück zur Szene 1. Jetzt erzeugen Sie ein leeres MovieClip. Der Instanz- und Symbolname lautet „steuerung“. Es besteht nur aus vier Programmierungen:

 In Frame 1:       stop();
In Frame2:      
deltax= _root.breite-_root.rahmen._width;
if (deltax<0){
        kleinerx=true;
        deltax=deltax*(-1);
}else{
        kleinerx=false;
}
      deltay=_root.hoehe-_root.rahmen._height;
if (deltay<0){
        kleinery=true;
        deltay=deltay*(-1);
} else {
        kleinery=false;
}       

Screenshot

Das Steuerungsclip hat keinen optischen Inhalt und dreht sich ständig im Kreis

Die Variable „deltax“ bestimmt die Differenz zwischen der aktuellen Breite des Rahmens und der des neu geladenen Bildes. Gleiches gilt für „deltay“ hinsichtlich der Höhe. Beide Variablen werden „normalisiert“, also mit -1 multipliziert, wenn Sie einen negativen Wert annehmen. Gleichzeitig zeigen die Variablen „kleinerx“ und „kleinery“, wohin die Skalierung des jeweiligen Parameters geht.

In Frame 3 erfolgt die Auswertung:

      if (kleinerx==false){
        _root.rahmen._width = _root.rahmen._width+(deltax/5)+5;
} else if(kleinerx==true){
                _root.rahmen._width = _root.rahmen._width-(deltax/5)+5;
}
if (kleinery==false){
        _root.rahmen._height = _root.rahmen._height+(deltay/5)+5;
} else if(kleinery==true){
                _root.rahmen._height = _root.rahmen._height-(deltay/5)+5;
}

Die If-Abfrage beeinflusst nur, ob die Differenz addiert oder abgezogen werden soll. Der Zusatz „+5“ am Ende macht den Rahmen etwas größer, als das Bild selbst. Der Divisor unter dem „delta“ bestimmt die Geschwindigkeit der Anpassung. Je geringer dessen Wert, umso schneller geht’s. Achtung: Wenn Sie einen sehr hohen Wert wählen, um eine ganz langsame Anpassung zu erreichen, dann müssen Sie in Szene 1 mehr Frames als Puffer setzen, bevor Sie das letzte Skript (derzeit in Frame 45) ausführen. Sonst kommt die Blende eventuell zu schnell.

In Frame 4 des Steuerungsclip steht nur noch: gotoAndPlay(2). Beachten Sie, dass hierdurch der Abstand zwischen aktueller Rahmengröße und gewünschter Rahmengröße erneut berechnet wird. Da dieser geringer geworden ist, entsteht eine asymptotische Annäherung an den gewünschten Endwert. Sprich: Die Anpassung startet schnell und wird immer langsamer und sanfter. Ein sehr schöner Effekt.

Kehren Sie zurück zu Szene 1, bringen Sie das Steuerungsclip auf die Bühne und geben Sie ihm den Instanznamen „steuerung“.

Die Blende
Bleibt noch das Ein- und Ausblenden. Die hier gezeigte Variante ist insofern einfach gehalten, als wir mit einer weissen Farbfläche arbeiten, die vor weissem Hintergrund natürlich perfekt funktioniert. Bei unregelmäßigen Hintergründen ist das gleiche Prinzip einzusetzen, nur dass das Hintergrundmotiv hier auf einer neuen Ebene erneut eingesetzt wird und dynamisch verschwindet.

Screenshot

Die weisse Fläche überdeckt die geladenen Bilder vollständig

Das schöne an dieser Lösung ist, dass die Blendclips universell einsetzbar und ersetzbar sind. Sie enthalten nichts anderes, als zwei Tweenings zum Ein- bzw. Ausblenden und je ein stop(); am Anfang und in der Mitte. Nach dieser Bauart können Sie also eine ganze Bibliothek von Blendenclips erzeugen, die auch mit raffinierteren Effekten arbeiten, etwa mit skurrilen Formtweenings oder einem Jalousie-Effekt.

Erzeugen Sie also ein weißes Rechteck und formatieren Sie es auf 570 x 360 Pixel, so dass es sowohl seitlich, als auch oben über den Filmrand hinausragt. Wandeln Sie dieses in ein Movieclip um. Instanz- und Symbolname lauten „blende“.

Doppelklicken Sie das Clip, wandeln Sie die Weissfläche in ein Grafiksymbol um und erstellen Sie in Frame 30 ein Schlüsselbild für die Endposition. Erzeugen Sie ein weiteres Schlüsselbild in Frame 15, setzen Sie den Alphawert der Weissfläche auf 0 (Eigenschaftsinspektor „Farbe/Alpha“). Setzen Sie zwei Tweenings unsd platzieren Sie je ein stop(); im ersten und fünfzehnten Frame. In Frame 30 ist das alte Bild ausgeblendet und der Hauptfilm soll das neue Bild laden:

      _root.gotoAndPlay(1);

Kehren Sie nun zurück zu Szene 1. Erzeugen Sie eine neue Ebene und erstellen Sie darin einen kleinen Button. Setzen Sie seine Alpha-Deckkraft auf 50 Prozent. Erstellen Sie nun in Frame 45 ein weiteres Schlüsselbild, setzen Sie die Deckkraft zurück auf 100 Prozent und geben Sie dem Button nur hier folgende Programmierung:

      on (release, keyPress "<Space>") {
        blende.play();
}

Er sorgt also dafür, dass zuerst das alte Bild ausgeblendet wird, dann das nächste Bild unsichtbar geladen, der Rahmen dynamisch angepasst und schließlich der erste Teil der Blendenanimation wieder ausgeführt wird. Fertig.

Im vierten Teil in der nächsten Woche ergänzen wir Sound und zwei weitere Blendeneffekte.

Von Frank Puscher

Autor der Fachbücher "Leitfaden Web-Usability", "Flash MX-Das Kochbuch" und "Die Tricks der Internet Künstler". Frank Puscher ist nicht nur ein angesehener Autor, der für zahlreiche Fachzeitschriften tätig ist, er ist auch als Schulungsleiter und Berater erfolgreich.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.