Flash XML - Dock Menu FX

- Fully functional, no limitations
- Easy to install on any website without Flash
- XML configurable
- labelled

Non-Flash users:

To install this component for FREE in your website read the step by step instructions

Flash users:

If you want to use this component in a new or existing Flash project, read the Flash installation details

How to install this Dock Menu on your website

Step 1. SWF embedding

Download the dockmenu.zip archive and put all the files from this archive into the same folder with the HTML file in which you want the component to be embedded.

You should know first of all that the SWF file is the one that actually represents the component, while the other files (settings.xml, images.xml and JPGs in the images folder) are the assets that the SWF file uses.
A short explanation on how SWFs and XMLs interacts you will find here.

Open your HTML file with a text editor and insert somewhere between the <head> </head> tags the following lines:

<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
var flashvars = {};
var params = {};
params.scale = "noscale";
params.salign = "tl";
params.wmode = "transparent";
var attributes = {};
swfobject.embedSWF("dockmenu.swf", "DockMenuDiv", "600", "200", "9.0.0", false, flashvars, params, attributes);
</script>

For a fast and easy publishing, the best thing to do is to have the SWF file, the HTML file which embeds the SWF, the swfobject.js file, and the assets that the SWF uses (XMLs, JPGs folder) in the same folder.
If that is not possible, please read this detailed article on how to specify the paths correctly.

The above code itself isn’t enough to publish the SWF file on your webpage. You just need to add a div somewhere in the body section of your page (between the <body> </body> tags of your HTML file).
So, in a specific location of your HTML body section insert this div:

<div id="DockMenuDiv"></div>

Step 2. Customization

You’ll be able to define a maximum size of 1680 in width and 1050 in height in the 3rd and 4th arguments of the swfobject.embedSWF() function above. Usually the same values as for dockWidth and dockHeight (which you will set below).

Now you will have to define the properties of your Dock Menu.

You can do that in two ways:
1. By editing the settings.xml file, or much simpler, set your values on the Live Demo above and press Generate settings.xml button, then select all (Ctrl+A) and copy-paste over the existing content of settings.xml file.

2. By using FlashVars. Right after this line:

var flashvars = {};

insert the values you desire for each property, like this:

flashvars.imagesXML = "images.xml";
flashvars.direction = "horizontal";
flashvars.dockWidth = "600";
flashvars.dockHeight = "200";
flashvars.spacing = "5";
flashvars.expandingDirection = "center";

Note that the properties written through FlashVars will override those written in the settings.xml file.

For a transparent background set in settings.xml file:

<backgroundColor value="0" />

or through FlashVars:

flashvars.backgroundColor = "0";

Now all you have to do is to put your own images, add the tooltip text and add the behavior for when clicking each image. All these through the images XML file. Open the XML file with a text editor and define in each row the image path, the URL to go to when clicking the image, the target (_self for the same browser window, or _blank for a new browser window), and the tooltip text.
You can have as many images as you like. To add a new image add a new row in the XML file.

The Lightbox functionality (showing a bigger image and a description when clicking on an image) is provided too in the dockmenu.zip archive, specifically in the index-with-lightbox-test-on-http-server.html file.

dockmenu.swf has about 50 KB and embeds only the Verdana font. To be able to embed any other font you’ll need the Dock Menu Flash component.

If you’ll want to use the Dock Menu in Flash projects (FLA files), the Dock Menu is available as a Flash component (MXP file) in the commercial archive

Instructions on how to use the Dock Menu component in Flash you will find here.

How to install this Dock Menu in a new or existing Adobe Flash project

Below you will see instructions on how to install and use the Dock Menu Component (commercial package) in Flash (available for Flash 8, Flash CS3, CS4 and Flash Player 9 or later).

For basic instructions on how to integrate the Dock Menu’s SWF file into HTML/PHP, click here.

You can watch an instalation video tutorial of the component in Flash by clicking here.

To create an instance of the DockMenu on the stage: from the Components panel (Ctrl+F7) drag & drop the DockMenu component on the stage
To give a name to that instance for further use in ActionScript: click on the component instance on the stage and from the Properties panel (Ctrl+F3) enter a name (let’s say DockMenu) in the text input
To access the properties of the DockMenu (read or modify) during different moments of your Flash application: simply access in ActionScript:

DockMenu.property_name = value;

Any property of the DockMenu could be accessed that way. The names of the properties are identical with the ones you see on the Live Demo.

The properties of the DockMenu can be of any of the three types: Number, String, Boolean. I assume it’s intuitive of which type each property is.

Warning! Setting the parameters of the DockMenu component in the Component Inspector window (Shift+F7) and in the same time having a settings.xml file populated with different values for each property, the properties from the settings.xml file will have priority (meaning that a parameter set in the Component Inspector will be ignored if that parameter is also defined in the XML file)

Now maybe the most useful information consists in the events the DockMenu is dispatching, and instructions on how to catch these events.

So when the user clicks on an image, the DockMenu dispatches:
- thumbReleased (when the mouse was released)
Along with these events, the id of the thumb pressed or released is being dispatched.
Usually you will use just one of these two, personally I like to use thumbReleased.

Other events:
- rollOverThumb
- rollOutThumb
- thumbLoaded
(all these three come too with the id of the thumb being rolled over / rolled out / loaded)
- allThumbsLoaded
- rollOverDock
- rollOutDock

Note: the order of the ids is given by the order of the images in the images.xml file.

Here is an example on how to catch these events:
in AS2

var event1:Object = new Object();
DockMenu.addEventListener("thumbReleased", event1);
event1.thumbReleased = function (obj:Object) {
trace (obj.id);
}

in AS3

addEventListener("thumbReleased", thumbReleased,true);
function thumbReleased(event:Event):void
{
trace("thumbReleased " + DockMenu.id);
}

If you’ll catch the events of the DockMenu and create different behaviors for clicking the thumbs, you may want to de-activate the option of going to a specific URL address in the images.xml file. To do that, simply delete the url or target attributes in the images.xml file.

You can watch the second part of this video to see more accurately how the instructions above on catching events can be applied in Flash (the video shows a very similar product, 3D Carousel Menu, but the method is identical for DockMenu).

Make sure your Wordpress version is greater than 2.8 and your hosting provider is using PHP5.

1. Download or purchase the Dock Menu FX Flash component

2. Create a new folder inside your /wp-content/ directory called flashxml/dock-menu-fx and copy the content of the archive to this folder

3. Install the plugin or upload the dock-menu-fx folder along with all its files to /wp-content/plugins/ directory

4. Activate the plugin from the Plugins tab in WordPress Dashboard

5. Go to Dock Menu FX from the Settings tab and update the path in case you used a different one

6. In the post editor use the following tag to embed the Dock Menu FX: [dock-menu-fx][/dock-menu-fx]. You could also add <?php dockmenufx_echo_embed_code(); ?> in the PHP file of your theme

7. Customize your Dock Menu FX using the Live Demo above. Generate the settings.xml text and use it to overwrite flashxml/dockmenufx/settings.xml

8. To use your own images, upload them to the flashxml/dockmenufx/images folder and update the flashxml/dockmenufx/images.xml file accordingly

Additional settings file

To embed the Dock Menu FX more than once, you will need another settings file and (probably) another set of images. Let's assume your new file is called settings2.xml. From the post editor, use the following code: [dock-menu-fx settings="settings2.xml"][/dock-menu-fx]. From the PHP files of your theme, add the file name as the first argument of the dockmenufx_echo_embed_code() function call. If you use a separate set of images, don't forget to create a new XML file for that and update the value in the settings file.

No Flash support text

To support visitors without Adobe Flash, you can provide alternative textual content. From the post editor, add the text between [dock-menu-fx] and [/dock-menu-fx]. From the PHP files of your theme, add the text as the second argument of the dockmenufx_echo_embed_code() function call.

If you have PHP4

To make it work if you're using PHP4, add the following code [dock-menu-fx width="600" height="300"][/dock-menu-fx] in the post editor. From the PHP files of your theme, add the width and height as the third and fourth argument of the dockmenufx_echo_embed_code() function call. Don't forget to provide your own width and height values, since 600 and 300 are just examples.

Make sure your Joomla version is 1.5 and that your hosting provider is using PHP5.

Joomla Module

1. Download or purchase the component

2. Create a new folder inside your Joomla directory called flashxml/dockmenufx/

3. Unzip the archive and copy the contents to flashxml/dockmenufx/ directory

4. Download the Joomla Module and install it

5. If you used a different folder than flashxml/dockmenufx/, update the Path parameter

6. Visit the live demo from the top of this page and customize your settings

Joomla Plugin

1. Download or purchase the component

2. Create a new folder inside your Joomla directory called flashxml/dockmenufx/

3. Unzip the archive and copy the contents to flashxml/dockmenufx/ directory

4. Download the Joomla Plugin and install it

5. If you used a different folder than flashxml/dockmenufx/, update the Path parameter

6. Use {dockmenufx}{/dockmenufx} where you want the component to show up in your articles

7. Visit the live demo from the top of this page and customize your settings

8. The default name for the settings file is settings.xml, but if you want to use another file (for example settings2.xml), specify the name like this: {dockmenufx settings="settings2.xml"}{/dockmenufx} where you want the component to show up in your articles

Getting rid of the FlashXML.net label

To remove the FlashXML.net label from the top-left corner you'll need to buy the commercial archive.
Once you will do that, simply use the SWF file from the commercial archive to overwrite the SWF file from the flashxml/dockmenufx/ folder.

Personal License (details ...)	12 USD	Add to cart
The "Personal License" grants you, the purchaser, a non-exclusive and non-transferable right to make use of this product in a single non-commercial application, your own work or client work. If this product will be included in an application that is owned by a company or in an application that is owned by an individual but generates money in any form then you will need to purchase the "Commercial License" below. If you want to use this product in multiple applications owned by the same individual or company then you will need to purchase a suitable license (Personal or Commercial License) for each application, or you can purchase the "Special License" below. If you want to use this product for your clients then you will need to purchase a suitable license (Personal, Commercial, or Special License) on behalf of each of your clients or you can purchase the "Extended License" below. You are not allowed to include this product in applications that are for sale. You are not allowed to directly or indirectly license, sub-license, distribute, redistribute, sell or resell this product. an application can be a website, a software, an electronic document such as a PowerPoint presentation or an ebook, a printed document, a video production. There is no restriction on the number of copies of this product within the same application, but the copies should not be for sale.
Commercial License (details ...)	36 USD	Add to cart
The "Commercial License" grants you, the purchaser, a non-exclusive and non-transferable right to make use of this product in a single commercial application, your own work or client work. If you want to use this product in multiple applications owned by the same individual or company then you will need to purchase a suitable license (Personal or Commercial License) for each application, or you can purchase the "Special License" below. If you want to use this product for your clients then you will need to purchase a suitable license (Personal, Commercial or Special License) on behalf of each of your clients or you can purchase the "Extended License" below. You are not allowed to include this product in applications that are for sale. You are not allowed to directly or indirectly license, sub-license, distribute, redistribute, sell or resell this product. an application can be a website, a software, an electronic document such as a PowerPoint presentation or an ebook, a printed document, a video production. There is no restriction on the number of copies of this product within the same application, but the copies should not be for sale.
Special License (details ...)	97 USD	Add to cart
The "Special License" grants you, the purchaser, a non-exclusive and non-transferable right to make use of this product in an unlimited number of personal OR commercial applications* owned by you or your company. If you want to use this product for your clients then you will need to purchase a suitable license (Personal, Commercial, or Special License) on behalf of each of your clients or you can purchase the “Extended License” below. You are not allowed to include this product in applications that are for sale. You are not allowed to directly or indirectly license, sub-license, distribute, redistribute, sell or resell this product. *an application can be a website, a software, an electronic document such as a PowerPoint presentation or an ebook, a printed document, a video production. There is no restriction on the number of copies of this product within the same application, but the copies should not be for sale.
Extended License (details ...)	485 USD	Add to cart
The "Extended License" grants you, the purchaser, a non-exclusive and non-transferable right to make use of this product in an unlimited number of personal OR commercial applications* owned by you OR your clients. This license was created for individuals and companies such as freelancers and design agencies which make custom work for their clients. Your clients will benefit of this product as a tool or service you are offering. You are not allowed to publicly advertise (e.g. on your website, on printed brochures, etc) that you are offering this product as one of your tools or services. You are not allowed to include this product in applications that are for sale. You are not allowed to directly or indirectly license, sub-license, distribute, redistribute, sell or resell this product. *an application can be a website, a software, an electronic document such as a PowerPoint presentation or an ebook, a printed document, a video production. There is no restriction on the number of copies of this product, but the copies should not be for sale.

loading comments...
<
1
...
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
...
37
>

Thomas

Okay I adjusted the startingPixel value and loads centered now. Just need help with the second part.

support

Hello,

Unfortunately, that feature is not available because that is the way in which the dock menu was conceived, to affect nearby photos as well.

Posted 2 Days Ago

Thomas

Hi,

I would like to use “doc menu” as a three icon menu. The problem is when I load the html page the icons all sit towards the right of the page and would prefer to have them centered (equal spacing on the left and right).

Is it also possible to zoom into an image without affecting the position of the other images. ie: one image zooms on rollover while the other images stay in there original position.

Thanks,
Thomas.

Posted 2 Days Ago

Stefanie

Hi,

Dock fx seems to completely ignore the settings.xml and images.xml files, and won’t change from the default settings and images that were in place when I installed it in Wordpress 3.0. I’ve edited both files from the code generated in this site, but the web page won’t change.

I followed all the installation instructions, and even removed the plugin and tried again, but the same thing keeps happening.
I’m using php 5.2.13 and Wordpress 3.0.

Any ideas??

thanks,
stefanie

support

Hi,

Please give us the link to your website to check this behavior.

Posted 3 Days Ago

Humbert

Hi, is there a way to use dockmenu to open a file on shadowbox http://www.shadowbox-js.com/

I call shadowbox with the rel attribute
This is an example of the link i need to create:
<a rel=“shadowbox;width=500;height=385” title=“My video” href=“http://www.mysite.com/video.flv”><img src=“http://www.mysite.com/myimage.jpg”></a>

support

Hi,

This is a small tutorial on how to install Shadowbox with this product.
After you install the Shadowbox using the tutorial from the shadowbox official site.
You need to specify in your images.xml file at the url attribute the following line:
url=“javascript:LaunchShadowbox(‘images/01.jpg’,‘img’,‘First Image’)”
Next you’ll need to write in your html file that embeds the swf the following block of javascript code in the head section (<head></head>)
<script type=“text/javascript”> function LaunchShadowbox(url,player,title) { Shadowbox.init(); Shadowbox.open({content: url, player: player, title:title}); }
</script>

Thank you.

Posted 3 Days Ago

Rik

Hiya,

It’s on the stage.

I’ve tried it with the test XML and images and within a movieClip and get the same results.

Thanks

support

Hi,

Could you send me an archive with your project to support at flashxml.net.
I’ll check it out.

Posted 3 Days Ago

Rik

Hi,

I’m getting this error when I publish in CS4 / AS3:

TypeError: Error #1009: Cannot access a property or method of a null object reference. at DockMenuAS3/checkReflection() at DockMenuAS3/set useReflection() at aw_10_v0_fla::dock_1/__setProp_DockMenu_dock_Component_0() at aw_10_v0_fla::dock_1() at flash.display::Sprite/constructChildren() at flash.display::Sprite() at flash.display::MovieClip()

Thanks….

support

Hi,

The DockMenuAS3 that you imported in your Flash project, is on your stage or in a movieclip?

Thank you.

Posted 4 Days Ago

jack

Hello!
One last question (I hope…!), – I want to run two (or more) galleries within one flashsite (one fla/swf). These galleries have also different settings. I can give different instance names to the galleries and adress different settings.xml in the component menu. But what do I have to put in the html file, which embedds the swf?
I now have this:

But what do I write, when I have more than one setting?

Thank you a lot for your great support!
Jack

support

Hi,

Please read this tutorial.

Posted 4 Days Ago

robdob

‘lighbox’ undefined has been resolved it was a problem with iis where it didn’t like double escaped characters as in loghbox++.js

thanks,

support

Hi,

It’s great that you made it work.

Posted 8 Days Ago

robdob

I’m getting the following error when I click on any of the thumbnails when running your test files in IE:

Error: ‘Lightbox’ is undefined

Posted 8 Days Ago

nours

That’s good, thx

Posted 8 Days Ago

loading comments...
<
1
...
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
...
37
>

POPULAR COMPONENTS

RECENT COMPONENTS

SEARCH

RECENT POSTS

FAQ

SUBSCRIBE

Dock Menu FX

PAID ARCHIVE

Non-Flash users:

Flash users:

How to install this Dock Menu on your website

How to install this Dock Menu in a new or existing Adobe Flash project

Leave a Reply