Highlighted

Dynamic Text to navigate Movie Timeline Canvas/HTML 5

New Here ,
Apr 02, 2020

Copy link to clipboard

Copied

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

Views

323

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Dynamic Text to navigate Movie Timeline Canvas/HTML 5

New Here ,
Apr 02, 2020

Copy link to clipboard

Copied

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

Views

324

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Apr 02, 2020 0
Adobe Community Professional ,
Apr 03, 2020

Copy link to clipboard

Copied

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

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 03, 2020 0
New Here ,
Apr 05, 2020

Copy link to clipboard

Copied

Thanks for helping us you are great! person.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 05, 2020 1
Adobe Community Professional ,
Apr 06, 2020

Copy link to clipboard

Copied

Thanks, John!

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 06, 2020 0
New Here ,
Apr 05, 2020

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 05, 2020 0
Adobe Community Professional ,
Apr 06, 2020

Copy link to clipboard

Copied

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?

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 06, 2020 0
New Here ,
Apr 06, 2020

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 06, 2020 0
Adobe Community Professional ,
Apr 06, 2020

Copy link to clipboard

Copied

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

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 06, 2020 0
New Here ,
Apr 07, 2020

Copy link to clipboard

Copied

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? 

 

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 07, 2020 0
Adobe Community Professional ,
Apr 09, 2020

Copy link to clipboard

Copied

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.

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 09, 2020 0
New Here ,
Apr 13, 2020

Copy link to clipboard

Copied

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)?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 13, 2020 0