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:

• Scott Janousek (leader in flash technology on mobile devices) (http://flashmobile.scottjanousek.com/)
• Mobile Monday community group in NYC (http://mobilemonday-ny.com/)
• Flash mobile blog (http://www.flashmobileblog.com/)

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:

• eGit (Eclipse plugin)
• Smart Git (good for designers)
• ToirtoiseGit (for people used to tortoise SVN)

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.

No 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 »