If you haven't noticed a significant focus towards development on alternate phones/devices with Macromedia products lately, exactly how is the weather these days under your rock? ;-)
Seriously- Flash 8 includes a LOT of workflow improvements related to mobile development, and building on yesterday's FOTD covering the Style Rendering Toolbar in Dreamweaver, proofing and debugging your mobile applications with Flash 8 will also get easier. Today I'm going to step through a Flash 8 mobile workflow to show you just how easy it'll be to get into mobile development- once you get your hands on Studio 8, of course.
As with Flash MX 2004, when selecting 'File > New...' and creating a new Flash document, you can choose from a variety of template projects, including not just traditional document types, but specific templates for the various mobile device platforms you may want to target.
Mobile Templates - Flash 8 Start Page
The default mobile development templates available in Flash 8 (by device category) include:
Global Phones
These templates are for full-screen development on supported, Symbian-based handsets.
- Flash Lite 1.1 - Symbian Series 60 Phones
- Flash Lite 1.1 - Symbial UIQ Phones
Japanese Phones
(Note: these templates may require resizing your stage, based on the specific handsets you're developing for.)
- Flash Lite 1.0 - Browser
- Flash Lite 1.0 - Ringtones
- Flash Lite 1.1 - Browser
- Flash Lite 1.1 - Ringtones
- Flash Lite 1.1 - Screensaver
- Flash Lite 1.1 - Wallpaper
PDAs
These templates cover development to PDAs in at least 2 modes (both full screen, and with the soft input panel opened), and an in-browser display size for Windows Mobile devices.
- Motorola A92X
- Nokia 7710
- Sony CLIE NX70 - Full Screen
- Sony CLIE NX70 - Soft Input Panel open
- Sony CLIE NZ90 - Full Screen
- Sony CLIE NZ90 - Soft Input Panel open
- Sony CLIE UX50 - Full Screen
- Sony CLIE UX50 - Soft Input Panel open
- Windows Mobile - Browser
- Windows Mobile - Full Screen
- Windows Mobile - Soft Input Panel open
Since I'm using a Series 60 phone (the painfully-spartan Nokia 6620), I'll choose the Series 60 template from the Global Phones category, and create a new document based on that profile- which pops up preconfigured for Flash Lite 1.1 development at the 176 x 208 screen dimensions for my phone. Nice! Now there are a few other little changes to Flash 8 you'll note, starting with the Property Inspector.
Property Inspector
The Property Inspector in Flash 8 has been updated to give quick access to your project defaults:
The Flash 8 Property Inspector (showing document/publish settings)
First, the PI now includes a Device 'Settings...' button that will let you review and change the list of supported devices (based on the templates currently available) in the new Device Settings dialog - which we'll cover in a second. You'll note that as we specified a Symbian Series 60 device template, the PI reflects that our target is the standalone Flash Lite 1.1 player. First up, let's see what the Device Settings lets you specify.
Device Settings
The Device Settings dialog lets you specify the handsets you'll target with your Flash Lite movie/application.
The Device Settings Dialog
The first menu lets you set the content type you'll be building (although I'm targeting the basic standalone Flash Lite 1.1 player, some phones support other types of Flash resources such as ringtones, animated wallpaper and screensavers, and much more), and the current stage size is also displayed so you can verify aspect ratio/dimensions with your target device(s).
The left combo box allows you to browse the available handsets for the type of project you've selected (in our case, again- Series 60 Flash Lite 1.1 standalone player movies/applications). Blue entries are available for your current target, 'ghosted' or 'dimmed' selections are not- this helps you quickly scan the list of available devices for just the ones you're interested in, that support the target content/platform you've selected.
The right combo box is the set of test devices you have access to from within the Mobile emulator (more on that shortly- no worries!). You can of course add additional handsets/devices from the left-hand combo box and remove them from the right-hand combo box to get just the set of devices you're concerned with (make sure the stage size still matches up correctly, though- if it's not in the right-hand list to begin with it could very well be a different screen resolution). Pretty straightforward! Let's close this dialog and move on.
Publish Settings
Now that we've configured the devices we want to develop for, click the Publish 'Settings...' button in the Property Inspector, and you'll see a mobile-specific setting here, too:
The Flash 8 Publish Settings dialog (showing document/publish settings)
First- note that (in the 'Flash' tab of the dialog) Flash Lite 1.0 and 1.1 are now available as Player versions in the first drop-down menu. The ActionScript version menu is also conveniently ghosted out, as only ActionScript 1.0 is supported in Flash Lite 1.1. The 'Formats' tab (where you specify which files are exported when publishing your movie/application) hasn't really changed, so we won't spend much time there. I'm just going to concentrate on developing my widget application from here, using my freshly-resharpened Flash 5 skills (!). I open the Actions panel...
The Flash 8 Actions panel
... and immediately note that there's a line of AS already pre-entered for me- the fscommand2() function call that sets my movie to full-screen mode at startup - and that you can filter the left-hand browser based on ActionScript version- including Flash Lite 1.0 and 1.1, along with ActionScript 1.0/2.0 for standard development. Nice! So back to development, I place my assets, write my AS code as expected - but once I'm ready to test the movie, things get really interesting.
Mobile Emulator
So I've got my quickie Flash Lite 1.1 application sussed out in the Stage, Timeline and Actions panel- and hit Command/Control-Return to test the movie- and am immediately greeted by the plush new Mobile Emulator:
The Flash 8 Mobile Emulator
You can select from any of the devices you'd previously configured in the Device Settings 'chooser' (they'll be in the Test Device pull-down menu), confirm the dimensions and file size of your SWF, and choose whether or not you'll want to see trace information, general information (as to the system features the currently-selected handset supports), and/or warnings in the Output panel:
Output Panel w/Device Information
These device profiles are managed via a collection of XML 'property definitions' in your Flash 8 configuration folder (defining the characteristics/system feature support for each particular device), and a series of related PNG files that both define the visual 'skin' as well as the button functions/regions for that particular device- so that you can use the visual onscreen representation of your device and the soft/hard keys Flash Lite (or the Flash Player) can access directly are all clickable. Sweet!
With the new emulator, you now have an easy (and very flexible) way to proof your SWFs in context on the device of choice and make sure your key mappings are working as expected, without having to go through the Flash MX 2004 workflow of publishing the SWF, moving it to your phone, testing on the physical hardware- and then repeating the process (n) times until everything's tight and ready to roll. Trust me, that was a painful process indeed. You can even switch to different handsets within the emulator to test multiple devices in one fell swoop- which makes developing for carrier-specific handset groups or even personal/family handsets very easy to manage.
So... whaddaya think?
My take- outside of writing your AS code, configuring back-end data services and building your visual assets for you, Flash 8 will cover all the other nitpicky details and workflow snafus for your mobile projects in fine fashion, a very welcome set of features for new and old mobile developers alike. And if you've been hesitating to get started with mobile development due to complex or convoluted workflows and unclear deployment processes, you won't have much of an excuse anymore after Flash 8 launches.
A quick heads-up- I won't be posting a FOTD this coming Monday due to the US Labor Day holiday- so I hope you all have a fantastic 3-day weekend! I'll make up for the missing FOTD next week with some additional posts/surprises, no worries- just keep reading, I'll keep writing. :)
Sweet, have a good weekend. Can't wait for more. :)
Very cool. This should really help as testing/demoing apps effectively had been the biggest hurdle up to now.
Keep it up, I read each and every FotD. Might even miss them when Studio 8 comes out. ;) Have a great long week-end.
for Mobile Emulator, does the emulator adapt with Flash 8? or we need to download the emulator itself to test with flash lite?
Hi, Jess-
It's fully integrated with Flash 8 (no download required- although additional device profiles may be made available for download)- as noted in the tutorial/walkthrough, all you need to do to access the mobile emulator when testing/debugging your projects in Flash 8 is to specify your device target as a handset/handheld device. When your FLA file's device/publish settings are configured for mobile development the usual ctrl/command-enter 'Test Movie' command (or 'Debug Movie') simply routs your SWF thru the emulator- quite intuitive and easy, IMHO.
Hope this helps clarify!
It's cool.Thanks for your informative explanation. May I know whether I can include any database retrieving from back-end database system to the Mobile Emulator using flash 8? Is Navigation Access from page to page available in the Mobile Emulator. Just like our real life mobile phone, that can navigate from page to page?
Hi, Jess- the mobile emulator simply plays the SWF as authored (so if you're connecting to back-end databases, then sure- they should work just fine there as they did in the Flash MX 2004 'Test Movie' preview). For the supported phones, any key that's accessible via Flash Lite will perform the same function within the Flash emulator (i.e. it just runs a SWF and gives you access to the phone keys that are available in that particular handset to Flash Lite). Assuming you've programmed the key bindings correctly in Actionscript, then sure- the available keys should do what they're supposed to when testing movies thru the emulator, including 4-way navigation/joysticks and the like. HTH!
You may use HTML tags for style)
I would like to ask that if I use Microsoft.NET as server in order to connect to Flash Lite for front end GUI application, will it be possible? It is to connect and sending data queries consistency in bidirection between client(Mobile Flash) and server(.NET). Besides that, is there any other method to communicate between client and server if not using Microsoft.NET?
Jess-
Right now, IMHO there's no direct way to connect Flash Lite 1.x apps to back end applications, outside using loadVars() calls or the like to send basic request/response parameter sets. Keep posted for upcoming info on Flash Lite 2 (expected very early in '06), though- which will have an updated programming model (based more on FP7/AS2), and should address remote connectivity as well...
Thanks for your comment.If i wish to keep sending data and information consistently to my mobile phone with Flash Lite using GPRS or WAP, do you have any idea how do I apply Client/Server architecture to Flash Lite in mobile?
Hi, i am christine would like to ask after we implement the movie and inside the movie we are require to connect to a server would it be possible?
Jess- you'd have to manage client state manually on the server or build a lightweight management structure in Flash Lite- there's no built-in framework to handle it however so it's strictly 'build-your-own', alas.
Christine- see my prior comment in response to Jess' original question (or my answer to your question in another comment here). Yes, you can connect to a server by using loadVars or loadMovie- so you would construct a back-end script to respond to these calls much as with doing a POST or GET call in a traditional web app.
May I have any guideline on how to manage client state manually on the server on Flash? Would you like to explain more in lightweight management structure in flash lite too? Thanks for your comment.. :-)
Jess- I've suggested a few ways to step into this already- FlashLite 1.x is limited in this respect.
A simple 'client state management system' could be as basic as simply generating a unique 'ID' on the server end for every new request that doesn't send one (i.e. when a user first starts up your SWF), then saving the 'state' information on the server as you see fit- database, XML file, flat file, whatever works best for you to get the job done.
Note that 'client state' can have different meanings based on the context of the SWF/application you're building, what data you intend to persist, how the client interacts with both the app and the data within, etc... there simply is no 'one size fits all' answer to your question.
As I've mentioned before in these comments, Flash Lite has no built-in architecture to manage this outside the ability to send basic param/value pairs via loadVars() and new SWF movies via loadMovie() across the network. Given that level of data transfer and your specific server environment, just figure out what you want to save on the server, and how you can best structure it into either value pairs (i.e. straight loadVars() calls) or a larger string you can parse/split yourself to send the data between client and server. And you're far better poised to answer those questions than I, Jess. ;-)
Outside of architecting a state management engine for you from scratch (which is well beyond the scope of what I can offer you), that's the best advice I can provide... hope it helps out, and best of luck!
hi i need that software, that is preety cool
what is the used of emulator?
What's the use of the emulator? At the most basic level, it saves you from having to transfer a SWF file to a phone to preview your application/animation/etc in context.
The process of compiling a SWF, then copying it over to a phone via either flash media card or Bluetooth for every small code change in a file can easily take up more time than you have to spare- with the Flash 8 mobile emulator you can see your SWF displayed at the exact resolution, with software-based keypad support to prototype usability/user interaction without having to move it to a physical phone to test.
Dear Mr!
Dear Mr!
I want to find emulator of Mobile,I have searched your web site,I try to access it to get information
Thank u!
Hi, HTV- As noted in the post/title, the mobile emulator discussed here is a feature of Flash Professional 8, and is not available as a standalone product:
http://www.adobe.com/software/flash/
Hello,
Is there a way to post the Flash Lite application on a website with the emulator? Maybe without the ability to switch devices but at least with the visual and the relationship between the phone keys and the application?
Many thanks
Hey, JCR- the emulator is only available inside Flash 8 as part of the application - so no, you can't post a SWF with the emulator included... sorry!
Scott,
Thank you for the answer. I appreciate.
Is there a way to achieve the same result without building two distinct applications: one using Flash Lite 2.0 and the other using Flash 8?
If you absolutely needed the two versions of the app, would you even try to reuse the Flash Lite movie? Or would you build two different apps (hopefully sharing some assets)?
By the way this feature would be so nice for the next version of Flash because developpers need to show their work to customers through a website.
Thanks again
Hi, JCR-
Alas, no - I'm not sure of a way to do this without publishing a 'special' SWF that included the FL2 SWF into a larger 'skin'. Then again, I'm mostly a desktop developer myself. ;-)
Good request, though- I'll pass it on to the mobile/Flash teams for consideration.