Part 2. Enabling back, forward and history buttons for your Flash site
by Scott King on May.22, 2009, under ActionScript, Flash, SEO
Dynamic SEO tags for your Flash site using PHP
Step 1, lets get those back buttons, forward buttons and history working in our browsers navigational bars.
This functionality relies heavily on utilizing the excellent swfaddress script which you need to download from here (http://www.asual.com/download/?swfaddress).
1. Extract the swfaddress script to the same directory that your Flash .FLA’s live in, then setup your Flash file to use swfaddress. I’ll provide a quick guide here. if you require more information no the setup of swfaddress you can view the documentation online here: http://www.asual.com/swfaddress/docs/.
2. We need to include the swfaddress javascirpt support files into our HTML, so add the following two lines:
<script type="text/javascript" src="swfobject/swfobject.js"></script> <script type="text/javascript" src="swfaddress/swfaddress.js"></script>
So your HTML looks like:
<?php
function getDeepLink(){
$requestedDeepLink=curPageURL();
$requestedDeepLink = substr($requestedDeepLink,strrpos($requestedDeepLink,":80")+3);
if(strrpos($requestedDeepLink,"/")==strlen($requestedDeepLink)-1){
$requestedDeepLink = substr($requestedDeepLink,0,strlen($requestedDeepLink)-1);
}
$requestedDeepLink = substr($requestedDeepLink,strrpos($requestedDeepLink,"/"));
$exclusions = array(".html", "/","index.php"); // URL extension exclusion list
$requestedDeepLink = str_replace($exclusions, "", $requestedDeepLink); // remove extensions eg: "about.html" becomes "about"
}
function curPageURL() {
$pageURL = 'http';
if ($_SERVER["HTTPS"] == "on") {$pageURL .= "s";}
$pageURL .= "://";
if ($_SERVER["SERVER_PORT"] != "80") {
$pageURL .= $_SERVER["SERVER_NAME"].":".$_SERVER["SERVER_PORT"].$_SERVER["REQUEST_URI"];
} else {
$pageURL .= $_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"];
}
return $pageURL;
}
$requestedDeepLink=getDeepLink();
$title="Home";
$description="Meta Tag Description for Home";
$keywords="Meta Tag Keywords for Home";
$inPageContent="Some altenate content for non-flash users on Home";
$noscript="Some altenate content for non-javscript users on Home";
if($requestedDeepLink=="about"){
// SEO Tags for About Me
$title="About Me";
$description="Meta Tag Description for About";
$keywords="Meta Tag Keywords for About";
$inPageContent="Some altenate content for non-flash users on About";
$noscript="Some altenate content for non-javscript users on About";
$inContent=true;
}
if($requestedDeepLink=="contact"){
// SEO Tags for Contact Us
$title="Contact Us";
$description="Meta Tag Description for Contact ";
$keywords="Meta Tag Keywords for Contact ";
$inPageContent="Some altenate content for non-flash users on Contact ";
$noscript="Some altenate content for non-javscript users on Contact ";
$inContent=true;
}
?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title><?=$preTitle." ".$title?></title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="Description" content="<?=$description?>">
<meta name="Keywords" content="<?=$keywords?>">
<script type="text/javascript" src="swfobject/swfobject.js"></script>
<script type="text/javascript" src="swfaddress/swfaddress.js"></script>
</head>
<body>
<div id="flashcontent">
<?=$inPageContent?>
<a href="http://www.adobe.com/go/getflashplayer">Click here</a> to download the latest flash player to view this site.
</div>
<script type="text/javascript">
// <![CDATA[
//INSERT YOUR SWF OBJECT EMBED CODE HERE
// ]]>
</script>
<noscript>
<?=$noscript?>
</noscript>
</body>
</html>
3. Now we need to move on to setting up the actual Flash .FLA. We will need to import the swfaddress class, this is done by simply adding this ActionScript line to the first frame of your Flash .FLA's:
import com.asual.swfaddress.*; // SWFAddress code
4a. And we need to tell swfaddress when a user clicks on a navigational item in your Flash file. We do this by adding the following code to your Flash Navigational Buttons/MovieClips:
this.onRelease = function() { SWFAddress.setValue('DEEPLINK_URL'); //Here you can add the rest of your navigational logic, eg if you need to load a new SWF called example.swf into a MovieClip called "loaderClip", you might add the following line: // loaderClip.loadMovie("example.swf"); }
4b. Substitute your required deeplink URL into the "DEEPLINK_URL" section. For example if this code was going on the button for your "About Me" section of your Flash site, the code would look something like:
this.onRelease = function() { SWFAddress.setValue('/about-me/'); //Here you can add the rest of your navigational logic, eg if you need to load a new SWF called example.swf into a MovieClip called "loaderClip", you might add the following line: // loaderClip.loadMovie("example.swf"); }
4c. You can then add your ActionScript that you would call normally to load the About Me section of your Flash movie, this might look eg if you need to load a new SWF called example.swf into a MovieClip called "loaderClip", you might add the following line:
loaderClip.loadMovie("about-me.swf");
So the code for your About Me button now looks like this:
this.onRelease = function() { SWFAddress.setValue('/about-me/'); loaderClip.loadMovie("about-me.swf"); }
Repeat steps 4a to 4c for each of your navigational buttons. eg, your "Portfolio" section might look like this:
this.onRelease = function() { SWFAddress.setValue('/my-work/portfolio/'); _root.gotoAndPlay("portfolio"); _root.breadCrumbs.text="My Work > Portfolio"; }
So now every time a user clicks on a navigational button in your Flash .SWF, the SWFAddress.setValue(); function will be called and swfaddress will create an entry in your browsers History and add the previous content section to the browsers Back button.
You can now test your Flash movie by previewing it in your browser. Now when you click on a button to load a new section of your Flash file you'll notice the browser's URL has the DEEPLINK_URL appended to the URL.
eg: from the example above, clicking the "Portfolio" section will change the URL from:
http://www.example.com
to:
http://www.example.com/#/my-work/portfolio/
or clicking our "About Me" section will produce:
http://www.example.com/#/about-me/
If you open up your browsers History bar, you may also notice some new entries going in each time you hit a your nav buttons. You may also notice that your browsers Back and Forward buttons become active but clicking on them doesnt load the previous section - but don't worry we're just about to address that.
Summary
Now we have our Flash file telling the browser each time a user clicks on a section in your Flash file. Next we need to a way for the browser to tell the Flash file that the user has clicked the Back or Forward button in the browser window.
5. Making your Back and Forward buttons work.
Tell the Flash file that the user has clicked the Back or Forward button in the browser window. We do this by adding an SWFAddress.onChange listener to our ActionScript, so copy and paste the following below the import statement we added in step 2:
import com.asual.swfaddress.*; // SWFAddress code
SWFAddress.onChange = function() {
var sectionToLoad = SWFAddress.getValue();
}
Now, everytime a user click the Back or Forward button in the browser, this function will be called inside your Flash .SWF and the variable sectionToLoad will contain the section that the browser expects to load. For example if the user was on the "About Me" section, then clicked the Flash navigation button to load the "Portfolio" section and then hit the Browsers Back button, the sectionToLoad variable would contain the "about-me" as this is the section the Browser is trying to load.
Leave a Reply
You must be logged in to post a comment.
May 31st, 2009 on 10:35 pm
Hello! You have some great articles on here, and I just stumbled upon your blog from Google.
I have been developing Flash sites for quite some time, but just began using SWFAddress. I have implemented it on one of my sites, to test before retro-fitting more of my older sites.
I have the SWFAddress working fine on the site. However, as soon as I added the code to the site, my Google Analytics stats went to 0 for 4 straight days. I know it isn’t accurate, because I have been going through the site quite a lot testing everything.
What I’ve learned by reading online is that GA should be automatically tracking the hits to the various /#/pages automatically. I haven’t changed anything in my GA code.
Any suggestions? Site in question is http://www.BFRstudios.com
THANKS
Glendon Guttenfelder
webdesign@LegacyOCS.com
May 31st, 2009 on 10:47 pm
Hi Glendon,
Thanks mate, nice site. You’re right SWFAddress has built in compatibility with Google Analytics, have you removed original Analytics code and configured your SWF address like this?
<script type=”text/javascript”>
var gaJsHost = ((“https:” == document.location.protocol) ? “https://ssl.” : “http://www.”);
document.write(unescape(“%3Cscript src=’” + gaJsHost + “google-analytics.com/ga.js’ type=’text/javascript’%3E%3C/script%3E”));
</script>
<script type=”text/javascript”>
var pageTracker = _gat._getTracker(“UA-XXXXX-1″);
</script>
<script type=”text/javascript” src=”swfobject/swfobject.js”></script>
<script type=”text/javascript” src=”swfaddress/swfaddress.js”></script>
eg: make sure you’ve got the var pagTracker set before including the swfobject & swfaddress JS and you should be set.
More info for you:
http://www.scottking.com.au/blog/2009/05/part-5-adding-google-analytics-tracking-to-the-swfaddres-include/
June 1st, 2009 on 11:42 pm
Sometimes it’s the simplest of details that can really wreak havoc. I compared the code you sent to mine, and somehow in my GA code, my last tag looked like this …. not sure how I did that, but adding the ‘t’ fixed the whole issue!
But now I have another issue. Not with THAT site, it is working great. But I’m trying to retro-fit another site with SWFAddress. I know everything SHOULD be working (by testing trace statements)…but for some reason, I’m only getting the Title Bar to change. It doesn’t change the URL in the address bar. Hence, it’s not creating history and therefore…not working!
It’s the same exact code as the original site, tweaked slightly for the different application. But I’m loading my javascript from the same location (which is my base site, not the domain on which the sites rest). And I’m calling the .as file from the same spot on my hard drive.
Any idea as to why it would only change Title and not the URL?? The site is http://www.atouchofcharmmassage.com
Thanks SO much for your help!
Glendon
June 4th, 2009 on 3:28 am
I have now retro fitted 7 sites with SWFAddress. 4 work properly, and 3 do not (they are not updating the URL in the address bar).
I uploaded the .swf from a NON-working site onto the domain of a working site, and it then began to work. So that eliminates the code as a possible source of the problem.
Are there particular settings that might be different from one domain on a server versus another domain on the same server that might cause the functionality of the SWFAddress to cease?
Thanks,
Glendon
June 4th, 2009 on 1:08 pm
Hi Glendon,
Are you using the same version of SWFAddress across all of the sites? It may be that the SWFAddress includes themselves are out of date, or have corrupted in some way. I would try to download the latest version again and re-upload it to the non-functional sites as this is the easiest point of failure to troubleshoot.
The domain name itself shouldn’t affect the SWFAddress at all as all of it’s functionality happens client side.