So, I was designing and implementing a website at work and wanted to give it a flash menu, but also use Drupal for the CMS. Here is how I did the integration so that the flash menu would pull the menu links from Drupal’s “Primary Links” menu, know which page is currently selected and space the links evenly in the menu space provided. I Googled for a complete example and did not find one, so here is my attempt at a Howto. Note: I used Drupal 6.2 and Actionscript 2.0, but this could probably be adapted for other versions).
First of all, you will need to create your flash menu. You can download my example flash file to get an idea of how this works. Let’s take a look at the ActionScript code:
var depthCount = 1;
var totalWidth = 930; // this is the area we want to contain the menu in
var menuWidth = 0; //this will add up the width of each menu item
var yPos = 5; // starting y-position for menu item
var xPos = 0; // starting x=position for menu item
var menu:Array = _root.menu.split(","); // get flashvar menu items
var totalItems = menu.length/2; // find out how many menu items there are
// make text boxes for menu items
for (var i=0;i
var link = i+1;
createLink(num,menu[i],menu[link]);
i++;
}
// position each item on the x-axis properly leaving the same gap in-between each
var gap = (totalWidth-menuWidth)/(totalItems+1);
xPos += gap-gap/4;
for (var i=0;i
var tcl = eval("menu"+menuNum);
tcl.bg._width = tcl._width+gap/2;
tcl.TextLink._x += gap/4;
tcl._x = xPos;
xPos += tcl._width+gap/2;
}
function createLink(menuNum,menuTitle,menuLink){
// create the new movie clip
menuNum++;
var newObj = "menu"+menuNum;
duplicateMovieClip(_root.baseLink,newObj,depthCount++);
var tcl = eval(newObj);
// set the link
tcl.aLink = menuLink;
// check if this is the active link (if so, show the background)
if (_root.current == menuLink) {
tcl.bg._visible = true;
}
else {
tcl.bg._visible = false;
}
// create and styleize the text
setName(tcl, "0"+menuNum+": "+menuTitle+"");
// set position of menu item
tcl._x = xPos;
tcl._y = yPos;
}
function setName(obj, theName){
obj.TextLink.BoxName.autoSize ="left";
obj.TextLink.BoxName.htmlText = theName;
menuWidth += obj._width;
}
Basically, this reads in the “flashvars” that we will be sending from drupal (read on below to see how to do this) and creates the menu from those. Once the menu is created, we see how well it fits in the space given (totalWidth) and adjust the spacing between each item. There is also some code in there to adjust the size of the “background” image for whichever menu item is selected.
Once your flash menu is built, you will need to install the Flash Node module in Drupal. This allows for easily adding flash movies and flashvars variables. This same idea could be used in a template or a PHP page on it’s own, but Flash Node just makes this part a little bit easier.
After Flash Node is installed, you would simply need to add a piece of content that is of type flash (uploading the flash menu SWF file that was created earlier) and then add the following code in the Flashvars section
<?php
// get primary links for flashvars
$links = menu_primary_links(1);
$flashvars = array();
$i = 0;
if ($links) {
foreach ($links as $link) {
$flashvars[$i] = $link['title'].",".url($link['href']);
$i++;
}
}
print "menu=" . implode(",",$flashvars) . "¤t=" . url($_GET['q']);
?>
This just reads in the primary links and passes them off as flashvars
That’s pretty much all there is to it. Now you can have a dynamic flash menu using Drupal’s built-in menu management.
Update: If you want to see an example of this in action, check out the Guardian Studios website.
