Taming the shape tween

Shape tweening is for any coders who knows flash, as well as any confirmed flash artist, very handy and if you are not a full on artist who knows his animation book by heart it can help you create a simple logo animation in a jiffy.

But sometimes the gods of Flash Author work in mysterious ways and shape tweening can become a nightmare, here's a tip to sail your way on calmer waters.

We are going to animate a simple isometric cube extruded from the top.
so we go from this on the left to that on the right

Those are 3 shapes, each on one layer, with at each end a key frame, and of course in between, a shape tween. (I wanted my first frame to be only the top square so the two side shapes only appear at frame 2)

Now let's see how it turned out

Obviously not so good, you can see that flash tried to resolve the shape in-between in a rather bizarre way. This is actually very logical, since Flash looks for the shortest path for every point in the first frame to the last, but I won't explain this further now. You can see however that the right side shape turned out pretty well.

Now to remedy that, you could draw your shape on every frame, this is long, tedious and not very future-proof as you'll have to redraw everything for the slightest change in frame number.
The other solution is to tell Flash what points are actually the same in the start and end shapes,
to do that, just go in Modify > Shape > Add Shape Hint (cmd+shit+H on mac).
This will pop a marker on your shape that pins and labels a point that Flash will recognize through the tweening process.

place your four markers on the corners of your shape (for any other shape place them where relevant, you can even place them inside the shape if necessary) remember the label on each one to replace them in the right order later.

 

 Now go to the last key frame, the markers should be waiting for you at the gravity center of your shape, place them one by one in their respective corner

 


That's it! Flash now knows exactly what to do with each point and will produce a nice tween just for you!

Lists

So I was facing a dilema regarding containers I'd use in my app.
HaXe standard library provides a basic set of containers suitable for any basic use : you have Array, List and Hash. As you know haXe is a cross-targetting language and compiler, meaning that what you code can be compiled to a wide variety of plateforms, sometimes by generating code for another compiler (like g++ for C++ or Xcode for ObjC) to compile. But you should also know that what works well on C++ doesn't work as well on Flash or Php, each plateform has it's particularities.

So what does that mean for containers.
Well the most explicit example is the Flash Array. Native Flash Arrays are in fact dynamic objects in wich each index is a property. That means accessing an index of Array in Flash is slower than calculating the position of the octets in memory that represents your data like you'll do in C.
When you create an Array in haXe and target Flash, it create a Native Flash Array, so try to avoid that in critical routines.
Take the haXe List container now. It's a basic chained list, so each element you put in the list is put in an listElem, a small object that has a pointer to you element and another one to the next listElem on the list. But in List, listElems are Arrays, wich is great for almost every haXe target except Flash.
A solution to List is FastList, haXe FastList is a chained-list implementation using typed objects for listElems, therefor it's optimised for Flash, but not at all optimised for other plateforms where array is the best implementation for listElems.

A wild library appears !
ListTools is an haXe library that provides a new List implementation : SugarList.
SugarList is a compile-time resolved type that binds either to an Array based List or a kind of FastList depending of your target, that's the beauty of haXe !

Unfortunatly this library was not maintained to the latest haXe compiler version.

I could make the few changes requested for this update but right now I'm focused in getting something working, so I'll drop the flash target until I do make those changes.

Facebook OpenGraph trial

I put my project asside last night to test the new Facebook functionalities.
If you didn't followed Facebook actuality or don't care, this thursday in Palo Alto Mark Zuckerberg presented Timeline during the f8 conference.
Timeline is the new profile that will be enabled for Facebook users in the next 3 weeks.
One of the most interesting stuff that will appear with Timeline is the ability for applications to track actions of the user and put them on their profile. It's the evolution of the controversed 'like' button. Now you cannot only 'like' something you can interact with something, for example you can tag the fact that you read a book, listen a song or watch a film.
I'll not discuss the ethic of this new feature, I'm not a big Facebook fan, but technically it's interesting as you can create meaningfull publications for the users by connecting nodes of the Facebook social graph, and more important, create new nodes.

One other very interesting stuff Facebook added recently is, thanks to a partnership with cloud deployment plateform Heroku, the ability for a developer to quickly go live at no cost by signing in to a Heroku account and getting a free server either running PHP, Ruby, Python or Node.js with a 5Mo database. Heroku uses git to retreive and post your application so you get both version control and automated publishing.
Thanks to this you're up and running in 5 minutes and you can focus on your code, really neat.

If you're interested in how to create such application, I'll tell here how I get into my first OpenGraph app called codeTracker, that will allow users to tell on their profile how much time they spent coding and what they are coding.

A Mermaid called Better

From the basic concept to the technical implementation, I'm always tempted by this Mermaid called Better.
You can see three examples on the previous bills, at concept phase I wander if I could extend my first and fairly good idea to a better, widder project.
While reviewing the technologies in my possesion I spend a lot of time trying to get to some technical specificity that won't even be relevant.
And as I think on my model I spend ages trying to fit a square in a cricle, juste because a clean inheritence tree is theoritically better.

In my work at the games company, we have this little phrase on the wall over the project followup board that says "Done is better than perfect". It means that, following the rule of 80/20, you'll take 20 minutes to get a 80% satisfying solution to your problem wich is surely enought, but 80 minutes to reach the other 20% at the expense of many other problems needing a solution.

You'd probably put this maxime somewhere at your workplace, or maybe a ceiling cat ;P

Know your subject - pushing the model further

As I go deeper into my model, it seems that I don't know a lot of things about solfege, for instance, I never wandered if the G key represented an octave in particular ; when you read a score you focus on understanding if this little dot is a A or a B, the actual height of the note comes naturally when you play.
In fact it does, a quick browse to wikipedia, tells me that the G key represents the G note just below the A 440 Hz wich is the common reference frequency in western countries.
At the time I write this bill I already had the chance to talk about it with my singing teacher who has a great experience in music, it appears that at some point in the history of solfege, keys were used to determine wich instrument the score is intended to. From the G placed on the bottom line telling the score is for french violin to the F on the top line reserved to very low tones of basson.

The important thing here is that you cannot see the whole implications of your design with only a partial knowledge of your subject, even if it seems you know everything you need, you could significantly improve the scope of your reflexion throught some researches.

Setting up the model

Now that I know the basics of NME, let's get to work !

For my application I will need a score modelisation, I recall my first draft two years ago in as3, it wasn't as powerfull as I wanted, I'll try to do better this time.

I take a moment to imagine the internal representation of my score, I see a key, notes appearing randomly, from here it seems simple, maybe too simple, the score as I see it is too close to the first need of my applicaiton : putting random notes as it goes. If I were to show an whole score this won't stand.
I get away from my computer and begin to think how a score would be modeled in any other music software.
On a score we have two axis, one is time, sa time goes we increment a pointer to read the next symbols.
Notes are not the only symbols we encountre on a score so maybe it would be usefull to keep the possibility to represent other stuff like wait times.
On the other axis we have the height of the note, but keep in mind that notes may not be the only thing to represent.
Now I have plenty of ideas and thoughts are hard to hold, I begin to lose faith in my capacity to concentrate. It's time to move on and start implementing.
At this point the classical sheme for me is :
- create 3-4 classes and define their inheritence
- start defining attributes for the "entry point" class
- think these attributes could be part of the more generic class, create a class, redefine inheritence
- start implementing constructor of "entry point" class, need a super constructor, define every constructor in the parenthood
- think this one top level class is silly and serve no purpose, delete it, redefine inheritence subclass and constructor
- initialise attributes, if they are custom types create the constructor of those classes, go to point 4 then 2 then 3 then 4 again then 5
- at this point the model is pretty complex, no function implemenation except for some getter/setters, and I hit some design weirdness like a CRT
note : If you come across something like a CRT and you didn't intended to from the begining, you're probably overthinking your model
- think the model is too complex, see a brighter one, delete 3/4 of your classes, restart at point 1

Future me, if you've evolved from this and are able to think straight in those early moments of a project, I'm glad you did and I just want you to remember how long it took you to figure out this simple design.

first NME tests

With my environment ready I'll have to test to see if everything is operating by the book.

Runing the first samples I figured out that basic features are quite usable, you can put texts, draw shapes and lines and import png files, all with a perfectly mimiced flash API and good results on flash and win/CPP targets.

This is most engaging, at least the core concept is possible to make with these tools.

But I'm a little worried about my assets, I've make three simple assets with Inkscape and now I have svg files, including vector graphics in my project would be great as I probably wont need the same resolution for web, native and phone targets. I haven't found any samples using svg so it's maybe not implemented, the lack of results on Google confirms my suspicions. From a reading on the haXe mailing list I learn that a NME based Library called gm2d has svg import, let's install and see.

A quick test is non conclusive on the ability of gm2d to support svg, I think it's my doing, I probably don't get all the subtilities ; but something else catch my attention, gm2d is able to import swf files and use them in CPP projects ! This is great, I could use this for a lot of other projects, just not this one, but it requires some testing from work, there I will be able to produce different swf and see how gm2d supports them.

For now I just feel uncomfortable with gm2d, a quick look in the sources shows me a lot of nme's bindings to the flash API are rewritten so that could mean maybe less functionalities than NME, different bug database, and from the samples I see it's a very intrusive library.

I decide that it's to much to take and svg isn't worth it. I'll just keep with NME and maybe try gm2d another time.