In this article, we will be enabling a multi-screen layout for a Flash-based game menu to work, across devices of varying screen resolutions, seamlessly. The game is a fictional work named “Burning Feathers”. It has three separate screens that you can access from the startup menu. These screens should adapt to a variety of layouts, screen sizes, resolutions, and operating systems across desktop, tablet, and mobile devices.

This content requires Flash To view this content, JavaScript must be enabled, and you need the latest version of the Adobe Flash Player. To view this content, JavaScript must be enabled, and you need the latest version of the Adobe Flash Player.

To see this example in action and emulate a variety of device screens in the browser, click here.

In order to accomplish this, we will be using Flash Professional CS6, the GPU-accelerated Starling framework, and the Feathers UI component and layout library. This combination of tools and libraries allows us to both adapt to changes in dimensions, orientation, and other factors in a way that best leverages the newest features of Stage3D and the accelerated mechanisms available to us in Flash Player and Adobe AIR.

There are certainly other options available to us, but Starling and Feathers are both endorsed and supported by Adobe – making them an excellent choice when targeting the Flash runtimes.

About Stage3D, Starling, and Feathers

One of the most useful features in Flash Player 11 and AIR 3 is the new accelerated graphics rendering engine available through Stage3D (previously known by the codename “Molehill”). This advanced rendering architecture can be used in rendering both 2D and 3D visual objects within the runtime through direct use of the APIs or by implementation of one of the many engines and frameworks that have been built on top of these APIs.

Stage3D

The main benefit of using the Stage3D APIs is that everything will be rendered directly through the system GPU (Graphics Processing Unit). This allows the GPU to assume total responsibility for these complex visual rendering tasks, while the CPU (Central Processing Unit) remains available for other functions. Many high-level frameworks are being built upon Stage3D – making it much more attractive to a wider array of game developers.

To use Stage3D in Flash Player, we must set the wmode to direct if embedding within a web browser. If targeting the AIR runtime, we set the render mode to direct.

Starling

Starling is an open source ActionScript 3.0 framework that closely mimics the traditional Flash display list. There are two main benefits to using Starling other than the architectural aspects; it allows a developer to work with Stage3D without having to worry about AGAL and the intricacies of the GPU. It also enables new workflows through the use of texture atlases, particle systems, and other additional constructs.

One of the many great things about Starling is that it is fully supported by Adobe – instilling confidence in the framework for the future in terms of both runtimes and tooling. Starling also supports the Sprite Sheets which can be generated from Flash Professional CS6. The integration of great tooling with these new frameworks is essential to the game development workflow, and Flash Professional makes the task quite easy to perform.

Generating a sprite sheet in Flash Professional CS6

To generate a Sprite Sheet, simply navigate to the MovieClip symbol in your Flash Professional project Library that you wish to translate to a Sprite Sheet and right-click upon it, bringing up the context menu choices. Choose Generate Sprite Sheet from the given options (see Figure 1).

Figure 1. Generate Sprite Sheet will open a dialog box for further choices.

This will open the Sprite Sheet creation dialog box through which we can preview the generated Sprite Sheet and make any necessary adjustments. When generating Sprite Sheets for use in Starling – all we need to do is choose Starling from the Data format drop-down menu (see Figure 2).

Figure 2. Choosing to export a Sprite Sheet for Starling is made quite simple with Flash Professional CS6.

Feathers UI

Feathers is an open source user interface component library for Starling written by Josh Tynjala. Perfect for use on both desktop and mobile screens, Feathers also includes a number of great layout features which make creating cross-device experiences a breeze. This article will make use of both Starling and Feathers objects in order to achieve a flexible layout example.

Flash Professional project setup

The first task is to create a new ActionScript 3.0 document in Flash Professional CS6 and gather all of the libraries needed to perform this. The key is to set everything up in order to leverage the frameworks as much as possible – because that allows us to focus on our game and not the particulars of each and every target device.

Flash Professional stage asset scaling

When using the traditional display list, Flash Professional allows you to easily scale content which has been laid out upon the stage for various project targets. This allows us to modify our FLA files targeting specific resolutions and devices quite easily. To access this setting, click the wrench button besides the Size setting under Document Settings. This will enable the Document Settings panel through which we can choose to scale all of the assets within the Flash professional stage when resizing the document (see Figure 3). This enables us to create specific application resolutions when using the traditional display list by saving a separate .fla for each device with all documents potentially employing the same codebase. However, this method will not work for any Stage3D content – since Stage3D does not employ the display list.

Figure 3. By accessing the Document Settings panel, you can choose to scale content with stage while adjusting project dimensions.

Configure Starling within a Flash Professional project

Before we begin configuring Starling, it is important for us to set up and configure the Flash Professional CS6 project correctly.

There are a few considerations that go into the initial setup of our project in order to prepare it for adaptation for multiple screens when using a Stage3D framework. In Flash Professional, create a new document and have a look at the Properties panel. You’ll want to make the following adjustments (see Figure 4):

Set the framerate to 60FPS: We are using Stage3D and the device GPU – may as well take advantage of this! What does this mean? 1000 times faster 2D and 3D rendering over the traditional display list and cinematic, fluid, 60 fps graphics and all this across desktop browsers, iOS, and Android with full GPU acceleration on ~85% of all connected PCs.
Set the document stage size: You may set the size of the document stage to a value you are comfortable with. This will have no effect upon our running application or game when using Stage3D, but it will have an impact when testing the application within the AIR debug launcher for mobile. Normally, I test upon the primary target resolution. For instance, iPhone 4S would be 960 × 640 px at 326 ppi. (PPI can be emulated within Feathers)
Set the target versions for Flash Player and AIR: Be sure to target Flash Player 11 and higher or AIR 3 and higher in order to utilize Stage3D. Note that the newer the runtime version, the better performance and compatibility you will get.
Set a document class definition: Lastly, set a Document Class definition which will contain the preparatory bits of our game. In this example we are naming our Document Class ‘MultiScreenDemo’.

Figure 4. It is important to configure your document properly from the start in order to avoid issues later.

One more very important step is to be sure the project targets the correct render mode when compiled. This is the case when targeting either Flash Player or AIR.

To access the render mode setting for AIR compilation, click the wrench button to the right of the chosen target in the Properties panel. You will then be able to choose ‘Direct’ from the render mode options in the General settings tab (see Figure 5).

Figure 5. Render mode: Direct will allow the application to use Stage3D and give access to the system or device GPU.

To access this setting when targeting Flash Player, you must first enter Publish Settings and choose ‘Flash (.swf)’ from the left column (see Figure 6).

Figure 6. Click Flash(.swf) from the left column.

Twirl open the ‘Advanced settings’ and find the ‘Hardware acceleration’ drop-down menu and be sure ‘Level 1 - Direct’ is selected (see Figure 7).

Figure 7. Setting the Hardware acceleration to Level 1 - Direct will allow the application to use Stage3D and give access to the system GPU.

Setting the class stage properties

Now that the Flash document is configured properly, we can get into some code. The first thing you will want to do within the Document class constructor function, is to set up the project stage. This is accomplished with the following lines of code to make the layout truly adaptable, and avoid unintelligent scaling upon resize and reorientation.

        this.stage.align = StageAlign.TOP_LEFT;
this.stage.scaleMode = StageScaleMode.NO_SCALE;
    

Emulating device DPI/PPI

When targeting the desktop, you’ll also need to emulate a DPI and pixel width in order to have the Feathers components size themselves appropriately. This can be accomplished through the feathers.system.DeviceCapabilities class and should be set immediately after the previous stage adjustments.

        DeviceCapabilities.dpi = 265;
DeviceCapabilities.screenPixelWidth = 480;
DeviceCapabilities.screenPixelHeight = 800;
    

Initialize Starling

The only thing left is to initialize Starling so that we can begin working with both Starling and Feathers classes. To do so, we must import starling.core.Starling and then define our Starling instance as such:

private var starling:Starling;

The best time to actually instantiate Starling is when we are sure that everything is loaded up in our project. We can do so by adding an event listener within our constructor function which will fire upon a COMPLETE event.

this.loaderInfo.addEventListener(Event.COMPLETE, loaderInfoComplete);

Once the COMPLETE event fires, we are safe to go through and complete the instantiation of our Starling instance and fire it up through the start() command.

        private function loaderInfoComplete(e:Event):void
{
    starling = new Starling(Main, this.stage);
    starling.start();
}

    

Figure 8. Compile and run the application to see whether Starling has been initiated or not. We can see the Starling statistics overlay in the lower left, indicating that Starling is now active.

Using Feathers in a Starling view

You will notice that when you instantiate our Starling object, you must pass in the class that will act as the Starling view. In this case, we have this class defined as com.josephlabrecque.multiScreenDemo.Main – and this class extends starling.display.Sprite. To use Feathers components within this or any other Starling-based class, simply import the components you wish to use from the feathers.* packages and instantiate them upon the stage just as you would any other object.

Adjusting component layout

Depending upon whether the visual objects in use are children of a Feathers screen class or not, will determine how you can handle application resize and general layout. Any class that extends feathers.controls.Screen will automatically have a number of useful functions that can be overridden which simplifies layout adjustments and is the preferred way to handle this – though there are minimal adjustments to make on the Starling side as well.

Figure 9. Implementing Feathers with a specific theme (in this case, Metal Works Mobile) will render a default background texture.

Layout upon stage resize

The method of handling stage resize across objects will depend upon whether or not they are Feathers components or not. For Starling objects, we must take a more manual approach by listening for a RESIZE event upon the stage and performing similar property modifications upon the relevant objects. To accomplish this, we initially set an event listener upon the stage itself within the document class (MultiScreenDemo). This is the same class which instantiates the Starling engine and establishes it within our Flash application.

this.stage.addEventListener(Event.RESIZE, stageResized);

Once a resize event is triggered, you can then go through and make any adjustments to the Starling stage and viewport settings in order to ensure you attain the desired project layout.

        private function stageResized(e:Event):void
{
    starling.stage.stageWidth = this.stage.stageWidth;
    starling.stage.stageHeight = this.stage.stageHeight;
    const viewPort:Rectangle = starling.viewPort;
    viewPort.width = this.stage.stageWidth;
    viewPort.height = this.stage.stageHeight;
    starling.viewPort = viewPort;
}

    

To adjust individual Starling object position and size, you will add an identical listener to the stage within the appropriate class. For instance, the following function exists within our main Starling class (com.josephlabrecque.multiScreenDemo.Main).

        private function stageResized(e:Event):void
{
  ps.x = this.stage.stageWidth/2;
  ps.y = this.stage.stageHeight+30;
  gameMenuBar.width = this.stage.stageWidth;
}
    

Once the RESIZE event is detected, we can adjust the position and size of our Starling elements as needed. In the example above, we change the position of our particle system renderer and adjust the width of the menu bar to match the stage.

Figure 10. Here we are implementing a Starling particle emitter and repositioning it upon resize.

Layout with Feathers

The Feathers framework is not just components like buttons and switches but also includes a number of useful layout classes. These layout classes can also assist with cross-device positioning calculations since the layout itself can adapt to changes in orientation and resolution.

The Feathers Screen class has a draw() method which automatically is fired whenever a resize event occurs. This is true for both resize and for orientation change. All we need to do is modify the properties of our components for that particular screen within the draw() method and everything will redraw as needed.

        override protected function draw():void
{
  startButton.validate();
  startButton.x = (this.stage.stageWidth - startButton.width) / 2;
}
    

Here we call validate() upon our Feathers button to make sure all of the properties being reported are updated, and then reposition the element based upon the button width in relation to the size of our stage. This method can be used across all Feathers UI components.

Figure 11. Here we see both a Feathers TabBar and Button represented.

Compiling for various screens and devices

Once we have set the resize listener upon our project to adjust the Starling stage and viewport, have accounted for the layout adjustments for any Starling objects through a similar resize event listener within the main Starling class, and have all Feathers component adjustments accounted for through the Screen.draw() override functionality… we are actually fairly golden when it comes to compiling the project across devices!

Desktop AIR or Flash Player

The most important thing to remember when compiling for desktop (Flash Player or AIR) is to force the appropriate DPI and pixel width as demonstrated in the article. Otherwise, you should be able to set a target size for the stage via Flash Professional’s Properties panel and everything will adapt to the chosen size once the compiled project is initialized.

Figure 12. When running the interface as a desktop application, the various interface elements appear as shown in the figure above.

Mobile portrait

Whether targeting iOS or Android; the project will be able to read the capabilities of whatever device it is running on and set component scaling based upon specific pixel width and DPI as reported by the device.

Here we see the application running within an emulated portrait orientation with all of the components and other objects appropriately positioned and scaled (see Figure 13).

Figure 13. Through the above figure, we can see how the various interface elements adapt appear when viewed in portrait orientation on a mobile device.

Mobile landscape

Through emulation of landscape mode, we see that everything adjusts happily to the new orientation even though this is the exact same codebase used across desktop and various mobile orientations (see Figure 14).

Figure 14. Here we can see how the various interface elements adapt upon orietation change to landscape.

Figure 14. Here we can see how the various interface elements adapt upon orientation change to landscape.

Testing with the Flash Professional mobile device simulator

While there is no way around testing upon actual hardware, the Mobile Device Simulator in Flash Professional CS6 provides a great starting point. When dealing with device orientation – it is quite useful. To test using the simulator when targeting AIR for iOS or AIR for Android, simply choose: Control > Test Movie > In AIR Debug Launcher (Mobile) or when debugging: Debug > Debug Movie > In AIR Debug Launcher (Mobile). The emulated screen dimensions will be based upon your document resolution (see Figure 15).

Figure 15. Choosing to test in the simulator allows you to test all sorts of things from full evice rotation to accelerometer changes and touch gestures.

Retina display considerations

Flash Professional CS6 supports Retina Display. While not demonstrated here, Starling also comes equipped with the capability for supporting the higher density retina displays available on many of the newer devices, including the iPad 4 and Nexus 10. There are a number of methods for handling this, as explained in this article.

Where to go from here

One of the excellent things about using a GPU accelerated framework like Starling together with a compatible components library as provided by Feathers, is that you are not restricted to making any specific type of experience. While Starling is a great platform to build games upon, it is entirely possible to create some rather amazing applications which run upon these libraries as well. The type of adaptable layout we have demonstrated in this article could just as easily be for an application rather than a game.

For more information about Starling, have a look at the API documentation.

Connecting with other users is easy through the Starling forums.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License

Designing for a multi-device, multi-resolution world

by Joseph Labrecque

Content

Created

Page tools

Requirements

Prerequisite knowledge

User level

Required products

Sample files