Flash, XNA and efficiency…

So today I had to work on some graphics for an XNA project we are are doing. Its a small project and some of the animations I had wanted to do would be way easier to create in Flash CS4 rather than going through the math equations to make them work in XNA. So I started the endeavor of adding Flash to an XNA programming project.

First off, XNA version 4 does not have a library suited to Flash (due out in version 5 in Fall!). So I had to find a way to do it myself. I found a few SWF implementations but they were rather lengthy to add and were outside the scope of the project. I didn’t want to spend 9/10′s of the time alotted just to implement swf’s, so I did a quick workaround.

First off, I made my Flash animations in CS4. Then I went ahead and found this nifty tool… Magic SWF2Gif. I imported my freshly made SWF file chose the available file formats and it output all my animation into static images frame by frame. Now I have a folder full of images but I would like them to be in a different file format so now its time to fire up Photoshop. Using the actions panel I setup a  little automation script to ‘save as’ the files and make them format as jpg and the quality I want. Save the script and batch process the folder and now the 250 individual frame by frame image files are all converted to the format I want to work with. Finally, I just import my images into my XNA project and setup code to run them as a sequence and now we have Flash into XNA, the quick and dirty method.

Now some pitfalls I found with Magic SWF2GIF is that you cant use nested movie clips within your animation or else SWF2GIF will get caught in the loops and export thousands of images. We don’t want that, so you have to manually loop any movie clip animation and it is best to animate within the main timeline itself. Also it is a bit fun to play with the frame rate settings for quick speed changes and to cut down the number of images output.

Now I COULD have spent hours implementing a real SWF into XNA, making spritesheets and just having XNA do the animation itself, however, what I needed was so small and so easy to make in Flash that this shaved a tremendous amount of time off of my development allowing me to focus on other aspects of the project = efficiency.

MooTools, CSS and the cool things that are possible! MOO :)

MooTools has been around for quite some time now. And there are tons of nifty things you can do with it as well as tons of things other people have done with it that are free for download. If you take a look at the home page of the Apt 3 Studios website there are a few MooTools things happening. So lets Moo it up for a bit

First is the drop down navigation. The smooth animated drop down is all MooTools. It is a highly modified version of UvumiTools. It gives you all the basic framework of a dropdown menu, all you have to do is do some customization of it with graphics and how you want it displayed.

Second is the content slider at the top of the page. This really cool content and image slider is a highly customized version of Slide it Moo. This gives you everything you need to creat simple and complex slide animations with tons of expandability.

Now here is one issue that you have to watch out for with the MooTools javascript library. That home page also uses some jQuery operations on it as well, and unless you setup your scripting correctly MooTools and jQuery will not play nice together. So to make the two javascript libraries friends you have to wrap all your jQuery javascript code within the jQuery.noConflict(); option as well as renaming the standard ($) object name that jQuery and MooTools are both trying to modify.

You see in order to work, jQuery and MooTools creates an object (in this case ‘$’ is usually what most of the scripts use) and then it uses its javascript functions to then modify that object while the code is running.  So when MooTools creates the ‘$’ object, jQuery wants to overwrite the ‘$’ in the running memory. The way around this is to rename the standard object and call to that object throughout the ENTIRE code for one of the scripts and then wrap that code in the jQuery.noConflict function. That way each javascript library has its own object to play with and instead of teaching the two to learn how to share, they each get their own shiny new object.

Now you can utilize functions of two libraries instead of one. Keep in mind this method is more resource intensive and it is always better to just use one library instead of two. However, its nice to be able to use both if you really want to make a web page ‘pop’.

Apt 3 Studios Blog

Hello, my name is Nick Bagnoli, I am the founder of Apt 3 Studios. Her I will be giving some tips and tricks that we use in everyday web programming to make life easier. As well as showcase emerging technologies in the web/development field. Hope you have great day and happy programming!