Der initial vorhandene Flat-Rate Versand ist schön und gut, was sagen allerdings die Kunden wenn selbst Briefmarken große Produkte genauso viel Versand  kosten wie ein 30 Kilo-Sperrgut Produkt. Was ist mit Abholung vor Ort? Und wenn internationaler Versand über die Landesgrenzen realisiert werden soll? Freundlicher Weise geben die Anbieter auf getshopped.org eine Hilfestellung in Form eines Versandmodul Skeletts, das man nach eigenen Vorstellungen adaptieren kann.

Das fertige Versandmodul muss zur Benutzung entweder in das WordPress Plugin Verzeichnis gepackt werden oder alternativ in das Shipping Verzeichnis im  WP e-Commerce Plugin selbst: wp-content/plugins/wp-e-commerce/shipping.

Anschließend steht es in Einstellungen -> Shop -> Versand als Versandoption zur Verfügung.

Die Quelldatei für das Shipping Modul  kann hier herunter geladen werden:

wp-e-commerce-sample-shipping-module
 

Auf Adobe´s Update Seite stolperte ich neulich über das Flash Professional CS5 Update for iOS und beschloss, schon fast nur aus reiner Neugier, das Update einzuspielen und meinen alten Apple Developer Account wiederzubeleben.

Apple´s mobile Geräte gehören leider zu den restriktiven Geräten, was im Prinzip bedeutet, sie sind nicht Quelloffen und man kann auch nicht einfach so seine Software aufspielen. Man benötigt einen Developer Account welcher mit 79 Euro für 1 Jahr zu Buche schlägt. Damit ist es möglich über ein umständliches Zertifizierungsverfahren sein Gerät als “Entwicklergerät” zu deklarieren und kann dann via Xcode oder iTunes seine eigenen Softwareprogramme aufspielen.

Im Gegensatz zu meinen ersten Versuchen Ende 2009 wurde dieses Verfahren jedoch mit einen Assistenten verbessert, so das es nicht mehr so kompliziert, sondern lediglich ein wenig nervig ist sein Provisioning Profile zu erhalten. Ein klick im Apple Developer Center auf add Certificate öffnet ihn schon. Anschließend nur noch dem Assistenten folgen.

Der Assistent generiert dabei aus einer  Application ID und der Device ID (für das verwendete Gerät) das Provisioning Profile. Anschließend muss es auf dem Gerät installiert werden.

Unter MacOS geschiet dies einfach per Drag´n Drop der Datei auf das Xcode Symbol auf dem Dock. Xcode installiert das Profil dann automatisch am angeschlossenen iPhone/iPod/iPad. Alternativ geht das auch über iTunes über zur Mediathek hinzufügen..., was dann wohl auch der Weg für Windows Nutzer wäre.

Um mit Flash CS5 für das iPhone & Co. zu entwickeln benötigt man noch eine P12 Datei (*.p12). Diese wird aus dem Developer Zertifikat generiert, welches man von Apple bekommen hat. Am besten man folgt dabei den Step-by-Step guide auf den Adobe Help Seiten zum Thema iOS: Converting a developer certificate into a P12 file

Nachdem der Weg nun geebnet ist kann man endlich durchstarten:

• Flash CS5 öffnen
• neues iPhone OS Projekt erstellen
• Anzeigeobjekte auf die Stage packen

Der Befehl Strg + Enter bzw. cmd +Enter zeigt wie gehabt den Film, um eine lauffähige IPA Datei (*.ipa) erstellen zu können muss man Flash CS5 in den Publish Settings unter den Player Settings (alternativ auch gleich File > iPhone OS Settings) noch ein paar Details zum Speicherort der Zertifikate mitteilen.

Der Pfad zur P12 Datei und das Passwort, sowie der Pfad zum Provisioning Profile auf diesem Computer werden zwingend benötigt, ansonsten klappt der Export nicht. Die restlichen Einstellungen sind optional wie z.B. Icons für die Apps zu definieren.

Ist alles korrekt eingestellt, reicht anschließend ein Klick auf Publish und Flash beginnt damit die finale IPA Datei zu kompilieren. Als letzter Schritt muss die Datei via iTunes auf dem iPhone installiert werden. Dazu einfach wieder über zur Mediathek hinzufügen… oder per Drag´nDrop bei iTunes bekann machen. Anschließend iTunes mit dem iPhone Synchonisieren und geschafft ist es.

Die Flash Anwendung läuft auf dem iPhone!

Zur Performance:

Meinen kurzen Tests nach, ist die Performance in etwa 2/3 schlechter als am Rechner. Meine Testanwendung läuft auf einem MacBook Pro mit fast exakt 24 Frames pro Sekunde. Auf dem iPhone 3GS sind es konstant 8 Frames pro Sekunde. Interessant wäre zu wissen wie die Testanwendung auf dem iPad 2 läuft…. Raum für zukünftige Feldforschung

Hilfreich zur Erstellung dieses Artikels waren folgende Quellen:

• Creating a Hello World iPhone Application Using Flash CS5
• Developing for iOS using Flash Professional
• Adobe Flash Platform: Packager for iPhone

Es gibt zwar immer noch Stolpersteine, wie z.B. die automatisch Erzeugung der Domain-Klassen und deren Anpassung an eine bestehende Datenbank oder die Suche von einem bestimmt Objekt in einer automatisch generierten Liste (vgl. JavaSpektrum 02/09, Seite 40), aber dieser Artikel zeigt auch die Möglichkeiten die in Grails stecken und außerdem ist Grails ein noch recht junges Projekt!

Also versucht es einfach mal aus, vielleicht wird es ja bei einem euer nächsten Projekt zu Einsatz kommen

Dieser Blogeintrag wurde ursprünglich auf http://wet-media.de/wetblog/ veröffentlicht, allerdings besteht dieser Blog nicht mehr.

Die Google App Engine. Vor gut einem Jahr wurde Google’s Infrastruktur als Plattform für Python Entwickler geöffnet, jetzt gilt das auch für Java-Entwickler. Im Endeffekt handelt es sich um eine Plattform auf der man seine Webapplikation deployen kann (welche das sind) und u.a. folgendes auf der Plattform unterstützt:

• Virtual Machine Version 6
• Jetty Servlet Container
• Servlet-API Version 2.4
• Deployment Descriptor (web.xml), also die für Java-WebApps typischen Konfigurationen (Servlet-Mapping, …); Einschränkungen s.u.

allerdings mit ein paar Beschränkungen:

• In der web.xml werden folgende Elemente nicht unterstützt: load-on-startup, mime-mapping, distributable und run-at als auch die Definition von JNDI- und EJB-Ressourcen
• Es gibt eine JRE Class White List die die unterstützten Klassen der Standard Java Bibliothek auflistet
• Es gibt keine relationale Datenbank, weshalb die Benutzung von Hibernate ausgeschlossen ist, sondern es handelt sich um einen Datenspeicher auf Basis von Bigtable. Dafür lässt sich JDO und JPA als Java-Persistenzmechanismen einsetzen.
• Dauer eines Requests ist auf max. 30 sekunden beschränkt
• und noch ein paar andere, das sind aber die wichtigsten denke ich…

Im aktuellen JavaMagazin findet ihr auch einen guten Artikel darüber.

Es gibt ein super Eclipse Plug-in mit dem wirklich sehr einfach die Applikationen entwickeln kann.

Außerdem hat Google einige seiner API’s, Produkte und Projekte hier aufgelistet, auf die man z.B. mit Flash oder Flex zugreifen kann. Bestimmt ist das einigen von euch bekannt, aber vielleicht nicht allen oder man findet mal was neues

Dieser Blogeintrag wurde ursprünglich auf http://wet-media.de/wetblog/ veröffentlicht, allerdings besteht dieser Blog nicht mehr.

Gefunden über den Adobe Edge Newsletter, den ich nur empfehlen kann!

Dieser Blogeintrag wurde ursprünglich auf http://wet-media.de/wetblog/ veröffentlicht, allerdings besteht dieser Blog nicht mehr.

Der Explorer der Relational Analysis Library zeigt das sehr deutlich. BirdEye stellt insgesamt 5 Bibliotheken zur Verfügung. Erwähnenswert sind noch der GeoSpatial Analysis und außerdem Quantitative Analysis. Die beiden anderen sind noch in der Entwicklung wie es scheint.

Dieser Blogeintrag wurde ursprünglich auf http://wet-media.de/wetblog/ veröffentlicht, allerdings besteht dieser Blog nicht mehr.

• Eclipse 3.4 Ganymede J2EE
• Subclipse
• Flex 3 (Für Studenten: hier)
• Anleitung für Subclipse unter Flex
• BlazeDS Turnkey – Distribution mit Tomcat, oder den neuesten Tomcat

Die BlazeDS Turnkey-Distribution enthält einen älteren Tomcat, dafür aber ein paar Beispiele. Ihr solltet den neusten Tomcat nur runterladen wenn ihr mein Beispiel benutzt, da ihr sonst nicht die erforderlichen Dateien bekommt. (Update: Es auch möglich den aktuellen Tomcat in der Version 7 zu benutzen)

• Xampp Lite mit MySql DB (oder andere Datenbank, z.B. PostgreSQL)
• SVN Client (Tortoise) (nützlich, aber nicht notwendig)

1. Das Java Projekt:

Wenn alle Tools installiert sind und alles läuft, starten wir zunächst Eclipse und legen dort ein neues Projekt an, welches wir von einem SVN-Repository auschecken:

Eine neue SVN-Repository Location anlegen:

Location angeben:

Projektordner auswählen:

Kurz warten…

Auschecken als Java-Projekt:

Als nächstes passen wir die Einstellungen für das Projekt an. Unter “Create project from existing source” “..\Tomcat 6.0\webapps\myapp\WEB-INF” angeben, da das Java Projekt im webapps Ordner des Tomcats liegen muss.

Hier ist es wichtig, das “Default output folder” von “…/bin” in “…/classes” zu ändern:

Die Frage nach dem Öffnen der Java Perspektive und die darauf folgende Frage mit Ja bestätigen (denn wir wollen ja die Daten aus dem Repository):

Kurz warten…

…und warten…

Das Projekt hat nun mehrere Errors. Das hat den einfachen Grund das die Libaries, die gerade vom SVN-Repository runtergeladen wurden, nicht dem Build Path des Projektes hinzugefügt wurden.

Das kann man aber ganz einfach beheben, indem man den Build Path konfiguriert, und dem Projekt die fehlenden Libraries hinzufügt durch auswählen aller jar-Dateien im lib-Ordner des “TestJava” Projektes.

Fertig!

2. Das Flex Projekt:

Den Flex Builder starten und ein neues Projekt anlegen.

Checkout Projects from SVN, und eine neue Repository Location anlegen.

SVN-Repository Location eintragen und kurz warten:

Dann Projekt Ordner auswählen, und wieder kurz warten:

Danach auschecken als

Nochmal kurz warten und dann auschecken als Flex Project:

Jetzt passen wir die Einstellungen an. Den Projektnamen eingeben, als Application Type “Web application” und als Server Technology “J2EE”.

WICHTIG: Die Server Location. Als Root Folder “…\Tomcat 6.0\webapps\myapp” (bzw. der WEB-INF Ordner in den ihr euer Java-Projekt gepackt habt), als Root URL “http://localhost:8080/myapp” und als Context root “/myapp”. Jetzt den Tomcat starten, sonst kann die Konfiguration nicht validiert werden. Ist der Tomcat gestartet, auf “Validate Configuration” klicken. Wenn oben steht “The web root folder and root URL are valid” habt ihr alles richtig gemacht, wenn nicht ist irgendwo ein Fehler

Hier alles so lassen, Finish und danach Confirm overwrite drücken:

Mal wieder kurz warten…

und fertig

3. Die Datenbank:

Damit ihr das Flex-Projekt starten könnt müsst ihr vorher folgendes beachten: Wenn ihr XAMPP richtig installiert habt, müsstet ihr unter http://localhost/xampp/ folgendes angezeigt bekommen (Wenn ihr eine andere DB benutzt dann könnt ihr das überspringen):

Dort geht ihr auf Sicherheitscheck …

… klickt unten auf den Link und setzt ein Passwort für root. Da ich bereits ein Passwort gesetzt habe, sieht es bei mir wahrscheinlich ein wenig anders aus, als bei euch. Dieses Passwort gut merken, da ihr es gleich benötigt!

Wenn ihr ein Passwort gesetzt habt, geht ihr auf:

Und legt eine neue Datenbank an, z.B. testDB mit der folgenden Codierung:

Als nächstes müsst ihr das root Passwort und ggf. den DB-Namen unter Eclipse in src/META-INF/persistence.xml anpassen (Zeile 20: DB-Name; Zeile 22: Passwort):

Jetzt die DBTest.java als Java Application in Eclipse ausführen.

Checkt unter PHPMyAdmin, ob die Daten reingeschrieben wurden:

WICHTIG: Bevor ihr jetzt das Flex-Projekt startet müsst ihr in der persistence.xml die Zeile 18 auskommentieren (Zeile 18 anklicken und dann Source > Add Block Comment), da sonst bei der ersten Transaction mit der DB der Inhalt dieser überschrieben wird. NUR wenn ihr die Datenbank neu aufsetzen wollt müsst ihr den Comment wieder entfernen!
Jetzt den Tomcat starten und unter Flex das TestFlex Projekt starten. Danach freuen das es alles klappt

4. Erläuterungen:

Java: Der im Java-Projekt enthaltene „flex“ Ordner enthält mehrere xml-Dateien, welche nötig sind damit die Übertragung zwischen Java und Flex reibungslos funktioniert. Dazu vor allem die remoting-config.xml beachten, da ich diese erweitert habe:

          tutorial.model.service.Service
          session

Ich hab ein für Flex erreichbares Ziel eingefügt. Dieses wird dann auch über die id „service“ von Flex aus angesprochen. Das Property source verweist auf die Klasse Service welche die von Flex aufzurufenden Methoden enthält. Diese Methoden können direkt von Flex aus angesprochen werden. Das Property scope kann 3 verschiedene Scopes enthalten: application, session und request. Ihr solltet hier natürlich eure Klassen angeben, welche ihr für den Austausch der Daten zwischen Flex und Java benötigt.

Flex: Um von Flex aus auf die Java-Methoden zugreifen zu können, müsst ihr nur ein RemoteObject instanzieren, sei es in MXML oder in ActionScript:

MXML:

gehört auch noch zur MXML-Möglichkeit; Aufruf der Methode über ActionScript in Java:

function login():void
{
accessmanager.login(email.text, password.text);
}

ActionScript:

var remoteLogin:RemoteObject = new RemoteObject();
remoteLogin.destination = "service";
remoteLogin.addEventListener("result", userLoginHandler);
remoteLogin.addEventListener("fault", faultHandler);
//Aufruf der Login-Methode in Java
remoteLogin.login(email.text, password.text);

Für beide Möglichkeiten (AS und MXML) gilt:
Wenn die aufgerufene Methode einen Rückgabewert hat, dann kann der mithilfe des angegeben ResultHandlers aufgefangen und verwertet werden:

public function userLoginHandler(event:ResultEvent):void {
	var yesOrNo:String = String(event.result);
	if (yesOrNo == "NO") {
		Alert.show( "Login fehlgeschlagen! ");
	} else if (yesOrNo == "YES") {
		currentState = 'Startpage';
	}
}

Dieser ResultHandler wurde oben bei der Instantiierung angegeben. Er wurde dem RemoteObject als EventHandler übergeben.

Dieses Tutorial wurde ursprünglich auf http://wet-media.de/wetblog/ veröffentlicht, allerdings besteht dieser Blog nicht mehr.

Im zweiten Teil des Turorials geht jetzt etwas mehr an Eingemachte. Da wir im ersten Teil nur eine Fläche aus grauen Kacheln erstellt haben, werden wir das ganze jetzt dahingehend verbessern, dass jede einzelne Kachel mit den entsprechenden Ausschnitt der Bilddaten einer Bilddatei gefüllt wird. Die gekachelten Sprites stellen, positioniert per for-Schleife, das Bild wieder korrekt dar. Der Unterschied zum Original ist nicht festzustellen da die Sprites nahtlos nebeneinander liegen. Aus diesen Kacheln erstellen wir als letzten Schritt ein ParticleObject um es später elegant animieren zu können.
Die folgende Skizze soll diese kompakte Beschreibung ein wenig verdeutlichen:

Der Quellcode besteht wieder aus einer *.fla Datei die im Prinzip nur zu starten der DocumentClass (‘FragmentClassDC.as’) da ist. ‘FragmentLayer.as’ enthält den Code zum erstellen der Kacheln (jeweils als Partikel) aus einem übergebenen Bild und zur Steuerung der Animation der Kacheln. Die Klasse ‘ParticleObject.as’ erstellt den jeweiligen Partikel der aus einem viereckigen Sprite besteht (‘BitmapDataRectangle.as’), dessen BitmapData durch einem Teilausschnitt des übergebenen Bildes ersetzt wird. Die Datei ‘QuickLoader.as’ ist nicht nur dem Namen nach nur für das laden der Bilder zuständig, sondern tut genau das.

Also dann mal los:
Das erzeugen des FragmentLayers geschiet in der DocumentClass und ist analog zum ersten Teil, geändert haben sich nur ein paar Argumente zu denen das Container DisplayObject und die geladene Bitmap vorangestellt werden:

// define FragmentLayer arguments
private var rectSize:int = 20;			// rectangle size
private var updateRate:int  = 30;		// update rate
private var dirVector:String  = "right";	// animation direction (from - to)
private var dispEvent:Boolean = true;		// dispatch event when animation has finished
private var startNow:Boolean = false;		// start immediately
 
private var overlay:FragmentLayer;
overlay = new FragmentLayer ( your_container, your_bitmap, rectSize, updateRate, dirVector, dispEvent, startNow);

Der Constructor sieht wie folgt aus:

// Constructor
public function FragmentLayer (container:DisplayObjectContainer, sourceBM:Bitmap,
				rectSize:uint, updateRate:uint = 30,
				dirVector:String = "right",
				dispEvent:Boolean = true, startNow = true)
{
	this.container = container;
	this.sourceBM = sourceBM;
	this.rectSize = rectSize;
	this.updateRate = updateRate;
	this.dirVector = dirVector;
	this.dispEvent = dispEvent;
	this.startNow = startNow;
 
	wLen = container.width / rectSize;
	hLen = container.height / rectSize;
	partArray = new Array();
 
	// if two times "true" then start immediately
	if ( initArea () && startNow ) 	startEffect();
}

Für den Fall das startNow = true ist wird sofort der Effekt gestartet, da die aufgerufene Methode initArea() nach Beendigung immer ein true zurückgibt. In diesem Beispiel ziehen wir aber mal den Effektstart per späterem MausClick vor.

Die Initialisierung der rechteckigen Fläche:

// Init the rectangle area
public function initArea ():Boolean
{
	switch (dirVector)
	{
		case "left" :
				updateLeft();
				break;
		case "right" :
				updateRight();
				break;
		case "up" :
				updateUp();
				break;
		case "down" :
				updateDown();
				break;
		default :
				updateRight();	// call left as default
				break;
	}
	return true;
}

Wir haben rechts gewählt, also erfolgt das Erstellen der Kacheln durch updateRight(). Diese ordnet die Kacheln so an, dass sie später von rechts nach links zersplittern. Jede Kachel wird durch createRect() definiert.

// particle movement right to left
private function updateRight ():void
{
	for (var i:uint = 0; i < wLen; i++)
	{
		for (var j:uint = 0; j < hLen; j++)
		{
			var xPos:int = (i * rectSize);
			var yPos:int = (j * rectSize);
 
			createRect (xPos, yPos);
		}
	}
}

Jedes Bitmap speichert seine Bild Informationen als BitmapData. Das geladene Bild, welches wir dem Constructor übergeben haben, enthält ebenso eine BitmapData welche wir hier in die Kachel-Sprites kopieren:

// Fill the fragment pieces
private function createRect (xPos:Number, yPos:Number):void
{
	// count rectangles
	count++;
 
	// create rectangle with blue (default) Bitmap inside
	var cr:BitmapDataRectangle = new BitmapDataRectangle(rectSize);
 
	// target rectangle
	var rect:Rectangle = new Rectangle(0, 0, rectSize, rectSize);
 
	// target section of the source image
	var pt:Point = new Point(xPos, yPos);
	rect.x = pt.x;
	rect.y = pt.y;
 
	// copy BitmapData to Byte stream
	var bytes:ByteArray = sourceBM.bitmapData.getPixels(rect);
	bytes.position = 0;
 
	//destination rectangle
	var destRect:Rectangle = new Rectangle(0, 0, rectSize, rectSize);
 
	// write Byte stream to destination rectangle
	cr.getBmd.setPixels (destRect, bytes);
 
	// pass the CustomRectangle to the final create method
	createFragmentParticle (xPos, yPos, cr);
}

Die finale Methode zur Erzeugung erstellt nun aus den Kachel-Sprites einzelne PartikelObjects und speichert diese in einem Array. Die Methode randRange() liefert dabei eine Zufallszahl zurück welche die Bewegungen dynamischer macht. Ach ja, fühlt euch frei und spielt ruhig mal mit den Parametern

// Create a fragment particle an push it onto the array
private function createFragmentParticle (xPos:int, yPos:int, rect:BitmapDataRectangle):void
{
	// create the fragment rectangle
	particle = new ParticleObject( container, rect as Sprite, xPos, yPos);
// -> Play with these Parameters!
	// define velocity
	particle.setVel ( randRange(-20,20), randRange(-50,50) );
 
	// add drag
	particle.drag = 0.97;
 
	// set gravity
	particle.gravity = 0.3;
 
	// randomize particle size
	particle.clip.scaleX = particle.clip.scaleY = 1.0;
	// set shrink
	particle.shrink = randRange (0.5,1.03);
 
	// add fade
	particle.fade = 0.01;
 
	// particle clip starting alpha
	particle.clip.alpha = 1.0;
// -> ok stop
	// push particle onto Array
	partArray.push (particle);
}
 
// Calc a random range of particle movement
private function randRange (min:Number, max:Number):Number
{
	// e.g.: 5 - (-5) = 10;  10 + (-5)
	var randNum:Number = (Math.random() * (max - min )) + min;
	return randNum;
}

Soweit ist nun die Erstellung des FragmentationLayers abgeschlossen. Der Aufruf (hier durch ein MouseClick-Event auf den Container in der DocumentClass) von startEffect() bring die Animation ins Rollen:

// Start the fragmentation effect
public function startEffect ():void
{
	this.addEventListener (Event.ENTER_FRAME, frameLoop);
}

Diese wirft, soweit die Variable ‘dispEvent = true’ ist, ein Custom-Event wenn die Effekt-Animation zuende ist und stopt in jedem Fall das EnterFrame-Event:

// Effect has finished
private function effectEnd():void
{
	this.removeEventListener (Event.ENTER_FRAME, frameLoop);
	if (dispEvent)	dispatchEvent(new Event(EFFECT_DONE, true));
}

Das Custom-Event fangen wir in der DocumentClass auf und wiederholen hier im Beispiel die fragmentation der beiden geladenen Bilder:

overlay.addEventListener (FragmentLayer.EFFECT_DONE, effectDoneHandler);
 
// FragmentLayer Effect Finished
private function effectDoneHandler (e:Event):void
{
	switch (e.currentTarget.name)
	{
		case "Overlay #1" :
			trace ("Effect done: " + e.currentTarget.name);
			// ...and again...
			init();
			break;
 
		case "Overlay #2" :
			trace ("Effect done: " + e.currentTarget.name);
			break;
	}
}

Das eigendliche update der ParticleObjects übernimmt der frameLoop() in der FragmentLayer.as, den die vorher erwähnte startEffect() Methode auslöst.

// Effect frame-loop
private function frameLoop (event:Event):void
{
	// increasing part of the array which has to be updated
	part2update += updateRate;
 
	// ...if this part is too long, correct it
	if (part2update > partArray.length)
	{
		part2update = partArray.length;
	}
 
	// loop through Array and update each one
	for (var i:uint = 0; i < part2update; i++)
	{
		partArray[i].update ();
 
		// remove invisible particle
		if (partArray[i].invisible == true)
		{
			removeParticle (i);
			part2update --;
			i--;
		}
	}
}

Der unsichtbar gewordenen Objekte entledigen wir uns per removeParticle(), welche letztendlich auch die weiter oben beschriebene effectEnd() Funktion aufruft:

// Destroy a particle
private function removeParticle (val:uint):void
{
	var buffer:Array = partArray.splice (val, 1);
	particle = buffer.pop();
	particle.destroy ();
	if (partArray.length < 1)
	{
		effectEnd();
	}
}

Viel Spass beim Ausprobieren!

AS3 Fragmentation Class2

Um hübsche Zersplitterungs-Effekte wie beispielsweise auf Andy Foulds`s Homepage hinzubekommen, habe ich eine AS3 Klasse entwickelt um deren Beschreibung es hier im ersten Teil gehen wird. Es handelt sich jetzt eher um eine Anleitung als um ein ausführliches Programming Tutorial. Der zeite Teil wird allerdings in eben diese Richtung gehen, da wir uns dann dem Problem stellen, wie man ein beliebiges DisplayObject (Bitmap-Bild/MovieClip/etc.) auf den Fragmentation Layer legt um dieses dann ansprechend zersplittern zu lassen.

In den Sources verwende ich eine DocumentClass, die einfach von der “FragmentExample.fla” gestartet wird, also nur nicht wundern wenn in der *.fla kein Code zu finden ist.

Zum starten des Effektes aus Flash heraus sind ein paar notwendige Dinge anzugeben:

1. Package importieren:

import de.ehrhardt.fragment.*;

2. Einen neuen Fragmentation Layer erstellen:

var rectSize:int = 10;
var updateRate:int  = 30;
var fxDirection:String  = "left";
var bgColor:int = 0xCCCCCC;
var borderColor:int = 0xCCCCCC;
var borderSize:Number = 0.2;
var startNow:Boolean = true;
 
var fragLayer:FragmentLayer = new FragmentLayer (your_mc, rectSize, updateRate,
                               fxDirection, bgColor, borderColor, borderSize, startNow);

3. RectSize definieren:

your_mc

…durch den gewünschten Instanznamen ersetzen. Es sollte darauf geachtet werden, die Dimension des DisplayObjects genau zu mappen, da ich diese Funktion hier nicht vorstelle. Als Beispiel: für einen MC mit 220×110 sollte die rectSize = 10 betragen, da es sonst zu unvollständigen Überdeckungen kommt.

4. Frame Rate setzen:

Mehr als 25 Bilder pro Sekunde sind für eine flüssige Animation empfehlenswert. Zu finden in Flash unter “Properies” bzw. “Eigenschaften”.

(Optional:)
5. Effekt manuell starten, z.B. nach MouseClick Event:

your_mc.addEventListener (MouseEvent.CLICK, clickActionHandler);
 
function clickActionHandler (e:Event):void
{
    fragLayer.startEffect();
    e.target.removeEventListener(MouseEvent.CLICK, clickActionHandler);
}

Dazu noch die Variable startNow auf “false” setzen:

var startNow:Boolean = false;

So, fertig.
Damit ist der erste Teil abgeschlossen. Wie man nun ein Bild auf den Fragmentation-Layer legt um eine nette Transition zu erzeugen, erleutere ich genauer im 2 Teil.

AS3 Fragmentation Class1