Animate CC/HTML5 Canvas Issues

I'm returning to this after a long period away, and it is really getting on my nerves, but I'm hoping that will pass as I get used to all the little (or big quirks).

Just making a note of some things I am figuring out as I go along.

1) You can't put different dynamic textboxes on the same frame.
a) If you put them on the same layer, Animate will insist that they are called by the same name. Best to just humour it and give them the same name.

2) Scope! Aaaarrrrggghhh!!!
If you use addEventListener as usual, it seems to switch to 'window'? Not really sure what this is, maybe one day it will be useful...

The syntax for 'on' is:

this.mc.on('added', function(e) {
console.log('hey there');
});

The above method seems to allow the mc to work from within itself?

On the other hand,

this.mc.addEventListener('click', someFunc.bind(this));

seems to make it have the scope of the place where the function is written, if I remember correctly. And can be altered to give it a different scope?

Each of these ways is removed differently, so that might influence what you choose to use.

CAUTION
Animate will add extra eventlisteners to the objects everytime you return to the frame, so use hasEventListener to check if the eventListener has already been attached (it only takes the event as a parameter).

3) Undefined for a movieclip that is on the screen?

So this is irritating, you are trying to do something to a movieclip that is on the stage, it has a name, so why on earth is the browser claiming it doesn't know who that is? And why is it able to find other movieclips easily?

Answer(s): You can add eventListeners to something that hasn't loaded yet, but you can't check its location or anything like that. So... use an added eventListener to check when it does exist, and then use it after that.

Flash CC Pro/CreateJS: nextFrame

This function doesn't exist in Flash's HTML5 canvas, but the below will work instead.

this.forw.addEventListener("click", goNext.bind(this));
function goNext() {
this.gotoAndStop(this.currentFrame + 1);
}

Flash CC Pro/CreateJS

Another strange thing when working with Flash's HTML5 Canvas is that variables cease to exist when you move to the next frame.

I am used to having a root timeline that I can store info on that all other movieclips might need, but this won't work if they disappear between one frame and the next.

My current adjustment is to move everything down by one timeline. So I have a single frame on the uppermost timeline, and the movie clip sitting on that contains several frames, as I would normally lay things out. If something needs to be stored while moving to the next frame, then I just store it on the parent timeline.

for this function that I wanted all movie clips to be able to access:

this.giveDimensions = function (mc) {
mc.height = mc.nominalBounds.height * mc.scaleY;
mc.width = mc.nominalBounds.width * mc.scaleX;
}

In the timeline of the movieclip:

this.parent.giveDimensions(this.work_btn);

Flash CC Pro/CreateJS: Width and height of movieclips

I am currently trying out Flash CC Pro and the HTML5 Canvas publishing option.

One odd thing is not being able to access the height and width of the movie clips.

With the help of a stackoverflow post (http://stackoverflow.com/questions/29768424/how-to-get-width-height-of-a-movie-clip-in-createjs), I came across 'nominal bounds'. Couldn't find it in any of the documentation, it doesn't appear as one of the coding hints in the flash program either. Oh well.

I found that movieClip.nominalBounds gave me back an object that contained the original x, y, width and height of the unaltered movie clip. But on the stage, mine was a bit stretch and squashed, so I used

movieClip.nominalBounds.height * movieClip.scaleY

and this gave me the actual height. Ditto for the width.

Apparently the various bounds properties and functions vary depending on the exact type of object, but this worked for my movie clip.

How to Use Screen Shots in Flash

Sometimes, you want to take an exact picture of what is on your screen and put the image into Flash, but when you do, most of the image is transparent!

1) Press the PrtScn button on the keyboard to take a picture of the screen. Alternatively, to take a picture of a particular window, make sure the window is selected, hold down Alt, and then press PrtScn.

2) Open up a Word document, and press Ctrl+V (or just right-click and select Paste).

3) Select the resulting image, and copy it (right click, Copy, or Ctrl+C).

4) Now you can go back to your Flash document and paste the image, and it will look the way it should.

Have fun!

How to randomly generate -1 or +1, in one line.

A hobby of mine is avoiding if statements, with mathematical formula that return the right number based on other conditions.

It is easy to generate a 0 or a 1 randomly, simply use Math.round(Math.random());

That will work in a number of languages, or something similar.

For a random -1 or +1, try this:

var randNum = -1 + (2*Math.round(Math.random));

If the random number generated by Math.random() is 0.5 or above, then the answer will be 1. If the random number generated is less than 0.5, the answer will be 1.

Enjoy!

How to make a RevoluteJoint in Box2D/CreateJS

There are plenty of posts on how to get box2d and createjs working, Lee Brimelow has a great youtbe video that covers how to get started very nicely.

But when I tried to make a revolute joint, I made a silly mistake that took me hours to find the source of. I'm a bit of a newbie, but I didn't find the problem to my solution online, so I thought I'd post it in case it happens to anyone else. And then maybe they can go to sleep before 5 in the morning...

Does this sound familiar?

"I can make the two objects, but when I try to create the joint, I get an 'Uncaught TypeError: undefined is not a function' message.'

Well, first, since I was working from the Lee Brimelow example as a starting point, I hadn't made sure I had setup the shortcut to the actual RevoluteJoint parts of box2d.

eg.
var box2d = {
b2Vec2 : Box2D.Common.Math.b2Vec2,
b2BodyDef : Box2D.Dynamics.b2BodyDef,
b2Body: Box2D.Dynamics.b2Body,
b2FixtureDef: Box2D.Dynamics.b2FixtureDef,
b2Fixture: Box2D.Dynamics.b2Fixture,
b2RevoluteJointDef: Box2D.Dynamics.Joints.b2RevoluteJointDef,
b2RevoluteJoint: Box2D.Dynamics.Joints.b2RevoluteJoint,
b2World: Box2D.Dynamics.b2World,
b2MassData: Box2D.Collision.Shapes.b2MassData,
b2PolygonShape: Box2D.Collision.Shapes.b2PolygonShape,
b2CircleShape: Box2D.Collision.Shapes.b2CircleShape,
b2DebugDraw: Box2D.Dynamics.b2DebugDraw
};

Still wouldn't work though. So here was the problem, my makeJoint function looked like this:
function makeJoint() {
var jDef = new box2d.b2RevoluteJointDef();
jDef.bodyB = c;
jDef.bodyA = a;
jDef.collideConnected = false;
jDef.localAnchorB = new box2d.b2Vec2(0/SCALE,80/SCALE);
jDef.localAnchorA = new box2d.b2Vec2(0,0);
j = world.CreateJoint(jDef);
}

where a (I thought) was the anchor body, and c was the other body I wanted to attach to it.

Unfortunately, a and c were actually the fixtures of those bodies, instead of the bodies themselves.

So in my function that made the anchor body, it said:
a = world.CreateBody(anchorBodyDef).CreateFixture(anchorFixtureDef) ;

So I changed it to:
a = world.CreateBody(anchorBodyDef);
a.CreateFixture(anchorFixtureDef);

Hope that helps.