Anzeige
Tutorialbeschreibung

Preloader/progressbar für Flash 8 Pro

Preloader/progressbar für Flash 8 Pro

Hier erkläre ich, wie man sich einen selbstgebauten preloader für die eigene Flashanimation erstellt. Dieses Tutorial richtet sich an Anwender, die die Basics von Flash beherrschen. Dies bezieht such hier auf z.B den Umgang mit der Zeitleste, der Bühne, der Biblothek, dem Farbverlauf und dem Anlegen von Formen.

Der Preloader wird in etwas so aussehen:


 


Schritt 1:
Als erstes erstelle ich ein neues Dokument. Dann füge ich in der Hauptzeitleiste zwei Ebenenordner hinzu und bennene sie in "Preloader" und "Inhalt". In den "Preloader"-Ordner  füge ich  drei neue Ebenen ein und bennene sie um in "Prozentanzeige", "Preloader" und "Rahmen". Nun füge ich noch eine "Actions" Ebene und eine "Inhalts" Ebene in den Ordner "Inhalt" hinzu. Die Ebenen "actions" und Inhalt sperre ich.

Nun sollte es ungefähr so aussehen:

EbenenBilder



Schritt 2:
Nun lege ich mit Strg+F8 ein neues Symbol an, nenne es "RahmenAußen" und wähle als Typ "Grafik".  In diesem Symbol zeichne ich ein abgerundetes Reckteck ohne Rand mit einem Eckenradius von 5. Im Eigenschaftsinspektor gebe ich für "B" 220 und für "H" 20 ein. Nun richte ich das Rechteck im Bedienfeld "Ausrichten" (Strg+K) horizontal und vertikal zentriert an der Bühne aus. Die Füllung besteht aus einem linearen Verlauf mit der Farbe "#FFFFFF" (weiß) oben und mit "#CCCCCC" (grau) unten. Nun wird ein weiteres Symbol mit dem Namen "RahmenInnen" erstellt. Der Typ ist wieder "Grafik". Hier zeichne ich wieder ein Rechteck ohne Rand, diesmal auch ohne abgerundete Ecken,  und gebe im Eigenschaftsinspektor für "B" 200 und für "H" 5 ein. Der Inhalt besteht wieder asu dem glechen Verlauf, nur diesmal in der entgegengestzten Richtung (grau oben und weiß unten). Auch dieses Rechteck wird vertikal und horizontal zentriert ausgerichtet. Jetzt lege ich wieder ein neues Symbol "Rahmen" mit dem Typ "Movieclip" an. hinenin ziehe ich einfach die beiden eben erstellten Grafiken aus der Biblothek, die jeweils zentriert ausgerichtet werden müssen. Mit einem Klick auf "Szene 1" gelange ich zur Hauptzeitleiste. Dort wähle ich die Ebene "Rahmen" aus und ziehe den Movieclip "Rahmen" auf die Bühne und richte ihn vertikal zentriert und horizontal etwas linklastig aus, dass rechts noch Platz für die spätere Prozentanzeige ist.

Nun sollte es so ungefähr so aussehen:

RahmenBilder




Schritt 3:

Nun ist der Rahmen im Prinzip fertig. Doch möchte ich ihn mit Hilfe der Filter aus Flash 8 noch etwas verschönern. Dieser Schritt hat mit der Funktionalität des Preloader nichts zu tun und kann deswegen auch übergangen werden. Ich wähle das in Schritt  2 erstellte Symbol auf der bühne aus und öffne mit  Fenster > Eigenschaften > Filter  das  Fenster zum erstellen und bearbeiten von Filtern. Nachdem ich das Symbol auf der Bühne ausgewählt habe. füge ich mit dem Pluszeichen einen neuen Filter "Glühen" hinzu. Ich behalte die Standartwerte bei, nur die Stärke erhöhe ich auf 150 %, die Qualität ändere ich zu hoch, als Farbe wähle ich ein dunkles grau (#666666) aus und ich aktiviere die Option "inneres Glühen".

Mit angewandten Filtern sieht der Rahmen nun ungefähr so aus:
RahmenBilder


Schritt 4:
In diesem Schritt füge ich den Ladebalken, der später den Fortschritt des Ladens anzeigt, ein. Mit Strg+F8 füge ich ein neues Symbol "balken" mit dem Typ "Movieclip" hinzu. Hier zeichne ich ein Rechteck ohne Rand ohne angerundete Ecken und der Füllfarbe weiß. Ich wähle das Rechteck aus und gebe im Eigenschaftsinspektor folgende Werte ein: B=200, H=5, X=0, Y=0. Mit einem Klick auf Szene 1 gelange ich zurück zur Hauptzeitleiste. Dort ziehe ich den eben erstellten Movieclip auf die Bühne auf die Ebene "Preloader" und richte ihn mit den Pfeiltasten so aus, dass er exakt in den inneren Rahmen des vorhin erstellten Symbols passt. In dem Eigenschaftsinspektor gebe ihm den Inztanznamen "balken_mc". Jetzt öffne ich wieder das Bedienfeld Filter und füge einen neuen Filter "Glühen" hinzu. Ich gebe fogende Werte ein: Weichzeichnen=10, Stärke=130 %, Qalität=hoch, Farbe=#33CC00.

Jetzt sollte weiße Balken in etwas so grün "glühen":
BalkenBilder


Schritt 5:

Mit dem Textwerkzeug zeichne ich ein neues Textfeld auf die Bühne in der Ebene "prozentAnzeige". Im Eigenschaftsinspektor trage ich folgendes ein: Texttyp="Dynamischer Text", Inztanzname ="prozent_txt", Größe=28. Die Schriftart ist Geschmackssache und somit jedem selbst überlassen. In dem Textfeld trage ich um zu sehen, ob Schriftart und Größe passen, z.B "90 %" ein. Nun richte ich das Textfeld so aus, dass es rechts neben dem Ladebalken ist. Im Filter-Fenster füge ich einen neuen Filter "Glühen" hinzu und trage folgende Werte ein: Qualität=hoch, Farbe=#FF0000.

Das fügt der Schrift eine Art rötlichen Schimmer hinzu:
Bilder



Schritt 6:
Nun komme ich zum Eiegentlichen bauen des Preloaders. ich wähle in der Ebene "actions" das Erste Bild aus und füge im Aktionen Fenster folgenden Code hinzu:
  • var geladen:Number = _root.getBytesLoaded()/_root.getBytesTotal();
    balken_mc._width = geladen * 200;
    prozent_txt.text = Math.round(geladen * 100) + " %";
Dies gibt mir in der Variablen "geladen" eine Zahl zwischen 0 und 1, je nachdem wie weit der Inhalt geladen wurde. Damit bestimme ich die Breite des Movieclips "balken_mc" und den Inhalt des dynamischen Textfeldes "prozent_txt".

Im zweiten Bild der Ebene "actions" füge ich mit F7 ein leeres Schlüsselbild ein und schreibe hier im Bedienfeld "Aktionen" fogenden Code:
  • if(_root.getBytesLoaded() == _root.getBytesTotal()) {
        gotoAndPlay(3);
    }
    else {
        gotoAndPlay(1);
    }
Dies bewirkt, dass der Film zu Bild 3 (dem Inhalt) springt, wenn alles geladen wurde. nun füge ich noch ein allen Ebenen, außer der Inhalts-Ebene, bei Bild 3 mit F7ein leeres Schlüsselbild ein. In der Inhalts-Ebene füge ich mit F6 ein Schlüselbild ein. Dort kann nun jeder seinen individuellen Inhalt einfügen. Ich empfehle zum Testen ein recht großes Bild herzunehmen. Mit Strg+Enter kann man den Film testen. Um einen download zu simulieren, muss man zuerst unter Ansicht > Downloadeinstellungen die gewünschte Geschwindigkeit einstellen und mit Strg+Enter den Download simulieren. Nun sollte eigentlich der Preloader funktionieren. Bei weiteren Fragen/Anregungen/Problemen/usw. einfach eMail oder PN an mich.

Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von sagenclown
  • 23.02.2012 - 13:05

Hallo, ich habe mir das mal hier angesehen. Ich finde nicht den Filter "Glühen" bzw. überhaupt keine Filter. Kann also auch keinen Filter anlegen.
Kann jemand helfen?
Danke

Portrait von bcpdesign
  • 03.05.2011 - 22:09

Sehr gutes Tutorial! Das habe ich sogar als AS-Anfänger verstanden. Genau das was ich gesucht habe. Vielen Dank! Weiter so!

Portrait von cille
  • 18.10.2010 - 13:06

thx, gesucht und fix gefunden!

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 16.10.2009 - 02:12

Cool, genau danach hab ich schon lange gesucht!
ich habs nie geschafft rauszufinden wie man die Daten abgleicht, is ja leichter als gedacht! :)
Danke

Portrait von ivadesign
  • 10.08.2009 - 14:53

Super, danke! Habe ich konzentriert, weil ih Anfänger bin. Nur wozu brauche das? Ohne geht auch ein film erstellen, on preloader? Oder?

Portrait von suslik87
  • 18.06.2009 - 12:04

Super Sache! Danke! Funktioniert super... :)

Portrait von darthstorm
  • 18.05.2009 - 21:23

ich als neuer anfänger kann es nicht ganz nachvollziehen( den letzten schritt....)
aber sonst eigentlich recht gut

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 02.04.2009 - 13:23

Ich nehme alles zurück. Hatte meine HP jetzt auf den Server hochgeladen und der Preloader hat geschnurrt wie ein Kätzchen.
Danke dir !

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 02.04.2009 - 13:16

Gut beschrieben, aber bei mir funktioniert es nicht. Kann es daran liegen, das ich die engl. Version ("Flash 8 Professional") und daher Action Script2 verwende?

Portrait von polyhymnia77
  • 14.01.2009 - 13:25

Sehr gut erklärt. Vor allem wusste ich nicht, dass man den Download simulieren kann. Danke

Portrait von F1reF0x
  • 22.09.2008 - 13:21

n1 hat mir sehr geholfen : D

Portrait von crusher9001
  • 17.08.2008 - 14:57

nice, sehr schön gemacht ^^

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 01.08.2008 - 09:08

interessant... sehr gut beschrieben...

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 01.07.2008 - 10:30

Schaut gut aus!
Freu mich schon, dass heute am Abend auszuprobieren!

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 09.05.2008 - 15:46

gut erklärt nur funzt es nich bei mri

Portrait von sh82
  • 15.02.2008 - 01:04

nice danke schööön ^^

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 04.02.2008 - 22:38

Vielen Dank

eine super Beschreibung sehr klar und verständlich
funktioniert alles wunderbar....
der Script ist noch etwas schwierig zu verstehn aber da komm ich noch hinter :D

Portrait von niklasbem
  • 22.11.2007 - 13:42

tolles tutorial sehr gut beschrieben
bei mir hab ich des problem dass ich immer wieder fehlermeldungen bei verschiedenen playern grig zum beispiel geht die prozent_txt anzeige unter player 5 ned...hmm

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 12.11.2007 - 10:14

Bei mir blinkts die ganze Zeit rum, wie hier auch schonmal jmd. das Problem hatte.

Den Code habe ich 1:1 mit Copy&Paste übernommen. Als ich mal in Frame 2 ein stop(); eingefügt habe, hat es zumindest nicht mehr geblinkt - funktioniert hats nie, auch nicht bei simuliertem Download und auch nicht, als ich die Datei mal sinnlos mit ein paar Bildern zum erhöhen der kb-Zahl gefüllt habe.

hmmmm?

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 14.09.2007 - 21:26

super beschrieben, habs gleich gescheckt^^

Danke für dieses tut

x
×
×