Anzeige
Tutorialbeschreibung

Preloader im Hauptfilm, für externe SWF's.

Preloader im Hauptfilm, für externe SWF"s.

Mit diesem Tutorial möchte ich euch zeigen wie Ihr einen Preloader für euren Container im Hautpfilm baut.
Es ist somit nicht mehr notwendig einen Preloader in externen SWF's einzubauen.


Bilder

 

  Preloader im Hauptfilm, für externe SWF's.


Wo ist der Unterschied zu normalen Preloadern? Ist es nicht egal?
Ein Preloader befindet sich in der Regel im Film der geladen werden soll. Richtig!
Aber das der Preloader somit selbst ersteinmal geladen werden muss bevor es losgehen kann ist auch logisch.
Und es gibt nichts schlimmeres als auf einer Flashseite einen Button zu drücken und es passiert erst mal........nichts!

Unser Preloader aber hat seinen Platz im Hauptfilm, ist von Anfang an einsatzbereit und wartet nur darauf loszuladen.
Somit lassen sich aufwendige Animationen im Preloader unterbringen.
Da stört es nicht das der Preloader dann mal locker 50 kb aufweist.
Noch ein Vorteil ist es das wir unsere Filme jetzt in einen Container laden.
Ich habe oft mitbekommen das viele mit Szenen arbeiten oder Ihre Filme einfach in einer anderen Ebene auf den Hauptfilm laden.
Wenn man Flexibel sein will...vergisst man das am besten gleich wieder und spezialisiert sich auf Container.


Inhalt:
Mit diesem Tutorial möchte ich euch zeigen wie Ihr einen Preloader für euren Container im Hautpfilm baut.


Hier nun ersteinmal der gesamte Script für euren Preloader:

 

 

Z. Nr.:

Action Script: Erläuterungen:

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

loader._visible = false;
ladestatus = function () {
  loader.onEnterFrame = function() {
    var geladen = _root.ladeziel.getBytesLoaded();
    var zuladen = _root.ladeziel.getBytesTotal();
    if (geladen >= 10) {
      loader._visible = true;
      prozent = Math.round(geladen / zuladen * 100);
      this.prozentanzeige.text = prozent;
      this.balken._xscale = prozent;
      if (prozent >= 100) {
        delete this.onEnterFrame;
        loader._visible = false;
        }
      }
   }
}
Der loader wird auf unsichtbar gesetzt.
Beginn der eigentlichen Loaderfunktion.
onEnterFrame - Schleife wird eingeleitet.
Aktuell geladene Bytes werden ermittelt.
Gesamten Bytes werden ermittelt.
loader wird erst sichtbar wenn min 10 Bytes geladen wurden.
loader wird auf Sichtbar gesetzt.
Der Prozentwert des geladenen Films wird ermittelt.
prozent wird im Textfeld prozentanzeige ausgegeben.
Der Ladebalken wird über die XAchse mittels Prozent skaliert.
Ermitteln ob der Film fertig geladen wurde.
Löschen der onEnterFrame - Schleife.
loader wird wieder auf unsichtbar gesetzt.




 

  Soviel ersteinmal zum Script. Diesen fügt ihr auf eurem ersten Frame im Hauptfilm ein.
Auf dem Frame bedeutet das Frame einmal anklicken und das Action Fenster öffnen.

Viele verwechseln diese Methode!!!
Man kann Scripte auf Objekten sowohl auch auf den Frames ablegen.
Ab Flash MX legt man allerdings Scripte prinzipiell in der Zeitleiste auf einem Frame ab.
Denn man kann Objekte, beispielsweise Buttons, auch so ansprechen und man geniest eine wesentlich bessere Übersicht.

Wenn ActionScript auf einem Frame liegt erscheint ein kleines a auf dem Frame.
So soll es sein!
Bilder


 

  Gehen wir über zu unserem Loader.

Für den loader benötigen wir einen MovieClip, welcher in meinem Beispiel ebenso im ersten Frame liegt.
Einfach Strg + F8 drücken und dem MovieClip einen Namen geben. z.B. loader_grafik.
Ich erzeuge jetzt in meiner Zeitleiste eine neue Ebene um mich später besser zurecht zufinden.
Die Ebene nenne ich "Loader"
Das Symbol anschließend aus der Bibliothek, denn dort liegt es jetzt, einfach auf die Bühne ziehen.
Nach Wunsch ausrichten, fertig.
Dann noch als Instancenamen "loader" eingeben, fertig.

Merke:
Instancenamen vergibt man um das Objekt später per ActionScript ansprechen zu können.
Wie will man jemanden aus der Menge rufen wenn er keinen Namen hat?

Bilder

Bilder


 

  In diesem Clip muss nun unser Ladebalken. 
Klickt euch in das Symbol rein und zeichnet in ihm einen Balken 100 x 5 Pixel groß
und konvertiert Ihn ebenso zu einen MovieClip.
Hierzu einfach Balken markieren, rechte Maustaste drücken und "In Symbol konvertieren" anklicken.
Nennt ihn z.B. ladebalken und als Instancenamen bitte "balken".


Als nächstes kommt das Textfeld.

Mit dem Textwerkzeug können wir bequem ein Textfeld erstellen.
Hierzu die Taste T drücken und im Eigenschaftsmenü Dynamischer Text auswählen.

Bilder


  Dieses trägt den Instancenamen "prozentanzeige" und gehört ebenso in dem MovieClip in welchem auch
der MC "balken" ansässig ist.
Ich trage schon einmal eine 100 ein um mein Textfeld besser positionieren zu können und das Ergebnis
schon einmal zu begutachten. 

Wenn ihr fertig seid sollte das ganze in etwas so aussehen:

Bilder


  Noch mal kurz nachdenken:
Der MC "loader" befindet sich im ersten Frame auf der Bühne.
In ihm befindet sicher der MC "balken sowie das Textfeld "prozentanzeige".
Alles klar?

Jetzt kommt das Ladeziel, sprich der Container in dem wir unsere SWF später laden wollen.
Ich erzeuge jetzt in meiner Zeitleiste wieder eine neue Ebene. Diese Ebene nenne ich "Ladeziel".

Anschließend einen neuen MovieClip (Strg + F8) erzeugen, jedoch ohne Inhalt und nennt ihn Container beispielsweise.

Nun das neue Symbol Container wieder aus der Bibliothek auf die Bühne legen.
Auf Eurer Bühne müsste nur ein weißer Punkt zu sehen sein.
Zeichen dafür, das er leer bzw. sein erstes eigenes Frame leer ist.
Auch auf diesen kann man per Doppelklick in ihn hinein gehen.

Dann wieder einen Instancenamen, ihr wisst ja jetzt wie, zuteilen. Wir nennen ihn "ladeziel".

Eure Bühne sollte jetzt so aussehen:

Bilder


  Jetzt fehlen nur noch die Buttons.

Dazu bedienen wir uns einfach aus dem Komponentenstapel (Strg + F7 / User Interface)
und ziehen uns einen Button auf die Bühne.
Diesen weisen wir den Instancenamen "btn_1" zu.

Den Script, für den Button, legen wir in das selbe Frame wie auch unser LoaderScript.
Der Script:

 

Z. Nr.:

Action Script: Erläuterungen:

1
2
3
4

btn_1.onPress = function(){
_root.ladeziel.loadMovie("test.swf");
ladestatus();
}
Auslösen der onPress-Funktion beim Drücken des Buttons.
Unser Ladeziel soll folgenden Film laden: "test.swf"
Aufruf unserer Loaderfunktion




  Das ActionScript-Fenster sollte jetzt so aussehen:
Ich habe bei mir natürlich ein jpg Bild geladen und keine SWF.

Bilder


 

  So...im Prinzip ist unser Tutorial hiermit auch schon fertig.
Wenn Ihr nun noch einen zweiten Film habt, der test.swf heißt, dann könnt ihr auch schon loslegen.

Dieses Tutorial liegt für Euch, im Bereich Download / Flash / Action Script, zum Download bereit.



Für Fragen, Anregungen oder Verbesserungsvorschläge bin ich gerne offen.

Ich wünsche Euch nun viel Spaß!


Euer Schinki

Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von WebDiver_09
  • 29.08.2010 - 17:35

Tut. ist optisch gut umgesetzt, müsste selbst ich kapieren können. ;-}

Portrait von catattack
  • 14.04.2009 - 14:24

shönes Tut. Einfach zu verstehen.

Portrait von Epulse
  • 27.04.2008 - 19:42

in verbindung mit dem movieclips statt szenen ein hervorragendes tutorial, danke!

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 20.04.2008 - 23:49

Dieses Tutorial hat mir sehr weitergeholfen, da es bezogen auf mich^^ noobsicher geschrieben ist .. Danke XD

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 18.03.2008 - 17:44

gutes tutorial :) gut erklärt

Portrait von Silentuser
  • 08.03.2008 - 12:40

super hat gut geklappt!!

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 01.10.2007 - 15:02

wenn nur alles so einfach wäre :-)

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 15.08.2007 - 11:50

sehr nice
hat mich echt geholfen, habe ein paar andre tuts für so einen preloader gelesen aber keine war so gut wie diese, ich bin froh für die tolle erklärung sowie die guten bilder

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 09.07.2007 - 15:35

hallo Schinki, super Ding, dein Preloader.
Ich hätt da noch eine Zusatzaufgabe die - mindestens für mich - zu lösen ist: ich habe eine kleine Website mit mehreren Hauptnavibuttons. Bei klick soll in einem Teilbereich (Container) ein swf geladen werden - genau wie von dir beschrieben. Nur: während der swf lädt, würde ich schon mal gerne das erste Bild des swf zeigen (grundsätzlich brauchts dann auch keinen Load-Balken und keine Load-Anzeige).
Hast du dazu eine Lösung ohne Szenen zu verwenden und ohne den Preloader vom Hauptfilm zu nehmen? Oder ganz einfach - was ist das Einfachste?
Grosses Dankeschön für eine Antwort schon im Voraus!
cloudy

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 28.06.2007 - 16:39

Hi,

ein Glück - das was ich gesucht hab! Jetzt noch durchsehen und dann klappts!

Vielen Dank!


MfG, der funpooler

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 05.06.2007 - 13:01

danke habs nachgebaut und allet klappt

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 14.05.2007 - 08:04

irgendwie ist das tut in der falschen kategorie
das gehört wohl eher zu actionscript

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 11.02.2007 - 06:36

PERFEKT!!! Habe alles verstanden, klasse Tut

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 27.01.2007 - 12:27

genau das was ich gesucht habe, und auch nett erklärt ;)

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 19.01.2007 - 21:58

Vielen Dank! Ist genau das was ich brauche!

Portrait von Biotonne
  • 17.11.2006 - 19:04

hey echt gut der Tutorial, gut beschrieben, verständlich und trotzdem funktionierts bei mir nicht... Naja muss ich noch mal checken. Aber Danke

Portrait von Janine
  • 01.09.2006 - 11:51

Hey, ich versuche mal wieder diesen preloader nachzubauen, aber der film wird wie auch beim letzten mal geladen, aber ich sehe keinen preloader
:(
Und ich hätte sooo gerne einen!!!
Janine

Portrait von filmeghost
  • 31.08.2006 - 18:59

Tut mir, leid aber ich komme ab dem Ladeziel nicht mehr mit! Na gut ich bin auch totaler Anfänger in diesem Gebiet!

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 04.07.2006 - 18:44

ich konne es genau so 1 zu 1 nachbauen und es funktioniert SUPER!

DANKE!

Portrait von Axl79
  • 22.05.2006 - 16:09

Klasse Tutorial, super Erklärung.

x
×
×