Anzeige
Tutorialbeschreibung

Preloader mit Ladebalken und Extras in Actionscript 2.0

Preloader mit Ladebalken und Extras in Actionscript 2.0

Als erstes machen wird die graphischen Bereiche:

Dokumenteigenschaften

Neu > Flash-Datei(Actionscript 2.0)

Die Größe ist egal.

Die Hintergrund Farbe sollte Schwarz oder sehr dunkel sein.

Inhalt:

Das graphische Design ist euch überlassen.

Instanznamen:

Als erstes packt ihr euren Ladebalken in einen MovieClip und achtet darauf das der Registrierungspunkt links ist!

Bilder

Euer Ladebalken-MovieClip muss den Instanznamen “loadbar” haben.

Bilder

Nun erzeugt ihr ein dynamisches Textfeld mit dem Instanznamen “prozent_txt” und Deaktiviert, damit man den text nicht markieren kann, den “Auswählbar” Button.

Bilder

Wenn du mit den beiden Objekten und der Hintergrundfläche fertig bist, dann Markiere sie alle und konvertiere sie in einen MovieClip( Registrierungspunkt: Mitte)

Bilder

…und gib dem MovieClip den Instanznamen “preloader_mc”.

Spiegelung einrichten:

Kopiere den “preloader_mc” und skaliere ihn auf der vertikalen Achse um -100%

Bilder

Und gib ihm den Instanznamen “shadow_preloader_mc”

Bilder

Jetzt geht’s ran ans Scripten!

Actionscript Code

F9 = Actionscript-Fenster

Wenn ihr den 1 Schritt richtig befolgt habt, dann werden die Instanznamen übereinstimmen und alles wird fehlerfrei ablaufen!

Script

Als erstes legen wir die Variablen an:

stop();
var prozent:Number = 0;
var Xscale_diff:Number = 0;

Prozent ist für dir geladenen Prozente und Xscale_diff ist der Zwischenspeicher für die breite des Ladebalkens.

Darunter schreibt ihr dann:

onEnterFrame = function () {

prozent = (_root.getBytesLoaded()/_root.getBytesTotal())*100;
preloader_mc.prozent_txt.text = Math.round(preloader_mc.loadbar._xscale) + "%";
Xscale_diff = prozent - preloader_mc.loadbar._xscale;
preloader_mc.loadbar._xscale += Xscale_diff/3;

}

prozent = (_root.getBytesLoaded()/_root.getBytesTotal())*100; , legt den Prozentwert auf die Variable “prozent”.

preloader_mc.prozent_txt.text = Math.round(preloader_mc.loadbar._xscale) + "%"; , schreibt in das textfeld die Prozente.

Xscale_diff = prozent - preloader_mc.loadbar._xscale;, macht den zwischenwert der xscale, damit der ladenalken sich schön weich bewegt

preloader_mc.loadbar._xscale += Xscale_diff/3; , übergibt dem loadbar die breite.

Aber wir sind noch nicht fertig!

In die onEnterFrame Funktion gehört noch

shadow_preloader_mc.loadbar._xscale = preloader_mc.loadbar._xscale;
shadow_preloader_mc.prozent_txt.text = preloader_mc.prozent_txt.text;

(bewegt die Spiegelung auch mit)

Und

if(prozent>97){

if(preloader_mc._alpha>=0){

preloader_mc._alpha -= 5;
shadow_preloader_mc._alpha -= 5;

}else{

gotoAndPlay(2);
delete onEnterFrame;

}
}

(blendet den preloader nach dem laden aus, und geht in die nächste Keyframe)

Sonstiges

Dein Inhalt der geladen werden soll, kommt in die nächste Keyframe.

Wem das alles jetzt zu kompliziert war, der kann sich .fla Datei anschauen.


DVD-Werbung
Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von vound
  • 05.05.2013 - 14:51

Echt gut, habe als anfänger alles verstanden, Danke !!!!!

Portrait von Susan99
  • 22.05.2012 - 19:56

Sehr schön erklärt. Vielen Dank!

Portrait von Susan99
  • 22.05.2012 - 19:56

Sehr schön erklärt. Vielen Dank!

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 04.02.2012 - 11:40

Wow Danke. Endlich ein Tutorial was ich verstanden habe. =)

Portrait von dastan
  • 26.04.2011 - 14:43

Das Tutorial ist gut gelungen und einfach nachzuarbeiten =)

Portrait von admin2
  • 11.03.2011 - 20:00

Sorry, was ich noch vergessen habe: Der Loader funktioniert bei mir einwandfrei.

Portrait von admin2
  • 11.03.2011 - 19:58

Danke für das Tutorial, das kann ich gerade super gebrauchen. Weiter so

Portrait von cpt_pinoy
  • 11.02.2011 - 20:28

Es wäre genau das Tut was ich suchen würde ... nur stellt sich der Actionscript Editor quer ... kann kein einziges Zeichen eintippen ...

Aber sonst kann man es selbst als Anfänger leicht nachvollziehen ... THX

Portrait von ScorpX
  • 22.10.2010 - 21:07

Ist ein Sehr Gutes tutorial Ich habe immer versucht diese Preloader zu erstellen hat aber nie Geklappt dank dir nun schon :)

Portrait von DraQ
  • 08.07.2010 - 16:14

sehr stark....das versuche ich dann auch gleich mal :)

Portrait von lukiono
  • 14.02.2010 - 01:02

Gutes Tutorial. Probiere ich mal aus

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 26.01.2010 - 10:01

Dank dir, für meine Facharbeit in MPN hat mir dein Tutorial super geholfen :)

Ich hab nur einige Dinge noch verändert! :P

Portrait von PzumZ
  • 27.10.2009 - 15:16

Super Tut...aber was muss ich einstellen, damit der Preloader bei 0% beginnt? Wenn ich das nämlich so mache wie in dem Tut startet er bei knapp über 100% und geht dann erst runter...

Portrait von NitroMani
  • 27.10.2009 - 15:33

Hey!
Achja das habe ich vergessen zu schreiben:
durch den Script, der den ladebalken weich skalieren lässt, scrollt er natürlich von der letzten Position auf die aktuelle
kurz: skalliere den "scroll_bar" so , dass er auf 0 oder 1 prozent ist ;)

Portrait von zeus661
  • 31.08.2009 - 18:09

sehr gut erklärt danke schon mal
allerdings klappts bei mir nicht ganz
er läd bis 100% und springt dann nicht weiter

Portrait von NitroMani
  • 31.08.2009 - 23:35

Oh ich glaub ich weiß woran das liegt!<br>
Ich denke du hast den script nicht auf die Root Bühne gelegt sondern in einem movieclip drinnen!<br>
Dann musst du einfach nur vor das gotoAndPlay(2)<br>
bei<br>
<br>
}else{<br>
<br>
gotoAndPlay(2);<br>
delete onEnterFrame;<br>
<br>
}<br>
}<br>
<br>
ein Root davor setzen (_root.gotoAndPlay(2);)<br>
<br>
ciao

Portrait von SnowDragon
  • 26.08.2009 - 14:50

Is echt gut geworden, Danke für dieses nette tut

Portrait von paul_schmidt
  • 22.07.2009 - 02:24

Vielen Dank für dieses tolle Tut. Wird mir gute Dienste leisten.
Gruß
Paul

Portrait von Sebil
  • 14.07.2009 - 14:52

sieht nicht schlecht aus nur bei mir hat es nicht funktioniert.
ich denke ich bin einfach noch zu unerfahren..

trotzdem alles gut erklärt usw ;)

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 16.06.2009 - 14:14

Vielen Dank! Den Preloader konnte ich gut gebrauchen!

x
×
×