Archiv für 13. November 2007
AS 3.0 Workflow-Special - Integration von Assets Teil 3
4. Wir gehen in die SWF und legen auf der Zeitleiste des MovieClips “MovieClipExamples” zwei Labels mit den Namen “in” und “out” an und exportieren erneut die SWC-Datei.
5. Um zu erfahren, wie viele Labels sich auf der Zeitleiste befinden, bedienen wir uns der MovieClip-Eigenschaft currentLabels. Der Rückgabewert ist ein Array mit zwei Objekten des Typs FrameLabel.
Das Objekt FrameLabel wiederum besteht aus den Eigenschaften frame (int) und name (string). Die Information ist schön und gut, aber am besten wäre ja, wenn man per Event benachrichtigt wird, sobald auf der Zeitleiste ein Frame mit Label erreicht wird.
Hier kommt die undokumentierte Methode addFrameScript ins Spiel. Mit dieser Methode injizieren wir auf allen Frames mit Labels automatisch eine Event-Methode, die uns den Namen des Labels mitteilt.
Diese Events fangen wir außerhalb der MovieClip-Klasse (MovieClipExample) ab und können nun nach Belieben weitere Prozesse ausführen.
ExtendedMovieClip, Basis-Klasse für MovieClipExample
[as]
package de.jefr.display
{
import flash.display.FrameLabel;
import flash.display.MovieClip;
import de.jefr.events.FrameEvent;
public class ExtendedMovieClip extends MovieClip
{
public function ExtendedMovieClip()
{
init( );
}
private function init() : void
{
var labelList : Array = currentLabels;
var labelAmount : int = labelList.length;
for( var i : int = 0; i < labelAmount ; i ++ )
{
var currentFrameLabel : FrameLabel = labelList[i];
addFrameScript( currentFrameLabel.frame , _onFrameLabel );
}
}
private function _onFrameLabel() : void
{
switch( currentLabel )
{
case 'in':
dispatchEvent( new FrameEvent( FrameEvent.IN , false , false ) );
break;
case 'out':
dispatchEvent( new FrameEvent( FrameEvent.OUT , false , false ) );
break;
}
}
}
}
[/as]
FrameEvent-Klasse
[as]
package de.jefr.events
{
import flash.events.Event;
public class FrameEvent extends Event
{
public static const IN : String = ‘de.jefr.events.FrameEvent.IN’;
public static const OUT : String = ‘de.jefr.events.FrameEvent.OUT’;
public function FrameEvent(type : String, bubbles : Boolean = false, cancelable : Boolean = false)
{
super( type , bubbles , cancelable );
}
}
}
[/as]
Main-Klasse
[as]
package
{
import de.jefr.events.FrameEvent;
import flash.display.Sprite;
public class Main extends Sprite
{
private var _mc : MovieClipExample;
public function Main()
{
_mc = new MovieClipExample( );
_mc.addEventListener( FrameEvent .OUT , mcIsOut );
addChild( _mc );
}
private function mcIsOut( e : FrameEvent ) : void
{
trace( ‘mcIsOut’ );
}
}
}
[/as]
Gesamtfazit:
Klasse Sache. Die Designer sind wieder glücklich, dass sie weiterhin Animationen auf der Zeitleiste erstellen können und Entwickler sind froh, dass sie keinen ActionScript-Code auf der Zeitleiste platzieren müssen. Als Interface kommen einfach die guten alten Labels auf der Zeitleiste zum Einsatz und schon gestaltet sich der Workflow um einiges angenehmer.
Bis dato konnte man das Projekt lediglich mit der Flex SDK kompilieren, was natürlich die Designer ausschliesst. Damit man jetzt die Anwendung auch mit der Flash IDE kompilieren kann, definiert man als Document-Class der Asset-FLA die Startklasse (Main.as) des Projektes. Der Kompilierungsvorgang mit der Flash IDE benötigt zwar mehr Zeit, aber das werden die Designer ohne Frage in Kauf nehmen.
Hiermit schließe ich das Kapitel über die Integration von Assets. Ich hoffe Ihr konntet etwas für die Optimierung Eures Workflows mitnehmen. Wie immer bin ich sehr an Eurer Meinung interessiert und fände es natürlich spannend zu hören, wie Ihr Assets in Eure Flashprojekte integriert.
26 Kommentare 13. November 2007
AS 3.0 Workflow-Special - Integration von Assets Teil 2
Zwar klappte der erste Weg bei zwei ActionScript 3.0 Projekten recht gut, aber auf Dauer muss auch gewährleistet sein, dass Designer Animationen auf der Zeitleiste anlegen können und man diese von außen steuern kann.
Nach einigen Recherchen sieht mein aktueller Workflow wie folgt aus:
1. Man hat eine FLA-Datei (Asset.fla), die als Asset-Bibliothek dient. Als Beispiel legt man in der Bibliothek einen MovieClip an und definiert als Linkage-Class “MovieClipExample”. In den Publish Settings aktiviert man “Export SWC” und kompiliert die Asset-Bibliothek.
2. Nun folgt im Flash Explorer von FDT ein Rechts-Klick auf das Projekt. Hier wählt man NEW | LINKED LIBRARIES aus. In der Folge definiert man eine Pfad-Variable und selektiert die exportierte SWC-Datei.
3. FDT bietet jetzt die Möglichkeit SWC zu durchsuchen und somit kann man im Ordner Linked SWCs, die verknüpfte SWC aufklappen und sieht als Inhalt eine Klasse mit dem Namen MovieClipExample.
Zwischenfazit Teil 2:
Mit dieser Lösung hat man die Möglichkeit, schon einmal auf die Schnelle zu sehen, welche Assets sich in der SWF befinden und man kann zudem auf die Eigenschaften (z.B. alpha) und Methoden (z.B. gotoAndPlay) der Assets zugreifen.
Toll wäre jetzt noch, wenn man auf einem bestimmten Frame einer Animationen ActionScript-Code ausführen kann, der idealerweise nicht auf der Zeitleiste liegt, sondern in einer externen Klasse.
-> Hier geht es zum dritten und letzten Teil
11 Kommentare 13. November 2007
AS 3.0 Workflow-Special - Integration von Assets Teil 1
Nach der “Flash on the Beach”-Pause werde ich heute einige Ansätze für die Integration von Assets vorstellen.
Ich habe den Themenkomplex in drei Abschnitte aufgeteilt:
1. EMBED-Tags
2. SWCs
3. currentLabels & addFrameScript
Mit Hilfe des Flex EMBED-Tags hat man die Möglichkeit Assets direkt in eine SWF zu kompilieren.
Grafik-Einbindung (PNG, JPG und GIF):
[as]
[ Embed( source = ‘assets/img/example.png’ ) ]
public static const ImgExample : Class;
[/as]
SWF-Einbindung :
[as]
[ Embed( source = ‘assets/swf/example.swf’ ) ]
public static const SWFExample : Class;[/as]
Wichtig: Ein direkter Zugriff auf die Eigenschaften und Methoden der eingebetteten SWF ist nicht möglich. Kommunikation ist lediglich via LocalConnection möglich.
Asset aus SWF-Bibliothek:
[as]
[ Embed( source = ‘assets/swf/example.swf’, symbol=’MovieClipExample’ ) ]
public static const MovieClipExample : Class;
[/as]
Font-Einbindung:
[as][ Embed( source = ‘assets/font/example.ttf’, fontName=’ExampleFont’, unicodeRange = ‘U+0020,U+00A1-U+00FF,U+2000-U+206F,U+20A0-U+20CF,U+2100-U+2183, U+0020-U+002F,U+003A-U+0040,U+005B-U+0060,U+007B-U+007E, U+0041-U+005A, U+0061-U+007A, U+0030-U+0039′, mimeType = ‘application/x-font’ )]
public static const FontExample : Class;
[/as]
Zwischenfazit Teil 1:
Was auf den ersten Blick toll klingt, hat auch einige Nachteile. Man muss immer manuell den Pfad zu den Assets schreiben, vorausgesetzt man weiß überhaupt, dass es neue Assets gibt. Und ein weiteres großes Problem ist, dass man nur über Umwege auf die Zeitleiste eingebetteter MovieClips zugreifen kann.
Weitere Informationen zu den verschiedenen EMBED-Tags findet man hier.
Hier geht es zum zweiten Teil.
9 Kommentare 13. November 2007
