Trying to mimic the scrolling of iOS’s UIScrollView with Actionscript over a sunny weekend made me lazy. Coding myself: “overshoot, decelerate, ease back into position”, ended up with some funny, fair and not so fair results. It just didn’t feel right. I decided to look a bit further on the interwebs and again…. GreenSock to the rescue! Ok, it comes with a price, but only fair for all those times Greensock saved the day. If you’re prepared to shell out $150 for a commercial license or $99 for a bit more restricted one you’re the proud owner of the ThrowPropsPlugin. Butter smooth “iOS scrolling” (amongst others).

(now try and nail it myself on a rainy weekend sometime soon)

language settings (AIR 3.2)

You can specify the language your app supports including app descriptions in all supported languages. Add snippet below

1	<supportedLanguages>en</supportedLanguages>

more or less anywhere in the rootnode (application) of the application descriptor xml. If your app supports more languages, seperate them with comma’s. Your app does not show up in the appstore in other languages.
(via and more on: http://www.flashrealtime.com/supported-languages-adobe-ai/)

Icons without the default glow

If you want the icon of your app without the default glow Apple adds to it, add line 8 of the snippet below to the InfoAdditions element (at the bottom of the application descriptor)

1 2 3 4 5 6 7 8 9 10 11

<iPhone>     <InfoAdditions>     <![CDATA[        <key>UIDeviceFamily</key>        <array>          <string>1</string>        </array>        <key>UIPrerenderedIcon</key><true/>    ]]>     </InfoAdditions> </iPhone>

Low res assets (480×320) fullscreen on high res (960×640) iPhone screen

Add following snippet to the iPhone element shown above.

1	<requestedDisplayResolution>standard</requestedDisplayResolution>

Looks crap while testing on the desktop; The graphics only cover the top-left quarter of the full resolution, but on the device it will be OK.

For showing your tweets (or anyone’s for that matter) in a website, twitter offers two JavaScript files, blogger.js and user_timeline.json. To make it work, there’s three steps to take:

1. Add one specific HTML element as a placeholder for the tweets
2. Embed two JavaScript files into your page
3. Add some CSS to have it show the way you want

Following is a short explanation of how it works.

The HTML

You only need to place one HTML element in your page into which the tweets end up. This element needs to have the id attribute set to twitter_update_list. This is because the scripts need to know where to put the tweets. In the example below I use a unordered list ( <ul> ) as a placeholder. So, somewhere in my page there is this code:

The JavaScript files

The two files can be linked to your page from the twitter server, so no need to host them yourselves. The embedding can be done by copy pasting the following code right below the HTML seen above.

The first can be embedded as is, there’s no settings to it, nor the real need to change it’s code. The second does need some settings. They are discussed after the next section.

blogger.js

The file you just need to embed, nothing more. This file contains two functions to parse the incoming data into chunks of HTML. Each incoming tweet is placed inside a list item (<li>). Usernames (words preceded with the at-char (@)) are made into links to the twitter timeline of that person. Furthermore, all links are wrapped in an anchor tag. Lastly a link to the actual tweet is created from the id of the tweet. The tekst linking to the tweet is the indication how long ago the tweet was placed. This leads to, for instance, the following HTML structure:

Nasty detail IMHO here is the inline styling of the link to the tweet. I guess they had better left it to the CSS of the user. Fortunately there is the !important rule to override it.

The function that does the parsing looks for an element with the id ‘twitter_update_list’ to place all the list items in. Since the parser places the individual tweets into list items, it makes sense to use a list ( (<ul> or (<ol> ) as this html element.

user_timeline.json

This is the script that does the actual request to twitter. Here you can set a number of options to determine what is retrieved from the twitter server. Here is a short overview:

user_id

The id of the user you want to show the tweets of.

screen_name

The screen name of the user you want to show the tweets of (this is the name that appears in the browser address bar when you view that user’s timeline on twitter). Either this one or the user_id needs to be provided, not both.

include_rts

Show what you retweeted or not. 0 or 1.

count

How many tweets you want to show. 1 or more.

callback

Required. Leave as is or write your own JavaScript to parse the data coming in from the server.

For a more detailed description, see: the twitter docs

All the settings are done as GET parameters on the URL of the script. So, broken into separate lines it reads like:
http://api.twitter.com/1/statuses/user_timeline.json?
screen_name=mannobult
&include_rts=1
&callback=twitterCallback2
&count=4

The CSS

The CSS you want to add is of course entirely up to you. However, knowing what HTML output the JavaScript generates is necessary.
So you may want CSS for the following elements:

• The element you placed yourselves (with id=”twitter_update_list”)
• List items that appear inside it (containing all info of one tweet)
• A span element inside the list items
• Anchor elements inside the span for any links in the tweet
• The anchor element which is a child of the list item (with the link to the tweet)

Below an example of what the CSS could look like (comments in the code):

All the above results in the following:

Disclaimer

I did not get myself a copy of Impact. Just reviewing the book and not the Impact framework I did not see it as nessecary. Had impact been on sale like it was about a month or so ago I might have gotten my on copy (notch, notch, wink, wink).

The positives

Let’s start with those according to the feedback rules…

To me te book feels like a cookbook to get one specific game done (“type this here …”) at times. It however gives a good overview of most if not all ‘classes’ and possibilities of Impact and how to get up to speed with building a relatively small game with it. Using the accompanying level editor called Weltmeister Jesse shows you how to design levels, how to load them in Impact and bring the level to life. What else can you ask for?

Next to that more or less main goal of the book, you’ll get an overview of the whole process of game development. From initial idea to publishing (and possible deployment on iOS with a template Xcode project that comes with Impact). Good insights from someone who knows what he is talking about.

Finally it contains some heads up on HTML5 development. I’m afraid that is still nessecary with the way browser support is at the moment.

The negatives

The subtitle of book is a nice pun (and the name of the game framework is well chosen), but may be somewhat misleading for the less informed buyer of the book. Actually tagging along with Jesse in building your own game will set you back $99: the subtitle’s “Impact” refers not only to the effect games may aim to have on their player, but also to the commercial Impact game framework written in JavaScript. Just a fair warning ahead.

Another downside I think there is to the book is the intended audience as it states. Personally I don’t think this book is much use without having prior programming knowledge. If you have none, you’ll end up with a working game nonetheless, but I doubt you’ll understand why, how to change it or to build your own in any reasonable fashion.

Finally, usage of stats to analyze players behaviors is stressed, however, the examples may have been a bit more clear (I’m pretty much a GA noob)

Impact

Without having used the software, it seems like a real nice environment to work with. It comes with a good map editor, several debugging and profiling features. To help with the game mechanics there’s collision detection and particle systems and most needed features of the box so you can focus on the creative process.

Concluding

I’d by the book if you want to do some JavaScript game dev, especially if it involves platform games. If you have no programming experience I would get some basics done first but I guess it all depends on your individual talent to pick up programming.
It is a quick read and gets you up to speed with Impact in about a day (or two).

Get HTML5 Game Development

Koen and Wouter are developers of AIRKinect of which version two is almost to be released. Unfortunately my lovely new MacBook refused to install some of the drivers despite Wouter’s persistence. Fortunately they had a spare laptop to use (thanks!).

I’d seen demos and fooled around with the depth image before, but the next version of AIRKinect, used as native extension offers lots more then I’d ever seen possible in AIR (may of course be my ignorance).

Some of the features of the 2.0 preview we got to play with were:

• depth image
• point cloud
• point cloud regions
• skeletons
• poses

Depth image

The depth image shows the image the IR camera registers in greyscale. Nearby white, far black. My first ever experiment was that I used this to, pixel by pixel, reconstruct a 2.5D image with Flash’s z-property of sprites. But…

Point cloud

The point cloud is a ByteArray with for each “pixel” an x-, y-, and z-position. This allows for precise tracking of, for instance, the closest thing the IR camera registers. Extend your arm and move stuff around, the famous Minority Report interface in the making.

Point cloud regions

Point cloud regions allow use of hotspots. If a certain region (a box) contains more than a set number of points from the cloud (the count is done by the extension), you could start whatever action you see fit. Du du, du du, du du, du du, ta ta! I can feel it coming in the air tonight … Drum like Phil Collins for instance.

Skeletons

The skeletons you may have seen before. AIRKinect supports 4 skeletons and then some additional center of mass registrations. With the skeletons you have access to the main joints, their position in 3D space, position projected onto the webcam image, orientation and more.

Poses

With the skeletons you can create poses, this is actually not done in the extension, but with a few classes in which you can define poses like assertions: right elbow, above, right shoulder. Combine a few of these rules and you can create complex poses which are easy to check.

There is no doubt more, but the distraction of and annoyance over the failures of installing macports probably made me miss out on some…

All together it requires a somewhat elaborate install sequence (which they will no doubt publish at due time) on the Mac, mine being the odd one out resisting all attempts to get it running. On windows it’s a bit lot less elaborate. Definitely will try at home to get it running on my desktop. When I succeed, hours of fun will be waiting

To limit orientation of the stage on devices you don’t need much. In this example I want the application to only be displayed in landscape mode.

Loop up the aspectRatio and autoOrients tags in the application descriptor file, and make sure it looks like the following:

Then, in the application code, check if the stage is set to auto orient, and if so, listen to the ORIENTATION_CHANGING event:

In the eventlistener, check what the futute orientation will be, it is stored in the event parameter as it’s afterOrientation property. If that orientation is NOT what you would like it to be, call the event’s preventDefault() method. The stage will not orient itself.

Below you see the two orientations defining the portrait orientation, StageOrientation.DEFAULT and StageOrientation.UPSIDE_DOWN. The other two, StageOrientation.ROTATED_RIGHT and StageOrientation.ROTATED_LEFT represent the landscape orientation. Since the latter are what I want, the first are prevented.

You can find more options at: Adobe’s website

(It turned out to be much easier than reading out the accelerometer and rotating the stage yourself…)

Folowing code is a more complete example in case you want to test some code. It is the main (and only) class from a Flash Builder project (uses AIR 3 and Keith Peters (AKA Bit-101) his minimalcomps):

For a current project I need to know what version of the iPad an AIR app is running on. I saw solutions measuring screen resolutions to get info whether an app runs in iPhone or iPad, but no posts on differentiating between iPad 1 and iPad 2. The Capabilities class seems to have the solution. Below is the output of the

property for the iPhone 4, iPad 1 and iPad 2.

iPhone 4 gives you:
iPhone OS 5.0 iPhone3,1

iPad 1 gives you:
iPhone OS 4.2.1 iPad1,1

iPad 2 gives you:
iPhone OS 5.0 iPad2,1

This info breaks down into:

• The OS (the name apparently always is iPhone OS) with it’s version number (the iPad one in my case still running iOS 4)
• The device id which holds the device name and the device ID

The device name and its ID apparently are different as for example the System Status reports. System Status for instance has “iPhone 4″ listed as being the Device and “iPhone3,1″ as the Device ID. The device IDs for the iPad are more descriptive, but once you know what to look for it does not really matter what it lists I guess…

Anyone have the info for the iPhone 3?

With the new GPU rendering capabilities of Flash player 11 and AIR 3, which go under the name Stage3D (formerly known as MoleHill) performance should be greatly improved in … some, all(?) cases. Since it has been a long time I did anything with actual 3D modeling, the logical place to start is 2D. Dreading the complexity of the Stage3D API’s I will focus on the Starling framework. There is a nice example of what complexity Starling hides from you on the Adobe devnet pages. The following links will be my first information providers while experimenting I guess.

Of course the Starling API documentation.

Also: Lee Brimelow has two video tutorials on his gotoAndLearn site. One introducing the Starling framework and one explaining how to use particles in the Starling framework with one by one design’s particle editor. Lee will also host a workshop at Flash in the Can Amsterdam 2012.

The framework was written by the Austrian Gamua, also responsible for the sparrow framework for objective-C (another thing which desperately needs being looked in to) which in it’s turn is loosly based on the Flash display list API.

If you wonder why a separate library is needed in stead of using the standard display list, the following article explains why Starling is a good idea for 2D GPU rendered content.

Imagine (if you can’t, there a picture below doing it for you) one circle in the middle. OK, now imagine another circle centered on the edge of the first. This second circle moves over the circumference of the first, thus describing a circular motion. Now place something on the edge of the second circle and have it move over it’s circumference. Depending on the size of the circles and the rotation speeds the object on the outer circle describes a lot of different motions looking a bit like a spirograph.

The two circles and the moving object (blue)

In the above image, the red circle is the first one. The green one moves over the circumference of the red one. The blue dot moves over the circumference of the green circle. It cannot get outside of the blue circle.

This however is a very regular motion. Not what I had in mind or promised you with the title of this post. There’s no long explanation to it, so I’ll get to it right away: To make the motion random, just have the direction of both the rotations alter at random intervals. Not to often or the final object moves in a jittery fashion (and may not even leave it’s position), not to few or the object moves to predictable. In the example below you can alter the frequency of the direction change as well as the speed of rotation (with thanks to http://www.minimalcomps.com/).

Right-click on the flash file to view the source files.

Situation

You want a Flash file allowing fullscreen playback in the browser. Next to this you have a DisplayObject somewhere on the stage with a mask applied to it by script.

Problem

The mask does not work properly in fullscreen mode. When going fullscreen, the content scales as it should but the mask shows only a portion of what it showed before.

Solution

If you dit not add the mask to the stage (which you don’t really need to do if nothing is about to scale), the mask does not scale with the rest of the content when the StageDisplayState goes FULL_SCREEN. Because of this it reveals the same area in square pixels (w x h), but since all the rest is scaled up, this is only a small surface compared to what it revealed before.

So, the lesson to be learned: If you’re gonna allow fullscreen mode in your application and use masks, add them to the display list. Maybe just add them to the display list, period. The few times not having to type the line:

probably saved less time than I had to spend hunting this error. Below an example showing the error (above) and the proper result (below).

Code