On the World Wide Web, deep linking is making a hyperlink that points to a specific page or image on a website, instead of that website’s main or home page. Such links are called deep links. Court cases against deep linking have gone both ways in various countries.
Websites which are built on web technologies such as Adobe Flash and AJAX often do not support deep linking. This can result in usability problems for people visiting such websites. For example, visitors to these websites may be unable to save bookmarks to individual pages or states of the site, web browser forward and back buttons may not work as expected, and use of the browser’s refresh button may return the user to the initial page. However, this is not a fundamental limitation of these technologies. Well-known techniques, and libraries such as SWFAddress and History Keeper, now exist that website creators using Flash or AJAX can use to provide deep linking to pages within their sites.
From Wikipedia, the free encyclopedia
This article treats an exemplary implementation of deep-linking in Shockwave. In the following example we will use the unFocus History Keeper library, and especially the script called unFocus-History-p.js. This script will manage the browser history entries. The communication between the sockwave movie and the java script will be supplied by Valentin’s Director / JavaScript Integration Kit.
Here comes the demonstration of the technique (it opens in a new window). You can also try some different URLs. For example, you can go directly to the portfolio section, to a particular page of the portfolio or try to go to a non-existing page.
HTML AND JAVASCRIPT
1. Create a folder called c:\director_deeplinking\
2. Copy dirjskit\ from Valentin’s Director / JavaScript Integration Kit into the folder
3. From the unFocus History Keeper library copy unFocus-History-p.js into the same folder
4. Create index.html in the folder. This will be the container page for the shockwave movie. Write in it the following HTML code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Director Deep linking Test</title> </head> <body> </body> </html>
It is necessary to import the Valentin’s Director / JavaScript Integration Kit scripts, as well as unFocus-History-p.js from the History Keeper library. That is why we add the following lines in the <head> element:
<script type="text/javascript" src="dirjskit/Exception.js"></script> <script type="text/javascript" src="dirjskit/FlashTag.js"></script> <script type="text/javascript" src="dirjskit/FlashSerializer.js"></script> <script type="text/javascript" src="dirjskit/DirProxy.js"></script> <script type="text/javascript" src="dirjskit/DirTag.js"></script> <script type="text/javascript" src="unFocus-History-p.js"></script>
Now comes a piece of javascript. Add the following lines of code:
<script type="text/javascript">
var uid = new Date().getTime();
var dirProxy = new DirProxy( uid, "dirjskit/JavaScriptDirectorGateway.swf" );
var toDirector = function( parameters ){dirProxy.call( "receiveFromJS", parameters );}
var fromDirector = function( parameters ){unFocus.History.addHistory( parameters );}
var initializeShockwaveMovie = function(){ toDirector( unFocus.History.getCurrent() ); }
unFocus.History.addEventListener( "historyChange", toDirector );
</script>
The first line creates a unique id. We will use this id later to embed the shockwave. The next line creates a proxy to director shockwave movie. The next two lines define two functions – the first one sends data to the shockwave and the second one – receives data from it. The initializeShockwaveMovie() function is called once, when the movie is loaded. This function will set the initial state of the movie, based on the provided URL. The final line of code sets the toDirector() function as event listener for historyChange event – every time when the event is fired, the function is called.
We will embed the shockwave movie with the help of the following lines in the <body> element:
<script type="text/javascript"> var tag = new DirTag( "minimal.dcr", 320, 240, true ); tag.setDirvars( uid ); tag.write( document ); </script>
Note that we provide the previously generated unique ID as a parameter to the embedded shockwave object. The final appearance of the HTML code must be:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Director Deep linking Test</title>
<script type="text/javascript" src="dirjskit/Exception.js"></script>
<script type="text/javascript" src="dirjskit/FlashTag.js"></script>
<script type="text/javascript" src="dirjskit/FlashSerializer.js"></script>
<script type="text/javascript" src="dirjskit/DirProxy.js"></script>
<script type="text/javascript" src="dirjskit/DirTag.js"></script>
<script type="text/javascript" src="unFocus-History-p.js"></script>
<script type="text/javascript">
var uid = new Date().getTime();
var dirProxy = new DirProxy( uid, "dirjskit/JavaScriptDirectorGateway.swf" );
var toDirector = function( parameters ){dirProxy.call( "receiveFromJS", parameters );}
var fromDirector = function( parameters ){unFocus.History.addHistory( parameters );}
var initializeShockwaveMovie = function(){ toDirector( unFocus.History.getCurrent() ); }
unFocus.History.addEventListener( "historyChange", toDirector );
</script>
</head>
<body>
<script type="text/javascript">
var tag = new DirTag( "minimal.dcr", 320, 240, true );
tag.setDirvars( uid );
tag.write( document );
</script>
</body>
</html>
THE LINGO PART
Here are the necessary minimum steps to add deep-linking functionality to your shockwave movie:
1. The JavaScriptProxy and JavaScriptSerializer scripts from Valentin’s Director / JavaScript Integration Kit, as well as the dlMethods and dlNavigation scripts must be available in your movie.
[code lang=”lingo” gutter=”true” toolbar=”true” collapse=”false”]
— Movie script "dlMethods"
global gProxy — global proxy object that will handle shockwave <-> js communication
on startMovie()
uid = _player.externalParamValue( "sw1" ) — get unique ID
gProxy = newJavaScriptProxy( uid, _movie, true ) — create a new (global) proxy object
end startMovie
on stopMovie()
clearAsObjects() — Clear any remaining global Flash objects
gProxy = VOID
end stopMovie
on sendToJS( params )
if( _system.environmentPropList.runMode = "Plugin" ) then
gProxy.call( "fromDirector", params )
else
navigateTo( params )
end if
end sendToJS
on receiveFromJS( params )
navigateTo( params )
end receiveFromJS
on navigateTo( aframe )
if( ilk( aframe ) = #string ) then
if( aframe = EMPTY ) then
_movie.go( "/home/" )
exit
else
ml = _movie.markerlist
pos = ml.getPos( aframe )
if( pos > 0 ) then
f = ml.getpropAt( pos )
end if
end if
else if( ilk( aframe ) = #integer ) then
f = aframe
end if
if( ilk( f ) = #integer ) then
_movie.go( f )
else
_movie.go( "/error/" )
end if
end navigateTo
[/code]
— Behaviour script "dlNavigation"
property _marker
on getPropertyDescriptionList( me )
pdl = [:]
pdl.addProp( #_marker, [ #format:#String, #default:EMPTY, #comment:"Go to:" ] )
return pdl
end getPropertyDescriptionList
on mouseUp( me )
sendToJS( me._marker )
end mouseUp
2. Markers called /home/ and /error/ must be presented in your movie.
3. On every of your navigation buttons:
- Drop the dlNavigation behavior.
- Fill the name of the marker, which you would like the head to go to after the button has been pressed.
For clarity, I offer a mini tutorial. Download it and unzip DeepLinking.zip.
Deep Linking (7687 downloads )Open the minimal_start.dir file. Create markers, as shown on the picture.
Drop the dlNavigation behavior on each of the buttons. In the Parameters for dlNavigation dialog fill /A/ for the first button, /B/ for the second and /C/ for the third one. Drop the LOOP behavior in the frame script channel on frame 2 and enlarge it to frame 10 (as shown on the picture). To assure yourself that the things work, start the movie and execute the following code in the message window:
sendToJS("/C/")
If everything works properly, the head will move to the /C/ marker.
Compile a shockwave movie called minimal.dcr and put it in c:\director_deeplinking\ on the same level as index.html. The file structure should look as this:
dirjskit\ DirProxy.js DirTag.js Exception.js FlashSerializer.js FlashTag.js JavaScriptDirectorGateway.swf index.html minimal.dcr unFocus-History-p.js
When index.html is started in the browser and you click the buttons, you will see that with every change of the current marker in the movie, a new URL is generated and the previous URL is written in the browser history. To assure yourself of that, you can use the BACK button of the browser. Now you can go directly to any “page” of your shockwave movie, for example:
file:///C:/director_deeplinking/index.html#/B/
great article!