Converting Flash Actionscript to Animate Javascript

[Long Con]

Hi, I'm starting a somewhat daunting project of converting a Flash file to HTML5 Canvas.  I'm taking it line by line, but I've run into my first issue I can't figure out.

It's pretty simple.  On my main timeline, I set a variable called startX:

    var startX = 10;

Then I bring in a movieclip from the library:

    var arrow1 = new lib.arrow();
    this.addChild(arrow1);

Works just fine.  arrow1 is there, and the code inside it runs.  I just can't reference startX:

    this.parent.tracer.text = this.parent.startX;

The tracer is a text box, and that line works fine with something like this.parent.tracer.text = "arrow clip"; so that connection is fine.

Why can't I reference a variable I set in the main timeline from within the movieclip?

[Colin Holgate]

startX doesn't really belong to anything. Try this instead:

this.startX = 10;

[Long Con]

Thank you, that did it.  I'll get my head out of Actionscript one change at a time!

[ClayUUID]

> startX doesn't really belong to anything.

startX here would be a private variable in the function that contains the code for the frame that it's on. Every frame's code is wrapped in a function that's a method of the timeline it belongs to. So any code on frame one is in a function named frame_1(), etc.

[Long Con]

I'm working on replacing the old LoadVars that I used to load a text file.  I'm trying XMLHttpRequest, but the onreadystatechange function never fires.

this.loadDoc = function() {
  this.tracer.text = "loadDoc";

  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    this.tracer.text = "onreadystatechange";
    if (this.readyState == 4 && this.status == 200) {
      this.tracer.text = this.responseText;
    }
  };
  xhttp.open("GET", "mymaze.txt", true);
  xhttp.send();
}
this.loadDoc();

The tracer text reads "loadDoc, but never changes to "onreadystatechange".

mymaze.txt is in the same local folder as the animate file.

[Colin Holgate]

'this' in an HTML5 function is the function you are in at the time, not the level at which the code is placed. You can get around that by using bind, or you can set a variable that all of the functions can see. Like:

var tracer = this.tracer;
this.loadDoc = function() {
  tracer.text "loadDoc";
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    tracer.text = "onreadystatechange";
    if (this.readyState == 4 && this.status == 200) {
      tracer.text = this.responseText;
    }
  };
  xhttp.open("GET", "mymaze.txt", true);
  xhttp.send();
}
this.loadDoc();

I don't know for sure if that's why it's failing, but if the function works, the text should become visible.

[Long Con]

Thank you again, that worked, I don't understand yet why my first problem was because I was using 'var', and my second problem was solved by using 'var'.

So 'var' is available in the same movieclip or on the root, but is not available from within other movieclips?

[Colin Holgate]

I think that var is available to anything in that script level, which is why it solved the second problem. It didn't help the first one because you were accessing that var from a different set of scripts.

I have used window level variables a lot. You will read various posts about how that is a bad idea, but if your variable name is likely to be unique, it shouldn't clash with other entities on the same web page. Or you may be able to use the exportRoot of your project. Variables you put in those places are effectively global variables, that you can get at from anywhere.

[Long Con]

"Or you may be able to use the exportRoot of your project. Variables you put in those places are effectively global variables, that you can get at from anywhere."

Is exportRoot a reference to the main base timeline in a project?  My 'var startX = 10;' was not something I could get at from anywhere, I don't understand.

[Long Con]

But, on to my next issue...  I can't addChild to a movieclip that I added to the Stage from the Library.  Here's the code, with comments for help:

var mapscreen = new lib.Mapscreen(); // on the main timeline
this.addChild(mapscreen);  // works fine, grabs it via Linkage

this.loadDoc = function() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {	  
    if (this.readyState == 4 && this.status == 200) {

		this.maze_array = this.responseText.split("\n");
		
		for(i = 0; i < this.maze_array.length; i++)
		{
			this.maze_array[i] = this.maze_array[i].split("");
		}

		for(k = 0; k < this.maze_array.length; k++)
		{
			for(j = 0; j < this.maze_array[k].length; j++)
			{
				var thisTile = new lib.Tile();
				thisTile.name = "tile_" + j * 10 + "_" + k * 10, ((k * 100) + j);
				thisTile.x = j * 10;
				thisTile.y = k * 10;
				
				mapscreen.addTile(thisTile);  // calls the function in the mapscreen movieclip				
			}
		}
        }
  };
  xhttp.open("GET", mazeFile, true);
  xhttp.send();
}
this.loadDoc();

//////// Code inside the mapscreen movieclip:
var mcroot = this;

this.addTile = function(whichTile) {
	
	mcroot.parent.doTrace(whichTile); // traces the 'tile' movieclip object successfully
	
	mcroot.addChild(whichTile); //crashes the script
	
}

[Colin Holgate]

For the exportRoot question, I meant that you can say exportRoot.startX = 10 in any script, and read it as exportRoot.startX from any other script.

Not sure what the issue is with the other problem, but do you know how to use the developer tools in your browser? With those you can set breakpoints and check what variables are set to, and in Console you may see some useful error messages.

[Long Con]

I don't really know how to use the browser developer tools, I have looked and it seems confusing.  I should check out some tutorials, any chance you know of any learning resources?

[ClayUUID]

> So 'var' is available in the same movieclip or on the root, but is not available from within other movieclips?

JavaScript is lexically scoped. That means if you define some variables and functions within the same scope (function), those functions can always access those variables, even if they're executing in a different context (current value of "this").

http://ryanmorr.com/understanding-scope-and-context-in-javascript/

[ClayUUID]

> 'this' in an HTML5 function is the function you are in at the time

"this" in a JavaScript function is the object that the method is attached to, or the global window object if it's an event handler, or whatever it was bound to if bind() was used.

[Long Con]

The developer tools with console.log has been very helpful.  

Here's one I'm just not getting:

console.log(mapscreen.children[1].name);  // returns "tile_0_0"
console.log(mapscreen.tile_0_0);  // returns "undefined"

The tile clip was attached to the mapscreen with addChild, if that matters.  Why can't I reference the tile clip with the regular dot notation?  Is this a context/scope thing again?  I read that article but I'm still unsure about applying the concepts to my code sometimes.