introducing ofxFlash

[julapy]

hi,

i’ve been working on a addon lately which builds flash XFL files and runs them inside openframeworks. it essentially emulates the flash player run-time using media types available in OF.

https://github.com/julapy/ofxFlash
download the source and example from git.

it came about when i was working on my last commercial project and i set myself the challenge of building the UI in OF. at first it was painful, having to set xy coordinate for every image layer and position them in the right z-order… so i started looking into alternatives and came across the new XFL flash file format, an open version of the FLA format where all assets and movieclip information is stored in XML files.

ofxFlash-screen-01 by julapy, on Flickr

WHAT IT CURRENTLY DOES…

1. Loads flash XFL files and builds a OpenFrameworks version.
2. It emulates the Flash player run-time using the same display structure ( stage => sprite => display object container => interactive object => etc. )
3. Supports 2D matrix transformations for translating, scaling, rotating and skewing display objects and applying those transformations to their children.
4. Supports display lists, so display objects can be nested in other display objects.
5. Uses AS3 syntax where possible to make it easier for Flash devs to understand.
6. Supports rectangle and oval primitives.
7. Manages media assets ( Bitmap / Video / Sound ) through the ofxFlashLibrary class.

STILL TO COME…

1. Mouse interaction. This will most likely be a port of ofxMSAInteractiveObject into ofxFlashInteractiveObject with a few tweaks.
2. Event dispatching and management using AS3 syntax.
3. Text support. Although this is a huge field, so we’ll see how far it can be pushed.
4. Custom shape support. Working out XFL encoding of vector shape data and translating that into something OF friendly like a number of points.
5. Support for timeline tweening. At the moment a work around this is to create a tween, copy it onto another layer and break it into key frames.

ofxFlash is still in the early stages and i would appreciate any feedback and suggestions you have.

L.

[jvcleave]

Wow - quite the challenge. I was able to download and run the example for OS X.

I tried adding a couple of simple movieclips, saved the file but didn’t see the new clips.

I was able to however copy and paste the FL logo and see 2 instances of that.

Great stuff - look forward to seeing how far this goes!

[julapy]

hi jvcleave,

thanks for trying it out.
what did you put inside the movieclips?
at the moment the addon supports bitmaps (png, jpg etc) and rectangle and oval primitives. custom shapes are currently not yet supported.

feel free to post your flash source so i can test.

cheers,
L.

[jvcleave]

I put some text in there and broke it up - so yeah - custom shape - makes sense.

[roxlu]

Hi Julapy!

This is great! I recently created ofxFlashCommunication. kind of related: https://github.com/roxlu/ofxFlashCommunication Used to communicate between Flash <–> openFrameworks app.

For text you could have a look at ofxPango: https://github.com/roxlu/ofxPango
I created that addon and it works great on Windows / Mac. (haven’t tested Linux)

Best regards,
Diederick

[zach]

awesome work Julapy – very excited to see where this goes.

[quote author=“roxlu”]
For text you could have a look at ofxPango: https://github.com/roxlu/ofxPango
I created that addon and it works great on Windows / Mac. (haven’t tested Linux)

Best regards,
Diederick[/quote]

this reminds me to point out that ofxPango saved my life on a recent project where I needed good utf-8 / foreign character support and text layout. it’s sick and thanks **so** much for it. I did discover some memory leaks in the process, I think centered around pixel allocation (I think I was using it in a different way then you I suspect – as I needed to be able to alter text on the fly, etc), and I remember I added some functionality – will get my changes into git shortly.

• zach

[memo]

this is amazing. A lot of video game devs used to (and perhaps still do) use this setup of letting designers build UI in flash, then import into game engine. The way you’re doing it (rebuilding the setup with native OF elements) is great, really looking forward to where this goes.

[roxlu]

@Zach Oh great I’m glad the addon is usefull! I know of some bad coding in the getPixels() function of the a ofxPCSurface object; I don’t know how to return the pixels w/o returning a pointer to newly created “unsigned char* pixels = new unsigned char[pix_num];” I’ve to fix soon as someone else pointed me to this issue as well.

Best regards
roxlu

[sloopi]

Hi Julapy!

these are great news!

[julapy]

thanks for the feedback everyone.

Diederick,
ofxPango looks great and likely the best solution for advanced text rendering in OF.
and really dig ofxFlashCommunication, i did something like this a while back but very makeshift
yours looks much better.

sloopi,
thanks for the link to vektrix, i was not aware of it.
im currently digging around in gnash => http://www.gnu.org/software/gnash/
hopefully be able to pull out some of the functionality from there and save some time.

L.

[julapy]

hi all,

ofxFlash now supports mouse interaction complete with filtering mouse events down the parent / child chain. so like in flash, changing the mouseEnabled and mouseChildren properties determines which display objects receive mouse events.

here are two new example that demonstrate this functionality,
https://github.com/julapy/ofxFlash/tree/master/examples/ofxFlash-example-02
https://github.com/julapy/ofxFlash/tree/master/examples/ofxFlash-example-03

flash-mouse-event-model by julapy, on Flickr

enjoy!
L.

[julapy]

hi, quick update.

recently have been using ofxFlash for building UI elements for iphone and ipad apps.
have created some new examples of it running on iOS devices available on github.

https://github.com/julapy/ofxFlash/tree/master/examples

L.

[Alejandro]

Great! I’ll try to take a look on this week

[rob]

I really like this library - it offers great potential for more widespread use of OF. Hats off Julapy!

After a bit of playing around, I noticed a couple of little things that I wanted to tweek. I noticed that numChildren() of ofxFlashDisplayObjectContainer() wasn’t working - so that was a quick fix. I replaced it with this:

const int& ofxFlashDisplayObjectContainer :: numChildren ()
{
_numChildren = children.size();
return _numChildren;
}

Also I found it a bit difficult to use as I’m more used to having an empty timeline and attaching library items to the stage via their class linkage in actionscript. What I wanted was to do something like this:

var myArrow:Arrow = new Arrow();
this.addChild(myArrow);
sub[/sub]

I’m not sure if this functionality already exists in the library as I couldn’t really see a way of doing it. So I added some methods to ofxFlashLibrary and ofxFlashXFL to read in the node of the DOMDocument and retain them in the library. I could then attach new library instances from the library like this:

Arrow* myArrow = new Arrow();
stage->addChild( myArrow );

[sub]Where Arrow Class is:[/sub]

_class Arrow : public ofxFlashMovieClip{
public:
Arrow( ){
ofxFlashLibrary* library = ofxFlashLibrary :: getInstance();
ofxFlashXFLBuilder* builder = new ofxFlashXFLBuilder();

// “arrow_asset” is the linkage id I gave to a movieClip in the library
// note that it is just the symbol name and not the linkage class name
string path = library->getSymbol(“arrow_asset”);

builder->build( path, this );
this->update();

delete builder;
builder = NULL;
}
};
_

The methods I added to ofxFlashLibrary are:
void addSymbol ( string assetID, string assetPath );
string getSymbol ( string assetID );
bool hasSymbol ( string assetID );

I have forked the git repo with these changes and an example:
git@github.com:robertshearing/ofxFlash.git

Out of interest I did a quick performance test between a native swf and an OF app that used the same library items and found a 4000% performance improvement!

[julapy]

hi Rob,

i’ve only just read your post.
for some reason, i stopped receiving email notifications when new replies were made.

1. ive updated numChildren() method.
2. i complete agree with you on being able to create movie clip dynamically like in AS3. i’ll have a look through the changes you’ve made and merge it into ofxFlash.

thx,
Lukasz.

[julapy]

hi Rob,

ive made those updated that you recommended.
you can now create a movie clip dynamically using the linkage ID or Linkage Class Name as its now called.

ive created a new method inside ofxFlashLibrary for this,
ofxFlashMovieClip* createMovieClipWithLinkageClassName ( string linkageClassName, ofxFlashMovieClip *container = NULL );
https://github.com/julapy/ofxFlash/commit/c97322f5b5b10c6b181b0d3596bbabcc7549d117

if you don’t give it a container movieclip, it will create and return a new movie clip for you.
if you do, then it will populate the movie clip you give it with the content of the movie clip from the library.

so your Arrow class would now look like,

  
  
class Arrow : public ofxFlashMovieClip{  
public:  
   Arrow( ){  
      ofxFlashLibrary :: getInstance()->createMovieClipWithLinkageClassName( "LinkageClassName", this );  
   }  
};  
  

[ascorbin]

hi
i tried another way for flash-integration via berkelium (the chromium-engine) works very well, plays all swf-files fluid and you can communicate inside open frameworks per javascript.

-> http://forum.openframeworks.cc/t/ofxberkelium—a-webbrowser-inside-openframeworks/6318/0

greetings ascorbin

[julapy]

hi ascorbin,
thanks for posting that, look very useful.

i should point out that ofxFlash is mainly used for loading flash UI into OF.
its not designed to be a full flash player implementation, but i am trying to get as much in as possible.

the difference between loading in a swf and controlling it using javascript is that ofxFlash builds the entire flash file using OF core media types (ofImage, ofTexture, ofSoundPlayer etc) which allows you to control everything inside the flash file once loaded into OF.

ive put together a virtual keyboard example to demonstrate how ofxFlash can be used for building UI.
the source code was generously donated by http://www.lightwell.com.au/ from a project i worked with them on.

https://github.com/julapy/ofxFlash/tree/master/examples/ofxFlash-example-virtual-keyboard

L.

[jonbro]

Hey Julapy. This is awesome!

I have some specific needs for it, so you may or may not be getting pull requests from me in the future (extensions so that drawing can be done with less draw calls, ideally one).

[julapy]

ofxFlash github repo has moved to,
https://github.com/julapy/ofxFlashLite
please use ofxFlashLite from now on.