blog.rive.be

Mobile Summit
November 16, 2008 at the Marriott from 1pm-6pm
Join Adobe and our partners — Nokia, Qualcomm®, Verizon, Sony Ericsson, GetJar, Thumbplay®, and Zed — to learn about new opportunities for mobile developers this year. Get a sneak peak at what you will see and hear at MAX before anyone else does! Hear from Adobe partners and key industry players as they present the newest mobile solutions, technologies, and distribution opportunities for mobile developers. To learn more and RSVP for this event go to: http://www.eventsadobe.com/mobilesummitmax08/invite.html

Mobile Fast Pitch Networking Party
November 19, 2008 at the Thirsty Bear from 6:16pm-9:30pm
Adobe is hosting a special Mobile Networking Party to allow developers to showcase their mobile applications using our Adobe® Flash® mobile technologies. If you already have a web-based application and are thinking of going mobile, you can also present your idea and get feedback from our industry leaders. Join us to support fellow developers or to present your ideas. For more RSVP and presentation information for this event go to: http://www.eventsadobe.com/mobilenetworkingparty/invite.html

In addition to these 2 events there are also a number of great sessions on at the conference tailored to Mobile:

• Open Screen Project: Delivering Rich Internet Experiences Across Devices
• Creating Mobile Applications: A Real-World Example
• Mobile Workflows with Creative Suite® 4 and Adobe Device Central CS4
• Flash Lite 3: Learn How to Package and Distribute Mobile Content
• Spotlight on Finetune and Teknision™: Building a Multiscreen Application
• Create Unique Browsing Experiences on Nokia Phones
• How to Build a Mobile Business
• Developing the Ultimate Flash Cast™ Channels
• Project Capuchin – Bridging Adobe Flash Lite and Java ME™

Remember the most popular MAX sessions fill very early, so be sure to register today to secure seats in your preferred sessions. You’ll be surprised by what real live Adobe Flash Lite applications exist today.

Interestingly this is a concept I began to scratched the surface of with my presentation at Flash On the Beach Last Year, and over the last few months has been a subject I have continued to keep close to hand both in my day job and my personal development projects. At the moment the Flash Player Fragmentation offers a considerable challenge to any developer wanting to design and or develop for multiple devices and multiple screens.

Articles like the one posted over at ADC on adaptive screen layouts offer a great foot up. But before we get to visual display we need to know what player version we are targeting. And to do that, we have to hit the time machine button and roll back all the way to Flash 4.....

The Following code should be exported as a Flash 4 ActionScript 1 .swf. This will ensure it can run on the broadest client base. The resultant .swf acts a cross platform redirect that should work within both stand alone and browser based flash clients. Once the .swf loads it will identify the player variation and then redirect the viewer to the appropriate content for there player platform by loading a replacement content swf at the main player level.

 
/**
Declare flash platform player strings here. As more devices are discovered this list will grow, the strings are from the getVersion() function
*/
// FlashLite 1.1 player platform string
FL1PLATFORM = "5.2";
// FlashLite 2 or 3 player platform string
FL2PLATFORM = "FL ";
// psp Flash Player Platform string
PSPPLATFORM = "NF3";
// Wii Player Platform String
WIIPLATFORM = "WII"
// windows Flash Player Platform string
WINPLATFORM = "WIN";
// mac Flash Player Platform string
MACPLATFORM = "MAC"
/**
Declare files names for flash files of different device configurations
NOTE! Include the full path name here
*/
flashLite1 = "fl_fl1.swf";
flashLite2 = "fl_fl2.swf";
flashLite3 = "fl_fl3.swf";
flash6PSP = "flash6PSP.swf";
flash7WII = "flash7WII.swf";
flashFull8 = "FullFlash8.swf";
flashFull9 = "FullFlash9.swf";
// get the player version
flashVersion = getVersion();
// display full player information
trace(flashVersion);
// test for existence of player version for very early players
if(flashVersion == "")
{
	/*
	Player does not support $version so is VERY early Flash PLayer
	Decide how you wish to handle this case here
	*/
}
// crop the player version to store the platform
playerPlatform = substring(flashVersion, 0, 3)
// Assign a player version for testing
// playerPlatform = PSPPLATFORM;
// display platform information
trace("playerPlatform");
trace(playerPlatform);
// use flashLite 1.1 file
if(playerPlatform eq FL1PLATFORM)
{
	// launch a FlashLite 1.1 version of the file.
	trace("Launch FlashLite 1.1 player version");
	loadMovie(flashLite1, "_level0"); //+"?stgWidth="+Stage.width+"&stgHeight="+Stage.height);
}
else
{
	if(playerPlatform eq PSPPLATFORM)
	{
		// launch a PSP or Flash 6 version of the file
		trace("Launch PSP player version");
		loadMovie(flash6PSP, "_level0"); //+"?stgWidth="+Stage.width+"&stgHeight="+Stage.height);
	}
	else if(playerPlatform eq WIIPLATFORM)
	{
		// launch a PSP or Flash 7 version of the file
		trace("Launch WII player version");
		loadMovie(flash7WII, "_level0"); //+"?stgWidth="+Stage.width+"&stgHeight="+Stage.height);
	}
	else if(playerPlatform eq FL2PLATFORM)
	{
		// grab the player version number for flash lite
		playerVersion = substring(flashVersion, 4, 1);
		// display version information
		trace("playerVersion");
		trace(playerVersion);
		if(playerVersion == "7")
		{
			// launch a FlashLite 2 version of the file.
			trace("Launch FlashLite 2 player version");
			loadMovie(flashLite2, "_level0"); //+"?stgWidth="+Stage.width+"&stgHeight="+Stage.height);
		}
		else if(playerVersion eq "8")
		{
			// launch a FlashLite version of the file.
			trace("Launch FlashLite 3 player version");
			loadMovie(flashLite3, "_level0"); //+"?stgWidth="+Stage.width+"&stgHeight="+Stage.height);
		}
	}
	else if((playerPlatform eq WINPLATFORM) || (playerPlatform eq MACPLATFORM))
	{
		// grab the player version number for desktop player
		playerVersion = substring(flashVersion, 5, 1);
		// display version information
		trace("playerVersion");
		trace(playerVersion);
		if(playerVersion == 8 )
		{
			// launch a desktop version 8 of the file.
			trace("Launch desktop player version");
			loadMovie(flashFull8, "_level0"); //+"?stgWidth="+Stage.width+"&stgHeight="+Stage.height);
		}
		else if (playerVersion == 9 )
		{
			// launch a desktop version 9 of the file.
			trace("Launch desktop player version");
			loadMovie(flashFull9, "_level0"); //+"?stgWidth="+Stage.width+"&stgHeight="+Stage.height);
		}
	}
}
stop();
 

The below zip includes the full source and example 'redirection' movies. If you have any other Client version strings that can be added please let me know and I will try and keep the script updated. For example I would love to know what the Sony Ericcson Java client version reports.

Identiying Flash Client Versions

One of the most enjoyable features of FlashLite 1.1 is its (lack of) ability to measure the height, width or any metric of text once it is displayed on the screen of your shiny new Nokia N95. This makes efficient text scrolling a particular joy to produce. To this end I have produced a simple example of a fairly flexible scrolling text component for FlashLite 1.1.

Below is a comprehensive (hopefully) tutorial describing how to create such a component.

Creating the component project
The first thing to do is to create a new FlashLite file, in this tutorial I have based the development on a QVGA mobile phone, such as the N6110 or N95. To do this simply set the stage size to a width of 240 pixels and the height to 320 pixels. I haven't altered the default frame rate. In the flash publish settings "File > Publish Settings" set the Flash version to FlashLite 1.1, this will automatically set the ActionScript version to 1.0 (is there a 1.anything else?) after that we are good to go!

Creating the scrolling text field

1. Create a new symbol in your Library and name it "TextArea".
2. On the stage of this symbol create a dynamic text field with a width of about 220 pixels and a height of 280 pixels.
3. With the text field selected put "text" in the Var field in the properties inspector. We will use this later to assign text to the field, remember no instance names on text fields in FlashLite 1.1.
4. Next create a new symbol in your Library and Name it "ScrollingTextArea".
5. On the stage of this symbol drag an instance of your "TextArea" symbol and position it to position X:0 and Y:0 and give it an instance name of "textArea_mc", for clarity you should name the layer this instance sits on "TextArea" or you might prefer "textArea_mc".
6. Add a new layer to your "ScrollingTextArea" symbol and name it "ActionScript". On this layer in frame 1 add the ActionScript command stop();.
7. Create a new layer folder and name it "CallFunctions".
8. Inside the "CallFunctions" folder create a new layer and call it "init", on this new layer create a blank key frame on frame 2 and give it the frame label "init".
9. On the new "init" frame add the following code that will be used later to initialise our scrolling text field.

   
// store maxScroll Locally
maxScroll = textArea_mc:text.maxscroll;
// if max scroll is greater than 1 we know we need the text to scroll
if(maxScroll > 1)
{
// store the current scroll position loccally
currentScroll = 1;
// set scrollPercent to 0.
scrollPercent = 0;
//set the scroll bar height to the height of the text field
scrollBar_mc.trackHeight = textArea_mc._height;
//set the scroll thumb height
scrollBar_mc.thumbHeight = 30;
// init the scroll bar
call("scrollBar_mc/:Init");
// show the scroll bar
scrollBar_mc._visible = true;
}
// otherwise hide the scroll bar, its not needed.
else
{
scrollBar_mc._visible = false;
}


   At this stage most of the values in this code block will not function, but they will be required in a later step.

10. Inside the "CallFunctions" folder create a new layer and call it "setText", on this new layer create a blank key frame on frame 3 and give it the frame label "setText".
11. On the new "setText" frame add the following code that is used to populate our text field component.

    
// set the text value to the text field
textArea_mc:text = text;
// call init to reset scroll parameters
call("init");


12. Inside the "CallFunctions" folder create a new layer and call it "scrollUp", on this new layer create a blank key frame on frame 4 and give it the frame label "scrollUp".
13. On the new "scrollUp" frame add the following code that is used to scroll the text in our component up the screen.

    
// increase the text scroll
textArea_mc:text.scroll++;
// store the current scroll position locally
currentScroll = textArea_mc:text.scroll;
// if the current scroll position is the same as maxScroll scrollPercent is 100
if(currentScroll == maxScroll)
{
scrollPercent = 100;
}
// other wise calculate the percentage scroll position
else
{
scrollPercent = Math.ceil(((currentScroll-1)/maxScroll) *100);
}
// set the scroller scroll percentage
scrollBar_mc.scrollPercent = scrollPercent;
// call the scrollBar setScrollPercent function
call("scrollBar_mc/:setScrollPercent");


14. Inside the "CallFunctions" folder create a new layer and call it "scrollDown", on this new layer create a blank key frame on frame 5 and give it the frame label "scrollDown".
15. On the new "scrollDown" frame add the following code that is used to scroll the text in our component up the screen.

    
// decrease the text scroll
textArea_mc:text.scroll--;
// store the current scroll position locally
currentScroll = textArea_mc:text.scroll;
// if the current scroll position is at 1 then there is no more scrolling to be done, so scrollPercent is 0
if(currentScroll == 1)
{
scrollPercent = 0;
}
// other wise calculate the percentage scroll position
else
{
scrollPercent = Math.ceil(((currentScroll-1)/maxScroll) *100);
}
// set the scroller scroll percentage
scrollBar_mc.scrollPercent = scrollPercent;
// call the scrollBar setScrollPercent function
call("scrollBar_mc/:setScrollPercent");


16. Finally add code to frame 1 of the actionscript layer so it looks like this:

    
// by default hide the scrollbar
scrollBar_mc._visible = false;
// call the text field init function
call("Init");
stop();


Thats all there is for the development of the text field, and also for the scrolling functionality. You will notice that in our text field "scrollUp" and "scrollDown" call frames we reference a scroll bar clip, we will now create that scrollbar.

Create a simple FlashLite 1.1 scroll bar component

1. In your library create a new symbol and call it "square".
2. On the stage of your new "square" symbol draw a square with no stroke give it a width and height of 50 pixels, place the graphic at X:0 and Y:0.
3. In your library create a new symbol and call it "scrollbar".
4. Label the layer in your new "ScrollBar" symbol "scrollTrack". Bring an instance of the "square" symbol on to this layer and position it at X:0 and Y:0 change the symbol instance's with to 10 pixels and its height to 100 pixels. Also give the instance an instance name of "scrollTrack_mc" and apply a colour tint of your choice.
5. Create a new layer above the "scrollTrack" layer name this new layer "ScrollThumb" and add another instance of your "square" symbol to it.
6. This time set the instance name to "scrollThumb_mc". Position it at X:1 and Y:1. Set the new "scrollThumb_mc" width to 8 pixels and its height to 50 pixels. Again apply a colour tint, making sure it is different to the one you applied to the "scrollTrack_mc" instance.
7. Add a new layer and name it "ActionScript". In frame 1 of this new layer add the following code:

   
// call the scroll bar init function
call("init");
stop();


8. Create a new layer folder and name it "CallFunctions".
9. Inside the "CallFunctions" folder create a new layer and call it "init", on this new layer create a blank key frame on frame 2 and give it the frame label "init".
10. On the new "init" frame add the following code that will be used later to initialise our scrolling scroll bar.

    
// apply padding to the scroll thumb
scrollPadding = 1;
// call the set scroll height function
call("setScrollHeight");


11. Inside the "CallFunctions" folder create a new layer and call it "setScrollHeight", on this new layer create a blank key frame on frame 3 and give it the frame label "setScrollHeight".
12. On the new "setScrollHeight" frame add the following code.

    
// resize the scroll track
scrollTrack_mc._height = trackHeight;
// resize the scroll thumb
scrollThumb_mc._height = thumbHeight;
// set the tscroll thumb position to the padding value
scrollThumb_mc._y = scrollPadding;
// store the max scroll position
maxScroll = (trackHeight - thumbHeight);


13. Inside the "CallFunctions" folder create a new layer and call it "setScrollPercent", on this new layer create a blank key frame on frame 3 and give it the frame label "setScrollPercent".
14. On the new "setScrollPercent" frame add the following code.
    
// set the scroll position based on a percentage value using math.
scrollThumb_mc._y = Math.max(((maxScroll*(scrollPercent/100))-scrollPadding), scrollPadding);


This completes the development of the simple scrollbar component, all you need to do is to add it to the "ScrollingTextArea" clip we created earlier.

1. Return to editing the "ScrollingTextArea" symbol in the library. Add a new layer above the "TextArea" layer and name it "ScrollBar".
2. Drag an instance of the SrollBar symbol out onto the new layer. Position the new instance at X:225 and Y:0.
3. Give the new ScrollBar instance an instance name of "scrollBar_mc".

This completes the development of the scrolling text field component. All that remains is to show how it can be used within a project. To do this we need to add the scrolling text field to the stage of the main time line, add some ActionScript to populate the text field component, and then add a key press handler.

Completing the project

1. Re-name the layer "Layer 1" on the main movie time line to "textArea".
2. Drag an instance of our "ScrollingTextArea" clip onto the new "textArea" layer. Position the new instance at X:0 and Y:19. Give the new instance an instance name of "scrollingText_mc".
3. Create a new Layer above the "textArea" layer and name the new layer "ActionScript". On frame 1 of this layer add the following code:

   
// dummy text to populate our text field
textVar0 = "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce non urna. Ut leo metus, euismod non, semper et, ultrices at, nisl. Fusce non orci vitae dui blandit sagittis. Vestibulum laoreet feugiat leo. Suspendisse malesuada. Maecenas ultricies fermentum mi. Proin nulla. Mauris at dolor a nisl cursus congue. Maecenas id justo tincidunt augue molestie commodo. Donec nec metus eu tellus cursus mollis. Cras justo. Nunc sapien arcu, luctus id, porta sit amet, ultrices non, metus. Donec cursus. Aenean eleifend facilisis odio. Sed suscipit, odio eu fringilla ornare, eros metus eleifend quam, eget facilisis nulla turpis at tellus. Ut et massa a est faucibus fringilla. Nam nisl magna, condimentum non, lobortis et, porta non, ipsum. Aliquam ultricies augue sed urna. Sed ligula magna, vehicula at, scelerisque id, luctus eget, tortor. Donec aliquet purus ut neque.\n\nCras porttitor facilisis sem. Praesent cursus nulla euismod lorem. Donec vitae nunc. Quisque nec quam. Integer nonummy nisl vel mauris. Aliq\n\nam sed felis eu risus scelerisque scelerisque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed tortor nisl, sodales et, eleifend sed, porta eget, urna. Sed adipiscing dolor sit amet dolor. Vestibulum fermentum lorem quis nulla. Donec id ligula. Suspendisse potenti. Aenean ac quam quis sapien sollicitudin dapibus. Cras vitae neque nec ante pharetra hendrerit.\n\nDonec ante lectus, gravida non, nonummy et, pulvinar ut, lectus. Ut sem nisi, dapibus non, scelerisque at, convallis sit amet, dolor. Cras vitae velit et lectus rhoncus ullamcorper. Sed sodales adipiscing tortor. Curabitur non dui ut ligula laoreet mattis. Ut vitae lacus quis enim placerat tristique. Donec ornare mauris eget sem faucibus lacinia. Vestibulum hendrerit diam et neque. Vestibulum imperdiet. Maecenas tincidunt felis vitae lectus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam suscipit hendrerit felis. Mauris convallis elit vel justo. Nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam vel mi. Phasellus ultrices porta felis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Ut sed metus vel erat ultricies egestas. Pellentesque et ligula.";
// alternate dummy text to try, this should hide the scroll bar
textVar1 = "Test Text";
// set the text var we want assigned to our text field
scrollingText_mc.text = textVar0;
// call teh set text function on our scrolling text field
call("/scrollingText_mc/:setText");
stop();


This provides some dummy text with which to populate the text field component that has been developed, it then assigns one of the text variables to the components "text" value, and calls the "setText" function in the call frame of the scrolling text field component.

At this point you could export and test the movie, you should see the field is populated, and the scroll bar is correctly scaled and displayed to indicate that the text will scroll. Finally we create the controls to make the textscroll.

1. Create a new button in your library and call it "keycatcher".
2. In the "up" frame of this button I have put simple text label with the string "KeyCatcher" so I can identify the symbol on stage.
3. Return to the main timeline and create a new layer above the "textArea" layer, name this new layer "KeyCatcher".
4. Drag an instance of the "keycatcher" button onto the stage on this new layer. Position it off stage at X:-110.0 and Y:0.
5. With the "keycatcher" button still selected add the following key handling code to the button:

   
// assign our down key press handler
on (keyPress "")
{
// only cal the scroll function if the test is not at its maximum scroll
if(scrollingText_mc.currentScroll < scrollingText_mc.maxScroll)
{
call("scrollingText_mc/:scrollUp");
}
}
// assign our up key press handler
on (keyPress "")
{
// only cal the scroll function if the test is not at its minimum scroll
if(scrollingText_mc.currentScroll > 1)
{
call("scrollingText_mc/:scrollDown");
}
}


All that should remain is to save, export and test you new component in Device Central.

Download the source files of the scrolling text component for Adobe FlashLite 1.1

NOTE: If you have used embedded fonts in your text area and are seeing no text appearing, try using device fonts (non embedded) instead. Apparently there is a know isue with Flash CS3 exporting embedded fonts in FlashLite 1.1 swf files that are viewed in Device Central. More information is discussed briefly on the Adobe Device Central forums