Webmaster & Internet
ich habe eine kleine Anleitung zum Erstellen von animierten Schaltflächen in Flash MX erstellt.
Dieses Tutorial zeigt, wie man mit wenigen Schritten animierte Schaltrlächen mit einem
Partikeleffekt erstellt.
Zunächst fertigen wir uns mit Photoshop oder einer anderen Bildbearbeitungssoftware
die Grundelemente des Buttons an.
Wir benötigen:
- einen Hintergrund (es empfiehlt sich ein dunklerer Hintergrund, damit die Partikel gut sichtbar sind.
- 3 verschiedene Variationen mit helleren Bereichen
- ein helleres Leuchten für den „Clickeffekt“. diese Fläche sollte transparent sein und kann ein wenig über die Ränder des Buttons hinausstrahlen
Wichtig: die Variationen dürfen keinen transparenten Schatten haben, da sie über das Hintergrundbild gelegt werden!
Da ich in diesem Beispiel einen transparenten Schlagschatten verwendet habe, sollten die Grafiken als PNG mit Alphatransparenz exportiert werden, um die transparenten Bereiche korrekt darzustellen. Wer keine Bildbearbeitung mit dieser Option verwendet, kann auf transparente Bereiche verzichten oder z.B. Schatten in Flash selbst erstellen.
Wir öffnen ein neues Flash-Dokument und importieren alle Grafiken. Die Bilder sollten in Symbole (MovieClips) gekapselt werden.
Außer den importierten Grafiken benötigen wir 3 weitere Objekte:
- ein Partikelobjekt (MC: star1)
- ein Objekt für den rollOver-Effekt (MC: blights)
- einen leeren MovieClip (MC: nothing) als Container
- ein Objekt für den gesamten Button (MC: button1)
Wir fertigen zunhächst ein zusätzliches Objekt für die Partikel an. Dazu erstellen wir einen MovieClip und zeichnen bei starker Vergrößerung einen „Stern“ oder „Glühwürmchen“. Die Farbbereiche sollten nach aussen hin in ihrer Transparenz reduziert werden. Hierzu können Linien mit der Funktion „Linien in Füllungen konvertieren“ umgewandelt werden.
Unsere Schaltfläche soll beim rollOver die Partikelanimation zeigen. Wir erzeugen für diesen Status einen eigenen MovieClip, der bei Bedarf eingeblendet wird. Dieser Clip besteht größtenteils aus einem Motion-Tweening, in dem die 3 Clips mit den Variationen gegenseitig überblendet werden. Dazu erstellen wir drei Ebenen:
1. Ebene: Variation 1 wird mit Alphatweening über 30 Frames ausgeblendet, bleibt 30 Frames unsichtbar und wird dann wieder über 30 Frames eingeblendet
2. Ebene: Variation 2 wird mit Alphatweening über 30 Frames eingeblendet und direkt danach wieder über 30 Frames ausgeblendet.
3. Ebene: Variation 3 bleibt 30 Frames unsichtbar, wird dann über 30 Frames eingeblendet und direkt danach über 30 Frames ausgeblendet.
(Bei drei Variationen und 24fps sind jeweils 30 Frames eine gute Wahl. Zusätzlich kann mit den Beschleunigungseinstellungen experimentiert werden)
Für die Partikel erstellen wir eine neue Ebene (stars) und fügen dort einen Container (einen leeren MovieClip) ein. Das Objekt wird „container“ benannt.
Da die Partikel den Bereich des Buttons verlassen könnten, benötigen wir für diese Ebene eine Ebenenmaske. Dazu erstellen wir einfach eine rechteckige Form von der Größe des Buttons auf einer neuen Ebene (starmask) und definieren sie als Ebenenmaske.
WICHTIG: Das Alphatweening soll wiederholt ablaufen, der Container für die Partikel aber nur einmal (beim Laden) initialisiert werden. Wir verschieben daher alle Frames des Tweenings um einen Frame nach rechts und setzen in das letzte Bild (am besten in einer weiteren leeren Ebene) einen Sprungbefehl:
PHP-Code:
gotoAndPlay(2)
Das Ergebnis sollte so oder so ähnlich aussehen:
Die Partikel werden nun mit ActionScript „erzeugt“ und animiert:
PHP-Code:
star = new Array();
stop();
for (i=0; i<10; i++) {
container.attachMovie("star1", "star"+i, i);
star[i]=eval("container.star"+i);
star[i]._x=Math.random()*80+2;
star[i]._y=Math.random()*24+3;
star[i].spd=Math.random()*1+0.4;
}
this.onEnterFrame=function() {
if (this._alpha>2) {
play();
for (i=0; i<10; i++) {
star[i]._y-=star[i].spd;
star[i]._x+=Math.sin((star[i]._y+star[i].spd)/6)/6;
star[i]._alpha-=star[i].spd;
if (star[i]._y<-5) resetstar(i);
}
} else {
stop();
}
}
function resetstar(nr) {
star[nr]._x=Math.random()*80+2;
star[nr]._y=Math.random()*10+20;
star[nr].spd=Math.random()*1+0.4;
star[nr]._alpha=Math.random()*50+50;
}
Die Partikel werden mit attachMovie in einer Schleife in das Objekt „container“ kopiert und in das Array „star“ eingelesen.
Jeder Partikel erhält zunächst eine zufällige Position, die sich an den Maßen des Buttons orientiert sowie eine Variable „spd“ für die Anfangsgeschwindigkeit.
WICHTIG: Der MC „star1“ muss zum Export für ActionScript freigegeben werden
[Bibliothek - Verknüpfungen - Export freigeben und ins erste Bild exportieren]
Die onEnterFrame-Methode wird periodisch mit der Bildfrequenz ausgeführt. Jeder Partikel wird langsam ausgeblendet und nach oben bewegt. Zusätzlich wird die horizontale Position mit einer Sinusfunktion verändert. Als Parameter für diese Funktion habe ich die vertikale Position und die jeweilige Geschwindigkeit verwendet; man kann mit diesen Werten durchaus experimentieren.
Hat ein Partikel den Bereich des Buttons verlassen, wird die Funktion resetstar(nr)
für diesen Partikel aufgerufen.
Um die Animation nicht durchgehend laufen zu lassen, wenn das Objekt nicht sichtbar ist, setzen wir ein stop(), sobald die Transparenz des Objektes unter den Wert 2 fällt.
Umgekehrt wird die Animation wieder gestartetm sobald die Transparenz über diesen Wert steigt.
Die Funktion resetstar(nr) setzt einen Partikel, der den oberen Bereich des Buttons
verlassen hat zurück auf einen zufalsgenerierten Anfangswert.
Nun erstellen wir ein Grundgerüst für den Button, das diese Animation aufnimmt.
Wir erstellen ein leeres Objekt (MC: button1) und setzen die Hintergrundgrafik in die erste Ebene.
Auf einer weiteren Ebene (lights) legen wir das soeben erstellte Objekt für den Partikeleffekt ab. Das Objekt sollte zunächst einen Alphawert von 0 haben, da die Animation ja erst mit einem rollOver angezeigt wird.
Um auch beim Klicken einen sichtbaren Effekt zu erzielen, setzen wir den MC mit dem transparenten „Leuchten“ in eine weitere Ebene (flash). Auch dieser MC erhält einen Alphawert von 0.
WICHTIG: Die Objekte sollten korrekt benannt werden, um sie mit AS ansteuern zu
können. In diesem Fall „lights“ und „flash“ (es macht nichts, Objekte und Ebenen identisch zu benennen).
Um dem Button eine stärkere Kontur zu geben, habe ich auf einer weiteren Ebene (frame) einen schwarzen Rahmen hinzugefügt.
Der Code für das Buttonobjekt ist nun relativ kurz und besteht zum Großteil aus den benötigten Ereignishandlern:
PHP-Code:
this.onEnterFrame=function() {
if (Math.abs(lights._alpha-destlight)>2) {
lights._alpha+=(destlight-lights._alpha)/5;
}
if (flash._alpha>0) {
flash._alpha-=(flash._alpha)/5;
}
}
PHP-Code:
destlight=0;
this.onRollOver=function() {
this.swapDepths(10);
destlight=100;
}
this.onRollOut=function() {
destlight=0;
}
this.onPress=function() {
flash._alpha=100;
destlight=50;
}
this.onRelease=function() {
destlight=100;
}
this.onReleaseOutside=function() {
destlight=0;
}
eingefügt. Zum Ein- und Ausblenden der Animation muss lediglich die Variable „destlight“ auf einen anderen Wert gesetzt werden.
Beim Drücken des Buttons (onPress) erhält das Objekt „flash“ einen Alphawert von 100, der in der onEnterFrame- Methode kontinuierlich reduziert wird. Das Objekt „blinkt“ also lediglich kurz auf. Zusätzlich wird beim Klicken die Animation vorübergehend auf einen Wert von 50 gesetzt.
Die Methode swapDepths stellt sicher, dass der aktive Button immer in der obersten Ebene liegt (bei mehr als 10 Ebenen ggf. den Wert erhöhen).
Bei dicht nebeneinanderliegenden Buttons wird das Überstrahlen des größeren „flash“-Objektes so nicht von den benachbarten Objekten verdeckt.
---------- ZUSÄTZE: --------
1.
Es ist sinnvoll, den aktiven Bereich der Schaltfläche einzuschränken, insbesondere wenn durch Schatten o.ä. das Objekt größer als der gewünschte Aktivbereich ist. Man erstellt hierzu im Buttonobjekt eine entsprechende Form in einer leeren Ebene, die man in ein Symbol umwandelt und sinnvoll benennt, z.B. "activeMask". Mit der Zeile
PHP-Code:
this.hitArea = activeMask;
activeMask._visible = false; // oder Alphawert manuell auf 0 setzen
2.
Statt (wie hier im Beispiel) dreier Bitmaps für die Variationen kann man auch eine etwas größere Bitmap mit einer Leuchttextur verwenden, die zur Laufzeit rotiert (textureClip._rotation += offset). Mit einer entsprechenden Maske erzielt man so auch einen netten Effekt und spart sich das rechenintensive Tweening mit 3 MCs.
Hier ein Link zur fertigen SWF
Kommentar schreiben
Login
Bereiche
Kategorien
Forum - Webmaster & Internet
Artikel bewerten