AS2 - How to pass text input value to a function on button click

  • (2 Pages)
  • +
  • 1
  • 2

17 Replies - 9048 Views - Last Post: 16 May 2011 - 04:56 AM

#1 midasxl  Icon User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 193
  • Joined: 03-December 08

AS2 - How to pass text input value to a function on button click

Posted 27 April 2011 - 07:41 AM

Hello and thanks for your time.

I have a text box set to Input Text and a button on my stage in Flash CS4 professional. I would like to type an integer value in the input text box, click the button, and have the value of the text box pass into a function. The way I have it working now is by placing a value into the text box, hitting the button which has the following actions attached to it:

on(release){
gotoAndStop(2);
}



Then on frame two the following code:
init(nodes.text);

function init(a) {	
	for (var i:Number = 0; i<a; i++) {
		//This loop will execute the code contained in it 10 times
		this.attachMovie("blueCircle", "blue"+i, this.getNextHighestDepth());
		//Here we are retrieving the mc from the library, giving it a name 'blue'+i, and setting it at the next highest depth.
		//blueCircle is the linkage identifier given when it was converted to symbol.
		var mc:MovieClip = this["blue"+i];
		mc._x = Math.round(Math.random()*800);
		mc._y = Math.round(Math.random()*800);
		//above three lines: The this[...]method allows you to create a reference to an object containing the name you pass it.
		//in our case 'blue'+i.  This is stored in the variable 'mc'.
		//Now that we have a reference to the movie clip, we can assign various properties to it.
		//We first alter the x and y positions of the mc.
		mc.onPress = function() {
			this.startDrag();
		};
		mc.onRelease = function() {
			this.stopDrag();
		};
	}



There must be an easier way than this though. I have tried a handful of things, but no luck yet. Any assistance will be greatly appreciated. Thank you!

Is This A Good Question/Topic? 0
  • +

Replies To: AS2 - How to pass text input value to a function on button click

#2 lordofduct  Icon User is offline

  • I'm a cheeseburger
  • member icon


Reputation: 2533
  • View blog
  • Posts: 4,633
  • Joined: 24-September 10

Re: AS2 - How to pass text input value to a function on button click

Posted 27 April 2011 - 08:15 AM

your biggest complication is the fact you have to change frame as well as pass the parameter.

Is there a reason you need to change frames?
Was This Post Helpful? 0
  • +
  • -

#3 midasxl  Icon User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 193
  • Joined: 03-December 08

Re: AS2 - How to pass text input value to a function on button click

Posted 29 April 2011 - 03:47 AM

No, I do not need to change frames at all. At this point though that's the only way I have figured out how to initiate the function with the text box data passed in.
Was This Post Helpful? 0
  • +
  • -

#4 chinchang  Icon User is offline

  • Indie Game Developer
  • member icon

Reputation: 192
  • View blog
  • Posts: 725
  • Joined: 22-December 08

Re: AS2 - How to pass text input value to a function on button click

Posted 29 April 2011 - 06:13 AM

You could keep your function on the same frame and then call that function directly inside the on(release) function.

Something like :
on(release){
init(nodes.text);
}

Was This Post Helpful? 1
  • +
  • -

#5 midasxl  Icon User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 193
  • Joined: 03-December 08

Re: AS2 - How to pass text input value to a function on button click

Posted 02 May 2011 - 07:57 AM

Thanks for your help. Here's what I have going now.

Button with the following action attached to it:

on(release){
	init(nodes.text);
}



Then the following code on frame 1 of the timeline:

function init(a) {	
	
	for (var i:Number = 0; i<a; i++) {
		//This loop will execute the code contained in it 10 times
		this.attachMovie("blueCircle", "blue"+i, this.getNextHighestDepth());
		//Here we are retrieving the mc from the library, giving it a name 'blue'+i, and setting it at the next highest depth.
		//blueCircle is the linkage identifier given when it was converted to symbol.
		var mc:MovieClip = this["blue"+i];
		mc._x = Math.round(Math.random()*800);
		mc._y = Math.round(Math.random()*800);
		//above three lines: The this[...]method allows you to create a reference to an object containing the name you pass it.
		//in our case 'blue'+i.  This is stored in the variable 'mc'.
		//Now that we have a reference to the movie clip, we can assign various properties to it.
		//We first alter the x and y positions of the mc.
		mc.onPress = function() {
			this.startDrag();
		};
		mc.onRelease = function() {
			this.stopDrag();
		};
	}
	this.createEmptyMovieClip("line", -1);
	//create an empty movie clip called 'line' and assign a depth of -1.  This empty mc will store the lines.
	drawLine(a);
	//This function is responsible for drawing the lines between the circles.  We want them to be drawn immediately.
	//after our circles have been displayed.
	this.onmousemove = function() {
		drawLine(a);
	//everytime the mouse moves, the drawLine function is called.  see it below.
	}
}

function drawLine(a) {
	line.clear();
	//everytime the drawLine function is called, all current lines are cleared from the stage.
	line.lineStyle(3, 0xBFD7EE);
	//this styles the line in regards to width and color
	for (i=0; i<a; i++){
		//trace(i);
			line.moveTo(blue4._x, blue4._y);
			line.lineTo(_level0["blue"+i]._x, _level0["blue"+i]._y);
	}
	//
	updateAfterEvent();
	//this ensures that whatever code you are executing occurs after the event is invoked.
}



So I provide a number for input text box, then hit the button which triggers the function and feeds it with the data from the text box. The first pic attached shows the results of providing an integer of 10 to the input text box. The function takes it and runs the code to generate 10 mc's and lines between them. This works great.

If I then put another integer in the text box, I get the result in pic 2 attached. The integer is a 5 and as you can see, 5 mc's and lines are indeed generated, but the remaining circles from the previous function still linger, including a circle that shows up every time at the 0,0 position of the stage (upper left). I've tried a variety of things such as arrays and removeMovieClips but to no avail.

Any suggestions would be appreciated, and I will continue my search for a solution as well. Thanks!

Attached image(s)

  • Attached Image
  • Attached Image

Was This Post Helpful? 0
  • +
  • -

#6 lordofduct  Icon User is offline

  • I'm a cheeseburger
  • member icon


Reputation: 2533
  • View blog
  • Posts: 4,633
  • Joined: 24-September 10

Re: AS2 - How to pass text input value to a function on button click

Posted 02 May 2011 - 11:10 AM

when creating the MovieClips you'll need to remember them (an array) and remove them before adding the next ones. This is if these circles are to share their parent container with other graphics.

If they are the ONLY MovieClips in the display parent you can just clear the parent (in this case 'this' is their parent because that's where you're creating them).



I have a question... you seem to be learning AS2 right now. Is there a reason you selected AS2 instead of AS3? Adobe has much better support for AS3 and is actively making AS3 better. Where as AS1/2 are only supported for legacy purposes.

This post has been edited by lordofduct: 02 May 2011 - 11:10 AM

Was This Post Helpful? 0
  • +
  • -

#7 midasxl  Icon User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 193
  • Joined: 03-December 08

Re: AS2 - How to pass text input value to a function on button click

Posted 03 May 2011 - 06:48 AM

View Postlordofduct, on 02 May 2011 - 12:10 PM, said:

when creating the MovieClips you'll need to remember them (an array) and remove them before adding the next ones. This is if these circles are to share their parent container with other graphics.

If they are the ONLY MovieClips in the display parent you can just clear the parent (in this case 'this' is their parent because that's where you're creating them).



I have a question... you seem to be learning AS2 right now. Is there a reason you selected AS2 instead of AS3? Adobe has much better support for AS3 and is actively making AS3 better. Where as AS1/2 are only supported for legacy purposes.


You are right, I should certainly be learning AS3. I have basically been using code examples I have found online to bring my idea to light, and unfortunately I have not been able to tell the difference between AS2 code and AS3 code. I will work on that.

Perhaps I'm running into issues trying to mix AS2 and AS3. I tried creating arrays, and containers, and then tried to clear or unload the array/container. I don't know how to go about putting all the dynamically created movie clips into an array or a container and then removing the array and/or container. I've tried but it still leaves the mc's on the stage.

Thanks!
Was This Post Helpful? 0
  • +
  • -

#8 lordofduct  Icon User is offline

  • I'm a cheeseburger
  • member icon


Reputation: 2533
  • View blog
  • Posts: 4,633
  • Joined: 24-September 10

Re: AS2 - How to pass text input value to a function on button click

Posted 03 May 2011 - 08:04 AM

you aren't removing the array necessarily. You're using the array to reference the list of movieclips. This way you can loop/iterate over the array and remove each MovieClip.


sorry this is going to be AS3 because I don't write AS2 and don't know the framework that well (the syntax I'm fine with, but all the classes and their interfaces are slightly different, like _x instead of x, and the 'createMovieClip' method...)

for(i:int = 0; i < myArrayOfMovieClips.length; i++)
{
    this.removeChild(myArrayOfMovieClips[i]);
}

myArrayOfMovieClips.length = 0;//quickly dump the array now that we're done with it




If you don't mind me saying, you aught to decide on AS2 or AS3 (I'd say AS3) and stick with it, then when searching for example code make sure to prefix your queries with the phrase 'AS3'. Though there exists a huge backlog of AS2 examples out there, AS3 has had plenty of time now to catch traction and build up a huge pile of its own tutorials and examples. Any sites you find published in the last 2 or 3 years about Actionscript will most likely be about AS3.

This post has been edited by lordofduct: 03 May 2011 - 08:07 AM

Was This Post Helpful? 0
  • +
  • -

#9 midasxl  Icon User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 193
  • Joined: 03-December 08

Re: AS2 - How to pass text input value to a function on button click

Posted 03 May 2011 - 09:52 AM

View Postlordofduct, on 03 May 2011 - 09:04 AM, said:

If you don't mind me saying, you aught to decide on AS2 or AS3 (I'd say AS3) and stick with it, then when searching for example code make sure to prefix your queries with the phrase 'AS3'. Though there exists a huge backlog of AS2 examples out there, AS3 has had plenty of time now to catch traction and build up a huge pile of its own tutorials and examples. Any sites you find published in the last 2 or 3 years about Actionscript will most likely be about AS3.


Thanks for the example. I don't mind you saying that at all. I appreciate the suggestion, and I will be more vigilant when discovering online code. I would much rather use AS3, so this is a good place to start.
Was This Post Helpful? 0
  • +
  • -

#10 midasxl  Icon User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 193
  • Joined: 03-December 08

Re: AS2 - How to pass text input value to a function on button click

Posted 03 May 2011 - 10:55 AM

OK, next attempt. I am dynamically creating an array of the movie clips.

function init(a) {
	[color="#4B0082"]var mcArray:Array = new Array();[/color]	for (var i:Number = 0; i<a; i++) {
		//This loop will execute the code contained in it 10 times
		this._root.attachMovie("blueCircle", "blue"+i, this.getNextHighestDepth());
		//Here we are retrieving the mc from the library, giving it a name 'blue'+i, and setting it at the next highest depth.
		//blueCircle is the linkage identifier given when it was converted to symbol.
		var mc:MovieClip = this["blue"+i];
		mc._x = Math.round(Math.random()*800);
		mc._y = Math.round(Math.random()*800);
		//above three lines: The this[...]method allows you to create a reference to an object containing the name you pass it.
		//in our case 'blue'+i.  This is stored in the variable 'mc'.
		//Now that we have a reference to the movie clip, we can assign various properties to it.
		//We first alter the x and y positions of the mc.
		mc.onPress = function() {
			this.startDrag();
		};
		mc.onRelease = function() {
			this.stopDrag();
		};
		[color="#4B0082"]mcArray[i] = this["blue"+i];[/color]	}
	[color="#4B0082"]trace(mcArray);[/color]	this.createEmptyMovieClip("line", -1);
	//create an empty movie clip called 'line' and assign a depth of -1.  This empty mc will store the lines.
	drawLine(a);
	//This function is responsible for drawing the lines between the circles.  We want them to be drawn immediately.
	//after our circles have been displayed.
	this.onmousemove = function() {
		drawLine(a);
	//everytime the mouse moves, the drawLine function is called.  see it below.
	}
}



This works well. I also got the idea to create another function that checks for the existence of the array. If it exists, I loop through it and get rid of the movie clips from the stage, then trigger the init function. If it does not exist, it just triggers the init function. I also have a couple of trace functions within to see what's going on.

function clearAll(a){
	if (mcArray){
		trace("Your array exists");
		for(var i:Number = 0; i<mcArray.length; i++){
    		this.removeChild(mcArray[i]);
		}
	mcArray.length = 0;
	init(a);
	}
	else{
	trace("array does not exist");
	init(a);
}
}



So far I always get "array does not exist". I understand it won't exist the first time through, but I expected it the second time. Is the array available outside of the function it was built in? I thought array variables were global by default?

Attached image(s)

  • Attached Image

Was This Post Helpful? 0
  • +
  • -

#11 chinchang  Icon User is offline

  • Indie Game Developer
  • member icon

Reputation: 192
  • View blog
  • Posts: 725
  • Joined: 22-December 08

Re: AS2 - How to pass text input value to a function on button click

Posted 03 May 2011 - 12:13 PM

Nope...Array won't be available outside the function where they are declared. Declare them outside to access them globally.
Was This Post Helpful? 0
  • +
  • -

#12 midasxl  Icon User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 193
  • Joined: 03-December 08

Re: AS2 - How to pass text input value to a function on button click

Posted 04 May 2011 - 07:36 AM

View Postchinchang, on 03 May 2011 - 01:13 PM, said:

Nope...Array won't be available outside the function where they are declared. Declare them outside to access them globally.


Made sense as soon as I read it. Ok, I now have this:

var mcArray:Array = new Array();

function clearAll(a){
	if (mcArray){
		trace("Your array exists");
			if (mcArray.length == 0){
				trace("This is the if part");
				trace("Array Length is: " + mcArray.length);
				init(a);
			}else{	
				trace("This is the else part");
				trace("Array Length is: " + mcArray.length);
				for(var i:Number = 0; i < mcArray.length; i++) {
        		this.removeChild(mcArray[i]);
				mcArray = [];
				init(a);
				}
    		}
	}else{
	trace("array does not exist");
	init(a);
}
}
function init(a) {
	for (var i:Number = 0; i<a; i++) {
		//This loop will execute the code contained in it 10 times
		this.attachMovie("blueCircle", "blue"+i, this.getNextHighestDepth());
		//Here we are retrieving the mc from the library, giving it a name 'blue'+i, and setting it at the next highest depth.
		//blueCircle is the linkage identifier given when it was converted to symbol.
		//This will attach it to the main timeline (using the 'this' scope).
		var mc:MovieClip = this["blue"+i];
		mc._x = Math.round(Math.random()*800);
		mc._y = Math.round(Math.random()*800);
		//above three lines: The this[...]method allows you to create a reference to an object containing the name you pass it.
		//in our case 'blue'+i.  This is stored in the variable 'mc'.
		//Now that we have a reference to the movie clip, we can assign various properties to it.
		//We first alter the x and y positions of the mc.
		mc.onPress = function() {
			this.startDrag();
		};
		mc.onRelease = function() {
			this.stopDrag();
		};
		mcArray[i] = this["blue"+i];
	}
	this.createEmptyMovieClip("line", -1);
	//create an empty movie clip called 'line' and assign a depth of -1.  This empty mc will store the lines.
	drawLine(a);
	//This function is responsible for drawing the lines between the circles.  We want them to be drawn immediately.
	//after our circles have been displayed.
	this.onmousemove = function() {
		drawLine(a);
	//everytime the mouse moves, the drawLine function is called.  see it below.
	}
}

function drawLine(a) {
	line.clear();
	//everytime the drawLine function is called, all current lines are cleared from the stage.
	line.lineStyle(3, 0xBFD7EE);
	//this styles the line in regards to width and color
	for (i=0; i<a; i++){
		//trace(i);
			line.moveTo(blue4._x, blue4._y);
			line.lineTo(_level0["blue"+i]._x, _level0["blue"+i]._y);
	}
	//
	updateAfterEvent();
	//this ensures that whatever code you are executing occurs after the event is invoked.
}



I expected the clearAll() function to delete all mc's from the stage each time it is called (except the first time), but the mc's still remain. I suspect it may have something to do with this part of the init() function:

this.attachMovie("blueCircle", "blue"+i, this.getNextHighestDepth());
var mc:MovieClip = this["blue"+i];
mc._x = Math.round(Math.random()*800);
mc._y = Math.round(Math.random()*800);



The array is being populated within the init() function as well:

mcArray[i] = this["blue"+i];



I'm missing something here. It seems like the array is being created, populated, and then cleared out independent of the items that are being placed on the stage. (verified this with a series of trace commands not listed here). Am I thinking of this correctly?

Thanks for your help! The first pic shows the very first iteration of the functions after providing a text input of 10 and then clicking the button. The next pic shows what happens with a second button click, and a text input of 5. It re-uses 5 of the blue circle mc's and the other 5 become orphaned. Also a mystery blue circle mc appears at the top left (0,0). Not sure what is happening here.

Attached image(s)

  • Attached Image
  • Attached Image

Was This Post Helpful? 0
  • +
  • -

#13 chinchang  Icon User is offline

  • Indie Game Developer
  • member icon

Reputation: 192
  • View blog
  • Posts: 725
  • Joined: 22-December 08

Re: AS2 - How to pass text input value to a function on button click

Posted 04 May 2011 - 07:58 AM

1. You are using removeChild method to remove your movieclips which is a Actionscript 3.0 method. But your are using AS 2.0. Why ??

2. You could have written mcArray[i] = this["blue"+i]; as mcArray[i] = mc;

This post has been edited by chinchang: 04 May 2011 - 07:59 AM

Was This Post Helpful? 0
  • +
  • -

#14 midasxl  Icon User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 193
  • Joined: 03-December 08

Re: AS2 - How to pass text input value to a function on button click

Posted 05 May 2011 - 09:07 AM

View Postchinchang, on 04 May 2011 - 08:58 AM, said:

1. You are using removeChild method to remove your movieclips which is a Actionscript 3.0 method. But your are using AS 2.0. Why ??

2. You could have written mcArray[i] = this["blue"+i]; as mcArray[i] = mc;


I am eagerly learning AS 3.0, and for now I have a bad habit of unknowingly mixing the two. I'm working on it. I still can't remove the movie clips.
Was This Post Helpful? 0
  • +
  • -

#15 chinchang  Icon User is offline

  • Indie Game Developer
  • member icon

Reputation: 192
  • View blog
  • Posts: 725
  • Joined: 22-December 08

Re: AS2 - How to pass text input value to a function on button click

Posted 05 May 2011 - 11:54 AM

So whats this code now...AS 2.0 or AS 3.0 ? Anyways, correct and update your code here.
Was This Post Helpful? 0
  • +
  • -

  • (2 Pages)
  • +
  • 1
  • 2