Tag Archives: as3

Kelloggs Crunchy Nut: The Nutty Escape

The Nutty Escape

The Nutty Escape

We helped GlueIsobar create a game as part of a promotion for Kelloggs Crunchy Nut that spanned TV and the web. Called The Nutty Escape, the game used the webcam to check if the user looked at a box of Kelloggs Crunchy Nut contained in a video.

Nutty Escape Video

Nutty Escape Video

We had to experiment a lot with different webcams and libraries, eventually modding an existing library to get as much speed as possible from it, from the widest possible combinations of hardware. It was quite a technical challenge!

Eye Detection

Eye Detection

To play the game, head over to this page on Youtube:

https://www.youtube.com/user/KelloggsCrunchyNut/game?utm_source=Youtube_masthead_970x250&utm_medium=display&utm_campaign=CN_Chocolate_Bertie_Q3_2013

Starling Stress Test/Benchmark of 1,000 Particles

Starling Stress Test

Starling Stress Test

The other day while working on a project we needed to gauge the speed of AIR on mobile, and to do so we created a stress test to see just how fast the latest AIR 3.6 SDK was. We created a small AIR application using Starling and decided to share it with the community. The application creates 1000 particles which are emitted by two emitters, one produces 500 Cowlorful Cows and the other 500 GrindheadGames logos. It seems to run at a solid 30FPS on a Samsung Galaxy S3 and an Apple 4S, however we would love to hear performance reports from other mobile devices, so please leave a comment if run the test yourselves.

We have made a zip folder for the Starling Benchmark so that you can download the code and run it yourself. Instructions are included how to get the project to compile, but leave a comment if you get stuck. There is also a precompiled APK in the build folder, so you can run the test on Android without having to compile if you want to. You will have to set up development certificates to get the application to compile for iOS, there is no precompiled file for the platform included.

We created used the Starling framework and the Particles extension to run this, make sure you add them to the source path to build the project.

Enjoy!

Working with Full Screen mode in AS3

When working with fullscreen mode in AS3, there are a few things to take notice of when developing applications.

For fullscreen mode to be enabled, the allowFullScreen tag in the embed has to be set to true for Flash Player to be able to display in full screen.

<object> 
    ... 
    <param name="allowFullScreen" value="true" /> 
    <embed ... allowfullscreen="true" /> 
</object>

When working with fullscreen mode, applications are often a lot less confusing if a full screen button is only displayed if the application can actually display in full screen mode.
To check if full screen mode is available to Flash Player, you can check the stage Boolean property stage.allowsfullScreen(). If true, fullscreen mode can be used and a button to enter full screen mode can be shown to the user for example. To check if full screen mode can be used, use the following:


if(stage.allowsFullScreen())
{
 //full screen code here
}

Fullscreen mode can also only be turned on by a user interaction, the user has to have pressed a button for the change to take place. It is not possible in Flash Player to automatically force the user into fullscreen mode, and the user must trigger the change. In Adobe AIR applications, it is ok to automatically load an application in full screen mode.

You can add an event listener for when a application enters or leaves full screen mode. This is how to create an event listener for that event:

import flash.events.FullScreenEvent; 
 
function handleFullScreenEvent(event:FullScreenEvent):void 
{ 
    if (event.fullScreen) 
    { 
      //handle fullscreen mode
    } 
    else 
    { 
        //handle normal mode
    } 
} 

clip.stage.addEventListener(FullScreenEvent.FULL_SCREEN, handleFullScreenEvent);

Finally, setting stage.fullScreenSourceRect can greatly increase performance of projects running in full screen mode. This makes the Flash Player render the project using hardware, rendering the display stack as an upscaled bitmap instead of scaling the vector artwork. The result is much faster render speeds and a performance increase, however it can look a little blurry.

stage.fullScreenSourceRect() is a rectangle, and which is used to specify an area of the screen to upscale as a bitmap in fullscreen mode. It normally makes sense to set this to the screen size of your minimised stage size, with an x and y position of 0. For example:

stage.fullScreenSourceRect = new Rectangle(0,0,stage.stageWidth,stage.stageHeight);

More information about working with fullscreen mode in AS3 can be found on the Adobe docs here.

** Update **

I have found when embedding flash content in HTML pages and using the fullScreenSourceRect property. I am using a Macbook Pro and Flash Player 11.5 in Chrome, and have tested the problem with older versions of Flash Player also. When using fullScreenSourceRect, you can upscale fine when in fullscreen mode in the projector and in the browser. However in the browser when you exit full screen mode and return to normal the Flash Player has a terrible time of things and the display gets really confused. The sampled image and the scaled image can be seen at the same time, and there seems to be no fix for this bug. Even setting the fullScreenSourceRect to null does not work. I have emailed Adobe about this problem and will post up their response when or if I receive one. Fingers crossed this can be fixed as we are wanting to use this feature in Enola: Prelude!

Leaving fullscreen mode can leave both renders visible with fullScreenSourceRect

Leaving fullscreen mode can leave both renders visible with fullScreenSourceRect

Returning a value to a specific decimol point in AS3

Making games, we often use Number variables to store information. However, displaying these can be tricky, as the Textfield may only have space for a certain amount of characters. In scenarios such as this, it is useful to use the toFixed() method on variable to return a value to the correct decimol point. For instance:


var textField:TextField = new TextField();

var num:Number = 0.12341344525234523523453;

textField.text = num.toFixed(2);

The code above would change to value of the textField variable to 0.12. This is because the toFixed() method returns the number but only to the decimol point index specified in the parameters.