8 Replies Latest reply on May 30, 2014 12:58 PM by AdeptDigital

    Links not working in HTML5 published from Flash CC

    AdeptDigital Level 2

      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;

        • 1. Re: Links not working in HTML5 published from Flash CC
          kglad Adobe Community Professional & MVP

          are your images in a timeline tween?  if yes, that may be a problem.

           

          are your images named (in the properties panel) in the first keyframe that contains them?  if not, that's a problem.

          • 2. Re: Links not working in HTML5 published from Flash CC
            AdeptDigital Level 2

            Ya I noticed that after I posted.

             

            The image that I am calling to become a link is not in a tween but a static image that is layered on top of them. I figured that since the image is static that it would not be a problem.  To confirm I created a version of the canvas without the moving images and just used the image on the upper layer that housed the link and it still didn't work. I don't know if that would have been a problem if I tried to use it but when I select the image and add the JS via the code snippet the instance name is populated correctly in the code so I figured it was going to select properly.

             

            Still trying to figure this one out. Thanks for the comment.

            • 3. Re: Links not working in HTML5 published from Flash CC
              kglad Adobe Community Professional & MVP

              show the code (in flash pro) you used for the link.

              • 4. Re: Links not working in HTML5 published from Flash CC
                AdeptDigital Level 2

                And yes all the images have distinctive instance names that appear in the first frame.

                 

                A thought though, one of the warnings that comes up for every output is the fact that while AS3 starts counting at 0, JS counts at 1. I altered the frame numbers in the JS to compensate and it threw the entire thing off so I figured this was not as issue for the coding but who knows, maybe it is. Should I be worried about that for such a simple function? I figured that only played in for the GoToAndPlay() movie clip controls.

                 

                Again, thanks for the comment.

                • 5. Re: Links not working in HTML5 published from Flash CC
                  AdeptDigital Level 2

                  On frame 1 in the "actions" layer I have this:

                   

                  this.Frame01_mc.addEventListener("click", fl_ClickToGoToWebPage_2);

                   

                  function fl_ClickToGoToWebPage_2() {

                    window.open("http://www.google.com", "_blank");

                  }

                   

                  On frame 35 in the "actions" layer (when the second image in the rotation appears) I have this:

                   

                  this.Frame01_mc.addEventListener("click", fl_ClickToGoToWebPage_3);

                   

                  function fl_ClickToGoToWebPage_3() {

                    window.open("http://www.msn.com", "_self");

                  }

                  • 6. Re: Links not working in HTML5 published from Flash CC
                    kglad Adobe Community Professional & MVP

                    that code will work if you have a Frame01_mc interactiveobject defined on frame 1 and frame 35.  (is that really the correct name, Frame01_mc?)

                     

                    i'm not sure it will do what you want on frame 35 (change the current web page to msn AND open a pop-up to google).

                    1 person found this helpful
                    • 7. Re: Links not working in HTML5 published from Flash CC
                      AdeptDigital Level 2

                      The object is a png "frame" that allows the images to match the design elements in the header of the page. I am building out the design here:

                       

                      Adept Digital | Small Business Web Development

                       

                      I have figured out how I will make this animation responsive along with the rest of the objects on the page, I just need to get it to function the way I want.

                       

                      I have an assortment of image rotation options available but I want to apply motion tweens and links to the images so it has a more dynamic look and feel. I am hoping that the time and energy I have put into learning Flash will not be wasted since it seems that it is becoming a dinosaur in the web design industry. I really enjoy working with it but I had to leave it ever since Apple blocked it from working on it's devices. My hope is that with this more recent version of Flash CC the bugs have been worked out enough to make it useable again for small business web development.

                       

                      As it stands now the entire process for getting the coding to work is far too annoying and buggy to bother with, but like I said I have devoted too much time to this to write it off without a final look. If I cannot get an object in Flash to operate as a simple link, then what is the worth of the CreateJS tool? Pretty animations without functionality?

                       

                      I am unfamiliar with what you mean by "interactiveobject defined". Please explain?

                       

                      The links are testers that are going to be replaced with links both within this site and to other sites that I want to open in a new tab/window. This is a proof of concept exercise looking to verify that this will work on Apple devices before I trust it to include it in my workflow. If I cannot have a single image do multiple things, then why should I bother with Flash at all?

                       

                      Thanks for the help.

                      • 8. Re: Links not working in HTML5 published from Flash CC
                        AdeptDigital Level 2

                        Ok, I think I have this figured out, took a little snooping but I figured the problem had to be in the symbols I was creating so I investigated and realized I was using the same symbol for both the links I was trying to generate and the CreateJS was not using the instance names to trigger the URL links, it was using the symbol names. When I switched up the triggering button to use two different symbols (with the exact same content BTW) it cleared whatever obstruction was knocking out the URL link function and allowed for the two links to exist in the timeline separately.

                         

                        I was taught that the instance name determined the focus of the listeners, not the symbol name. Seems you cannot stack or mash together multiple URLs into the same symbol, good to know.

                         

                        Thanks for your time, if it falls apart in the next hour I'll keep this thread open.