Renaun Erickson

Upcoming Game Conferences I’ll be at

With the shift of my focus on Flash’s gaming focus it means I get to attend game conferences. Adobe will have a presence at GDC and Flash Game Summit as well as other events through the year. I will be in San Francisco for both Flash Game Summit and GDC.

If you haven’t taken the time to come up to speed on Flash Player’s current useful gaming features and future features check out the stuff below.

Stage3D Desktop (Currently Available)
Stage3D Mobile (Coming Soon)
Epic Unreal demo running in browser through Flash Player
(Flash Player 11.2 Beta) Mouse Lock, Right, & Middle Click
Relaxing the drivers of GPU acceleration feature from 2009 to 2008 (maybe more in future releases)

There will be more information coming out over time, Flash Game Summit and GDC are a great place to come see what Adobe is doing. If you are a game developer and attending one of the conference be sure to come up to me and say hi.

An Approach to setting wmode for Stage3D project in Flash Builder

There are a lot of posts on how to configure projects to get up and running with Stage3D. With Flash Builder 4.6 and Flex 4.6 SDK some of the steps are not needed, like getting a different playerglobal.swc and setting the -swf-version=13. But you still need to set the wmode="direct" in the index.template.html for Stage3D content to run.

Reading a bunch of posts some people just change this by hand for each project. Others post about how to change the index.template.html in the SDK templates folder. A drawback with this last approach is then all your projects will have wmode="direct" turned on, which is not necessarily bad but could cause issues in some cases.

My approach is a middle ground, I add a new template file to the templates that has the wmode="direct" enabled. Then you have the option to use the wmode="direct" by just changing your run configuration to point to this new template html file. Which I call direct.template.html and it comes out as direct.html in the bin-debug folder along side the AppName.html file. The drawback here is if you have projects that have multiple applications it will only copy over this second template for the default application. For this specific drawback you can just copy the direct.template.html over index.template.html (since direct.template.html will be in the project) and then have all them set to direct. This still gives you control over what you project should run at but not go looking for how to modify the index.template.html for each new project. Read on to see the steps I take to setup this up.

View the whole post »

The Gaming Side of Renaun

I love games. Both PC and Board/Card games. I loved exploring different interests in college from computers, archeology, and music. Through all those years and up to now gaming has always been apart of me. Great memories around gaming shaped me up to day. Like having a paper route when I was 12, just to go buy 2 Nintendo games each month. Or family reunions of playing spoons and watching my 70 yr old great-grandma leap over the table to get to a spoon. Pursuing computers and programming was driven largely because of my interest in games.

The first AIR mobile application, nearly 2 years ago, I built for iOS was a game. It was so much fun using my skill set to built the application, it reminded me of the days when I was first learning how to program and how fun it is. The app is called Raining Blocks and been in the app store for almost 2 years now, it was just for fun and I don’t tell many people about it – until now.

I did Flex, since 1.5, and Flash work before joining Adobe nearly 4 1/2 years ago. The different projects have given many different programming experiences, from libraries (Pacifica), code in the Flash Player (Pacifica), server side payment integration (Shibuya/InMarket), and many demo applications. At the core I understand the Flash Player and like building components and libraries. Since joining the evangelist team I get to build more and more examples. It shouldn’t be a surprise that I augmented my examples with games when possible.

I just spoke at FITC Screens on “Digital Fun in the Digital Home” where I used applications like PickQuick and Eiden1. Both have all their source code available on github. Eiden1 was designed by my 5 year old at the time and has been to show since it uses WiiMotes through a Android IME with the Android device hooked up to the TV, a console in your pocket. Games just make sense to me when showing off cool features.

So I like games, whats all the fuss. Well, I am excited to say that my new focus as an Evangelist is Flash Gaming. I am joining the gaming evangelist team, so you’ll be seeing more posts around this topic.

Customizing Flex applicationDPI for a multiple screen size application

Building a Flex mobile application that works across smartphones and tablets takes an understanding of screen sizes, screen dots per inch (DPI) and screen resolutions. In the current landscape of devices typically you consider a tablet something bigger then a 5-6 inch physical screen. Also in the current device landscape screen resolutions are for tablets are typically greater then 1024x600 (original Galaxy Tab 7' and PlayBook), while smartphones are typically less 1024x600. This of course will change as screens get better and have high resolutions.

How Flex works with helping you develop and design for multiple screens is provide a concept of applicationDPI. This applicationDPI is baked into the spark mobile skins, available in css media queries, and available to you any where in your code. Flex also provides a mechanism to override the applicationDPI for your needs, I will get to this in a bit. First for an example of an application making heavy use of the applicationDPI check out Caltrain Times. It is currently running across Android, iOS, and BlackBerry Tablet OS (PlayBook).

I have also personally tested it across these devices:

What is Flex's Application DPI really?

Lets start with what its not. Its not a reflection of what the device's actual DPI, for example the DPI values in the above chart. What Flex does for developers is provide 3 classifications you build your application against. They values are 160, 240, and 320, but you can think of them as small, medium, and large. Its also important to think of the Flex three DPI classification approach as your way to define what your application looks like and how it acts not relative it directly to device DPI. I explain two examples of why this is important with my Caltrain Times application. First is how to handle incorrect DPI values from the OS level. Second is applying your look to a set of devices by customizing the DPI classification in Flex. I'll get to the detail of those two examples later in the article, first lets explain application DPI.

The definition, Flex's applicationDPI takes on two meanings. If you explicitly set the value your are telling Flex that this application is skin to applicationDPI=XXX (160,240, or 320) and for the application to automatically scale the SWF and contents to the ratio of XXX/runtimeDPI. The applicationDPI classification strings can be found in mx.core.DPIClassification. For more control of how your application looks for the different DPI's do not set this value. Then the value of applicationDPI is just a classification of 160, 240, or 320 (or some arbitrary value if you wanted to your own classification). By default Flex considers any device DPI of < 200 = 160, > 200 = 240 = < 280, and > 280 = 320. Now you can override the class mx.core.RuntimeDPIProvider, in the first case this controls the scaling, the second case it sets the applicationDPI value.

The rest of the post will make use of extending mx.core.RuntimeDPIProvider to handle incorrect DPIs from the OS and control the look between phones and tables.

Handling Incorrect DPIs

It just happens that on the Android devices depending on the OS and manufacturers there is a chance of the device reporting their DPI incorrectly. I address this problem in Caltrain Times application, specifically on the Motorola Atrix, in my custom extended mx.core.RuntimeDPIProvider class. The basis of my thoughts go back to the current landscape screen resolution and screen size values. I check the resolution threshold of 1024x600=614400 and screen size to figure out case that just don't make sense. Here is the code for screenSize and pixel checking:

In the case of a high resolution 4 inch Android device with incorrect DPI of < 220 you'll find that the screenSize is getting larger then 5 inches. In my application I just looked for any device that was larger then 4.3 screen size (might have to change that as phones get larger displays) and its screen resolution < 610000 with a report DPI of < 220. If all those criteria are found I force it to return a value of 240 which the correct value I want.

Here is the code (with some checks for the my desktop case in there too):

Note: The source code can be found at https://github.com/renaun/CaltrainTimes/blob/master/src/com/renaun/mobile/dpi/CustomDPIProvider.as.

Applying your look to a set of devices by customizing the DPI classification in Flex

In this example I use similar calculations to figure out if the device is of a tablet size. The reasoning for my Caltrain Times application is that I wanted to overrider the typical DPI classification of 160 for tablets to be rendered at the DPI classification of 240. For my application with the larger look on the bigger tablet screens it feels the screen out nicely and works well. Again I go into the custom runtime DPI class to do this. Here is the code:

The "pixelCheck < 1920000 && pixelCheck != 1296000" part is to handle running it through adl on my desktop. The rest probably makes sense, in the current device landscape tablets are typically larger then 7 inches and smaller then 11 inches with a resolution greater then 1024x600. If these values show up then I apply the DPI classification of 240.

Summary

The main take away is don't take the devices DPI at face value. If you want more control of your application across various devices make use of some classification constraints and check screen size, resolution, and DPI. It might seem like a bunch of work but this class can be used across applications and projects with minor tweaks depending on content requirements. Its also a good way to figure out if its a tablet or smartphone and outside of Flex DPI classification. Enjoy.

Check out my MAX 2011 talk where I go through Caltrain Times in more detail, as well as the source code available on github.com/renaun/CaltrainTimes.

Flash Embed Font Unicode Range Generator

First off I am not sure why I haven't made this before. I have needed this over the years on a couple of projects. If you are embedding strings in an application and you know exactly what characters are being used this will come in handy to save on the SWF size.

You can tell Flash what glyphs of a font to embed with the unicodeRange property. Here is an example:

What is not obvious is how to get those unicodeRange values. I created a web application that lets you input any text you want, in any language, and get back the correct unicodeRange for the exact glyphs in the input text.

Its called Flash Embed Font Unicode Range Generator.

View the whole post »

Applying styles to StyleableTextField with Flex CSS

The following code example comes from my experience in building the Caltrain Times mobile application. In the process of building out Caltrain Times I needed to convert some MXML item renders into ActionScript item renderers. I used some Flex CSS class selectors to change the look and feel for some labels based upon a selected state. I also had variations of font sizes in the Flex CSS class selectors based upon application dpi.

When going from MXML to ActionScript for item renderers or for performance reasons typically you use StyleableTextField instead of Label. StyleableTextField is a TextField with support for a subset of Label styles. StyleableTextField doesn't support styles through MXML or other typical fashions of the Label class. This means you typically to set the styles explicitly on the StyleableTextField, but then you have to know what styles are valid. There had to be another way. I didn't want to go through all the Flex CSS class properties I used in the MXML Label versions so I went looking for a solution to apply the styles through use of CSS class selectors. Now this is a solution and it works; but it might have performance implications for different types of content. In general it should work just fine if you are not changing the styles all the time.

Here is a screen shot of the item renderer with its selected state CSS changes.

Caltrain Times CSS applied to ActionScript ItemRenderer

View the whole post »

Hackathons Are Becoming Quite Popular

I have seen an increase of mobile hackathons, hack days, and/or startup weekends in the last year. Typically the format runs over 1-3 day timeframe, where teams come together and code up a storm. Typically prizes are decent, people are friendly, and its a great way to learn new things. I would definitely recommend it to students are others looking to network or learn some new skills.

There are a couple that I wanted to point out since I am out west in Nevada and know the guys down in LA.

This weekend:

MobileHackDays LA - losangeles.mobilehackdays.com/

Adobe is one of many sponsors for this event in LA running Sept 16-18th. I also know a team of Flash Platform developers that are attending as a team, "Team Adobe". Check out the guys from Almer|Blank that are sure to rock the event.

Michael, Hasan, Omar, Nolan, Tim

ReCommerce Hack Day - recommerceday.com/

Supported by the guys at Zappos.com. I will be checking this one out since its local.

Other Thoughts

There are others like this one in Las Vegas, NV, Las Vegas Startup Weekend. And a great website for both putting on a hackathon or getting info about other hackathons is hackatopia.com/. If you know of other mobile hack days or hackathon let me know below, I think its a great place for the community to get involved and learn a bunch.

Most of these you do not have to have a team to attend. They also usually encourage business, design, and developers to attend. Which makes for a great networking event as well.

If you do end up going to some of these events and build applications with Adobe products or the Flash Platform definitely let me know about it. Thanks, have fun hacking...

Caltrain Times at MAX and Source Code

I have been working on an application called Caltrain Times. It is available in quite a few marketplaces and runs across smartphones and tablets. I have made the source code for this application available on my github here.

Adobe MAX is coming up in a few weeks and I will be speaking again at MAX. There has been some last minute changes and I will not be speaking on my original topic of Digital Fun in the Digital Home, but if you want to catch me talking about this topic come to the SCREENS conference later this year.

With the current focus on mobile development, I am excited to tell you what I will be talking about at MAX. I will be doing a detailed presentation about my process of building Caltrain Times across the different devices.

Title:
Design to Release: Building a multi screen mobile application

I will be covering the topic, not from a AIR/Flash Builder/Flex feature perspective, but from a higher level of how do get from start to finish with your mobile application. I will showcase the latest mobile features of Flash Builder and Flex as they played a critical role in different parts of my process. And this is not just development but the whole process, from design to release into the different mobile app stores. Come see me at MAX and definitely sign up for this session early.

Using Flash Builder’s Mobile Workflow with Flash Professional Projects

Flash Professional and Flash Builder both have mobile workflows. If you want to use the mobile workflow of Flash Builder with a Flash Professional project take a look at the video at the end of the post.

The basic idea is to use Flash Professional and/or Flash Professional Project type in Flash Builder as the compilers. They compile the swf's, but do not handle the packaging of the mobile application.

Then you create a Flash Builder ActionScript Mobile Project that does the compiling and publishing out to mobile devices, with the compiling turned off. The compiler projects still put the debug symbols to allow debugging with the mobile project to work with full Flash Builder breakpoints and trace statement capabilities.

When you want to make a change, just make it in the Flash Professional Project in Flash Builder and it will compile the new swf to the ActionScript Mobile Project's bin-debug. Then you can launch it through the mobile project to test/debug.

View the whole post »

Introducing the Caltrain Times Application

I have been working on a mobile application and finally have it released in the major marketplaces. It has been a great learning experience to go through the mobile developement process. The mobile application I have been working on is called Caltrain Times.

The purpose of the application is to help commuters of the Caltrain system easily navigate the train schedules through a good looking interface. If you are not familiar with Caltrain, it provides commuter rail service along the San Francisco Peninsula, through the South Bay to San Jose and Gilroy.

View the whole post »