Hi All,
I’ve got an extremely annoying issue that I’m hoping you can help me with.
I have a site which uses the Apple Style dock component from jrgraphix.net.
You can view the development site at http://nltucker.cvwgroup.com.
The issue appears to be with Internet Explorer (All versions).
In Firefox the movie works without issue (ignore the transparency and positioning).
As you browse between pages the SWF reloads and functions as it should.
In Internet Explorer the first time you load the page and the SWF it works as it should.
HOWEVER (!!!) when you browse to another page or refresh the current page the SWF functionalilty drops out and some (if not all) of the actionscript appears not to trigger.
The .as file used is:
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) * (140 - 60) / (96 - 16) + 60;
//return (this.icon_min - 16) * (240 - 60) / (96 - 16) + 60;
}
private function getAmplitude():Number {
return 1 * (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*.useHandCursor = false;
}
}
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, 0xffffff, 80);
//mc.beginFill(0xffffff, 50);
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;
}
}
The internal actionscript on the main element is:
Stage.scaleMode = 'noScale';
this.dockActions = function(label) {
switch(label) {
case 'Drag Chains':
getURL("/content/test.html");
trace('Actions here to handle Drag Chains.');
break;
case 'ACS Cable Labelling':
getURL("/content/test.html");
trace('Actions here to handle ACS Cable Labelling.');
break;
case 'Connectors & Enclosures':
getURL("/content/test.html");
trace('Actions here to handle Connectors & Enclosures.');
break;
case 'Flexible Electrical Cable':
getURL("/content/test.html");
trace('Actions here to handle Flexible Electrical Cable.');
break;
case 'Cable Glands':
getURL("/content/test.html");
trace('Actions here to handle Cable Glands.');
break;
case 'Festoon Systems':
getURL("/content/test.html");
trace('Actions here to handle Festoon Systems.');
break;
case 'Cable Reels':
getURL("/content/test.html");
trace('Actions here to handle Cable Reels.');
break;
case 'Conduits':
getURL("/content/test.html");
trace('Actions here to handle Conduits.');
break;
case 'Radio Remote':
getURL("/content/test.html");
trace('Actions here to handle Radio Remote.');
break;
case 'Tele Remote':
getURL("/content/test.html");
trace('Actions here to handle Tele Remote.');
break;
default:
trace('Default action here.');
}
}
/* top | right | bottom | left | *rotation* */
var dockTemplate = {
layout: 0,
icon_size: 138,
icon_min: 65,
icon_max: 100,
icon_spacing: 1,
items: [
{ id: 'acs', label: 'ACS Cable Labelling'},
{ id: 'enclosures', label: 'Connectors & Enclosures' },
{ id: 'flexi',label: 'Flexible Electrical Cable' },
{ id: 'glands', label: 'Cable Glands' },
{ id: 'festoon', label: 'Festoon Systems' },
{ id: 'reel', label: 'Cable Reels' },
{ id: 'drag', label: 'Drag Chains' },
{ id: 'conduits', label: 'Conduits' },
{ id: 'radio', label: 'Radio Remote' },
{ id: 'tele', label: 'Tele Remote' }
],
span: null,
amplitude: null,
callback: this.dockActions
}
this.attachMovie('Dock','menu_mc',1,dockTemplate);
this.attachMovie('Test','test_mc',2);
this.menu_mc._x = Stage.width / 2;
this.menu_mc._y = Stage.height;
My first thought was that IE was using some other kind of onLoad event which, in turn, was not restarting the entire actionscript.
I really hope some one can shed some light on this issue as it’s driving me NUTS!
thanks
–Neil
