Flash to Cinder – Timed Event Loops

September 2, 2012

This is the first tutorial in a series designed to help Flash developers transfer their skills to the C++ creative coding framework Cinder. I’ll provide links to sample code at the end of the post. There’s a lot to learn, so lets get started.

Timing events to happen in a repeating loop is a common technique used in games and applications. It’s commonly used in games when for instance, you want a missile to attack you’re hero every 2 seconds or in an application when you want to remind the user where to click if they haven’t touched anything in a few minutes. I recently used a timed event loop for an installation that required an image transition every 30 seconds.

Hey Flash Devs, Let’s Play With Cinder!

August 22, 2012

flinder

I’m about to start putting together a series of short tutorials dedicated to helping Flash devs get up to speed with using Cinder. Since there seems to be a wave of Flash developers making this move, I wanted to share some useful bits of code that are a result of research that I’ve done myself and put together into something that someone else might find useful. Cinder can be an intimidating environment to get going with, especially if you’ve never touched C++ at all before (as was my experience). My hope is to try and take some of the intimidation out of the process and maybe even save some of you some time so that you can go ahead and start using those flash skills to make some cool shit in Cinder too.

If anyone has requests for things you’d like to know how to do with Cinder, let me know. I hope to put one of these out every couple of weeks. The first one should be out shortly.

SWC File as Embedded Runtime Asset Library

March 20, 2012

This post is really for myself so that I have somewhere that I can look this up again. Maybe it’ll be helpful to someone else in to the future too.

When working in flash (which I find myself doing less and less now a days), one of my favorite ways to work with assets is through the use of swc files. That’s what they’re there for anyways right? Well what’s not so obvious is how to use swc files to load assets at runtime without using the import command. There are times that it’s useful to refer to an asset at runtime by name that you may or may not use, so you don’t want to explicitly go through the hassle of writing the lines to embed it. This often happens with sounds or items that are easier to loop through to use, such as when using a map of the US. It’s much easier to write a loop vs writing 51 embed statements (yes, I know that there are a million different ways of doing this without writing all of that).

When you do something like going through a loop and saying getDefinitionByName(“state_”+i) to grab a library item that resides in the swc asset file, there are no compiletime errors because Flash Builder can find that swc in the library. But once it runs, the debugger will yell at you. To fix this, you need to embed the swc file at compile time. In Flash Builder, this is done in the Actionscript Compiler settings and all you have to do is add this line (replacing it with the path to your asset swc file obviously)

-include-libraries /assets/assets.swc

Now when you run your swf, it’ll work like a charm and you’ll have those assets available without having to import them in the head of your class file. That being said, be sure to only do this when it makes sense. This embeds the swc file into your swf. So if there are assets in the library that are outdated and set to export at compile time, they’ll be included adding extra senseless bloat. As I write this, I’m using this method for a prototype where bloat doesn’t really matter, but just be mindful of that.

2011 Work in Review

December 21, 2011

2011 was an interesting year for me professionally. It was my first one where I was employed for all 12 months by The Barbarian Group. There was minimal freelance work and the stuff that I did do was chosen very carefully. This year was devoted to learning a lot of new things. The reasons for that are:

  1. I am primarily a flash developer and there are fewer projects for me to work on
  2. There are so many other exciting things to also learn and I’d hate to pidgeonhole myself into only being able to work on one type of project
  3. Mobile has been exploding and I wanted a piece of it
  4. Learning is funsies. For real. I like to learn knew things and the more I learn, the more I want to learn and the better I get at the things I already know

Let me just explain real quick about the first point. I just want to put it out there that I still love flash. I think that it’s still a viable platform for many things, unfortunately it’s a matter of fact that there’s fewer and fewer projects that require it. That being said, I’m not bitter about it. There’s so many other things that can be done that it just doesn’t matter if you were a flash dev, unless you think it does. I’ve started learning so many other things that have built on my flash knowledge that I’m not really worried that it was a waste of the previous years that I spent using it.

Here’s a summary of the different kind of work I’ve done throughout 2011. Before I continue, I just want to acknowledge all of the awesome people that made a lot of these projects possible and helped me learn a lot of what I learned. TBG has some fine ass developers, designers, producers, strategies, UX people, etc, etc, etc.

At The Barbarian Group, the first few months of the year was spent concentrating on developing a flash app for Kashi, dubbed SevenWhole Grains on a Mission. It was a nice little project that had some fun after effects video transitions and incorporated swfaddress significantly. As a warning, the current version of the project might not work as well as it once did since the site was handed over to another company. It still looks pretty though.
Link: http://www.kashi.com/meet_us/seven_whole_grains
Blog post: http://barbariangroup.com/posts/7827-kashi_seven_whole_grains_on_a_mission

In the spring and early summer decided to take a crack at learning android development and  created my first android app, Gastrodamus. It was an internal project for TBG whose main purpose is to find the nearest food truck in your city based on a truck’s tweets. There is also an iPhone version that this based off of. It was a fun little project and I learned a ton. The Java syntax and ways of doing things helped a lot with some of the processing work I did later on in the year. I’ll admit that it’s not perfect, but I hope to go in and do an update in 2012.
Link: http://gastrodam.us
Blog post: http://barbariangroup.com/posts/8856-gastrodamus_for_android

Throughout the year, I worked on a website for my mom. It’s a wordpress site that was designed and developed by myself in addition to designing her logo. I’ll admit, I haven’t done interface or logo design in a long time, so it was a bit intimidating. It was fun, but not where I want to spend most of my time. Same thing goes for developing front-end and wordpress sites. Actually, the html/css stuff was fine, it’s more just the overall process of building a wordpress site that’s not my cup o’ tea. But I’m glad I was able to help my mom out with her new business.
Link: http://www.ihealthcoach.net/

Early summer included some work for an episode of The GE Show that The Barbarian Group put together throughout the past 2 years. I was psyched to be included in the making of one of these, since they always turn out so awesome. I got to work on a flash-based map and online what-your-parents-shagged-to poster that went with it. This was a nice little piece that included the challenge of dealing with a lot of data without the use of a database what would also load quickly. Hard coded massive arrays was the answer.
Link: http:www.ge.com/thegeshow/visions-of-health/#ch3
Blog post: http://barbariangroup.com/posts/9085-the_ge_show_episode_7_visions_of_health

In late summer right before fashion week in New York, a few weeks were spent working on a fun installation for the Hudson Hotel. It was a flash based installation that was projected on 12 adjacent walls whose content was driven via a tumblr blog.
Blog post: http://barbariangroup.com/posts/9075-fashion_week_at_the_hudson_hotel

During some of my downtime, I helped put together a fun little game based on our IT department at TBG. It was only about a week or two worth of dev time and was put together without any sort of framework. It was old-school style of flash programming.
Link: http://itherogame.com/

In the more recent months I’ve spent a good amount of time working on processing sketches and learning some fundamental creative coding techniques. This is where I plan on spending a lot of my time next year. I put together tumblr blog where I post a lot of stills from my sketches along with any other drawings or anything else I come up with there, not strictly processing stuff.
Link: http://thegrego.tumblr.com/

In my processing learning, I also came up with an idea to learn how spider webs were made. I did a processing version, but then realized that to do what I really wanted to do (which is still in my head and on my todo list), I’d need to do a version in javascript. So I spent some time learning and playing with some javascript canvas tutorials and examples so that I can get a version of my webs online.
Link: http://www.gregkepler.com/work/js/spiderwebs/
Blog post: http://www.thegrego.com/2011/12/06/charlies-web/

Also, in my processing journey, I felt the need to explore some of my genealogy and put together the first of what will hopefully be a series of genealogy-based projects. As I learn to deal with a large amount of data and some beter visualization techniques, I have some high hopes that this will be a really cool, really expansive project in the future.
link: http://gregkepler.com/processing/family_lifespan/
blog post: http://www.thegrego.com/2011/09/25/kepler-family-life-spans/

I also spent some time learning arduino and integrating it into processing. I hope to have some progress on the project that I’m working on in the next month or two.

Stay tuned for my hopes and goals for 2012.

Loading External Across Domains in Flash

September 27, 2010

I feel like I’ve run into this issue so many times and either fixed it by accident or came up with some other solution in order to do the same thing. This time I cam to a conclusion that I understand and hopefully other people can use.

The Problem:

You create an flash app for the web which loads in data from a variety of other external sites, such as thumbnails from an aggregated feed using a 3rd party API and it works swimmingly while you’re testing locally. As soon as you put it on a remote server, you get a Flash Player security error, perhaps something like:

SecurityError: Error #2122: Security sandbox violation: LoaderInfo.content:http://staging.site.com/project/Main.swf cannot access http://www.website.com/image.jpg. A policy file is required, but the checkPolicyFile flag was not set when this media was loaded.
    at flash.display::LoaderInfo/get content()
    at com.gregkepler.testProject.imageloader::ImageLoader/onImageLoad()

Depending on if you’re ready for this error or not, you may not get a popup and can fail silently.

Why This Happens:

This is happening because you don’t have your policy files set up on your server and your swf is “illegally” trying to access data from another domain. This is actually a good thing since it stops potentially dangerous files from doing bad shit to your project/server/network/computer. But you want to ALLOW access to these different domains since that’s a big part of your project, right? The solutions are actually very easy to implement, just sometimes a pain in the ass to figure out.

The Solution(s):

Depending on the project and how wide-spread and prominent it will be on your website and if other projects will need the same sort of access on your server, you may want to allow the entire domain access to the external domains or just one individual project.

For an entire domain

All you have to do is place a crossdomain.xml file is the root of the server where the project will reside. The crossdomain file will look similar to this:

<cross-domain-policy>  
<allow-access-from domain="*" />
</cross-domain-policy>

Replace the * with a specific domain if you don’t want to allow access to all sites. This works because the flash player automatically looks for a crossdomain.xml file when it is asked to load any file in a different domain. It checks to see if it should allow the file based on which domains are specified in the file. If it doesn’t see this file or a domain isn’t listed, or * isn’t specified, it will throw an error and won’t allow the file to be loaded into your app.

For a sub-domain

Sometimes the above solution isn’t appropriate, especially for a website that can potentially house many different projects that have different rules about what is can and should allow. This solution involves a few extra steps, but is still pretty easy.


Step 1:
You still need to add a crossdomain.xml file to the root of your server, but instead of allowing all domains to be accessed, you want to tell it that it should allow crossdomain policy files to be set elsewhere on the server. This is what the crossdomain.xml file would look like instead:

<cross-domain-policy>
<site-control permitted-cross-domain-policies="all" />
</cross-domain-policy>



Step 2:
Create a crossdomain file somewhere else on the server that makes sense, such as where your project exists. This will look a lot more like the original file. In fact it’s exactly the same, unless you want to change the domains that you want to allow for this specific project.

<cross-domain-policy>
<allow-access-from domain="*" />
</cross-domain-policy>

Make note as to where you are putting this file, since you will be specifying this actual xml file as the one to look at for cross domain access (ie: http://staging.site.com/project/crossdomain.xml).


Step 3:
The next 2 steps involve actually adding some as3 code and republishing.
Specify the policy file that should be loaded instead of the one in the root. This should be done before trying to actually load anything. I normally place in the document class as one of the first things that should be done.

Security.loadPolicyFile('http://staging.site.com/project/crossdomain.xml');

Don’t forget to import flash.system.Security.


Step 4:
Go to where you are trying to load the external data and create a LoaderContext instance.

var context: LoaderContext = new LoaderContext();
context.checkPolicyFile = true;

As noted from adobe’s website, what checkPolicyFile does is specifies whether a cross-domain policy file should be loaded from the loaded object’s server before beginning to load the object itself.

Then you will pass that context as an argument when you go to actually load the file, as seen below.

imgLoader = new Loader();
iimgLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onImageLoad, false, 0, true);
imgLoader.load(new URLRequest(thumbUrl), context);


This article got me on the right foot: http://stunnedgrowth.livejournal.com/4540.html
More about LoaderContext: LoaderContext