The last Mobile Design UK event was really well presented and provided some great insight into the technical and cultural challenges faced by designers and interaction designers when trying to target mobile platforms.

You can get the full details and registration information of the upcoming Mobile Design UK event from the Mobile Design UK website.

To get a feel for the target of the Mobile Design UK events and there content you can read my post on the previous Mobile Design UK event.

The evening was introduced by Arabella David from Nokia. She outlined the growing importance of user experience in the mobile space and how Forum Nokia is pushing to support Designers and User Experience experts through the Forum Nokia Channel. More information can be found at the Design and Media section of the Forum Nokia Site.

Scott Weiss (@sdweiss) of Human Factors International kicked of the presentations with a dissection and walkthrough of the usability and information architecture considerations when developing mobile applications that use XHTML to reach a broad user audience. It was good to find out that with XHTML as well as many mobile technologies there is often a trade off between features, richness and audience reach.

Antony Ribot (@ribot) from Ribot provided a fantastic presentation on the speed and growth of the mobile information age, and it's subsequent effects on physical trends, culture and behaviors. Also provided some great ideas on how we as producers might need to change the way we approach concepting, brain storming and designing to target these new user expectations.

Gil Kahana of Seren Partners presentation provided an enthusiastic insight into the challenges faced when dealing with the barriers that mobile applications present to users and the ways developers should research, test and experiment to break down those barriers. There was some great discussions that followed Gil's presentation around the fragmentation of some of the technology in the mobile space.

The final presentation by Marek Pawlowski (@marekpawlowski) from PMN - Mobile Industry Intelligence showed some brilliant dissection of the minutia of user value that can be extracted by mobile users and audiences from some of the most innocuous of details, the value of battery life conservation, the range of colours a phone or application is available in or how an application provides user feed back when scrolling.

The Mobile Design UK group offers a refreshing and much needed alternative view of mobile development. At the end if the evening I caught up with Bryan Rieger, one of the event organisers, to find out what types of content they were hoping to present at future meetings,

we don't want to show code

was his first reply. I for one think that's a brilliant mantra to hold true to. In a space dominated by massively varied technologies, huge numbers of acronyms and a huge range of user audiences and platforms I found it a very comfortable evening of knowledge sharing in a format that felt like a well organized brainstorm.

If you are interested in designing & producing content targeting any mobile platform I would look out for up coming Mobile Design UK events. Thanks to organisers for putting together a great line up os speakers and also a big thank you to Forum Nokia for the sponsorship of the evening.

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.

Full details of the event have already been posted bt Mark Doherty at flashmobileblog.com.

Headline Numbers for this update:

261 profiles included
57 new devices
updates to 204 existing profiles
In total that makes 525 device profiles for you to create content with

Download Adobe Device Central Update 7 from here.

The training course was held in Paris which meant a broad mix of different european mobile developers were attended. Its the first training course I have attended and I was surprised at the breadth of experience of the other attendees. A range of backgrounds from designers, lectures, flash developers, service operators and also mobile Java developers.

The wide range of knowledge and experience made for great discussions regarding development practices, the future of mobile, and also the part that Flash, Flash Lite or Flash Platform might play in the emerging mobile data and services market place. I imagine it also made for a real challenge to present to us at times!

These are exciting times to be involved in Flash Lite and mobile development in general. Battle lines still seem to be being drawn between a number of companies, technologies, services and a whole mix of different mobile phones and other devices. Training courses and conferences and gatherings like this and LFPUG which bring together such mixed skill sets offer a great chance to get under the marketing hype and speak to the people actually involved.

Very enjoyable and informative, thanks everyone involved.

So with all these 'new' flash lite components available what can you expect from each component set?

Nokia Flash Lite 2 Components
Nokia have provided their Flash Lite 2 Component set as an MXP file for simple installation into Flash CS3, the components are easily accessible from the components panel once the MXP has been installed. Included in the zip file you download is a full readme.txt explaining how to install the MXP file through Adobe Extension Manager. The components also include full usage instructions in the form of flash help files and usage examples. Flash Lite Components that are included in the distribution are:

• Signal Level display, including network generation.
• Battery level display.
• Dynamic List Component.

The Signal and Battery indicator components react to softkey placement/screen orientation. All three of the components have easily accessible skin components in the library, and also allow limited visual control from the properties panel. Mark Doherty noted that the components appear to be quite memory hungry. The Signal and Battery Indicators seem to use in the region of 600k according to Adobe Device Central, the Dynamic List Example reports around 800k although the actual memory usage of the list without a demo data set is closer to 700k.

Download the Nokia Flash Lite 2 Components

Adobe Flash Lite 1 & 2 Components and UI Examples
Over at flashmobileblog Mark Doherty has released some UI components as well. These are provided for both Flash Lite 1 and Flash Lite 2 projects. There is limited documentations for the examples, the Flash Lite 2 examples look like they should be easy to integrate as long as you intend to use them 'as is' in this case they would simply require the addition of key listeners to control them. If you needed the components to be used in a more dynamic fashion, there would probably be some work to do. Included in the Flash Lite 2 component examples are:

• List, this offers similar functionality to the Dynamic list in the Nokia Component set.
• Slider, This offers a horizontally scrolling icon menu.
• Gapper, This is a vertical variation of the slider.
• TileGrid, Shows a gridded icon menu with scrolling screen control.
• NavModel, this demonstrates a full application screen control system, also included are working Signal and Battery indicators and a list components.

The examples in this file are certainly easy on the memory, all of them use less than 500k, this is particularly impressive of the Nav Model example given the amount of interactivity and feedback that is demonstrated.

As with any Flash Lite 1 work, making use of the earlier versions will be a little more fiddly than the Flash Lite 2 counter parts. But the code in each of the examples is clearly identified and if you know your way around ActionScript 1 you should find incorporating the 'components' easy enough. Included in the examples are the following Flash Lite 1.1 components.

• Carousel, A full screen horizontal slider.
• Displays, demonstrates the various device stats you can access from Flash Lite 1, also included are battery and signal indicators.
• IconMenu, offers a FlashLite 1 version of the Slider component in the Flash Lite 2 set, this is similar to the functionality produced in the tutorial here.
• Menu, actually seems to be a Flash Lite 2 example, an alternative dynamic list example.
• Story, This is an example of scrolling text in flash Lite 1, similar to the scrolling text component I have released.

Agin the Flash Lite 11 components are very efficient when it comes to memory usage. None used more than 400k when published, and most were below 300k. The trade of with both these example sets from Adobe seem to be the slight increase in the amount of work you would need to do to integrate them. The other thing to note, is that these examples do offer examples of far more compelling UI methods than simple lists.

Download the Adobe Flash Lite 1 & 2 Components and UI Examples

Shuriken Open Source Flash Lite 2 Components
The last set of Flash Lite components are those that

Its a little hard to make complete sense of the post from EETimes.com. But some interesting quotes from the short, slightly cryptic article:

By using our new IP, one can design a portable device capable of processing Adobe Flash Lite several times faster, when compared with using a processor.

Also in the announcement is a hint of better video quality as well.

After reducing the number of gates required for an IC and further tuning the video quality output by Adobe Flash Lite, NEC will start offering its IP in August this year.

One thing that does seem to be missing is an explanation of which Flash Lite version they are supporting, although the mention of video implies this is based around the FlashLite 3 player.

You can read the full (breif) announcement of NEC's new Flash Lite IP over at EETimes.com.

One further interesting thing is that I could find no mention of NEC being involved with the Open Screen Project from its press release.

Credit where its due: EETimes.com

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

My session is scheduled for Friday afternoon.

Flash Video Nokia Masterclass - Dave Williamson (Adobe)Learn how to create live video applications with the most popular online video format on Nokia devices.

Over the Air is all sold out now, but you can find all the information about the event over at the Over the Air Blog

I look forward to catching up with you if you are there.

Well, you really believe that Flash is synonymous with the internet and frankly, anybody who wants to browse the web and experience the web's glory really needs Flash support. We were very excited about the announcement from Windows Mobile, adoption of Flash on their devices and the fact that we've shipped 0.5 billion devices now, non-PC devices. So we are also committed to bringing the Flash experience to the iPhone and we will work with Apple. We've evaluated the SDK, we can now start to develop the Flash player ourselves and we think it benefits our joint customers. So we want to work with Apple to bring that capability to the device.

If the mountain wont move to you..

Go Adobe!

Read the full ZDnet article here
Read the SeekingAlpha transcript here

Read the Full Press Release here

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

So why you waiting? download FlashLite 3 for N95 Already

I hope that clears up the confusion.

Stepping back into FlashLite 1.1 (flash 4/5) scripting has been a nostalgic experience. The halcyon days of ActionScript 0/1 were where I broke my teeth, so to speak, on flash. It has been an eye opener also to return to using Perl as well in order to format data efficiently for consumption in my simple FlashLite 1.1 applications.

In these days of XML, SOAP, SQL, and huge component frameworks, it has been nice to go back the the "demo days" of flash and try and eak every byte out of my data format. Remember of course, no XML or SWX support in FlashLite 1.1.

So what have i been playing with? How about a Live London Tube Status FlashLite 1.1 application?

The Data format?

lnID0=0&lnID1=0&lnID2=0&lnID3=0&lnID4=6&
lnID5=0&lnID6=0&lnID7=1&lnID8=0&lnID9=0&
lnID10=0&lnID11=0&itemLoaded=true


The lack of native structured data in FlashLite 1.1 means you have to think differently about what you are conveying, where best to store it, and how to access it. The example format above allows me to form references between pseudo-arrays in the FlashLite file that store much bulkier text labels, those strings can then be used multiple times in the application.

First I have a pseudo-array with my representation of the London Tube Lines.

lineNames0 = "Bkrloo";
lineNames1 = "Cntrl";
lineNames2 = "Crcle";
lineNames3 = "Dstrct";
lineNames4 = "Est Lndn";
lineNames5 = "Hmrsmth & Cty";
lineNames6 = "Jblee";
lineNames7 = "Mtropltn";
lineNames8 = "Nrthrn";
lineNames9 = "Pcdilly";
lineNames10 = "Vctria";
lineNames11 = "Wtrloo & Cty";


Also I store my interpretation of the common tube status' in a similar pseudo-array.

lineStatus0 = "Normal Service";
lineStatus1 = "Short Delays";
lineStatus2 = "Long Delays";
lineStatus3 = "Suspended";
lineStatus4 = "Part Suspended";
lineStatus5 = "Part Closed";
lineStatus6 = "Planned Closure";


Then once the data has loaded, note the last name value pair (itemLoaded=true) it allows my load script to spot when all the data is in the application. I perform a little loop operation to link my labels to line id's and then use the value of the loaded variable to set the frame of a "status" movie clip.


itemTotal = 0;
i = 0;
/*
loop through the loaded data, we know that there are not more than 11 Tube lines in London, at the moment.
*/
while(i < 12)
{
serviceLine = "/serviceBoard/serviceLine";
lnStatus = eval("/channelData_mc/:lnID" add i);
lnLabel = serviceLine add i add "/:_serviceItemLabel";
stLabel = serviceLine add i add "/:_serviceStatusLabel";
lnItem = serviceLine add i add "/serviceItemLine";
stItem = serviceLine add i add "/serviceItemStatus";
set((lnItem add "/:lnNum"), i+1);
set((stItem add "/:lnNum"), (lnStatus+1));
eval(serviceLine add i add "/:_serviceItemLabel") = eval("/channelData_mc/:lineNames" add i);
eval(serviceLine add i add "/:_serviceStatusLabel") = eval("/channelData_mc/:lineStatus" add lnStatus);
tellTarget(lnItem)
{
gotoAndStop(lnNum);
}
tellTarget(stItem)
{
gotoAndStop(lnNum);
}
++i;
}


The Result?

Download the Live London Tube Status FlashLite 1.1 Application for Mobile Devices.

Over the last ten months or so I have been developing and deploying content and applications almost exclusively for use on mobile devices. The work has been familiar, interesting, challenging, frustrating and infuriating in pretty much equal measure. The more frustration I have encountered the more I have tried to investigate, study and learn about the technologies, practices and processes that accompany mobile internet development.

While I was searching for information on delivering my own blog content to mobile devices, I came across Cameron Moll's website and eBook on Mobile Web Design. I downloaded and read the free preview chapters and they gave a great indication of the quality of the content the full eBook would offer. As a result, a short time later I purchased the full eBook, the first eBook I have purchased in fact. I would say that fact alone goes some way to recommending Mobile Web Design.

Mobile Web Design is a relatively short eBook - the PDF only has 104 A4 pages. Included in this figure are the graphical cover page, content pages, an author biography and quite a few images throughout the book. The eBook is presented in a good sized serif font and there are clear stylistic differences between standard copy, quotes, code, foot notes, image annotations and key content points. The recently updated version includes live links to external sources and also a live contents page as well as updates to the content.

There is a consistent and comfortable tone and pace to Mobile Web Design. In reading I never felt a subject was overly technical. Cameron provides a light hearted approach to his writing that offered a leading and encouraging voice that managed to keep my attention on what is to be honest a fairly dry subject matter.

Cameron has provided huge volumes of information and has done a fantastic job in linking to external sources that provide corroborating and alternative view points to the topics Cameron discusses, Many are also foot noted throughout the book. This approach may result in hours of further research to those of a more studious or inquisitive nature, but certainly shows that the author has done enough cross referencing of information and sources to give an informed and knowledgeable opinion.

Cameron has done a great job of covering a little of everything you would want or expect in a book on Mobile Web Design. The book is split into an early section that provides some history of the mobile web, the devices and user levels and also the technologies that have bought it to where it is now. Next is a "fundamentals" section, this is actually a revisiting of some early articles from Cameron's site these are updated in context for the modern mobile web. Next are in depth discussions of XHTML, CSS, testing and validation. Finally are sections covering "other" technologies, how to promote your work and then the book closes with an upbeat call to action for the reader to get going already. The content is obviously based on Cameron's personal research, experience and experimentation or well chosen case studies of relevant applications, services and websites. As I say Cameron is obviously very experience, and does a wonderful job of transferring the knowledge presented to the reader.

Most of the book is focused on XHTML and CSS. FlashLite, JavaMe and SVG all get lumped together in the "Beyond XHTML" chapter with a number of other technologies, services and general mobile telephony applications. This was a disappointment as none of these other technologies really get given the same treatment or time as XHTML and CSS and the chapter ends up feeling a real mishmash of information. Maybe Cameron has avoided these technologies due to lack of experience or perhaps he would benefit working with co-authors to collaborate and extend the depth covered on these other technologies? What ever the reason, the result is Mobile Web Design does come across as rather biased towards XHTML based web browsing on devices, rather than the true mobilisation of applications, services and web presences that Cameron espouses early in the book.

At points Cameron dips his toe into some key development tips and tricks, but very few detailed code examples, one notable exception is dealing with user agent detection. I never felt this lack of depth was a real issue while reading the book on my computer, external resource are so well identified and on a computer easy to follow up there and then online.

Cameron has now announced a print copy of the book, at the same time he has provided a free update to the PDF version. The update includes information on more modern devices, iPhone is given some page space in a number of areas for example ( not so for my beloved Nokia N95 ). I do fear however that the print version of the book may start being out of date almost as soon it comes off the presses.

I would say Mobile Web Design is a little light on application code, and slightly biased towards mobile XHTML browsing as a mobile web solution. These points aside I would highly recommend Mobile Web Design eBook by Cameron Moll for anyone planning to investigate mobile wed and application development and are not sure where to start, or indeed why they should bother. It offers a wealth of well presented, quality information.

• iPhone Reference Library
  Access documentation, guides, and release notes on developing web applications and content for iPhone.
• Web Development Guidelines
  Get the latest development techniques on mobile browser-based user experience design and development.
• Sample Code
  Learn techniques for interactive and standards-based design on iPhone
• iPhone Tech Talk Videos
  Hear from iPhone experts on interface design and processes in optimizing web applications and content.
• Safari Compatibility
  Download Safari 3 Public Beta and design your web application to create the optimal iPhone user experience
• Web App Submission
  Once your app is ready, submit it for possible listing in the Apple web apps library.

Find out more at the iPhone Dev Center.

1. Already using the mx.events.EventDispatcher class in your FlashLite application
2. Planning on or maybe already are, using my com.bittube.core.BatteryBroadcaster class in your FlashLite application. (incidentally if you are I am honored, and would also like to know )

You can download the NetworkBroadcaster classes from the link below.

Download the NetworkBroadcaster.zip

It is also posted in the Downloads area if you loose this post.

The Class is actually part of a larger set of components and classes I have. I will try and prepare some of the others for release as well, for now this was the easiest to tease out and make presentable. It uses a custom "Event" class and the EventDispatcher class to form an "oopy" object that broadcasts changes in your mobile phone battery status to any listener objects.

You can download the BatteryBroadcaster classes from the link below.

Download the BatteryBroadcaster.zip

It is also posted in the Downloads area if you loose this post.

see the Flash Version Comparison Chart

Some Points of interest for me were the following:

• The FlashLite 3 player is actually smaller than the FlashLite 2.1 player
• The minimum memory requirements for the FlashLite 3 player is un-altered
• The recommended memory is un-altered for for the FlashLite 3 Player
• There is no improvement in the worst case memory usage of FlashLite 3 content over FlashLite 2.1
• Added support for meta data in FlashLite 3 Content

Also I see that the FlashLite 3 player has "External API for browser scripting", assuming there is a mechanism to update the players within device web browsers this may well offer a clean interface for the detection of screen orientation I have been experimenting with lately.

Another interesting point FlashLite 2.1 and FlashLite 3 seem to both offer support for "Complex languages (Thai, Arabic, Hebrew, etc.)". Yet this is still not supported by the desktop player? Yet.

FlashLite 3.0 Update for Device Central

Flash Lite 3.0 Update for Flash CS3

Interestingly the download for Flash CS3 is rather cryptically called "RobRoy_9_0_0_d156_patch.dmg"? or "RobRoy_9_0_0_d156_patch.exe" for windows?

Creating and Selling Your Mobile Flash Content

I also noticed Bill has a document linked at the very top of his site, under the banner "Addressable devices for developers".

In those posts I discussed the problem of detecting screen rotation detection on the Nokia N95. I could not get the FlashLite player to register a change in Stage size when switching from portrait to landscape viewing modes. I have since added a little JavaScript function that I thought might be able to detect this change in lieu of the FlashPlayer not working.

Unfortunately all methods I have attempted so far to register a change in orientation have failed. The browser does not seem to support the onResize event which I assumed would provide the answer. This limitation appears similar to information I have found from iPhone web developers that have encountered similar issues.

SmugBlog Makes Reference to it on there site. There is also a couple of links to a Framework that provides a work around of sorts using an interval.

joehewitt, the developer responsible for the facebook I belive, has published the iUI as a google code project.

In addition to the resize problem it seems that the FlashLite 2 player within the browser does not offer support for the FlashVars parameter of the Embed and Object tags, it also does not appear to support appending variables on the SWF path name. These limitations would not allow values to be passed into the SWF file at run time.

A final test I performed was to export my test movie not as FlashLite content, but rather as Flash Player 6 and Flash Player 7 content with ActionScript 2 support. The thinking behind this was that this would offer me some lowest common denominator for publishing mobile flash content on a broad range of devices. Sony's PSP of course uses the Flash Player 6 as its platform while Nintendo's Wii uses the Flash Player 7. Both versions of the file ran within the FlashLite 2 Player. Although no the IDE did complain about using FlashLite specific FSCommand2 functions. In addition there was some issues with the image loader in the Flash Player 6 version of the swf when loaded by the FlashLite 2 player, the image was rotated through -90 degrees for some reason.