1 Reply Latest reply on Dec 13, 2013 3:51 AM by moccamaximum

    Clickable World Map

    Tony Heagren Level 1

      Hi all,

       

      I asked a question recently but I did it badly and I think maybe people thought it was a more complex problem than it was..

       

      So this time (with example) I'm trying again.

       

      Scenario:

       

      Map of the world.

      Click a country.

      A box zooms out (which I will populate with info).

      basic online example:

      www.heagren.com/map

       

      Two highlighted countries (Nigeria and Indonesia).

      Click each one (then use the X to close the info box).

       

      The zoom clip in the example is just a very basic classic tween.

       

      What I need is a zoom clip that will start on the country clicked and end in the same final position each time. Each country has an invisible button on it (nigeria_Btn, USA_Btn, Germany_Btn) etc and ideally I would use these as a target "start point" within the code rather than _x _y coordinates.

      I hope this can be quite easily achieved with a scripted animation but the code is beyond me so I'm looking for ideas and inspiration !

      (and help…)

       

       

      All and any help much appreciated.

       

      Best wishes

      Tony

        • 1. Re: Clickable World Map
          moccamaximum Level 5

          ActionScript 3 (No use to restrict yourself to as1/2 with such simple requirements)

           

          push all the countries you want clickable into an array

           

          var country_arr:Array = [];

          country_arr.push(nigeria_Btn);

          country_arr.push(Germany_Btn);

          //etc.

           

          then create a loop

           

          for (var i:int = 0;i<country_arr.length;i++){

          country_arr.addEventlistener(MouseEvent.CLICK, zoomFromTo);

          }

           

          function zoomFromTo(e:MouseEvent):void{

            var startPoint:Point = new Point(e.stageX, e.stageY);

            var startScale:Number = 0.1;

            var endPoint:Point = new Poiint([ enter here the registration point of the infobox will be]);

          var endScale:Number = 1;

          //use all these data to program your tween

          // you can learn to program tweens here: http://www.republicofcode.com/tutorials/flash/as3tweenclass/

           

          }