Tuesday, 22 July 2014

How to rewind an animation, AS3

To make the animation rewindable, it needs to be all on one timeline for starters. With no movieclips doing anything complicated that will look weird if everything is going backwards while they are going forwards. Flashing or jiggling, or something like that is fine, but it has to work backwards and forwards.

Graphic symbols are fine, because they will play backwards as the movie clip goes backwards.

Anyway...

In order to make the clip go backwards:

clip.addEventListener(Event.EnterFrame, goBack);

function goBack(evnt:Event):void {

clip.prevFrame();

}

In order to get the clip to stop going backwards, either once it gets to the beginning, or at certain points along the way, put code on the relevant frames inside the movie clip that checks if the eventListener exists, and if it does, removes it.

I hope that was clear enough.

Friday, 4 July 2014

Flash: How to make the white transparent in a grey scale image

What if you want to get a picture and colour it in, but you don't want it to take forever, or lose any of the detail?

(Apologies if this can be done more easily in another program, but when it comes to pictures, I'm most comfortable with Flash.)

1) Find your image, the more contrast the better - ie, some really light areas and some really dark, the less grey the better.

2) Copy and paste it into flash.

3) Turn it into a movie clip, select it, and in the Properties box, select Adjust Colour, and increase the contrast. Try to choose an optimum value where you can see the details you need, but the grey areas have turned white.

4) Then choose the blending option Darken. The white areas should now be transparent.

5) Lock the layer of the photo, and create a new layer underneath. With this layer selected, draw lines to delineate the blocks of colour you want to show through the image. You can apply fills with gradients, or make areas of colour into movie clips and give them glows as ways of mixing colours etc.

6) If you want to make the lines darker, you can copy and paste the movie clip on top of itself (this way it will have the same contrast settings) and set the blending option of the one on top to Multiply.

Example:


Before

After
I'm no artist, and I'm not claiming that mine is an improvement on the original, but I am claiming that this didn't take me very long at all.

Wednesday, 29 January 2014

Arduino - Whoo!

I have in my posession, (it's not mine though) an Arduino Uno. Quite a departure from Actionscript, CreateJS etc (except I'm not departing them...)

What Is Arduino For?

I'm not quite sure yet, but it can take input from a variety of sensors, and it can connect to output, eg. lights motors etc. So although it seems quite limited in terms of memory, it seems to have a lot of potential. Anyway, I'm sure it has more potential than I'll ever be able to make use of, so, who cares what it's limits are! Also, I read somewhere that it may be able to work with Flash...

I've found some great tutorials online, the first one is here:

http://www.youtube.com/watch?v=fCxzA9_kg6s

I'm just making notes of anything extra.

I went through tutorial 1, and the first issue I came across was installing the driver. They guy in the video had a later version of Windows than me. The help on arduino.cc for XP users also didn't match what I saw on my screen.

So, I went to the Control Panel, System, Device Driver, and was faced with a long list of things... I don't know what they were. I couldn't see anything called Arduino, and I couldn't see what they suggested might be under ports either. But when I unplugged and replugged the arduino board back in, something appeared under USB. So I followed the recommended procedure (section number 4 on this page: http://arduino.cc/en/Guide/windows) with this instead. And that worked fine.

The second issue was when I tried to upload the program, actually, I think it worked the first time, but when I tried to make changes, I couldn't see any effect. In the video (the first link above), an error message came up when he had forgotten to set the serial port - which he changed but then didn't show how to do it from the menu.

When I tried to upload, I got this error message:

avrdude stk500_getsync(): not in sync resp=0x00

When I changed the com port (go to Tools, Serial Port, and then select a different com port) everything was fine after that.

Tuesday, 10 September 2013

Easy - Get REAL Co-ordinates of a Movieclip Inside a Movieclip: localToGlobal, AS3

localToGlobal allows you to get the actual position of a movie clip, that is inside another movieclip.

Normally, if you trace, or try to get, the x or y coordinate of a movie clip, you will get its position, relative to the 0,0 coordinates of the movie clip it is sitting in. These are the local coordinates of the child movieclip.

To get the global coordinates, ie, where it REALLY is on the main stage, you need points, and the localToGlobal function.

e.g

(On the stage, there is a squareHole_mc, and inside that is a roundPeg_mc.)

var pt:Point = new Point(squareHole_mc.roundPeg_mc.x,squareHole_mc.roundPeg_mc.y);
pt = squareHole.localToGlobal(pt);



So basically, you create a Point, that contains the local x and y coordinates you are interested in. Then you use localToGlobal to find out the global version of those coordinates, bearing in mind they are sitting in a parent movieclip.

UPDATE:

Now in one line(!!!):

var pt:Point = sqH.localToGlobal(new Point(sqH.rPeg.x,sqH.rPeg.y));

Monday, 9 September 2013

Losing Focus on Textfield, AS3

I had a problem with a text field, I wanted to click on it, have something happen, and be able to continue typing straight away, but it kept losing focus after the first letter.

So I added a trace statement to find out what was happening, and then it would lose focus after it was clicked.

The reason was the trace statement was causing the whole swf to lose focus. So I am sending a trace statement in the frame, so that the initial focus is dealt with. The losing of focus doesn't occur after the first trace statement.

P.S. To set focus using action script:

stage.focus = textfield_txt;
textfield_txt.setSelection(textfield_txt.length,textfield_txt.length);

Thursday, 6 June 2013

EaselJS: Spritesheets

Still figuring this out myself, but here is what I have so far...

A sprite sheet is an image of all the frames of an animation, I'm not sure if it has to be a .png, but that will work.


In the example file, there were loads of scripts added, but I replaced it with the one script and it still worked for me...


Line 24: Create a 'spritesheet' - seems to be a way of telling the page which sections of the spritesheet are what, etc.
"animations" is, I think, used if you want to use your spritesheet as an animation? I don't know.

Lines 26 and 27: These two lines both define certain frames as part of a sequence. Sort of like if you had frames in Flash, and a frame had a name, and then when it reached a certain frame, it would loop back to the beginning, or go to another named frame.
On line 26, it's saying that the run sequence is to start from section 0 of the sprite sheet, and go through to section 25, and then, though I have commented this out, to go to the sequence of frames called 'jump', which is defined on the next line.

Line 28: Defines the source file for the image that is the spritesheet.

Lines 29 to 36: Tells it how to recognise what frames are on the sprite sheet.
"hieght" and "width" are how many pixels each section of the image is that should be taken as a frame. I'm not sure how you are supposed to know this, I made a sprite sheet using zoe, and it gave me a file that was 2048 by 512 pixels, with two rows of 7 frames. So I divided 2048 by 7 to get "width", and 512 by 2 to get "height". It worked for me. I suggest you try altering these values so you can see what goes wrong.
"regX" and "regY" are the registration co-ordinates for the animation that will result from the sprite sheet.
"count" is how many frames you have in total, I think.

Line 38: Assign your animation to a variable (a BitmapAnimation) that you can then position etc, and generally treat like a movie clip.

Line 61: If you use gotoAndPlay without any parameters, it will just play everything that the spritesheet is capable of. Or you can tell it which 'frame' to go to.

Line 64: You need the Ticker to get it to work, but strangely, it won't pause in the way a Tween will. So...