Wednesday 7 December 2011

Research into Flash Movies

I'm back again with some more work for my animation assignment. This weeks work is research into different Flash Games, more specifically, web related ones.


Foamy the Squirrel

The animation in the series looks "fixed" in a sense because the majority of the motions are all Keyframe set (e.g. when the timeline moves from one Keyframe to another, the same or similar graphics are changed to make it look like it's moving, getting bigger, etc.) with a small degree of motion tweens. The graphics used for the animationsFoamy the Squirrel (also known as Neurotically Yours) is an animated Flash webtoon comedy series that depicts a foul-mouthed squirrel named Foamy, who constantly displays his hatred for almost everything, often ranting, aimed on society in general. Another main character in the series is Germaine, Foamys' "owner" as it would seem. Her persona within the series is often depicted as a stereotypical goth who likes poetry. Like her "raging, logical, pet squirrel," she also has distaste for society, mainly because she has constant conflicts with them, arguing she is nothing more than a sex object.


Bonus Stage
The animation in this series looks like it uses motion tweens for body movement and then changes graphics upon different variation of movements through Keyframes, such as when the characters are standing still, their arms are not shown until one of them raises and arm and changes hand postures.Bonus Stage is an animated Flash action/adventure/comedy (mainly comedy) webtoon series that focuses attention on the randomness, sarcasm, and parody moments of life. The series itself often uses computer game references. The series depicts three main characters; Joel Dawson, who is a spontaneous and sparky individual with a lot of intelligence (although none is used) and is always keen for adventure. Phil Argus, a goodie 2 shoes teen that always opposes Joel's need for adventure. And Ellie Strife, who is a charismatic teen girl.


Leo & Satan
The type of animation used in the series has a very strong usage of motion tweens, as shown on the characters’ movement, with small degree of Keyframes used for the lip-syncing and other various usages, such as movements that use different graphics. For example, when Satan grabs a garbage bin and jumps through the window on the episode “Trash Hazard.”Leo & Satan is a Flash webtoon comedy series that focuses on a mixture on childish behaviour and adult humour with minimal content. The two main characters in the series are Satan, who appears as somewhat of a complete idiot but is also easily angered by the slightest problems and could bring total annihilation if he chooses. And Leo a young boy and Satan’s chosen companion, who is very regularly frightened by his “sudden-angry-demonic anger” and also gets into trouble because of his idiocy.


Happy Tree Friends

Happy Tree Friends is a Flash webtoon series that is focused on gore humour. The series features numerous characters that resemble field creatures and animals, such as squirrels, rabbits, raccoons, beavers and a moose! When an episode is first watched, the person watching it may first think of it as a typical kid’s programme, up until where the characters start getting their skin ripped off, crushed by heavy objects and their blood and guts are smeared over the pavement.
The style of animation used in this series looks very well done, as though it was made with another animation program. It uses the bone tool and motion tweens very well and realistically, as well as the choice of graphics used on the Keyframe changes.

Anyway, that is my research on Flash Movies. Until next time...

Monday 28 November 2011

Don't waste your breath and just fade away (Animation Project)

Hello everyone. I'm back and I have been assigned to another project: Animation.

The aim of the project is to create an animation that has some humour in it and must contain something political or celebrity-ish.

The assignment started a couple of weeks ago (yeah and I'm posting about it now!) and I have been doing some idealising. I have been given one idea regarding David Cameron, but I'm not going give away anything just yet. Speaking of David Cameron, I got a hold of my old graphics tablet and attempted to try and draw him. Here's what resulted:

            
















































At the moment, this is the original size but when I start doing some work in flash, I'll make it smaller.

That's about it for now. Until next time...

Monday 14 November 2011

Adobe Flash Animation Tutorial: Bone Tool



On this document, I will be showing a tutorial on how to make an animation using the Bone tool in Adobe Flash. First, open Adobe Flash in ActionScript 3.0:
Next draw a simple image that will be used as your animation. Once you have done that, convert all of your images that you are using to animate into Symbols (Movie Clips). I have drawn a stick man for my project:

Next, select the bone tool and select the main area of where all the other objects pivot around. In this case, since my animation is a stick man, then the main pivot area is the neck.

From this, I can move the arms around in any direction I like without them straying from rest of the body. (unless you have the Transform tool selected) You may notice at this point that the body may move while you are moving the arms. To stop this, select the main pivot areas outer circle (with the Select tool selected) and it will highlight it. You will then have some new options in the properties window. One of those options is called Joint: Rotation and there should also be a box ticked enabled. Click the box to disable the rotation of the body. (Do this before adding the bone feature to the legs)  

("Just so you know, I'm using the arm to refer the Joint: Rotation because I had done the neck earlier and I can't see a way to redo it, probably because my shapes are too small!") Now that you have done this, you can now add the bone feature to the legs. Now to add some animations: go into the Timeline and you should notice a new layer has appeared called Armature_2 (or you may have noticed it when you were inputting the bone features)                                                              
























At this point, add some frames in and manipulate your animation and you should have something like this:

When you now hit Ctrl + Enter, you'll see a small loop animation of this stick man waving.

Sunday 30 October 2011

Generator Complex game

I am back and after two weeks of working in Flash, I have finally finished my game.


The idea based for this game is to get a battery and place it into a generator without hitting any obstructions. If you get the battery into the generator, you win the level and you will be given the option to progress onto the next level, retry the level you played or go back to the main menu. Hitting an obstacle will cause you to fail the level and gives you the option to retry the level or go back to the main menu. There are currently ten levels to play and get harder as you progress.

The controls for the game are very simple: one left click over the battery and it will pick it up automatically. the battery will follow the cursor wherever you control it as long as you don't hit any obstacles.

As of now, there are lots of things that it lacks for it to be very well made and addictive game, mainly certain features that it is missing. In this case, it doesn't have a stopwatch in place to record a players time for each level or a life-point feature to record how many times the battery can get hit before it's game over There is also no sound applied to the game, so there won't be as much 'feel' to the game. If I had more time and the right resources, I would definitely add them in. 

That's all for now. Until next time...

Friday 21 October 2011

The Hardest thing I've done before... (Flash Game - Generator Complex - Production)

After much time of practice and game tests using ActionScript 3 in Adobe Flash, I am ready to start creating my game. I have already designed some of the levels and imported them into Flash. So far, I am really proud of the result:
All I have for the main menu at the moment is a game title and three buttons, though only two of them work at the moment. The Play button goes straight into the game, starting from level one and the Levels button shows a list of the playable levels. I am intending to have ten playable levels, but so far, I have finished three of them for alpha-testing before going any further.

Here is the first level. The objective of the game is to get the green battery to the generator, without hitting any obstacles. If you hit an obstacle, the game is over. When this happens, a mini-menu will pop up, giving you the option to either retry the level again or return to the main menu. If you manage to get the battery to the generator, you complete the level and a pop up menu will appear. It gives you the same options as the game over menu, but you will also have the option to proceed onto the next level.

There may be a few bugs that I need to fix. One at the moment, is the hit test between the battery and the generator: I have made so that no matter where the battery touches the generator, it will automatically count as a hit and win the game.

I will hopefully be back more on my game. Until next time...

Wednesday 19 October 2011

(Drop and Drag - Game Test)

Hello again, I am back with some game testing:

Like the practice go’s in Flash, I think I’m ready start my game. But first, I need to make a basic bare-bones game. Let’s make a small menu:



















Here, I have opened Flash. Now I need to draw a simple square:
















This is basically going to be our Start button but for it to work, I need to convert it to a Symbol. Left-click and scroll down to Convert to Symbol. Give it a name (this will be saved in the Library) and make sure it’s a Button. You should have this pop-up:








Give it an Instance name:










And finally, some coding:











That is your start button but the coding is basically saying “that you are going into another frame when you click the button, so you need to add that frame. To do this, go into the Timeline and left-click in an empty frame and add a Blank Keyframe. You should have something like this:










This will give you a blank canvas to work with but you’ll still have your Menu. Now it’s time for my game. What I did first was create an empty Symbol (movie clip). Go to Insert > New Symbol:








You should have a “new” blank canvas. At this point, I imported some graphics. I did this by going to File > Import > Import to Library, and then I selected the sprites wanted in my game. Here’s what I have:
















Go back to Scene 1, and then go into your library and drag you symbol on to stage and then double click it so you are now inside it. I then converted these shapes into symbols (movie clips) and gave them Instance Names (The battery thing > Battery1 and the generator thing > Gen1) Then I added this coding into the ActionScript:















This coding means that I can pick up and drag the battery along and once it touches the generator, it will go to the next frame. In the second frame, it will have a an animated graphic in a Blank Keyframe:




















I positioned this so it is in the same place as the previous generator. I converted this into a Symbol, (movie clip) and then double-clicked it to go inside the symbol. I them finally added a tween. (the light above the generator)

That's about it for now. Until next time...

Thursday 13 October 2011

Radar Jammers and Speeding Tickets (Drop and Drag Flash Game - Practice 2)

Hello again, I'm back with another go at making a basic bare-bones drop and drag flash game, which this one is a little more in depth.



Practice 2

After have a go with my first practice, I decide I wanted to have another go with a drag and drop function, except with one that has a hit test feature. So I took a look around on the Web and I found this:

This is the kind of thing I’ve been looking for and could be the very thing I could use to create my game with. The way this is played is by dragging the smaller shapes into the larger shapes. This will give the larger shapes colour fills. Also, when you click on the smaller shapes, where it says “ITEM name,” it will change into the name of the shape. For example, when you click the green square, the “ITEM name” will change to “square.” Not only that, you also have another text box below the ITEM name box; this box basically tells you whether you have put the shapes if you have put it in the right place or not. In this instance: “WRONG!” if you have put it in the wrong place and “CORRECT!!” if you have put it in the right place.

Below that window is a small tutorial on how to make it. I had two attempts at it: The first attempt I did kind of ended in a ‘fail.’ I think what I did wrong is I didn’t put in four separate layers (I know there are four layers because you can download this) so I had second attempt and now it works fine. Following the tutorial this is how I did it:

I opened up a new doc in Adobe Flash.





















Next, create four layers:










It’s usually better to have everything separate.

Okay, let’s create our small shapes, then convert them into symbols, (Movie Clips) and give them Instance names. (item1, item2 and item3 in descending order) (the Instance name feature is in the properties window and will only appear if you have a converted symbol selected


























Now that you have created your symbols, you now need to make the bigger shapes. When I did this I found it a bit confusing at first but now it should be okay. Before drawing the shapes, you need to create blank symbols first:













Your canvas should now look like this (below)


























Once you have drawn your shape within the blank symbol, DO NOT put anything else inside it. Go back to Scene 1, where you left your smaller shapes. After that, go into your Library and drag onto the stage. (make sure that it is in a separate layer, called bigShapes of something like that)

















Now that your large shape is on the canvas, double click it so that you are now inside the symbol. Once there, convert the shape into a symbol (Movie Clip) and give it an Instance Name of "shape." Now, create a second layer and draw another shape, exactly the same size and colour, but with no fill, then place it over the colour-filled shape. After that, go back to scene 1.









You need two more large shapes that resemble the smaller shapes. Do this by repeating the same process as the first large shape.

Now, we need to create some text boxes that will feature the item info and whether they are in the right place. (This is basically a Hit Test) To do this, create a blank Symbol and draw two Dynamic text boxes.













Once you have created your new Movie Clip, draw a text box somewhere in the middle of the canvas (make sure it's big enough and the text/typeface is the right size) and write in it "Item name." Since the text box was created inside a blank symbol, there no need to convert it. In the Instance name box, type "itemName_txt." Now, add a second layer and draw another text box, (roughly the same as the first one) inside it, just type three full stops (...) and give it the Instance name of "info_txt."


















Go back to scene 1 and drag your new Movie Clip onto the stage. Once you have done that, give it an Instance name of "ilabel" You should now have something like this (below). You are nearly finished, now you need to add the code:

Select the frame you haven't used yet and type this coding in the Actions tab. (if you have not opened it yet, press F9)
 

















 


















 
































Now, run your "game," it should work. (you may need to change the "objNames" (text written in green) to the name of the shapes that you have placed.

Here is the tutorial and source code I found for this game (though I changed it around to make it a little more understanding)

And that is my (well, not mine...) second tutorial in Drop and Drag Flash games. Until next time...