alohahands.com Blog

Adobe Flash Lite for Mobile Devices

Mobile Challenges:  screen (size, pixel, depth), memory, CPU, fragmentation, bandwidth, security, connectivity, data input, distribution & deployment. Despite theses challenges, the number of mobile devices is growing at a staggering rate.  By the end of 2007, there will be 2713 million mobile devices and over 300 different models in use worldwide, compared to 755 million PC’s.  (Gartner Dataquest).  Along with the number of mobile devices offering Flash support, there is also a direct correlation to the  growth of application users.  Mobile application matters to those wanting to get out their brand recognition in a more personal method, beyond television and desktop computers.

The mechanics for mobile device design is different from normal design.  There isn’t a mouse pointer, usually, or a touch-pad.  There might be a touch-screen interface or a more common directional pad.  The use of a zoom allows the user to instantly recognize focus to an object.  You’ll also want to omit labels and headers to obtain every pixel of available screen real estate.  You can use this code: fscommand2("fullscreen", true); to display your content in full screen mode.  The "fscommand2" has access to specific device features like the signal strength and vibrate.  You can make use of these in your project design for interesting affects.  

Flash Lite couples rich presentation with solid programming, anything that the object oriented library facilitates.  The following steps are an example of the ease at which one might create the code for navigating a mobile device menu:

Using the scroll pad on the mobile device to control our phone games is likely how you will create player control and movement.  The up, down, left, right and enter key are the usual keys available.  For each menu item, you will create one layer.  Create a movie clip and make sure to have a stop action on the first frame.  Create the text for your menu items; new game, instructions, exit.  You will now make a layer for the background environment or image.  (This will likely be the bottom most layer.)  You may also want to build a square, oval or rectangle and fit it behind your menu item.  On the next frame, move your shape to fit behind the next menu item, and so on.  The “up” and “down” events will allow you to navigate through your menu structure.  Here is sample code:

on(keyevent “<Up>”){
// go to previous frame or stop at frame 1
tellTarget(”target path to mc”){ prevFrame(); }
}

on(keyevent “<Down>”){
// go to next frame or stop at last frame
tellTarget(”target path to mc”) {nextFrame();}
}

 

 

References: 

 

Link: Flash Lite Supported Devices:

http://www.adobe.com/mobile/supported_devices/

http://www.adobe.com/devnet/devices/articles/getting_started_flashlite_b.pdf

http://board.flashkit.com/board/archive/index.php/

flashmobilegroup.org

http://www.adobe.com/devnet/devices/articles/ten_tips_flash_lite_games.html

http://www.adobe.com/devnet/devices/flashlite.html

http://www.adobe.com/devnet/devices/articles/packing_lite_09.html

 Josh Ulm’s excellent whitepaper on the subject articulates other important considerations.

http://www.adobe.com/devnet/devices/flashlite.html

Packing Lite: A Mobile Media Interface Design Primer

http://www.adobe.com/devnet/devices/articles/packing_lite.html

Introducing Adobe Device Central CS3

http://www.adobe.com/devnet/devices/articles/introducing_device_central.html

 

Add comment July 16th, 2008

Flash & Mobile Devices

tp://www.adobe.com/devnet/devices/articles/ten_tips_flash_lite_games.html

In the code example below, the _y property of the duplicated movie clip is extracting hard-coded values from an array. In contrast, the _x property is determined programmatically, by first calculating the width of the stage, and then placing the duplicate movie clips based on the resulting values of the calculation.

var clipNum = 3
var xLocate = Stage.width/ (clipNum+1);
var yArray = new Array (30,40,50);
for(x=1; x<=clipNum; x++){
var tempMc = attachMovie("block",
"block"+x, x);
with (tempMc) {
_x = xLocate*x;
_y = yArray[x-1];
}
}

http://www.adobe.com/devnet/devices/articles/flash_projects.html

People will access your project on different mediums and devices. They may even use a stylus or their finger to press buttons. Users will expect standard key presses will be used and followed. (Become familiar with common mobile device conventions.)

The options for functionality should be flexible and not device dependent. The general practice of keeping the functionality of your project separate from the events that trigger it will allow more compatibility and possibility of your project to operate on many different devices.

As you begin your project you should with a commonly used screen size (176×208 or even 240×320 pixels). These will allow you to port your game to devices much easier.

Your project files should be able to meet the needs of different displays. Perhaps allowing for resizing or rescaling the graphics and text will allow for greater display needs. Think about text size and legibility as well as graphics and bitmaps.

http://www.adobe.com/devnet/devices/articles/total_training_key_press_events.html

It’s important for the user to interact with the device and the application. You will use a broadcaster-listener model and handler method to allow the application to respond when the user has interacted with the device.

http://livedocs.adobe.com/flash/9.0/main/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Parts&file=00002449.html

http://www.adobe.com/devnet/flash/articles/actionscript_guide_06.html

Use of variables should be utilized to help keep your code flexible. All of us have coded for “hitTest” functions now. Considering mobile devices, The method below is easy on the mobile processor and uses the objects x and y values as well as the objects dimensions.

var obj = new Object (x1, y1, w1, h1, x2, y2, w2, h2);
if((obj.x1 >= obj.x2) && (obj.x1+obj.w1 <=
obj.x2+obj.w2) && (obj.y1 >= obj.y2) && (obj.y1+obj.h1 <=
obj.y2+obj.h2)){
collision = true;
}else{
collision = false;
}

This code checks the relationship of obj.x1’s left edge in relation to obj.x2’s left edge. Next it evaluates the right edge, top edge and finally the bottom edge of both.

Add comment July 14th, 2008