Flash

Flash Lasershow (Flash Tutorial)

Tutorial erstellt von Ulli H. in Flash 7, letzte Änderung am 04.07.2009

Hallo und Willkommen zu einem weiteren Tutorial für angehende Actionscriptler ;)

Heutiges Thema: Lasershow

Jeder kennt Lasershows aus Bars, Diskotheken usw.
Wir wollen heute eine solche Lasershow mit wenigen Zeilen ActionScript-Code realisieren.

Doch zunächst mal für alle Copy & Paste'ler die nicht warten wollen. Hier ist der Gesamtcode zum einfügen. (die Lasershow wirkt am besten auf schwarzem Hintergrund)

Code:
laser_strength=50;
laser_length=1500;
laser_max_depth=50;
laser_max=10;
laser_min=0;
laser_fill=0.1;
max_lights=100;
random_colors=new Array("0xFFFFFF","0xFF0000","0x00FF00","0x0FFF000","0xF0F0FF","0x0033cc","0x9900cc","0xffff00");

MovieClip.prototype.laserPow=function()
{
  this.max_lines=random(laser_strength);
  this.max_lights=random(max_lights);
  alpha_fall=((laser_max-laser_min)/this.max_lines);
  this.col=random_colors[random(random_colors.length-1)];
  trace(this.col);

  for(i=0;i<this.max_lines;i++)
  {
    laser_rot=laser_max_depth/this.max_lines;
    this.createEmptyMovieClip("stream"+i,i);
    this['stream'+i].lineStyle(laser_fill,this.col,(alpha_fall*i));
    this['stream'+i].moveTo(0,(laser_fill*i));
    this['stream'+i].lineTo(0,(laser_fill*i));
    this['stream'+i].lineTo(laser_length,(laser_fill*i));
    this['stream'+i]._rotation=(i*laser_rot);
  }

  if(this._x>(Stage.width/2))
  {
    this._rotation=random(270);
  }
  else
  {
    this._rotation=random(0);
  }

  this.flashlight=0;

  this.onEnterFrame=function()
  {
    this.flashlight++;

    if(this.flashlight %2==0)
    {
      this._alpha=100;
      this._rotation+=4;
    }
    else
    {
      if(random(2)%2==0)
      {
        this._alpha=0;
      }
      this._rotation+=4;
    }

    if(this.flashlight>=this.max_lights)
    {
      delete this.onEnterFrame;
      this._x=random(Stage.width);
      this._y=random(Stage.height);
      this.laserPow();
    }
  }
}

createEmptyMovieClip("laser",0);
createEmptyMovieClip("laser2",1);
createEmptyMovieClip("laser3",3);
laser._x=random(Stage.width);
laser._y=random(Stage.height);
laser3._x=random(Stage.width);
laser3._y=random(Stage.height);
laser2._x=random(Stage.width);
laser2._y=random(Stage.height);
laser.laserPow();
laser2.laserPow();
laser3.laserPow();


So und jetzt für alle die, die wirklich was lernen wollen ;)

(Ich gehe davon aus dass ihr meine anderen Tutorials hier ebenfalls zumindest angeschaut habt. Denn AS Befehle die dort schon erklärt werden, werden hier lediglich angerissen.)


Zunächst mal vergessen wir die ganze Physik und den ganzen Kram der im realen Leben notwendig wäre um eine solche Lasershow zu realisieren. Stattdessen bedienen wir uns der Leichtgläubigkeit der Menschlichen Augen und des Gehirns welches diese Informationen verarbeitet.

Um eine einigermaßen echt wirkende Lasershow zu erstellen, brauchen wir nichts weiter als ein paar bunte Linien die radial untereinander angeordnet sind und zwischen schnellem Sichtbar und Unsichtbar wechseln.

So das war jetzt die Grobfassung.

Der Kern

Bevor wir mit der eigentlichen Programmierung beginnen, sollten wir ein paar Parameter festlegen um uns zum einen
- die spätere Arbeit zu erleichtern
und zum anderen
- diese Parameter später auch ändern zu können ohne den ganzen Code zu durchsuchen.

Um diese Parameter festzulegen müssen wir uns erst überlegen welche Eigenschaften unsere Lichtshow eigentlich hat.

Zum einen haben wir die Laserstrahlen (Bunte Linien), die gebündelt bzw. radial untereinander unseren Breiten Laserstrahl in Fächerform ergeben.

Da die Sache ohnehin tierisch an der CPU zerrt würde ich hier jetzt mal maximal 50 Linien je Strahl vorschlagen.
Ihr habt richtig gelesen. Maximal 50 und nicht 50 genau. (Um es etwas echter zu machen lassen wir diese Eigenschaft sowie auch einige weitere von einem Zufallsgenerator bestimmen. Also kanns auch Strahlen mit nur ein oder zwei Linien geben)

Code:
laser_strength=50;


Auch sollten wir eine Länge unserer Linien angeben. Ich habe hier den Wert 1500 Pixel gewählt was zugegebenermaßen etwas viel sein könnte. Aber ihr könnt das euren Bedürfnissen entsprechend anpassen. Wenn euer swf nur max 800 Pixel hat, sind 1500 überflüssig.

Also. Wie lang sollen eure Strahlen in Pixeln sein?

Code:
laser_length=1500;


Wie breit soll euer Strahl streuen? Je weniger ihr wählt desto realistischer sehen die Strahlen aus. Ich würde 50 empfehlen.
Was natürlich nicht 50 Pixel bedeutet. Lediglich ein Berechnungswert.

Code:
laser_max_depth=50;


Die Transparenz unserer Linien lassen unseren Laser erst richtig echt aussehen. Da Licht immer durchsichtig ist, sollten wir unsere Linien auf keinen Fall undurchsichtig (also Wert 100) darstellen.
Also legen wir mal zwei Werte fest. Nämlich den maximalen Alphawert und den minimalen. Den maximalen würde ich auf 10 setzten, den minimalen auf 0.

Code:
laser_max=10;
laser_min=0;


Unsere Linien verlaufen Radial von einem Zentrum weg um einen fächernden Schein zu simulieren. Um hier die Konsistenz des Strahls einzustellen braucht ihr natürlich noch einen Abstand in Pixeln den die Linien im Zentrum zueinenader haben. Je weiter der Wert, desto breiter der Strahl, desto unrealistischer der Strahl. Also nehmt hier ruhig nur das Zehntel eines Pixels.

Code:
laser_fill=0.1;


In Diskotheken gibt es meist 2 oder 3 Laserstrahler an fixen Positionen. Wir aber wollen keine fixen Positionen. Wir wollen dass ein Strahler mal da ist und dann mal da usw. usw.
Ausserdem möchten wir dass unsere Strahler immer wieder mit anderen Farben strahlen. Deshalb geben wir unseren Strahlern eine "Brenndauer" vor nach dieser sie sich mit neuen Zufallswerten neu positionieren sollen.

100 ist ein guter Wert. Versucht eine Bildrate von 24 in eurem Film ;)

Code:
max_lights=100;


Unser Laser darf sich einer kleinen Bibliothek an Farben bedienen die per Zufall ausgewählt werden.

Diese Bibliothek wird so erstellt

Code:
random_colors=new Array("0xFFFFFF","0xFF0000","0x00FF00","0x0FFF000","0xF0F0FF","0x0033cc","0x9900cc","0xffff00");


Fügt so viele Farben an wie ihr mögt. Um so mehr um so besser.


Um unserem Laser Leben einzufügen, bedienen wir uns einer Prototypefunktion (in meinen anderen Tutorials gibt es mehr Info dazu).

Außerdem erstellen wir gleich zwei unserer benötigten Zufallswerte anhand der vorher festgelegten Parameter

Code:
MovieClip.prototype.laserPow=function()
{
  this.max_lines=random(laser_strength);
  this.max_lights=random(max_lights);


Auch der Befehl random wurde schon in anderen meiner Tutorials erklärt.

Da sich unsere Laserstrahlen ja später drehen werden, sieht es noch realistischer aus wenn unserer Laserlinien wie ein Schweif "ausfaden". Also verringern wir den Alphawert unserer Linien im Strahl nach un nach um einen bestimmten Wert.
Da wir zwei Werte schon festgelegt haben (Zufällige Strahlenmenge anhand unseres festgelegten Parameters und max Alpha) lässt sich das leicht errechnen.

Code:
alpha_fall=((laser_max-laser_min)/this.max_lines);


Da unser Prototype sich auch jedesmal eine neue Farbe für sein Licht aus unserem Pool wählen soll benötigen wir noch folgende Zeile

Code:
this.col=random_colors[random(random_colors.length-1)];


- 1 deshalb weil length die exakte Mengenanzahl ausgibt, ein Array aber schon bei 0 anstelle 1 anfängt. D.h. bei einem Array mit 10 Elementen müsste man das letzte mit Array[9] ansprechen.

Jetzt kommt die eigentliche For-Schleife die unsere Laserstrahlen anlegt und gleich einen Radialwinkel zur Rotation der Linien anhand unserer Parameter errechnet.

Code:
for(i=0;i<this.max_lines;i++)
{
  laser_rot=laser_max_depth/this.max_lines;
  this.createEmptyMovieClip("stream"+i,i);
  this['stream'+i].lineStyle(laser_fill,this.col,(alpha_fall*i));
  this['stream'+i].moveTo(0,(laser_fill*i));
  this['stream'+i].lineTo(0,(laser_fill*i));
  this['stream'+i].lineTo(laser_length,(laser_fill*i));
  this['stream'+i]._rotation=(i*laser_rot);

}


Das unsere Strahlen nicht ins Nirvana (oder außerhalb unserer Bühne wo wir es nicht sehen) strahlen, legen wir gleich mal einen Rotationswert unserer Lampe entsprechend der später im Code durch Zufall angelegten X und Y Position fest.

Code:
if(this._x>(Stage.width/2))
{
  this._rotation=random(270);
}
else
{
  this._rotation=random(0);
}


Brenndauer, Rotation und Strobo unserer Laser


Zunächst mal die Brenndauer bis sich der Laser neu positioniert und mit neuen Parametern ans Werk geht.

Code:
this.flashlight=0;
this.onEnterFrame=function()
{
  this.flashlight++;


Klar oder? Zunächst benötigen wir einen Startwert (0) der sich dann solange erhöht (d.h. unser Laser solange brennt und agiert) bis dieser den von uns vorgegebenen Maximalwert "max_lights" erreicht hat.

Doch bevor wir prüfen ob unser Laser lange genug gelasert hat, lassen wir sein Licht noch ein wenig blinken um einen Stroboeffekt zu bekommen. D.h. wir schalten es mehr oder weniger in ganz kurzen Intervallen an und aus.

Im Prinzip schalten wir es nicht aus, sondern blenden es eher aus. Oder besser machen es durch Alphawert 0 unsichtbar und durch Alphawert 100 wieder sichtbar.

Trotzdem hätten wir das Problem dass das flackern unrealsitisch aussehen würde wenn es konstant in gleicher Reihenfolge an und aus geht.
Durch einen kleinen Kniff (if(random(2)%2==0){) können wir hier aber einen realistischen Stroboeffekt erzeugen.

Also:

Code:
if(this.flashlight %2==0)
{
  this._alpha=100;
  this._rotation+=4;
}
else
{
  if(random(2)%2==0)
  {
    this._alpha=0;
  }
  this._rotation+=4;
}


Mit if(wert %2==0){wird im übrigen überprüft ob ein Zahlenwert gerade oder ungerade ist.
Ausserdem nutzen wir unserer oEF um unseren Laser mit jedem Schritt um 4° weiter zu drehen.

So. Jetzt haben wir eigentlich die Arbeitsschritte die unser Laser abarbeiten soll.
Nun müssen wir ihm nur noch sagen dass er sich, sobald er seine von uns vorgegebene Brenndauer erreicht hat, zufällig neu positionieren und mit neuen zufällig Werten von vorn beginnen soll.

Code:
if(this.flashlight>=this.max_lights)
{
  delete this.onEnterFrame;
  this._x=random(Stage.width);
  this._y=random(Stage.height);
  this.laserPow();
}


Unsere Funktion schließen wir anschließend noch mit geschweiften Klammern ab

Code:
  }
}


Jetzt brauchen wir noch Laserlampen, die unsere tolle Funktion auch ausführen können.

Also schnell erstellt und gleich zufällig auf der Bühne positioniert und ab gehts.

Code:
createEmptyMovieClip("laser",0);
laser._x=random(Stage.width);
laser._y=random(Stage.height);
laser.laserPow();


Da wir aber mehr als nur eine Laser wollen, verdreifachen wir das ganze einfach

Code:
createEmptyMovieClip("laser",0);
createEmptyMovieClip("laser2",1);
createEmptyMovieClip("laser3",3);
laser._x=random(Stage.width);
laser._y=random(Stage.height);
laser3._x=random(Stage.width);
laser3._y=random(Stage.height);
laser2._x=random(Stage.width);
laser2._y=random(Stage.height);
laser.laserPow();
laser2.laserPow();
laser3.laserPow();



Viel Spaß mit eurer online Disko.

Ich freue mich hier übers Forum immer wieder gerne über Feedback ;)

>> Allgemeine Fragen oder Probleme mit dem Tutorial? Hier gehts zum Forum!

Impressum / Datenschutzerklärung          © der-Webdesigner.net 2002 - 2011           top ▲