Introduction.
Breaking standard browser experiences with Flash is an old problem and i’ve seen that although there are a bunch of tutorials for As2 and some for As3, using different or same adapted Javascript library there is still a big question mark about this issue.In the past 2 days i’ve tried to find the best solution for this problem, I’ve surf the net and i’ve found some interesting things. I’ll try to show you the solutions which i think that are best from most of the aspects. The entire tutorial is written in As3.
Using the browser’s back button with Flash.
I’ve seen many people searching for a so called As3 solution, without javascript. Well, unfortunately , there is no such solution. Imagine the SWF as a guest and the HTML wrapper as a host, you simply can’t let your guest to give commands in your own house right? Of course you are polite and give him everything he needs but if he asks kindly. He could ask kindly via Javascript.
From all the Javascript libraries for Flash (As3), that help the SWF to ask or give kindly data to browsers, i think the best is SWFAddress. The next example shows how to enable the browser’s back button using SWFAddress.
Step 1: Download the latest distribution of SWFObject and SWFAdress. You can also download the FlashIDE example and follow from there the tutorial.
Step 2: In your project folder (which should be empty right now) copy the swfobject.js and swfaddress.js into 2 folders with the same name as the files (swfaddress, swfobject). Next create an index.html that will serve as a wrapper for the swf. Put the next tags into it.
<div id="flashcontent">
This content here will be replaced by the SWF.</div>
<script src="swfobject/swfobject.js" type="text/javascript"><!--mce:0--></script>
<script src="swfaddress/swfaddress.js" type="text/javascript"><!--mce:1--></script>
<script type="text/javascript"><!--mce:2--></script>
<!-- Google Analytics Plugin is set to ignore your user role --> |
The code simply creates a div with “flashcontent” id and puts in it the backbutton.swf (for better understanding please check the swfobject examples). There are 2 things here that we have to pay attention to. First, the order in which we add the swfobject.js and swfaddress.js, it will always be first the object and second the address, this is very important. Second, we have to put the Javascript after we create the div because the Javascript uses the div and we don’t want it to use a null value. Don’t forget to add the main.css to the index.html by using the “link” tag
Then, add the two AS3 classes from the SWFAddress package(SWFAddress.as and SWFAddressEvent.as) to the root directory of your project.
Step3:Now we have it all set up, the index.html (wrapper), the swfaddress.js, the swfobject.js and the CSS linked to it, and the two SWFAdress class at their place. What we need to do next is to create the SWF, so compile the backbutton.as Actionscript code with Flash.(don’t forget to name the document class “backbutton”).
To understand the code you need a basic knowledge in using Flash Components. If you don’t have it, but you choose to write the code don’t forget that when you create a new component by code (ex: var cd=new ComboBox) you need to add the component also in the Library ( Drag and Drop from the Component Panel to Library)
package {
import flash.display.MovieClip;
import fl.controls.ComboBox;
import fl.data.DataProvider;
import flash.events.Event;
import fl.controls.TextArea;
import fl.containers.UILoader;
import flash.net.URLRequest;
import SWFAddress;
import SWFAddressEvent;
public class backbutton extends MovieClip {
private var dp:DataProvider = new DataProvider();
private var myCombo = new ComboBox();
private var mytextArea = new TextArea();
private var mySWFAddress=SWFAddress;
private var image=new UILoader();
private var urlreq=new URLRequest();
public function backbutton() {
dp.addItem( { label:"Spring" , pictureUrl:"images/1.jpg" , shortDes:"We love it!!!"} );
dp.addItem( { label:"Summer" , pictureUrl:"images/2.jpg" , shortDes:"Lazy days"} );
dp.addItem( { label:"Winter" , pictureUrl:"images/3.jpg" , shortDes:"Is really cold here in Cluj"} );
myCombo.dataProvider=dp;
myCombo.x=50;
myCombo.y=50;
addChild(myCombo);
myCombo.addEventListener(Event.CHANGE, onComboBoxChange);
mytextArea.width = 300;
mytextArea.height = 80;
mytextArea.x = 200;
mytextArea.y = 50;
addChild(mytextArea);
image.x=200;
image.y=140;
image.scaleContent=false;
addChild(image)
mySWFAddress.addEventListener(SWFAddressEvent.CHANGE, onLinkChange);
}
private function onComboBoxChange(e:Event) {
var newLink = e.target.selectedIndex;
mySWFAddress.setValue(newLink);
}
private function onLinkChange(e:SWFAddressEvent) {
var newLink = mySWFAddress.getValue();
newLink = newLink.substr(1);
mytextArea.text = dp.getItemAt(newLink).shortDes;
urlreq.url=dp.getItemAt(newLink).pictureUrl;
image.load(urlreq);
mySWFAddress.setTitle(dp.getItemAt(newLink).label);
myCombo.selectedIndex = newLink;
}
}
} |
So this is it, pay attention to the comments in the backbutton.as file to understand how it works. Everything should work just fine. If not, leave a comment, and i will help.
Here is a working example.
Just choose a item in the ComboBox and then hit the browser’s back button
Well I hope you got the idea, in the second part of the tutorial I’ll talk a little about how to implement something like this in a large application (best practices, design patterns and all).