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.

No Comments »

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

3 Comments »

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:

• Robotlegs Website
• Robotlegs on GitHub
• Robotlegs Best Practices Documentation
• Explanation of Dependency Injection as it relates to all languages that support it

No Comments »

Sometimes, you need to use a dynamic textfield in flash where it’s necessary or more convenient to create the textfield completely dynamically (not placed on the stage in a movieclip in the library). You style your text nicely and set up everything so that it looks just right and then when you go to animate it, the animation looks very rigid and jaggy. This issue is most likely the result of the gridFitType property.

GridFitType is a textfield property that controls how a textfield’s anti-aliased pixels appear within the the stage’s pixel grid. When the textfield is resizing, it’s pixels might be forced out of the flash stage’s pixel grid, which in turn may force a word to move over to the next pixel, which in turn can force it down to the next line if it’s close to the edge. It also makes it so that when animating, each pixel rounds out its position to the next full pixel instead of letting it smoothly animate between pixels, creating the jagged looking motion

The solution to this jagged pixel animation issue is to change the gridFitType property to either NONE or SUBPIXEL. When the textfield is created dynamically, the default gridPixelType is set to PIXEL, while when created through the IDE it’s set to NONE. Below is an explanation of the three options below according to the Adobe AS3 livedocs here.

The 3 available options are:

• NONE- This specifies no grid fitting and provides for the smoothest animation. This is the default when a new textfield is placed on the stage through the IDE.
• PIXEL- This specifies that strong horizontal and vertical lines are fit to the pixel grid. This setting works only for left-aligned text fields. This setting generally provides the best legibility for left-aligned text. This is the default for dynamically created text fields.
• SUBPIXEL – This specifies that strong horizontal and vertical lines are fit to the subpixel grid on an LCD monitor. The subpixel setting is generally good for right-aligned and center-aligned dynamic text, and it is sometimes a useful trade-off for animation versus text quality.

In order to take advantage of the GridFitType property, the textfield’s anti-alias property is set to ADVANCED. Otherwise, it will use the default gridFitType property.

The examples below show how the default textfield plus the 3 types affect the text when it’s being resized. As you can see, setting it to NONE is the smoothest, while PIXEL is the most readable. Setting it to SUBPIXEL is best when you need something more readable than none and smoother than PIXEL.

No Comments »

Recently, I used the Pure MVC framework for the first time on a project and it opened my mind to the right ways, wrong ways, and new ways to structure a project in Flash. Before I get into the pros and cons, I want want to first warn any of you that are new to using frameworks in general that there is some studying involved in order to fully wrap your mind around how this thing works. But it’s totally worth it.

Before you jump in, it’ll help if you are familiar with OOP programming basics and have an understanding of what the MVC design pattern is. When I started, I was already quite familiar with MVC pattern and decided that having a framework that laid out some rules for my programming may help in keeping the project consistent. In order for me to completely grasp this new way of thinking, I first took a look at the conceptual diagram and quickly decided that it made absolutely no sense to me. Then I read through the Framework Overview and the Best Practices PDFs multiple times and it started to finally click. The guys who put together this framework did a really good job of providing lots of examples and documentation to help you though this difficult time, so search through and give it a good honest go around before throwing you hands in the air.

After using it for a few months, here’s a summary of the advantages and disadvantages.

Pros

• Provides structure and “rules” for programming your project
• Used among multiples languages, so your one leg up if you want to use it in C#, Java, or PHP
• Gives you a better understanding of OOP concepts in general and why they’re so useful
• Makes it easy to separate your project into multiples pieces which may help if there are multiple people working on a project
• Makes it easy to remove or turn off features

Cons

• Forces you make a lot of classes
• Adds to the compile time, so it’s probably not a good idea to use with small projects
• When adding new functionality, it may take a little more time to implement if it’s going through the entire framework, though it’s more likely that it will be less buggy

Summary

Pure MVC was great to learn and helped me more concretely understand some OOP concepts that I was a little spotty on. I’m sure that I will use it again, but only for larger projects where I need a  shell that ties everything together and has a lot of different “modes”. For a smaller project, I’m going to try out Robotlegs, which seems to have some of the same core concepts in a tighter package. Either way, I know that all of my future projects will have some solid structure and some of my own rules for developing it.

Check back soon to see how this Pure MVC-based project turned out.

No Comments »

I have a new flash project up that I’ve been working on for a few months on and off.

http://www.gregkepler.com/oscars09/

This is an Oscars ballot site that was set up for my family and friends. I used a bit of practical Papervision3D for the ballot selection and Aftereffects for the transitions. It was a fun project, but now it’s time to move on to the next project, the personal portfolio site redesign.

No Comments »

In as3, the introduction to of the display list has made the stop() method a little less straightforward. Traditionally, when you used stop() on the timeline of a movieclip, it would do just that, stop the playhead from playing past where that script is. To be fare, this does still work, but only if you place the movieclip on the timeline manually (not via code).

Now to get a movieclip to stop on the first frame when added to the display list via the addChild() method, you must be sure to add stop() once it’s added. Also, note that you cannot call any other timeline based methods such as gotoAndPlay() and gotoAndStop() to a dynamically added movieclip unless it’s on the display list either.

This is specifically useful when you are using a movieclip that has a timeline based rollover and rollout animation as a button.

No Comments »

To add a library item to a display object using as3, here is the basic method:

var dynamicClass:Class = getDefinitionByName("libraryName") as Class;
var mcFromLibrary:MovieClip = new dynamicClass();
addChild(mcFromLibrary);

dynamicClass is a variable typed as a Class returns a reference to the class object of the class specified by the name parameter.

“libraryName” is the the name given to the MovieClip’s Class in the Symbol Properties options in the flash library.

Don’t forget to import get the definitionByName class using

import flash.utils.getDefinitionByName;

This is especially useful when looping through an array to attach multiple instances of the same movieclip. Most recently I used it to pass the reference of a loader in the library since I wanted to use the same class to potentially attach different loaders depending on what was being loaded where and when in the program.

No Comments »