Drupal Flash Menu
May 1st, 2008 (Web)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 num = i/2;
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 menuNum = i+1;
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, "<strong><span>0"+menuNum+":</span> "+menuTitle+"</strong>");
// 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) . "&current=" . 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.
please let de download of the flash menu.fla be available.. because now I’can’t download it. Please send me it. I’m very curious.
karel
The link in the post should be fixed now. Sorry about that.
Hi,
Sorry about the english, i’m not that good
i’ve downloaded and installed all the required files/modules.
But can’t get this to work? Please, would you explain in short lines what i exatly have to do, to get this wonderfull menu to work?
- Do i have to implement the menu in the template?
- can i use your menu and my primary links to test your menu?
- The flashvars: where do i put them? When creating a new flashnode??
- etc…
THX in advanced, any help would be great!
If not, no hard feelings
greetz
jack
hello steve, thanks to fix the download..
the only problem i have now is that I don’t get the menu-items into the flashfile (I’m using the flash node module)
=> is there an other way to try it to work?
Thanks
For those having trouble getting the flashvars section to pass the menu items to flash, make sure that the PHP evaluator option is enabled for the input format you are using in the flashvars section. You will also need the PHP filter module enabled to get the PHP evaluator option in the first place.
Wow! That was really straightforward!
Since I’m more familiar with d5, I’ll add this observation to #13 above: Drupal6 apparently provides the same PHP Filter we’re used to seeing but as a core module which is not turned on by default.
Download the fla, ctrl-enter to compile, upload the swf, paste the php, enable the PHP filter, and voila, a working example!
Thanks Steve!
Just playing around here, so there may be a better way.. but sticking with Steve’s sample .fla and same php:
- enable Flash Filter in PHP Evaluator under Input Types
- Create a block, enable PHP on it, and throw it in the header
– this block’s body will be a flashnode filter with Steve’s php for primary links:
[flashnode|nid=1|flashvars=]
Now you’ve got a live, working sample with the primary links in a header block!
I guess more elegant would be to theme over the primary links… but what do I know?
Thanks for the specific install instructions bronius. Glad you were able to get it working so easily.
I see that this pulls in the primary links. Any thoughts or approaches on pulling in the second level menu items under each primary link?
Casey – you can just use menu_secondary_links() instead of menu_primary_links(1) in the PHP code.
Any chance on porting this script to AS3? duplicateMovieClip and eval are no longer supported (as well as the scoping for the increment counter in your loops).
I’d love to try out an AS3 version, but just not at that level with my AS3 yet.
Great tutorial! I made some modifications and did an AS3 version based on this:
http://egoant.com/aIcW
Aaron – great job! Thanks for posting the port.
Nice tutorial
Yet I have a menu with items which have children.
Any idea about how to have the children displayed as well ?
My idea would be to have them appear when hovering the parent item ( a classic feature in flash menus )
thank you in advance
me so excited to visit the site and like all the comment so much………great sharing .thanks on it……….
Looks great, but I have a few questions before I implement it:
How would this affect search engine crawlers that follow links to index the website?
Also, if someone were looking at the site from, say… and iPad, how could I make the normal menu appear instead? Can I have the template check for flash and then determine whether to print the normal menu or the flash menu?
may i add this entry? i will add a link to this post.. please let me know, thanks
Sure thing…feel free to add a link.
You should do more how-to’s.
What do you think of Adobe opening up the FLV format?
Huh? Just makes me realize how all my children (not:All My Children) have passed and surpassed the capabilities of at least one of their parents.
I am in awe……
f0r 7|-|!|\|3 i$ t3h |\|37\/\/0R|<, @|\|d t3h rm -rf*, @|\|d @££ 0ǔR β@$3 @r3 β3£0|\|G t0 j00, f0R3\/3R @|\|d 3\/3R.
4|\/|3|\|.
You’re so smart!
Excellent tutorial. I have been looking for some help in this area. I implemented it using LoadVars instead. I just had the LoadVars function call a php page containing your above php and loaded the values in that way. Thanks for sharing !!
please add demo also.
Thanks for posting.
http://drupalranch.com/
Thanks, been looking for something like this.
What version of Flash was your demo made in?
It wont open in my flash 8.
If i know what version, i will visit a friend.
Cheers
Hi Oliver…it was saved as a Flash CS3 file.
Hello! Im trying to have a FLASH menu in my drupal 6.9 site (www.adelacasacuberta.com) with links to all contents (pages, images, etc…) I uploaded your sample falsh file and put the php code in the flash vars section of a new flash node. But I only see a red graphic over a withe boackground, and no links or buttons of any kind. What Am i doing wrong? thanx !