18 Replies Latest reply on Jun 28, 2016 8:50 AM by littlesheepy

    Creating an interactive map?

    littlesheepy Level 1

      Good afternoon,

      I'm hoping to create an interactive map, where if you hover over a part of the map a photo pops up.

      Many years ago, I used to be able to design a similar thing using Macromedia Flash software, which I now realise has changed to Adobe Flash and then Animate CC. Does this sound like something I would be able to do now in Adobe Animate CC and if so, am I easily able to save the resulting interactive file as HTML5, so that it may be accessed on various devices?

      Any help most appreciated.

      Many thanks

        • 1. Re: Creating an interactive map?
          kglad Adobe Community Professional & MVP

          yes, you can use animate pro for that.

           

          you would open animate pro and start creating an html5 project.  your interactive map could be created using no code if you use buttons for the constituent pieces of your map and you add the popups to the over frame.

           

          if you want that to work with touch devices, you are probably going to want to use code to toggle the popups on touch or mousedown events.

          • 2. Re: Creating an interactive map?
            littlesheepy Level 1

            That's great thanks.

            Just need to hope now that I can remember at least a little bit of what I learnt years ago!

            • 3. Re: Creating an interactive map?
              kglad Adobe Community Professional & MVP

              you're welcome.

               

              and you can continue to post questions and get answers if you hit a snag.

              • 4. Re: Creating an interactive map?
                littlesheepy Level 1

                I wondered how long it'd be before I had more questions!

                We've now partially made an interactive map. We have an map image with text labels one. The text labels we've made into buttons, so that when the text is rolled over a photo pops up.

                We 'test movie' and it all looks great. However, from what I've since read, a) we'd not labeled instances, which we've retrospectively gone back and done as far as I can tell. b) we've not written any actionscript/code? c) we don't know how to publish it so that we can use it on a webpage. We've tried simply clicking 'publish' and understandably, the .html we get is just a blank white page.

                Can anybody offer any advice please before we either mess it up or mess it up more than we potentially already have?

                • 5. Re: Creating an interactive map?
                  kglad Adobe Community Professional & MVP

                  are you opening the html in the directory where it was published by animate (so the js and any needed assets are in the correct locations)?

                  • 6. Re: Creating an interactive map?
                    littlesheepy Level 1

                    Yep, I'm just clicking open on the html where it's saved by animate alongside the other files.

                    • 7. Re: Creating an interactive map?
                      kglad Adobe Community Professional & MVP

                      upload your assets to a file server and post a link to the html file.

                      • 8. Re: Creating an interactive map?
                        littlesheepy Level 1

                        Sorry for the delay. These are the files I have and a .fla which I've not included. Thanks

                        Dropbox - Work

                        • 9. Re: Creating an interactive map?
                          kglad Adobe Community Professional & MVP

                          you have a spritesheet error:

                           

                          TypeError: this.spriteSheet is undefined

                          • 10. Re: Creating an interactive map?
                            littlesheepy Level 1

                            Sorry kglad I haven't clue what that means! Any tips for resolving it please?

                            • 11. Re: Creating an interactive map?
                              kglad Adobe Community Professional & MVP

                              i can't say without opening your files and correcting them and i don't do that unless hired.

                               

                              do you have any code that references your json/spritesheet?

                              • 12. Re: Creating an interactive map?
                                Colin Holgate MVP & Adobe Community Professional

                                Your HTML is looking for the json file inside an images folder, but you moved those files out of the images folder. It also won't work in a local test. Put your files on a server to test them, and make sure that the json and png files are in a folder named images.

                                 

                                Using spaces in names probably works, but can make the URL a bit harder to understand.

                                • 13. Re: Creating an interactive map?
                                  littlesheepy Level 1

                                  Understandable, thanks

                                  I'm sorry but the mention of code/json/spritesheet and I'm lost

                                  • 14. Re: Creating an interactive map?
                                    littlesheepy Level 1

                                    When i tested it from the published folder, the .png and .json were in an images folder but I didn't realise it wouldn't work in a local test either.

                                    Ok, will try and see if I can get them uploaded tomorrow morning to test. That'll be another problem as it's been designed to be uploaded to a university learning environment that I've never used before.

                                     

                                    Would you recommend changing all the file names to floor_plan etc.? or will that cause more problems?

                                    Many thanks for your help

                                    • 15. Re: Creating an interactive map?
                                      Colin Holgate MVP & Adobe Community Professional

                                      It should upload and work to any server. You could change the names, but do it by renaming the FLA, and republish.

                                       

                                      If you turn off the spritesheet option in publishing settings you will be able to test the files locally. If you do that, delete the images folder before republishing.

                                      • 16. Re: Creating an interactive map?
                                        littlesheepy Level 1

                                        Sorry for the delay in getting back to you.

                                        I've renamed it as suggested and republished it without a spritesheet and tested it locally. That seems to work OK.

                                        I've then deleted the files and republished it with a spritesheet and uploaded it to a website with the images folder, .js and .html files in a folder and tried opening the .html and it doesn't work. Above the blank animation when I open it the html file it says this -

                                         

                                        var canvas, stage, exportRoot; function init() { // --- write your JS code here --- canvas = document.getElementById("canvas"); images = images||{}; ss = ss||{}; var loader = new createjs.LoadQueue(false); loader.addEventListener("fileload", handleFileLoad); loader.addEventListener("complete", handleComplete); loader.loadFile({src:"images/Floorfinal_atlas_.json", type:"spritesheet", id:"Floorfinal_atlas_"}, true); loader.loadManifest(lib.properties.manifest); } function handleFileLoad(evt) { if (evt.item.type == "image") { images[evt.item.id] = evt.result; } } function handleComplete(evt) { var queue = evt.target; ss["Floorfinal_atlas_"] = queue.getResult("Floorfinal_atlas_"); exportRoot = new lib.Floorfinal(); stage = new createjs.Stage(canvas); stage.addChild(exportRoot); stage.update(); stage.enableMouseOver(); createjs.Ticker.setFPS(lib.properties.fps); createjs.Ticker.addEventListener("tick", stage); }

                                         

                                        The page source says this

                                         

                                        <!--

                                        NOTES:

                                        1. All tokens are represented by '$' sign in the template.

                                        2. You can write your code only wherever mentioned.

                                        3. All occurrences of existing tokens will be replaced by their appropriate values.

                                        -->

                                         

                                        <!DOCTYPE html>

                                        <html>

                                        <head>

                                        <meta charset="UTF-8">

                                        <title>Floorfinal</title>

                                        <!-- write your code here -->

                                         

                                         

                                        <xxxx src="https://code.createjs.com/createjs-2015.11.26.min.js"></xxxx>

                                        <xxxx src="Floorfinal.js"></xxxx>

                                        <xxxx>

                                        var canvas, stage, exportRoot;

                                        function init() {

                                        // --- write your JS code here ---

                                        canvas = document.getElementById("canvas");

                                        images = images||{};

                                        ss = ss||{};

                                         

                                        var loader = new createjs.LoadQueue(false);

                                        loader.addEventListener("fileload", handleFileLoad);

                                        loader.addEventListener("complete", handleComplete);

                                        loader.loadFile({src:"images/Floorfinal_atlas_.json", type:"spritesheet", id:"Floorfinal_atlas_"}, true);

                                        loader.loadManifest(lib.properties.manifest);

                                        }

                                         

                                        function handleFileLoad(evt) {

                                        if (evt.item.type == "image") { images[evt.item.id] = evt.result; }

                                        }

                                         

                                        function handleComplete(evt) {

                                        var queue = evt.target;

                                        ss["Floorfinal_atlas_"] = queue.getResult("Floorfinal_atlas_");

                                        exportRoot = new lib.Floorfinal();

                                         

                                        stage = new createjs.Stage(canvas);

                                        stage.addChild(exportRoot);

                                        stage.update();

                                        stage.enableMouseOver();

                                         

                                        createjs.Ticker.setFPS(lib.properties.fps);

                                        createjs.Ticker.addEventListener("tick", stage);

                                        }

                                         

                                        </xxxx>

                                         

                                        <!-- write your code here -->

                                         

                                        </head>

                                        <body xx="init();" style="background-color:#D4D4D4;margin:0px;">

                                        <canvas id="canvas" width="1000" height="1220" style="background-color:#FFFFFF"></canvas>

                                        </body>

                                        </html>

                                         

                                         

                                        Any ideas where I'm going wrong please?

                                        Thank you

                                        • 17. Re: Creating an interactive map?
                                          Colin Holgate MVP & Adobe Community Professional

                                          Can you open the developer tools in your browser, and see if the Console is showing any errors?

                                          • 18. Re: Creating an interactive map?
                                            littlesheepy Level 1

                                            I've done that (Internet Explorer -> F12 - > console) and it show's nothing. :/