ActionScript 3 Preloader mit Framefactory

Tips, ,

English: The following article describes the ActionScript 3 metadata framefactory and its usage for creating a preloader.

Deutsch: Zahlreiche Wege führen zu einer Flash-Anwendung. Und der Weg über reinen Code ganz ohne Zeitleiste erfreut sich dabei zunehmender Beliebtheit – zumal mit dem Flash Development Toolkit (FDT) und dem Flex Builder zwei Eclipse basierte Entwicklungsumgebungen bereitstehen, die dem im Flash enthaltenen Editor Lichtjahre voraus sind. Doch diese Herangehensweise hat auch ein paar Tücken. Eine davon ist der Preloader, der bei größeren Anwendungen den Ladeprozess ansprechend visualisiert.

In klassischen Flash-Anwendungen wird vielfach die Zeitleiste für den Preloader missbraucht, indem am Anfang die Wiedergabe stoppt, bis der restliche Inhalt geladen ist – dafür muss natürlich sichergestellt sein, dass so viel Inhalt wie möglich erst in den späteren Bereichen der SWF-Datei liegt (was sich übrigens gut mit dem Bandbreiten-Profiler in Flash prüfen lässt). So ganz ohne Zeitleiste klappt das mit FDT oder dem Flex Builder natürlich erst einmal nicht. Doch ein Blick in das Flex Framework zeigt, dass dort eine Lösung namens Framefactory exisitert. Denn das Metadata [Frame(factoryClass=”Class”)] erlaubt es, Code explizit an den Anfang der SWF-Datei zu legen und diesen z. B. für einen Preloader zu nutzen, bevor der restliche davon unabhängige Inhalt geladen wird.

1
2
3
4
5
6
7

package {
	import flash.display.MovieClip;
	[Frame(factoryClass="biz.wolter.app.manager.SystemManager")]
	[SWF(width="800", height="600", frameRate="24", backgroundColor="#999999", pageTitle="My Rich Application")]
	public class Application extends MovieClip {
	}
}

Die in der Framefactory referenzierte Klasse (hier analog zu Flex der SystemManager) enthält nun allen Code für den Preloader und die Initialisierung der Anwendung. Letzteres darf aber nicht durch eine „konkrete“ Referenzierung erfolgen, da ja dann der zugehörige Code mit dem SystemManager an den Anfang der SWF-Datei gepackt würde. Deshalb kommt hier nach einem erfolgreichen Ladevorgang die Methode getDefinitionByName zum Einsatz.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

package biz.wolter.app.manager {
	import biz.wolter.app.controls.Preloader;
 
	import flash.display.DisplayObject;
	import flash.display.MovieClip;
	import flash.events.Event;
	import flash.utils.getDefinitionByName;
 
	public class SystemManager extends MovieClip {
 
		public function SystemManager() {
			stop();
			stage.addEventListener(Event.ENTER_FRAME, onEnterFrame);
			// Custom Preloader
			Preloader.show();
		}
 
		/*
		 * Handle the loading progress
		 */
		public function onEnterFrame(event:Event):void {
			if(framesLoaded == totalFrames) {
				stage.removeEventListener(Event.ENTER_FRAME, onEnterFrame);
				Preloader.hide();
				nextFrame();
				create();
			} else {
				// nothing, cause Preloader handles itself
			}
		}
 
		/*
		 * Finally create the application
		 */
		private function create():void {
			var mainClass:Class = Class(getDefinitionByName("Application"));
			var app:Object = new mainClass();
			addChildAt(app as DisplayObject,0);
		}
	}
}

8 thoughts on “ActionScript 3 Preloader mit Framefactory”

  2. Hallo Sven,

    die Compiler-Option frame wollte ich eigentlich als nächstes hier im Blog behandeln. Mit gefällt an der nicht, dass da nicht schon im Quellcode ersichtlich ist, was eigentlich passiert. Man muss halt immer auch die Compiler-Einstellungen im Auge behalten. Aber jetzt kann ich mir ja einen weiteren Beitrag dazu dann wohl sparen ;).

    Liebe Grüße,

    Sascha.

  3. Hallo Sascha,

    ich versuche gerade wie oben beschrieben einen Preloader für meine Website zu ‘installieren’. Ich bekomme immer die Fehlermeldung ‘TypeError: Error #1009: Der Zugriff auf eine Eigenschaft oder eine Methode eines null-Objektverweises ist nicht möglich.at ColoredWhite()[/Users/sick73/Documents/Flex Builder 3/coloredWhite/src/ColoredWhite.as:56]
    at com.coloredwhite.library::Preloader/createApp()[/Users/sick73/Documents/Flex Builder 3/coloredWhite/src/com/coloredwhite/library/Preloader.as:79]
    at com.coloredwhite.library::Preloader/onEnterFrame()[/Users/sick73/Documents/Flex Builder 3/coloredWhite/src/com/coloredwhite/library/Preloader.as:65]’ mit Verweis auf die entsprechenden Zeilen in meinem Script. Analog in deinem Beispiel die Zeilen 37 und 38. Habe ich ‘nen Denkfehler?

    Viele Grüße
    Maik

  4. Hallo Maik,

    wie heißt denn deine Dokumentenklasse (also die Hauptklasse) für dein Projekt. Kann es sein, dass die nicht Application heißt und deshalb dort was anderes stehen muss?

    Beste Grüße,

    Sascha.

  5. Servus Sascha

    Sehr schönes Script. Genau das wonach ich gesucht habe. Ich wusste zwar dass Flex das so macht, bin aber nicht aus den Trichter gekommen wie ich das machen soll. Mich würde aber noch interessieren wie deine Preloader-Klasse in etwa aussieht. Ich hab zwar jetzt eine von mir rangestöpselt, aber wahrscheinlich weiß du eine elegantere Lösung als ich.

    Greetz
    Alex

  7. Servus nochmals

    Die Info ist doch auch schon mal ne Aussage. 😉 Hab jetzt noch etwas an meinem Preloader rumgebastelt und der sieht nun soweit ganz gut aus. Danke nochmals fürs Script

    Alex

  8. Hallo Sascha,

    ich habe eine App mit factoryClass gebaut… funktioniert alles tadellos. Aber wie kann ich das RESIZE-Event und das MOUSE.LEAVE-Event verwenden? Das stage-Objekt darf in der MainApp nicht benutzt werden. In der factoryClass angewendet bekomme ich traces der entsprechenden Events. Aber wie bekomme ich beispielsweise die Bühnengröße in meine MainApp, um beim Resizen meine Objekte in Position zu halten?

    Viele Grüße
    der Maik

Comments are closed.