Flash to Cinder – Timed Event Loops

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.

Read More

Hey Flash Devs, Let’s Play With Cinder!

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

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

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.

Setting the swf Base Directory in HTML

Have you ever completed a flash project and started testing it online only to realize that the swf is looking for assets either in a different directory than the one you specified? Or that the folder that you have all your media stored is not in a relative directory like it was when working on it locally?

The solution that I mustered up in the past was to create a flashvar called something like “mediafolder” and put that in the embed code. From there, I would go back into my actionscript code and make sure all external media had the passed “mediafolder” variable appended to the beginning of the url for each external asset and then republish my swf.

This always worked well, so I usually plan for this, but my latest project didn’t have that built in. When it came to testing and we realized that the media folder was going to be in a different location than the base swf file and it was supposed to launch soon, it was time to see if there was another alternative to the usual solution. That’s when I discovered the “base” attribute in the swf object embed code.

The “base” attribute is actually an href attribute that specifies a base URL for all relative URLs on a page. Traditionally, you should be able to put it in the head of an html page and have all links on a page link relative to the string specified in the base attribute. For this it’s just specified for the swf, which picks it up when passed as a param and picks up any external asset from that folder by default instead of the folder that the actual swf is in.

Here’s a sample of the swfobject embed code:

 

With the example above, any asset that the main swf is trying to load relative to itself can now be placed in “../project/subfolder” without having to change any actionscript and republishing your swf. This is a tip that has saved me hours of work and would have saved me even more time had I discovered it in the past.

Loading External Across Domains in Flash

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:

  

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:




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.




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

Flash and the City 2010

Flash and the City marked the return of flash conferences to New York City and the first one that I’ve attended in 3 years. When Elad Elrom started talking about the conference last year and announced that the super early bird price was $99, it was hard not to buy my ticket right away. I’m glad I did because in the end, I definitely got more than my money’s worth. In addition to seeing some awesome presentations, I met some cool people and left inspired to get better at what I do as well as open my horizons.

FATC proved to be a bit more techy and geeky than FITC, but still a great conference to attend. Of course it was very flash oriented and there were a lot of Flex specific talks as well. In addition to the things I highlight below, there was a bunch of more inspirational talks that are a bit tougher to distill but hopefully there will be enough here to get people pumped enough for next year’s conference.

So here’s the lowdown:

Adobe

  • Some of the Adobe Flash platform evangelists went up and talked about the “We  Choice campaign”. It’s here if you haven’t seen it.
  • Talked a bit about some of the cool new things in CS5, I’m sure the same things that were mentioned at FITC.
  • Some of the cool highlights were the ability to export FXG files for use in Flash, Flashbuilder, and Flash Catalyst right from Illustrator or Fireworks.
  • The ability to go between programs a bit more seamlessly (right click an asset in flash and choose “Edit in Photoshop” and having it update as soon as you save your changes).
  • The ability to add and edit cue points for your videos right in flash as an alternative to embedding them in the video file or reading them in separately.
  • Device Central was pretty cool to simulate some of the functionality of a mobile phone for an app that you might create using AIR 2.0.
  • Talked a bit about some of the new AIR 2.0 features:
    • Multi-touch and gesture support
    • API to access raw microphone data
    • global error handling
    • support for native code integration
    • For the full list, read more on the Adobe Labs blog, http://labs.adobe.com/technologies/air2/

Litl

(http://www.litl.com/)

Evangelists form the Boston based company, Litl, were there to hype up their Home-based device and platform which was built on Linux and not only supports Flash, but promotes the use of flash to make applications for it. Instead of apps, the litl has what are called “channels” that are all flash based. It’s also supposed to be good as a set top box that you can connect to your TV. Kind of cool, but not sure how useful it is in the real world. If you have kids, it’s supposed to be very family-friendly. They were also there to announce the release their developer API, found here: SDKdeveloper.litl.com

Yogurt 3D

(http://www.yogurt3d.com/)
This was the first time that I ever heard of this 3D engine, but what it is is another 3D engine for flash built specifically for building 3D games. Some of the demos are pretty incredible. Definitely worth looking at and considering next time you have to build a 3D environment for use in flash. It supports a lot of the same 3d formats that Papervision3D and Away3D use, such as collada dae files, but seems to have really good performance and texture mapping capabilities.

Decrap your Application

RIA Radio host, Garth Braithwait’s talk was aimed at Flex developers with no or an underdeveloped eye for design.  He talked about basic principles (Contrast Repetition Alignment Proximity) and emphasized the idea that if your Flex app looks like a Flex app, then you’ve failed.

Touch me Baby

Lee Brimelow showed off the mult-touch and gesture API in AIR 2.0. He demonstrated that flash can detect as many touchpoints as the touch device can handle. With the help of 6 people, he was able to get 60 individual touch points on one device (a new 3M multitouch monitor worth $1600). He also talked about playing with many touch devices admitting that the iPod still has the most responsive touch screen. Whether he’ll stick with the iPhone as his primary smart phone is another question.

These are the newly supported gestures discussed: rotate, zoom, double-tap, press and tap, and pan. He noted that the built-in gestures kind of suck and that it’s usually better to build your own or use some of the libraries that some other people have already created (such as gestureworks).

He made the point that current sites (for the most part) should still work on touch devices because of the way they build 10.1 to dispatch the appropriate mouse events when touch events are dispatched by the device. Here’s a link of flash sites working on a touch device (no recoding necessary): http://theflashblog.com/?p=2027

Quick as a Flash

Grant Skinner went over ways to make your code more efficient and how to test your code effectively. It was a really good presentation and worth looking at for every Flash dev, especially since Flash is getting all this flack about it being a processor hog and the such. He stated that it’s now our job to give flash a good name by making our programs as efficient as possible. The slides from his talk are here: http://gskinner.com/talks/quickTO/. This sentiment was echoed throughout the conference and has made an impact on how I approach programming. It’s our responsibility to give Flash as good a name as possible if we want to continued programming for it in the future.

Hacking Robots for Fun and Profit

This was one of my favorite presentations. It was really just a case study presentation of how The Iona Group created a remote controlled rover game using Rovio Robots and Flash (as well as other technologies in between). Chad Udell Discussed the hardware used as well as some of the techniques in flash to make this project come to life. Very cool stuff. His slides and some more info are here: http://ionagroup.com/labs/2010/05/20/hacking-robots-for-fun-and-profit/

Devices for Flash Panel

Not too much new, but good to hear some experts in the community talk about the current state as well as the future state of flash on mobile devices. Again, there was an emphasis on making your programs as efficient as possible to help move flash on devices forward.

Some resources:

Space Invaders

Seb Lee-Delisle talked about motion capture in flash, how to build your own basic 3d engine, and showed off some fun papervision projects that he worked on with Plug-In Media including the Big and Small house and ZingZillas. Also showed how he created this Lunar Lander game at less than 5K (http://sebleedelisle.com/2009/04/lunar-lander-3d-in-5k/). A lot of his presentation echoed what he had talked about at the flashcodersNY meeting that he made an appearance at earlier in the week, but I was glad I attended both. Really inspiring work from a pretty down-to-earth guy using techniques that are not impossible to learn for the average flash dev.

Getting Git

Simeon Bateman talked about what Git is and why it’s so awesome. He mentioned progit.org as a great resource for learning Git. He had a lot of good info, so I’m hoping he put his slides online. This presentation made Git seem a bit less intimidating to use for newbies.

He mentioned the following tools as decent GUIs for Git:

Robotlegs in the Real World

Joel Hooks talked about what Robotlegs is, how to use it, and why it’s becoming so popular. Throughout the conference, everyone was talking about Robotlegs. I’ve used it and it IS awesome. His slides are at http://joelhooks.com/2010/05/18/slides-from-flash-and-the-city-presentation-on-robotlegs-as3/.

For newbies getting started, one of the main concepts to understand is Dependency Injection. Once you have that down and understand what MVC is you should be off and running relatively quickly.

In addition to seeing Joel do his thing, I scored a kick-ass Robotlegs Sticker and T-Shirt.

Gaia Flash Framework

Jesse Warden talked about the Gaia framework and how to use it in correlation to Robotlegs. He has a blog post about this topic here http://jessewarden.com/2010/05/how-to-use-robotlegs-on-top-of-gaia-part-deux.html. His talk was energetic and fun to watch. I didn’t take any notes, but now I’m interested enough in Gaia and realized that my next project would be a perfect opportunity to start using it.

The only thing I didn’t like about his presentation was how he was knocking how someone had inappropriately used the PureMVC framework on a seat selector project as he heard from one of his friends recently. Putting the pieces together, I think he was making fun of my code. I think I know which friend he was talking about, as it was the same guy that started working at Iomedia the week after I left. I got a little red in the face, but in the end I was kind of honored that anyone even knew about my work.

FDT Workshop

Alan Klement from Night Agency along with Bruno Fonzi from Powerflasher demonstrated some of the crazy cool new features in FDT4 in this last minute workshop. I have to say, I’m impressed and I can’t wait till it’s released and out there. I think it’s going to be very hard for companies not to spring to buy FDT for their flash devs. Hopefully they bring the price down a bit (tough I can’t complain about a free FDT Pure license just for attending FITC).

So that was FATC this year. Definitely different than what I was expecting, but well worth it. Can’t wait till next year, especially since the Flash world is changing so quickly now. Who knows what will be relevant a year from now.

Thoughts on RobotLegs

Recently, you may have read and heard a lot of people talking about Robotlegs. Well maybe you haven’t, but if you’re a dork like me, you probably have. And even dorkier of me, I find it actually really exciting and has changed how I approach programming.

For those of you who don’t know what Robotlegs is, it’s a micro-framework for Actionscript 3 whose structure is derived from PureMVC and based on the MVCS design pattern. MVCS is basically your standard MVC pattern with the S providing for a Service branch, which is the place to communicate with any external services or processes. It was created by Shaun Smith with Joel Hooks contributing and pushing it into the public. They both have some great information on their websites and have been really open to the community in answering questions and helping other developers out. Like many open source projects nowadays, this project is on GitHub making it free to download and fork and contribute to if you want.

A few months ago, I had a post about my experience with PureMVC, which really actually changed the way I program for the better. Then I heard about RobotLegs from a my fellow Flash developer Justin Emter who started experimenting with it. From there, I heard them talking about it on the InsideRIA and The Flex Show podcasts, at FlashCodersNY meetings, and all over twitter. So there were many opportunities to pick it up. Since I heard that it was based on PureMVC, I figured that I had a good basis to get started and run with it.

Similarities to PureMVC

  • The idea of a main gateway to set everything up and get it started. In Robotlegs, it’s called the Context. In PureMVC, the Facade.
  • The role of the Mediator as the class that handles all incoming framework events that its view components need to be aware of  and outgoing view component events that the framework needs to be aware of.
  • The idea of mapping events to commands, sort of. In PureMVC, the unique “notification” is really what is mapped to a command from other framework pieces, while Robotlegs use flash’s build-in events and custom events that can be mapped to commands. Robotlegs is also expandable enough that you can also use AS3 Signals.
  • The model branch has classes to store your applications data and states.
  • The controller branch is a repository of your applications commands.

Differences

  • Robotlegs is smaller (file size wise) and requires fewer files for the most basic project making it ideal for projects of any size.
  • Because of dependency injection and the use of the native event system, Robotlegs makes it much quicker and easier to set up your projects.
  • Robotlegs uses dependency injection so that there is less typing when creating and initializing your main framework classes and automates the process a lot more.
  • Robotlegs doesn’t advise you to create value objects for your models, not that it can’t be done. But for smaller projects, it’s perfectly fine to keep your variables in the model. I prefer to do this when possible, just so that there is one less step between the framework object that needs the data and where the data itself is being stored.

Dependency Injection

Dependency injection is partly what makes Robotlegs so quick and easy to build out projects, but was a new concept to me. Dependency injection, as Wikipedia explains it, “is a technique for supplying an external dependency (i.e. a reference) to a software component – that is, indicating to a part of a program which other parts it can use.” This means that class reference that you inject into a class must exist to reference it, otherwise you’ll get an error. To inject a dependency, the [Inject] metatag is used. The unfortunate thing about this, is that the Flash IDE compiler doesn’t support that, so you have to use the workaround found in Helmut Granda’s blog post. It’s not hard, it just involves a bit more typing up front.

To get started, here are some additional resources: