CreateJS: Change Background Colour of Canvas

Very simple, using CSS

TweenJS: Adding Ease, With Ease...

Terrible pun, I know...

Line 8: I have added another source script, which contains the Ease functions

Line 15: Another way of calling the console

Lines 24 and 25: The third parameter in the to() function is the type of Ease you want to apply. This site is a good place to see the effect of different tweens: http://andysaia.com/blog/tweenjs/ and http://www.createjs.com/#!/TweenJS/demos/sparkTable

TweenJS: Overriding Tweens

If you create two tweens for a single object, they will both run together, and as long as you don't try to tween the same property at the same time, it should be fine.

If you want, you can override a tween, and two ways to do this are shown in lines 16 and 17 (on line 16, the fourth parameter of the get function is the override, the third is some kind of plugins object that I don't understand right now...).

On line 15, I have also shown a way to call the console, for the Flashers, this is like trace(). To see the calls to the console on Mozilla Firefox, go to Tools, Web Developer, Web Console.

Both of these tweens use the loop parameter, so that the animation keeps on going round and round.

TweenJS: How to add a script and make a circle move

So, I struggled with this quite a bit, because I thought it would be pretty much the same as EaselJS, in terms of adding the script, so I tried to use the 'lib/tweenjs-0.4.0.min.js' file, but then I couldn't get anything to work.

The examples that come with the TweenJS files use various js scripts in the src folder, when I tried adding those, like the example, I could get something to actually work.

The readme file in the lib folder says that it should work, but I couldn't get it to... I've probably misunderstood something.

Line 6 shows the added script that I couldn't get to work.
Line 7 adds the EaselJS script, I believe this is necessary for the ticker
Line 8 is the basic Tween.js file, but there are other js file in the src folder with additional functionality. I think later additions overwrite previous ones if they have anything similarly named in them.

Line 16 is the line that does the tweening, in this case, a very basic one. these kinds of tweens can be 'chained' apparently - so you tell it what you want to tween with the get function, and then you add on a chain of commands.
wait() tells it how long to wait, in milliseconds.
to() takes the properties that it should end up with over a period of time, with the first parameter being an object with all the different properties.

Line 18 adds the ticker event, which I find a little confusing, because I thought the second parameter when adding the tick event should be a function that gets called, and includes the stage.update(), but this does work, so...

EaselJS: Hit Areas

Hit Areas are areas that allow will respond for an object, for mouse events, such as clicks or mouseovers. This is especially useful for text, which will otherwise only respond if you directly hit the pixels that make up the letters.

1) Mouseovers are expensive for the CPU, so are diabled by default. The lower the parameter, the less responsive the mouseover will be.
2) This is how to create a text label.
3) This is the shape that will act as the hit area.
4) getMeasured... is used to see how big the text is. I imagine the parameters are x, y, width, height.
5) When hit is used as a hitarea, it doesn't need to be added to the stage, it will still work. It also doesn't need to be given x and y coordinates, it is assumed to start off wherever the label does. If you give it x and y co-ordinates, they are relative to the position of the label the hitarea has been attached to. If you attach it to the stage, it will be visible, but it will still work.
6) The label doesn't need to be made a global variable, because it is a parameter of the evnt.
7) This changes the alpha dependent on what kind of mouseevent triggered it.
8) In the tutorial, the stage.update was attached to a tick event, but this works too.

How to Make Flash Respond to a Clicker and Act Like A PowerPoint Presentation

I've just had to make a short presentation, and I was going to do it in PowerPoint - certain things, like making your bullet points appear one after the other, are very quick to do in PowerPoint.

But positioning things, and making the exact transitions that you want, are very difficult. So I switched to Flash. I thought I'd publish it as an executable, so it would work on anything WIndows.

I laid out my 'slides' as frames on the root timeline, each with an animated clip that contained the transitions that would occur within a slide. I named each of these movie clips 'clp'. The first frame and the last frame appear in one go, so they didn't have a 'clp' movie clip on them.

The main timeline has to stop at the beginning, so I used stop(). And each of the 'clp's is set to play, with stop frames within it.

Making it go forward when you click on the screen:

You can make a transparent movieclip that covers the screen and give it a name, e.g 'fwd'.

On the frame (this is AS2 code):

fwd.OnRelease = function() {
_____if(_root.clp._currentframe < _root.clp._totalframes) {
___________root.clp.play();
_____}else{
___________root.nextFrame();
_____}
}

The if statement only returns true if the movieclip exists and it isn't on its last frame, so in that case it advances the animated slide, otherwise, it goes to the next slide on the root timeline.
If this was AS3, then Flash would get upset everytime the movieclip didn't exist.

I also made other clips to give a finer control of the going backwards and forwards of the presentation, using similar code.

Making it go to full screen:

On the first frame, on the root timeline, I used fscommand("fullscreen",true);

Making it respond to a clicker:

This was the cool bit. A clicker is a little hand held device, you plug the USB port into your laptop/whatever, and it has forward and back buttons that the powerpoint presentation responds to, and usually a laser pointer as well, so you can walk around the stage while you present.

The forward and back buttons are actually registering on the computer as PageUp and PageDown buttons.
To get your Flash executable to respond to these buttons:

On the first frame of the root timeline:

var keyListener:Object = new Object();
keyListener.onKeyUp = function() {
_____if(Key.getCode() == 34) {
__________fwd.onRelease();
_____}
}
Key.addListener(keyListener);

34 is the keycode for the page forward button, and the code above tells the executable to do whatever it is that the fwd button would normally do when it is clicked.

I was under the impression that when fullscreen, flash wouldn't accept keyboard events, but perhaps this doesn't apply to the page up etc type buttons.