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
AdChoices