|
Einleitung
Was
bringt dieses Tutorial?
Aufbau
Vorbereitung
Instanzen
plazieren
Alpha Wert setzten
Action Script
Bilder
gegeneinander verschieben mit Buttons
Verschieben
mit Random
Verschieben
mit Maus
Aussichten
Was
kann ich damit machen
Was bringt dieses Tutorial?
Jeder,
der schon mal mit Grafik Programmen wie Photoshop, Paint Shop u.ä gearbeitet
hat kennt den Weichziechnungs-Effekt. Damit sehen die Bilder je nach Einstellung
verschwommen und unscharf aus. Etwa so:
 |
 |
 |
| original | weichgezeichnet | stark weichgezeichnet |
Mit
diesem Tutorial moechte ich ueber die Moeglichkeiten der traditionellen Bildbearbeitungs-Programme
hinaus gehen, und die Staerke der "Weichzeichnung" ausgehend vom Originalbild
dynamisch in Flash vorgeben. Das Ergebnis koennte dann so aussehen:
Natuerlich
haengt die Qualitaet des Effekts vom Arbeitsaufwand des Flashers ;-)
Ein
Weiterer Vorteil eines Flash-Films ist natuerlich seine Groesse! Dieses Beispiel
hat nut 7.5 kb und kann ohne wesentliche Groessenaenderung beliebig erweitert
werden. Dazu aber spaeter.
Aufbau
Als
erstes muessen wir die Grafik erstellen. Wie sie aussehen soll und mit welchem
Programm ist egal, es ist aber ratsam das Bild im BMP format zu speichern, damit
wir es nacher ohne Qualitaetsverlueste im Flash importieren koennen. Dazu waehlen
wir in Flash eine freie Ebene aus und gehen auf 'Datei' >> 'Import':
Nachdem
das Bild sich auf der Buehne befindet muessen wir es in ein Symbol umwandeln
(druecke F8), damit wir es nacher per AS ansteuern und Alpha effekte zuweisen
koennen. Im Beispiel heisst das Symbol "image".
Jetzt
muessen wir die Instanzen der Symbole auf der Buehne platzieren. Nehmen wir
doch einfach mal zwei Instanzen von "Image" und positionieren sie
uebereinander in zwei Ebenen.
Die
obere Instanz nennen wir "one", jetzt koennen wir die auch mit Action
Script ansteuern.
Bei
beiden Instanzen setzen wir "Alpha" auf 50, jetzt schneint das
untere Bild durch das obere durch. Ihr koennt natuerlich mit den Werten fuer
beide Bilder experementieren und unterschiedliche Effekte erzeugen.
An
der Stelle wird klar, dass die Qualitaet der Verlaeufe, also die Weichzeichnung
mit der Anzahl der uebereinander gelegten Bilder dramatisch steigt. Jedes Bild
bekommt dann einen Instanz-Namen und kann so gezielt mit Action Script angesteuert
werden.
Action
Script
Jetzt
kommt ein wenig Action Script, schliesslich wollen wir doch unseren Weichzeichnungs-Effekt
dynamisch halten.
Im Beispiel habe ich drei Buttons definiert, jeder button versetzt das obere Bild um ein paar Pixel von der ursprunglichen Position (x=0, y=0). Dadurch entsteht der Unschaerfe-Effekt.
| Button 1: | Button 2: | Button 3: |
| on (release) { one._x = 1; one._y = 1; } |
on (release) { one._x = 4; one._y = 2; } |
on (release) { one._x = 5; one._y = 3; } |
Nun,
ihr koennten sagen dazu braucht man doch kein AS! richtig, aber was ist wenn
wir die Bilder im Zufall gegen einander verschieben, dazu auch noch die Groesse
aendern und daraus eine endlose Schleife machen, die das Bild immer wieder neu
positioniert:
| Frame 1: | Frame 2: |
| //position one._x = random(6)-3; one._y = random(4)-2; //groesse |
gotoAndPlay (1); |
Wir
koennen auch das Bild abhaengig von der Maus verschieben, hier folgt das Bild
der Maus mit fallender Geschwindigkeit:
| Frame 1: | Frame 2: |
| //position one._x += int(_xmouse -one._x)/20; one._y += int(_ymouse -one._y)/20; |
gotoAndPlay (1); |
Den
Einsatzmoeglichkeiten und Variationen des AS sind keine grenzen gesetzt. Es
haengt alles von eurer Phantasie ab.
Aussichten
Die
vorgestellte technik sollte ein Gedankenanstoss fuer groessere Projekte sein.
Zum Beispiel kann man so wunderbare Banner erstellen, die animiert und trotzdem
fast so klein wie ein statisches JPEG Bild sind.
| SWF - 7kb |
Eine
entsprechende GIF-Animation wuerde bei deutlich schlechterer Qualitaet (nur
256 farben) fast 600 kb benoetigen.