Hello everyone!
Trying to add just a bit extra functionalities to this nice little mac dock effect here
http://jrgraphix.net/research/flash-dock-mx-2004.php
Basically you put in the images in the FLA, the code sets all the icon along a “Dock” and does the Mac magnifying effect as you roll over them.
Below is everything in the dock.as file that came with the package. What I need to do is to make a label to fade in/out when mouseover any of the icon, as well as doing the magifying effect.
I’ve started poking around with the createIcons function, trying to add a rollOverIcons function so I can get the icons to fade in a label_mc which is placed within the icon MCs.
/*
Free stuff. Do not redistribute.
http://jrgraphix.net/
March 8, 2005
*/
class Dock extends MovieClip {
var icon_min : Number;
var icon_max : Number;
var icon_size : Number;
var icon_spacing : Number;
var width : Number;
var span : Number;
var amplitude : Number;
var ratio : Number;
var scale : Number = Number.NEGATIVE_INFINITY;
var trend : Number = 0;
var xmouse : Number;
var ymouse : Number;
var layout : String;
var callback : Function;
var items : Array;
function Dock() {
setParameters();
setLayout();
createIcons();
createTray();
onEnterFrame = monitorDock;
}
private function setParameters():Void {
this.layout = this.layout ? this.layout : 'bottom';
this.icon_min = this.icon_min ? this.icon_min : 32;
this.icon_max = this.icon_max ? this.icon_max : 96;
this.icon_spacing = this.icon_spacing ? this.icon_spacing : 2;
this.span = this.span ? this.span : getSpan();
this.amplitude = this.amplitude ? this.amplitude : getAmplitude();
this.ratio = Math.PI / 2 / this.span;
}
private function getSpan():Number {
return (this.icon_min - 16) * (240 - 60) / (96 - 16) + 60;
}
private function getAmplitude():Number {
return 2 * (this.icon_max - this.icon_min + this.icon_spacing);
}
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*.onRollOver = rollOverIcons;
this*.useHandCursor = false;
}
}
//additional label rollover fucntion
private function rollOverIcons():Void {
//stuck on how to do the fadeIn function
}
private function launchIcon():Void {
this._parent.callback(this._parent.items[this._name].label);
}
private function createTray():Void {
var height:Number = this.icon_min + 2 * this.icon_spacing;
var width:Number = this.width + 2 * this.icon_spacing;
var mc:MovieClip = this.createEmptyMovieClip('tray_mc', 1);
mc.lineStyle(0, 0xcccccc, 0);
mc.beginFill(0xe8e8e8, 0);
mc.lineTo(0, -height);
mc.lineTo(width, -height);
mc.lineTo(width, 0);
mc.lineTo(0, 0);
mc.endFill();
}
private function setLayout():Void {
switch(this.layout) {
case 'left':
this._rotation = 90;
break;
case 'top':
this._rotation = 180;
break;
case 'right':
this._rotation = 270;
break;
default:
this._rotation = Number(this.layout);
}
}
private function checkBoundary():Boolean {
var buffer:Number = 4 * this.scale;
return (this.ymouse < 0)
&& (this.ymouse > -2 * this.icon_spacing - this.icon_min + (this.icon_min - this.icon_max) * this.scale)
&& (this.xmouse > this[0]._x - this[0]._width / 2 - this.icon_spacing - buffer)
&& (this.xmouse < this[this.items.length - 1]._x + this[this.items.length - 1]._width / 2 + this.icon_spacing + buffer);
}
private function updateTray():Void {
var x:Number;
var w:Number;
x = this[0]._x - this[0]._width / 2 - this.icon_spacing;
w = this[this.items.length - 1]._x + this[this.items.length - 1]._width / 2 + this.icon_spacing;
this['tray_mc']._x = x;
this['tray_mc']._width = w - x;
}
private function monitorDock():Boolean {
var i:Number;
var x:Number;
var dx:Number;
var dim:Number;
// Mouse did not move and Dock is not between states. Skip rest of the block.
if((this.xmouse == this._xmouse) && (this.ymouse == this._ymouse) && ((this.scale <= 0.01) || (this.scale >= 0.99))) { return false; }
// Mouse moved or Dock is between states. Update Dock.
this.xmouse = this._xmouse;
this.ymouse = this._ymouse;
// Ensure that inflation does not change direction.
this.trend = (this.trend == 0 ) ? (checkBoundary() ? 0.25 : -0.25) : (this.trend);
this.scale += this.trend;
if( (this.scale < 0.02) || (this.scale > 0.98) ) { this.trend = 0; }
// Actual scale is in the range of 0..1
this.scale = Math.min(1, Math.max(0, this.scale));
// Hard stuff. Calculating position and scale of individual icons.
for(i = 0; i < this.items.length; i++) {
dx = this*.x - this.xmouse;
dx = Math.min(Math.max(dx, -this.span), this.span);
dim = this.icon_min + (this.icon_max - this.icon_min) * Math.cos(dx * this.ratio) * (Math.abs(dx) > this.span ? 0 : 1) * this.scale;
this*._x = this*.x + this.scale * this.amplitude * Math.sin(dx * this.ratio);
this*._xscale = this*._yscale = 100 * dim / this.icon_size;
}
// Resize tray to contain icons.
updateTray();
return true;
}
}
I was hoping that I could import the FuseKit class like I usually would and fade it in with one line of code such as
//additional label rollover fucntion
private function rollOverIcons():Void {
//stuck on how to do the fadeIn function
//this.label_mc.fadeIn(1, "easeInOutQuad")
}
Then I got an error since the code doesn’t recognise the fadeIn method, no matter where I tried to import FuseKit (in the timeline or in dock.as).
I know this is most likely something really basic. Being a designer having spent forever working with AS1, only starting to try to upgrade my AS skills. If anyone could give me some pointers that’d be awesome. Thanks!
