Namespaces

Variants
Actions

Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries over the next few weeks. Thanks for all your past and future contributions.

Archived:Flash Lite UI Components

From Wiki
Jump to: navigation, search

Archived.pngArchived: This article is archived because it is not considered relevant for third-party developers creating commercial solutions today. If you think this article is still relevant, let us know by adding the template {{ReviewForRemovalFromArchive|user=~~~~|write your reason here}}.

We do not recommend Flash Lite development on current Nokia devices, and all Flash Lite articles on this wiki have been archived. Flash Lite has been removed from all Nokia Asha and recent Series 40 devices and has limited support on Symbian. Specific information for Nokia Belle is available in Flash Lite on Nokia Browser for Symbian. Specific information for OLD Series 40 and Symbian devices is available in the Flash Lite Developers Library.

Article Metadata
Article
Created: austin007 (13 Jun 2009)
Last edited: hamishwillee (13 May 2013)

Mobile Development with Flash Lite

Mobile applications still seem to be just about to happen. Every year there are some great advances in the underlying network, data transfer is faster, devices are smarter, more consumers buy them, and even the providers seem to come up with reasonable data rates. Customer interest seems to be the last (and biggest) battle ground, and this year it’s the iPhone that makes the people to realize the power of the little devices they’re already carrying with them.

Why Flash Lite ?

There are four key options to develop for mobile phones at the moment:

  1. Using platform-specific “native” development tools, like the C++ devkit on Symbian devices, or the Compact .NET framework on Windows Mobile devices.
  2. Using the Java language and the J2ME platform to build more or less device-independent applications.
  3. Building Flash Lite movies and ActionScript code using the Flash Lite runtime.
  4. It’s also possible to build fully web-based applications, providing XHTML(Xtensible Hypertext Markup Language) mobile-specific pages on the site.

Platform-specific tools tend to provide the best possible user experience, and they look and feel closest to the mobile device, using the same UI(User Interface) components as the built-in applications.

Web based solutions work well in some situations, but locally installed applications have the advantage of a richer UI, tend to be faster to launch than the browser, and have no associated data transfer costs.

Things required to be started...

To get started, we need a number of things:

-> The Flash authoring environment, a trial version can be downloaded from http://www.adobe.com/products/flash.html

-> The Flash Lite-specific SDK, with some documentation, examples, and reusable components, also from http://www.adobe.com/devnet/devices/downloads.html

-> We also ideally need a phone to test the application. This is not so straight forward, as there are a number of devices which have the Flash Lite player built in, but you might need to buy the player for other devices. The link, http://www.adobe.com/products/flashplatformruntimes/, should help you to see if your phone supports Flash Lite.

The device profiles for the IDE are updated regularly, you can reach the download page from the Device Profiles dialog.

I’ve also acquired a nice book on Flash Lite development, called “Flash Applications For Mobile Devices”. I think it’s essential for most of us, but I suppose long-time Flash experts might be able to get by just through the Adobe/Macromedia tutorials.

The Flash 8 Professional authoring tool is quite expensive for hobby development at around 700$. So make sure you get the most out of it during the 30 days trial. Perhaps if you enjoy Flash development, try to get a small professional project on the platform, that should cover the costs, and will make you feel like you’ve earned the right to buy this new toy. There are some free Flash development tools, but they’re not focused on mobile development, and they’re far from the Macromedia/Adobe IDE capabilities.

How Does It Work?

The web based Flash toolset and runtime grew into a nice platform for application development, with a mature object-oriented scripting language, and some broad choices on the development approach. Flash Lite on the other hand is still firmly rooted in animated movie-land, with some scripting extensions. The most widely deployed runtime, Flash Lite 1.1 is based on Flash 4, and it’s really focused on adding scripted behavior to animation frames.

The book I recommended has a number of approaches and tricks to coerce this environment into an application platform, but developers will need to get their minds around Flash movies, layers, and timelines to do anything useful.

The central backbone of a Flash Lite application is a timeline. It’s basically a sequence of frames (keyframes and transitional frames between them). Each timeline will have a number of layers, hosting different objects for the application. By objects I mean images, text, buttons - the language itself has no object-oriented features. The Flash developer has the freedom to place these objects on keyframes, and define transitions, movement, and scripts triggered by events. These events can be things like the frame being rendered, or button press handlers.


Flash time line.png

When running the application, the Flash Player will play through the sequence of frames, executing any animation, transformation, or ActionScript routine defined in the Flash program. It’s worth mentioning that unless we explicitly stop it, the animation will loop by default. The loop can be stopped by putting a stop(); ActionScript command on the last keyframe of the timeline.

Laying Out Components

The user interface is laid out on a canvas, for which you can set a default size based on the phone platform targeted. This does not mean that the form will have that specific fixed size - the canvas and the components will be resized based on the mobile device’s screen size. This is one of the reasons why Flash leads you towards using vector-based graphics as much as possible, instead of bitmaps. When you insert a bitmap image in your workspace, the IDE will allow you to transform it into a set of vector objects. You will need to group the resulted set of objects into a single object, if you want to then move it around.

Each animation can have multiple layers, just like the separate editing layers in Photoshop. If you animate several objects, you can place each object on its own layer, and define the transformations on a per layer basis. It’s useful to separate out the initialization logic and the non-object-related ActionScripts into a separate layer.

Whenever you want to perform an animation, you can place the object onto a keyframe, add another keyframe and place the object into its final position, then select the animation effect (transformation, movement, tilting, resizing, etc.). The runtime itself will render the actual frames between the keyframes automatically.

User interaction can be captured in a number of ways:

-> By capturing keypresses: there’s a mechanism to place a “keycatcher” object on the screen, in an out-of-frame location, which will receive the keypresses on the mobile handset’s keypad. You can define the event handling code in the Action window for the catcher object, using the on(keyPress "1") {} notation.

-> By capturing “soft key” events on the mobile device: typically there’s a customizable soft key (left and right) on each mobile phone. The PageUp and PageDown events are mapped to the soft keys. The labels for the soft keys need to be defined using the fscommand2("SetSoftKeys") command. This command should be also placed on the initial frame.

-> Screen objects themselves can act on user events, when the user navigates to a button, and presses the center button on the handset “joystick”. To enable a component on the screen to act as a pushable button, select the image on the form, and convert it to a Symbol, specifically a Button type symbol. Then the on(press) {} event handler code can contain the scripted events you want to execute when the button is pressed.

Flash time convert.png

This page was last modified on 13 May 2013, at 23:42.
33 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×