Hello,
I have a test page that I am working with as a proof of concept and I have been hitting the same wall for a while trying to get the animations I create in Flash to actually work properly. In this case I am building a simple image slideshow with custom moves and fades. The animation is working just fine but for some reason I cannot get the images in the rotation to link to the URL I have programmed it for.
I have been looking around at different solutions and none of them seem to be working. All I want to do is have the images in the rotation link to other pages on the site. This seems like a fundamental thing but for some reason the output is failing to do it. Any thoughts would be appreciated.
Here is the HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HeaderImageRot2</title>
<script src="http://code.createjs.com/easeljs-0.7.0.min.js"></script>
<script src="http://code.createjs.com/tweenjs-0.5.0.min.js"></script>
<script src="http://code.createjs.com/movieclip-0.7.0.min.js"></script>
<script src="http://code.createjs.com/preloadjs-0.4.0.min.js"></script>
<script src="HeaderImageRot2.js"></script>
<script>
var canvas, stage, exportRoot;
function init() {
canvas = document.getElementById("canvas");
images = images||{};
var loader = new createjs.LoadQueue(false);
loader.addEventListener("fileload", handleFileLoad);
loader.addEventListener("complete", handleComplete);
loader.loadManifest(lib.properties.manifest);
}
function handleFileLoad(evt) {
if (evt.item.type == "image") { images[evt.item.id] = evt.result; }
}
function handleComplete() {
exportRoot = new lib.HeaderImageRot2();
stage = new createjs.Stage(canvas);
stage.addChild(exportRoot);
stage.update();
createjs.Ticker.setFPS(lib.properties.fps);
createjs.Ticker.addEventListener("tick", stage);
}
</script>
</head>
<body onload="init();" style="background-color:#D4D4D4">
<canvas id="canvas" width="1400" height="365" style="background-color:#444444"></canvas>
</body>
</html>
and here is the JS:
(function (lib, img, cjs) {
var p; // shortcut to reference prototypes
// library properties:
lib.properties = {
width: 1400,
height: 365,
fps: 12,
color: "#444444",
manifest: [
{src:"images/AMLHomePage.jpg", id:"AMLHomePage"},
{src:"images/AMLWedding.jpg", id:"AMLWedding"},
{src:"images/HomeRotFrame.png", id:"HomeRotFrame"}
]
};
// stage content:
(lib.HeaderImageRot2 = function(mode,startPosition,loop) {
this.initialize(mode,startPosition,loop,{});
// timeline functions:
this.frame_0 = function() {
this.Frame01_mc.onClick = function() {
window.location = "http://google.com";
}
}
this.frame_34 = function() {
/* Click to Go to Web Page
Clicking on the specified symbol instance loads the URL in a new browser window.
Instructions:
1. Replace http://www.adobe.com with the desired URL address.
Keep the quotation marks ("").
*/
this.Frame01_mc.addEventListener("click", fl_ClickToGoToWebPage_3);
function fl_ClickToGoToWebPage_3() {
window.open("http://www.mas.com", "_self");
}
}
// actions tween:
this.timeline.addTween(cjs.Tween.get(this).call(this.frame_0).wait(34).call(this.frame_34 ).wait(31));
// Frame
this.Frame01_mc = new lib.Frame01_mc();
this.Frame01_mc.setTransform(700,183.5);
this.timeline.addTween(cjs.Tween.get(this.Frame01_mc).wait(65));
// Image-01_mc
this.Image01_mc = new lib.Image01_mc();
this.Image01_mc.setTransform(700,364.4);
this.Image01_mc.alpha = 0;
this.timeline.addTween(cjs.Tween.get(this.Image01_mc).to({y:382.8,alpha:1},5).to({y:452.8 },19).to({y:497,alpha:0},12).to({_off:true},1).wait(28));
// Image-02_mc
this.movieClip_1 = new lib.Symbol1();
this.movieClip_1.setTransform(700,481.2);
this.movieClip_1._off = true;
this.instance = new lib.Tween5("synched",0);
this.instance.setTransform(700,383.7);
this.instance._off = true;
this.instance_1 = new lib.Tween6("synched",0);
this.instance_1.setTransform(700,351.2);
this.instance_1.alpha = 0;
this.timeline.addTween(cjs.Tween.get({}).to({state:[]}).to({state:[{t:this.movieClip_1}]} ,24).to({state:[{t:this.instance}]},30).to({state:[{t:this.instance_1}]},10).wait(1));
this.timeline.addTween(cjs.Tween.get(this.movieClip_1).wait(24).to({_off:false},0).to({_o ff:true,y:383.7,mode:"synched",startPosition:0},30).wait(11));
this.timeline.addTween(cjs.Tween.get(this.instance).wait(24).to({_off:false},30).to({_off :true,y:351.2,alpha:0},10).wait(1));
}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(700,49.8,1400,994);
// symbols:
(lib.AMLHomePage = function() {
this.initialize(img.AMLHomePage);
}).prototype = p = new cjs.Bitmap();
p.nominalBounds = new cjs.Rectangle(0,0,1600,1136);
(lib.AMLWedding = function() {
this.initialize(img.AMLWedding);
}).prototype = p = new cjs.Bitmap();
p.nominalBounds = new cjs.Rectangle(0,0,1600,1136);
(lib.HomeRotFrame = function() {
this.initialize(img.HomeRotFrame);
}).prototype = p = new cjs.Bitmap();
p.nominalBounds = new cjs.Rectangle(0,0,1400,367);
(lib.Tween6 = function() {
this.initialize();
// Layer 1
this.instance = new lib.AMLWedding();
this.instance.setTransform(-700,-497,0.875,0.875);
this.addChild(this.instance);
}).prototype = p = new cjs.Container();
p.nominalBounds = new cjs.Rectangle(-700,-497,1400,994);
(lib.Tween5 = function() {
this.initialize();
// Layer 1
this.instance = new lib.AMLWedding();
this.instance.setTransform(-700,-497,0.875,0.875);
this.addChild(this.instance);
}).prototype = p = new cjs.Container();
p.nominalBounds = new cjs.Rectangle(-700,-497,1400,994);
(lib.Image01_mc = function() {
this.initialize();
// Layer 1
this.instance = new lib.AMLHomePage();
this.instance.setTransform(-700,-497,0.875,0.875);
this.addChild(this.instance);
}).prototype = p = new cjs.Container();
p.nominalBounds = new cjs.Rectangle(-700,-497,1400,994);
(lib.Frame01_mc = function() {
this.initialize();
// Layer 1
this.instance = new lib.HomeRotFrame();
this.instance.setTransform(-700,-183.5);
this.addChild(this.instance);
}).prototype = p = new cjs.Container();
p.nominalBounds = new cjs.Rectangle(-700,-183.5,1400,367);
(lib.Symbol1 = function() {
this.initialize();
// Layer 1
this.instance = new lib.Tween5("synched",0);
this.addChild(this.instance);
}).prototype = p = new cjs.Container();
p.nominalBounds = new cjs.Rectangle(-700,-497,1400,994);
})(lib = lib||{}, images = images||{}, createjs = createjs||{});
var lib, images, createjs;