When developing a Flex application you are generally involved with the nitty gritty coding, getting your text boxes looking right; hooking up that button and making sure your webservices are behaving. Something you probably haven’t started to consider is that the SWF you end up with is going to have to live on a page somewhere. When you get closer to release time, suddenly your thoughts turn to integrating your application with an actual webpage.
A very useful trick to be aware of is that your Flex application can control its parent page to a certain extent by executing Javascript on it. So for example, at graffed.com you’ll notice that instead of showing the Flex application straight away, we show a basic loading image in HTML and then once the entire app has loaded, we switch the loading image to a button to launch the app.
Loading the app
Loading completed
This way, visitors are shown a landing page which loads very quickly that they can read through, and the application is loaded in the background. Once the application is loaded, the parent page displays a nice button for them to launch. It’s also good for SEO since the parent page is what the search engines will see, rather than a blank page with a Flex application.
To achieve this magic, we use ExternalInterface to interact with the parent page. First off, create an appropriate Javascript function within your parent page for the Flex app to call, let’s say it’s called flexLoaded(). To call this Javascript method in your Flex application, you simply put:
ExternalInterface.call("flexLoaded");
Exceptionally easy and a very powerful way to influence the page your SWF resides in. Don’t forget to import the appropriate library at the top of the Actionscript, i.e
import flash.external.*;
Leave a Reply