4 Replies Latest reply on Apr 7, 2016 6:46 AM by resdesign

    How do I make an interactive timeline with popups?

    BoomerangPlays Level 1

      I was wondering how to make in interactive timeline.

       

      Basically I'm looking for information on how to make a timeline that, when I hover certain points, a quote or image will pop up in the middle.

       

      I am using Animate 2015 and I need this information by the end of this week.

        • 1. Re: How do I make an interactive timeline with popups?
          resdesign Adobe Community Professional & MVP

          What kind of information do you have in your pop up - I mean - is it constant like an image, a text, etc... If yes, it is pretty easy to use a symbol for it and change the data in the symbol.  How do you want your symbol to be visible? slide in or something else? Do you want buttons on your timeline to bring in the symbol? Please tell us some more about your setup.

          • 2. Re: How do I make an interactive timeline with popups?
            BoomerangPlays Level 1

            I want to have small circles where, when you hover over them, a static image or text box will pop up, and I just want it to pop up with no special effect.

            • 3. Re: How do I make an interactive timeline with popups?
              ddhayles Level 3

              I'd start by creating the items that you want to be revealed on your stage then create your circles and turn them into buttons, to do this right mouse click on them an select mouseover. When the code window opens pick an action - Hide/Show -  then pick a target and navigate to the item that needs to be shown.

               

              To hide, repeat again by right mouse clicking your circle and select  'mousedown' select hide and navigate to the same target element.

               

              Now to make sure that all your elements are hidden when your project plays for the first time, right mouse click the stage and select compositionReady, again pick an action - Hide/Show -  then pick the target element that needs to be hidden. Repeat for each element you need hidden.

               

              If you need any help once you've set up your file please DM it over.

              • 4. Re: How do I make an interactive timeline with popups?
                resdesign Adobe Community Professional & MVP

                Here is an example of how I do it:

                 

                Create a symbol with photo and text. Note jpg or png can be noted in EA as a div or as a img. You can select the image and change div to img if you are using attr('src') or leave it to div if you are using CSS.

                add a text field.

                Save the symbol.

                On your main timeline:

                1. you can have the symbol and change its display to off or
                2. you can bring it in using several methods (the symbol is on the side and you have an animation that brings it in or
                3. You can have the opacity to 0 and change the opacity to 1.

                Note: in the example below you could also use a JSON file for your data. here the array is in compositionReady with the rest of the code.

                I suppose you either have buttons for the dates. You can add this code for your buttons using jquery if you are using jquery. If not you can also use code to make it easy for all the buttons. code in stage/compositionReady

                var info = [

                {'images': 'cat', 'text':'info for cat.'},

                {'images': 'dog', 'text':'info for dog.'},

                {'images': 'fish', 'text':'info for fish.'},

                {'images': 'bird', 'text':'info for bird.'},

                ];

                var buttons = sym.$("buttons").children();

                $.each(buttons,function(i){

                  $(this).on("click", function(){

                       sym.$('circles').css({"opacity":0.00});   // reset symbol to 0 opacity

                       sym.$('circles').animate({"opacity":1.00},1000);

                       sym.getSymbol('circles').$("images").attr('src',"images/" + info[i].images + ".png");

                       sym.getSymbol('circles').$("textname").html(info[i].text);

                  });

                });

                 

                If you are using css - instead of an image in your symbol, add an empty div little a rectangle which allows images to be different sizes. the code will be:

                var info = [

                {'images': 'cat', 'text':'info for cat.'},

                {'images': 'dog', 'text':'info for dog.'},

                {'images': 'fish', 'text':'info for fish.'},

                {'images': 'bird', 'text':'info for bird.'},

                ];

                var buttons = sym.$("buttons").children();

                 

                $.each(buttons,function(i){

                       $(this).on("click", function(){

                 

                       sym.$('circles').css({"opacity":0.00}); // reset smybol to 0 opacity

                       sym.$('circles').animate({"opacity":1.00},1000);

                       sym.getSymbol('circles').css({

                                                                 'background-image': 'url("images/'+info[i].images+'jpg"'),

                                                                 'background-repeat': 'no-repeat'

                                                                   });

                       sym.getSymbol('circles').$("textname").html(info[i].text);

                  });

                });