|
biG frend -> From Nothing to Something With Flash | Chapter 3 | (3/25/2008 18:06:18)
|
From Nothing to Something With Flash
So you want to start learning flash? Well theres no time better than now.
There are just a few small steps you need to take before starting.
- Step 1: Are you sure you want to go through with this process? Its a lot of hard work, effort and time consuming.
- Step 2: You will need to get a copy of Flash, I recommend getting a free trial first since if you don't like it then you don't have to waste money. I would also recommend flash 8 simply as its what I'm using and its cheaper. (For prices and stuff I'd also recommend going with a student package, which means you get a load of other adobe tools and its all very cheap, I got my copy for £80 (Roughly $160), a student package means that you can't sell any products you make in flash but donations are fine.)
- Step 3:Open up your copy of flash and lets begin.
Chapter 1: The Stage
Here is the stage, I've labeled all the features and you should try them out:
The Timeline
Unfortunately this is a flash 8 stage (I did warn you).
Here I have broken down the Timeline
The Timeline
And here I've labeled each of the tools
Tools 1
Tools 2
Chapter 2: The Timeline
In the last chapter, I showed you four images detailing flash's interface. The second image detailed the Timeline - today, we're going to have another look at it.
As the name suggests, the timeline is a line, and it controls all the time in your animation. Simple? Quite.
Please open flash up now if you haven't already done so.
Start a new document (if you're using CS3, select to work in ActionScript 2.0)
I'd like you to now draw something on the Stage. It does not matter what, it can be a few scribbles if necessary. Now, on the Timeline, you see the little cell like things? We are in frame one. I want you to right click the next cell/frame across and click Insert Blank Keyframe.
What should have happened is the stage went blank. If this did not happen, you either made a normal frame, a keyframe or didn't do anything.
To fix this, right click the second cell and click 'Convert to blank keyframe'.
So what is a blank keyframe? And a keyframe? And even a frame? Well, a frame is just a section, a still image of your animation.
The difference between frames and keyframes is frames cannot have anything new introduced onto the stage (under usual circumstances) - if something is introduced then it'll be added to the nearest previous keyframe.
What can happen in a frame? Well Objects can move around via a motion tween. Frames can also be used for refreshing ActionScript. We'll come to both of those a little later.
A keyframe, on the other hand, is a new instance, you can now change things a bit. Now we know that, what's a Blank keyframe? A blank keyframe is exactly the same - its just empty. If you add a new normal keyframe, it will have everything that the previous frame had, although its not hard to delete the stuff (its just easier to make a blank keyframe).
Now In frame two I want you to make a new, different drawing. Then Create a third blank keyframe on the third frame and make a third different drawing on it.
Now press Ctrl+Enter at the same time. Watch, you have just made an animation. So its just a few scribbles, but its a start.
Now I'm going to tell you how to control the timeline through a bit of actionscript. On the second frame, I want you to right click it and select actions. A tab-popup should appear where you can write in. This is the Actions panel. This is where the behind the scenes scripting takes place. I want you to write:
stop();
in this panel. Now its not hard to guess what this has done, but just in case you can't think, this does some sort of stopping action. Try Pressing Ctrl+Enter now. You should find that the animation stops at the second frame. Just for future refrence and learning, there is an opposite command to this, and its
play();
Please save this document as something, as we'll be using this in chapter three.
Now, we're going to do a motion tween. Start up a new flash document. (File >> New). I want you to draw a circle. On the timeline make a new keyframe on any frame you like, I'd suggest around 20. Watch as all the frames between 1 and your new keyframe and filled with frames. To tell the diffrence
- Frames = cells blank
- Keyframes = Cells have a black dot
- Blank Keyframes = have an unfilled black dot
Right on your new frame, I want you to move your circle somewhere new.
Right click frame one and click 'Create Motion Tween'.
Press Ctrl+Enter, Your Circle should now move across the screen.
Motion tweens can become very important later on with animation, I suggest playing about with this tool and see what you can achieve. Post in this thread with your result, if you want.
A useful hotkey to learn is F5 as it creates a frame without you having to right click.
There is no default hotkey for creating a keyframe but you can set one up.
To do so, Open the 'edit' menu at the top of the screen, scroll down to keyboard shortcuts.
Then Go into the folder 'insert' and then into the folder' timeline' fine the one saying keyframe and then edit in the hotkey you want, I use f4 but its up to you. Click ok.
Chapter 3: Symbols; MovieClips, Buttons & Graphics
Ok I'm back. Today where going to learn about symbols. Symbols are very interesting and help quite a bit, both with animation and actionscript somewhat. To create a symbol select your target, and hit F8 or Right click and select "Convert to Symbol".
Ok First please draw a square. Now Select it all and Convert it to a symbol.
You should be greeted a popup quite like this if not, re trace your steps and find your error and continue as I've set.
Ok I want you to select MovieClips, and I want you to also make the name 'Lots of Shapes' You can change that if you really want, it won't change anything in the immediate future.
Now before we go on, I'm going to explain a bit about a movieclip. Basically a movieclip has its own timeline which isn't affected by the main timeline. It will still run in the same fps as the main timeline but won't be affected at all otherwise. Movieclips are used for things like characters or objects in game since they can have their own actionscript attached to them (for future refrence to add actionscript to a symbol, right click it and hit actions).
Ok now please double click the Movie Clip you made. Now notice how the timeline and everything has changed. Now I want you to make a keyframe on frame 2 of this movieclip. I want you to erase the square and put a circle. Now Make a keyframe on frame three, erase the circle and draw another shape. Press Control + Enter and watch the show? Now for bonus brownie points. Exit your Movie clip by double clicking anywhere. Now make a keyframe on frame 10 or whatever of the MAIN timeline. Now drag your movieclip somewhere a bit different and make a motion tween. Theres a little animation trick for you.
Ok next up Buttons. I wonder what they are :O. A button is well a button. But buttons don't always have to be pressed by a mouse. Heres a list of different ways you can activate a button;
Method - Description - Actionscript
When pressed ~ The moment you press the button the action happens ~ on (press) {}
When Released ~ The moment you release the mouse button the action happens. If you drag the mouse away before releasing, nothing will happen ~ on (release) {}
When Released Outside ~ The exact opposite of the above. You have to release outside the button for the action to take place ~ on(releaseOutside){}
When Rolled over ~ When the mouse rolls over the button the action will commence ~ on (rollOver){}
When Rolled Out ~ If you scroll over the button then scroll out, the button will activate ~ on (rollOut){}
When Key is Pressed ~ When you press a specified key the action will take place ~ on (keyPress "") {}
When Draged out ~ When you click on a button, hold it down and pull outside, Kind of like a mix of "Pressed and Released Outside" ~ on (dragOut) {}
Please tell me if I missed one.
Ok, Now On the same document create a new layer. And make sure your working on that layer.
Next I want you to make a square or what have you. Now Convert this a symbol and select button. Name it whatever you like.
Now Right click your button and select actions. Pick one of the Methods*1 above (I recommend on release its what I always use*2)
and copy the actionscript into the action panel. Now all the actions that you want the button to have go inside the two curly brackets "{ }". I want you to write in between the two brackets is
stop();
A familiar command hopefully? I think we can all guess what will happen if you press it :). Now Press Control + enter. You should notice your movieclip moving across the screen in its randomness. And You should also note its cycling between pictures of shapes or whatever. Now Activate your button. The movie clip should stop moving. But it will still continue cycling between the pictures. If so Good. If it continues moving make sure you have not put a capital 'S' on stop since ationscript is case sensitive.
Just a quick little bit on "Graphic Symbols" Their like movieclips but they can't have actionscript attached to them (except through their timeline) and their only purpose that I can find is for a few animation perks (e.g how many times to loop instead of once or infinite)
Play around with that and I'll see you for chapter 4 which will be sometime soon hopefully.
Please show me all your outcomes I love to see them. And Don't be afraid to ask a question, remember you can always PM me too.
Also Please post any errors In spelling or anything else I've made. Thanks bye.
Credit to EragonZZZZ for the post formatting thanks a bunch :D.
*1 If you want to use Multiple methods just follow this formulae "on (release, releaseOutside) {}"
*2 I use it because it gives the user more time to decide weather they want to click that button. Mm'kay only a second but hey.
|
|
|
|
