Embedding Flash Lite in Mobile Pages Using Dreamweaver 8

Flash Lite App - Adobe Product Certification Practice »

Feb 07

Embedding Flash Lite in Mobile Pages Using Dreamweaver 8

I have a Flash Lite project on at the moment, and one thing the client would like is to have a mini-wap site so that users can download the game's installer, or click through to a direct link to the SWF. If you don't know where to start when coding for WAP, let me suggest that you, just for the moment, ignore the idiosyncrasies of the WML language used to create WAP pages, and instead stick to some mobile-centric XHTML, which any Flash Lite capable phone should be able to handle without problems.

XHTML is of course much more accessible to web developers as they will not have any extra tags to learn in order to get going. But for those of us who are hardcore Flashers and never touch HTML we can rely on Dreamweaver to give us a helping hand. If you click on the picture below you can see that Dreamweaver offers a template for an XHTML Mobile 1.0 page.

With that done we have a few choices. We can either link through to the SWF directly with a hyperlink or image, we can embed some server-side script to redirect the page directly to the SWF (using perhaps header(location: some.swf); in PHP), or we can actually embed the SWF directly in the page. In this example I have gone for the latter:

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body>
<object data="miaMobile.swf" type="application/x-shockwave-flash" width="100" height="100" >
<param name="bgcolor" value="#000000" />
<param name="loop" value="on" />
<param name="quality" value="high" />
</object>
</body>
</html>

Here's a link to the file.

You may notice the lack of an embed tag, but don't worry this will work. In the end I'm not going to use this approach as I want to run the SWF full-screen so I will link through directly, but it will be nice to see some Flash content appearing on mobile pages soon. If you don't have a Flash Lite enabled phone, you can try the above URL in the emulator that comes with the new Series 60 SDK.

In the emulator you can also see that we get a focus rectangle appear around the Flash, this is something to consider when you wish to respond to user input. Just as in a desktop web-page, a user must give focus to the Flash element before they can interact.

Note:

I omitted to mention that this doesn't work on all phones, only phones with the Flash player integrated as the plug-in, such as most Japanese i-mode handsets and according to the Nokia emulator at least, the new wave of Series 60 (ed 3) phones soon to be released. On our developer installs this still prompts us to click the Flash movie to open it.

5 comments

§ Alessandro said on : 07/02/06 @ 06:45
Ciao Rich,

it seams really easy to create Mobile Flash sites. Sometihing to consider since there are already many phones that have FL1.1 on the browser.

Alessandro
§ Richard Leggett® said on : 07/02/06 @ 06:51
Yes Alessandro I agree. The reason I posted this was because I envisioned a stumbling block for myself putting Flash on a mobile site, when in reality there isn't one, it is just a natural extension of what is happening on the www.
§ Alistair Gillan said on : 08/02/06 @ 02:20
Hi Rich this is what I was talking to you about the other day, couldnt get the php location thing to work though, but you dont really need to use xhtml - i've created loads of "normal" html sites with the flashlite content embeded as per a normal web page and it works exactly as your example above, but as I mentioned before as in your example here the user still has to click to view the flash content, rather than it loading or being viewable automatically. Thanks for the topic hope we can keep it going!
§ Luciano Ayres said on : 08/02/06 @ 18:47
Refering to Alessandros comment about FL 1.1 on mobile browsers. Can we use fscommand2 for FL 1.1 enabled mobile browsers?
§ Alistair Gillan said on : 09/02/06 @ 01:28
Luciano, yes you can use fsc2 for FL1.1 on mobile browser - well it works on my nokia 6630!