Dynamic Text to navigate Movie Timeline Canvas/HTML 5

[Simon Oxenbridge]

Howdy,

I need a bit of help. I'm trying to create an input field (text) that when you enter a number (say 50) and then action a button that the movie timeline goes to frame 50 and stops.

Thanks

Simon

[JoãoCésar]

Hi.

Here is a sample for you to get started.

var root = this;
var go = root.goButton; // the button to click and change frame
var targetMC = root.mc; // the Movie Clip instance you want to change

root.start = function()
{
	root.stop();

	go.on("click", function(e)
	{
		var inputText = document.getElementById("input").value; // "input" is the name given to a TextInput component instance in the Properties panel
		targetMC.gotoAndStop(inputText);
	});
};

if (!root.started0) // this check prevents the start method to run again if this frame gets visited more than once
{
	root.start();
	root.started0 = true;
}

Please notice that I'm not checking if the value entered by the user is valid. So is up to you to check if it's a number, if the frame or label exists, and so on.

Regards,

JC

[john kelly88]

Thanks for helping us you are great! person.

[JoãoCésar]

Thanks, John!

[Simon Oxenbridge]

Hi JC,

Got that beauty to work great, thanks! This might be taking this to a whole new level, but is there a way to save the values? So if i leave (the page) and come back they remain? E.g. i enter 30 hit goButton. Leave the page and return and 30 is still the frame on the MC?

Thanks

[JoãoCésar]

Hi! 

That's great to hear!

And do you mean actually leaving the page (changing the browser address) or just changing the current frame of a timeline?

[Simon Oxenbridge]

Hi JC,

Yeh, leaving the page, so different URL. I  had a look around I think it might be a save function, though i'm not sure if that is the best for what i need.

Any help is very much appreciated.

Thanks

Simon

[JoãoCésar]

Hi again.

Thanks for clarifying.

So if you want to change pages, you can use window.localStorage or window.sessionStorage for the task.

Here's how your code could look like:

Main FLA:

var root = this;
var go = root.goButton; // the button to click and change frame
var link = root.link; // the button / text that changes the browser's URL
var targetMC = root.mc; // the Movie Clip instance you want to change
var inputText; // TextInput component
var savedText;

root.start = function()
{
	root.stop();
	
	setTimeout(function()
	{
		savedText = window.localStorage.getItem("savedInput"); // here you get the value stored
		inputText = document.getElementById("input"); // "input" is the name given to a TextInput component instance in the Properties panel
		
		if (savedText) // here you check if there's a value stored
			inputText.value = savedText;
	}, 0);
	
	go.on("click", function(e)
	{
		targetMC.gotoAndStop(inputText.value);
	});
	
	link.on("click", function(e)
	{
		window.localStorage.setItem("savedInput", inputText.value);
		window.location.href = "test.html";
	});
};

if (!root.started0) // this check prevents the start method to run again if this frame gets visited more than once
{
	root.start();
	root.started0 = true;
}

Second FLA:

var root = this;
var back = root.backButton; // the button to go back to the main HTML

root.start = function()
{
	root.stop();

	back.on("click", function(e)
	{
		window.location.href = "index.html";
	});
};

if (!root.started0) // this check prevents the start method to run again if this frame gets visited more than once
{
	root.start();
	root.started0 = true;
}

Please let us know if you have any further questions.

Regards,

JC

[Simon Oxenbridge]

Thanks JC,

Another great bit of learning for me. I did notice that only the values are saved , but figured if i add 'targetMC.gotoAndStop(savedText);' the MC timeline is returned too, BOOM!  

I think i almost have everything i need to build this thing for my boss. One last big one though...

I noticed that if the browser history is cleared the value is lost, is there an alternative? 

[JoãoCésar]

Hi again.

Indeed! I forgot to change the current frame. Glad you fixed it!

If you want a persistent that goes beyond the browser state/settings, than I think you're gonna need an online storage like Firebase, for example.

[Simon Oxenbridge]

Thanks JC,

I might be abarking up the wrong tree here though. Is there another option to pull data from an MS Excell file in the same folder? (It only has pull data, not wite back)?