Hi. Maybe this approach can help you. It uses a simple state management and a createjs.Tween approach instead of timeline tween. All you have to do is: - Convert each state to a Movie Clip or Simple Button; - Name them from 'state0' to 'state50'; - Put them all inside of a container Movie Clip called 'usa'; - Add three buttons called 'backButton', 'infoButton0', and 'infoButton1' to the main timeline; - Add this code to the main timeline: var that = this; var state; var clickState = "initial"; var currentInfo; function start() { that.usa.fade.alpha = 0; that.backButton.scaleX = that.backButton.scaleY = 0; that.infoButton0.scaleX = that.infoButton0.scaleY = 0; that.infoButton1.scaleX = that.infoButton1.scaleY = 0; that.backButton.addEventListener('click', backHandler); that.infoButton0.addEventListener('click', infoHandler); that.infoButton1.addEventListener('click', infoHandler); that.usa.addEventListener('click', mapHandler); that.stop(); } function mapHandler(e) { if (clickState == "initial" && e.target.parent.name.indexOf("state") == 0) { clickState = "stateSelected"; state = e.target.parent; callState(state); } } function backHandler(e) { if (clickState == "stateSelected") { clickState = "initial"; dismissStates(); } } function infoHandler(e) { if (clickState == "stateSelected") { clickState = "info"; createjs.Tween.get(e.currentTarget).to({scaleX:2, scaleY:2}, 350, createjs.Ease.circOut); currentInfo = e.currentTarget; } else { if (e.currentTarget == currentInfo) { clickState = "stateSelected"; createjs.Tween.get(e.currentTarget).to({scaleX:1, scaleY:1}, 150, createjs.Ease.circIn); } } } function callState(state) { that.usa.setChildIndex(that.usa.fade, that.usa.children.length - 1); that.usa.setChildIndex(state, that.usa.children.length - 1); createjs.Tween.get(that.usa.fade).to({alpha:0.75}, 550, createjs.Ease.sineOut); createjs.Tween.get(state).to({scaleX:2, scaleY:2}, 550, createjs.Ease.sineOut); createjs.Tween.get(that.backButton).wait(100).to({scaleX:1, scaleY:1}, 350, createjs.Ease.sineOut); createjs.Tween.get(that.infoButton0).wait(200).to({scaleX:1, scaleY:1}, 250, createjs.Ease.sineOut); createjs.Tween.get(that.infoButton1).wait(300).to({scaleX:1, scaleY:1}, 250, createjs.Ease.sineOut); that.infoButton0.x = state.x; that.infoButton0.y = state.y - 30; that.infoButton1.x = state.x; that.infoButton1.y = state.y + 30; } function dismissStates() { that.usa.setChildIndex(that.usa.fade, 0); createjs.Tween.get(that.usa.fade).to({alpha:0}, 350, createjs.Ease.sineOut); createjs.Tween.get(state).to({scaleX:1, scaleY:1}, 350, createjs.Ease.sineOut); createjs.Tween.get(that.backButton).to({scaleX:0, scaleY:0}, 350, createjs.Ease.sineOut); createjs.Tween.get(that.infoButton0).wait(100).to({scaleX:0, scaleY:0}, 250, createjs.Ease.sineOut); createjs.Tween.get(that.infoButton1).wait(200).to({scaleX:0, scaleY:0}, 250, createjs.Ease.sineOut); } start(); Here is the project for download: interactive_map_html5.zip. I hope it can help you and have a nice and happy Christmas! JC
... View more