# Editing Mac Dock for Rollover effects

**URL:** <https://forum.kirupa.com/t/editing-mac-dock-for-rollover-effects/251442>\
**Category:** Uncategorized\
**Created:** [February 8, 2008, 3:10pm UTC](https://forum.kirupa.com/t/editing-mac-dock-for-rollover-effects/251442 "2008-02-08T15:10:53Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![CrazyDesigner](https://avatars.discourse-cdn.com/v4/letter/c/50afbb/32.png) [@CrazyDesigner](https://forum.kirupa.com/u/CrazyDesigner)\
**Post date:** [February 8, 2008, 3:10pm UTC](https://forum.kirupa.com/t/editing-mac-dock-for-rollover-effects/251442/1 "2008-02-08T15:10:53Z")

</div>

Hi everyone! Just registered here…been using kirupa tutorials for ages now though.😃

Anyway, I am editing a mockup of a Mac OS dock from [http://jrgraphix.net/research/flash-dock-mx-2004.php](http://jrgraphix.net/research/flash-dock-mx-2004.php) , Which is coded for MX-2004, I am editing in Studo 8, at the moment.

Pretty much what I am wanting to do is have the icons act as buttons with animated rollovers. Unfortunately, I am more of a visually based designer as opposed to a scripting guru. :thumb2:

I have looked through the external code that resides with it and know approximately where to add code, but I am having some serious issues with syntax/methods. Here are the two example pieces of code edited for my usage:

* * *

Stage.scaleMode = ‘noScale’;

// Handles clicks on icons  
this.dockActions = function(label) {  
switch(label) {  
case ‘About’:  
trace(‘Play the About Movie Clip’);

```
        break;
    case 'Blog':
        trace('This is how you load a JPEG or SWF into a new level.');
        loadMovie('sample.jpg', '_level10');
        break;
    case 'Forum':
        trace('This is how you load a JPEG or SWF into a movieclip.');
        this._parent.sample_mc.loadMovie('sample.jpg');
        break;
    default:
        trace('Default action here.');
}

```

}

var dockTemplate = {  
layout: 0, /\* top | right | bottom | left | _rotation_ \*/  
icon\_size: 128,  
icon\_min: 50,  
icon\_max: 128,  
icon\_spacing: 2,  
items: [  
{ id: ‘home’, label: ‘Home’},  
{ id: ‘about’, label: ‘About’ },  
{ id: ‘contact’, label: ‘Contact’ },  
{ id: ‘product’,label: ‘Product’ },  
{ id: ‘services’, label: ‘Services’ },  
{ id: ‘support’, label: ‘Support’ }  
],  
span: null,  
amplitude: null,  
callback: this.dockActions  
}

this.attachMovie(‘Dock’, ‘menu\_mc’, 1, dockTemplate);  
this.menu\_mc.\_x = Stage.width / 2;  
this.menu\_mc.\_y = Stage.height;

------ And the function that creates the icons:

private function createIcons():Void {  
var i:Number;  
var id:String;  
this.scale = 0;  
this.width = (this.items.length - 1) \* this.icon\_spacing + this.items.length \* this.icon\_min;  
var left:Number = (this.icon\_min - this.width) / 2;  
for(i = 0; i \< this.items.length; i++) {  
this.createEmptyMovieClip(String(i), i + 10).attachMovie(this.items\*.id, ‘\_mc’, 1);  
this\*.\_mc.\_y = -this.icon\_size / 2;  
this\*.\_mc.\_rotation = -this.\_rotation;  
this\*.\_x = this\*.x = left + i \* (this.icon\_min + this.icon\_spacing) + this.icon\_spacing / 2;  
this\*.\_y = -this.icon\_spacing;  
this\*.onRelease = launchIcon;  
this\*.useHandCursor = true;

```
    }
}

```

* * *

Been wracking my brains for a while. As you can see the initial code goes through some methods of doing actions, but it is entirely based off of click. May end up just getting a hold of a developer friend, but thought I would post here first. Thanks in advance!