South Park Theme Park
Table of Contents
- Analysis of ideas and creative process
- Use of Technologies to produce the elements
- Consideration of constraints and problems
- Quality, creativity, originality and suitability of designs
Details
- Date Completed:13 December 2003
- Days/hours spent:5 days
- About the company:University Project
- Software used:Flash 7.0
- Tag:SWF (Flash 6 Actionscript 1)
Currently working on…
Lots of freelance and e-commerce projects.
Latest Work
Search Portfolio
Given the task to create a theme park. I decided to use South Park characters, as they seemed most humourous to draw and animate. Careful planning, using vectors and effective actionscript was used to create a very small file size.
1. Analysis of ideas and creative process
The aim was to complete an interaction animation for a theme park using Flash MX.
Starting off with research on how theme parks look and act according to a human’s perspective. This allowed for better understanding of certain aspects used in creating a theme park. For example, the bright colours and huge rides really helped make the theme park more exciting. The sounds of the theme park also played a big role and were taken into consideration. However, the complexity of the maps and numerous rides would easily confuse any person. Therefore, a simple theme park design was the best way to approach the creative process.
Simple designs consisting of circle-like characters was the given criteria. I thought about how it would be possible to expand on this simplicity of characters so that it would be possible to give them more emotion and interactivity. The South Park characters seemed very easy and simple to draw on Flash MX. Furthermore, the familiar faces of the South Park characters seen worldwide would give any user a more common understanding on what the animation is about and what might be expected from the animation. Therefore, it reduced other complexities involved in the animation, providing a better overall product.
Researched was carried out, looking through several websites and viewing many flash animations to get a feel and see how they flowed as a complete product. This type of research allowed for better integration of scenes. For example, going from one scene to the other, a cross fade animation or the character going from part a road to the other. For a character, the familiarity is the road and therefore allows the user to understand what is going on more clearly.
The South Park consists of very simple movement and designs. Hence using basic shapes and effective character animation taken from the source itself. This again allowed for more familiarities, in the fact that user would already know how the South Park characters interacted with each other and their movements. This hopefully reduced the user’s short-term memory load, so that the user would concentrate on other aspects of the animation.
The use of sounds and music played an important role in the animation. Because it helped grab the user’s attention when a significant part came up. It also allowed for an improved atmosphere. Using sound and music also got rid of any flaws in the animation of the characters or scenes, since the user had to concentrate a little on the sound/music being, as well as the animation.
The theme park would consist of three main rides: rollercoaster, ghost train and a drop down ride. Each character would be affected a different way according to what ride they went on.
2. Use of Technologies to produce the elements
Using Flash MX, Cinema 4D, QuickTime Player Pro and Reason.
The programs used mentioned above helped produce the theme park animation.
Reason
This program helped create a couple of synthesis-type sounds for my splash screen. The finished sound was exported as an AIFF file.
QuickTime Player Pro
I downloaded some sounds and music for the South Park theme park animation (taken from reference 1). I used QuickTime Player Pro to cut out the sounds and link them to the movements/animations used in the coursework. The edited sounds were exported as an AIFF file.
Cinema 4D
This program helped produce the 3D animation seen in the splash screen. Created a diamond 2D shape, then using the Extrude NURB, regenerated the diamond into a 3D figure. Duplicated the 3D shape, and cut a hole in the middle of bigger diamond by using the smaller diamond, this was done with the Boole object. This effectively makes the bigger diamond (first object inside the Boole object) change its attributes to correspond with the smaller diamond (second object inside the Boole object).
I exported 3D object into SWF file to add a bit of flare to the greydust's intro.
Flash MX
Preloader
Using action script to create simple preloader for the movie. Used the getBytesLoaded() and getTotalBytes(), to form a preloader bar with percentage inside a dynamic text box.
Character Animation
Downloaded images (taken from reference 1) of the south park characters and produced vector models of them. This only included Cartman, Kenny, Kyle and Stan. I decided to put most of my objects into movie clips/graphics so that they could be used again. As for the characters, they were put into movie clips and assigned frame labels, this allowed action script to call up a certain movement or animation that the character had inside the movie clip anywhere in the flash movie. Inside the movie clips, the following animations were needed for basic movement: movement of mouths, blinking, walking, and basic head movements. Using key frames and tweening in Flash MX it was possible to give the characters life-like animation. For example, talking was a couple of key frames for the mouth layer, with different mouth shapes on each key frame. This gives the illusion the character was talking.
Creating Cartman character.
Creating Kenny character.
Creating Scenes
Using the various tools provided in Flash MX, it was possible to create all the scenes from scratch. The pen, line, fill, and gradient transform tools were amongst the many that were used to produce cartoon-like backgrounds. Some backgrounds were converted into movie clips so they could be animated. For example, the entrance scene for the theme park; if Kenny is packed, the grass gets darker. With the added thunder sound effect, it allowed the user to understand that something dangerous is going to happen.
Creating the ghost house scene.
Creating the rollercoaster scene.
Creating the background and adding the characters for the intro scene.
Sounds
Sounds were played and attached using the linkage action in the library palette. Attaching a new sound to a variable name was done like this sound1 = new Sound(); sound1.attachSound(“linkage name”); The advantage of using action script to play the sound was that it reduced the file size and a sound layer wasn’t needed. Using the sound properties available in Flash MX. It was possible to make the character’s mouths move when they sang in the music in the splash screen scene. This was done using the soundFile.position inside a clip event. For example, if (soundFile.position == (6.5 * 1000)) { gotoAndPlay(2);}. The sound file is measured in milliseconds, and that’s why the number of seconds are multiplied by a thousand. Many sounds were integrated into the Flash animation to give the user a sense of realism.
Buttons
The use of buttons inside the theme park animation allowed better interactivity for the user. To let the user what they want to do and that would guarantee their full attention. For example, before Kenny gets on a ride, he always ask a question whether or not it’s a good idea for him to go on the ride. If they pick no then Kenny goes back to where he came from otherwise he is casted onto the ride (and we all know what happens with Kenny).
Kenny isn't sure about what to do... Hence the user has to do decide.
ActionScript
The ability to use action scripting really helped in producing a better flash animation. It allowed for less complexities coming from key frames, animation flaws and other frame-type flaws. Without ActionScript, the animation would be very linear, making it lose almost of all its interactivity with the user. For example, the buttons had coding like on (release) { play(); } This meant when the user pressed the button and then on the release of the button it would play the movie again. The synchronisation of the characters signing with the music was done completely in ActionScript. If the music reached a certain time then it would move the mouths of a character. Using the _global function, it was possible to compact all the scenes, because the animation had the choice of two characters, which meant that for each ride there would have to be two scenes (one for Cartman and one for Kenny). However, using ActionScript, a global variable was setup on the buttons for Cartman and Kenny, if the user pressed Cartman _global.character = “Cartman” would be excuted. An if statement was written at the beginning of each scene (if _global.charcter != “Cartman”) { gotoAndPlay(“Kenny”); } This made sure that if the user picked Kenny it would always go to the right frame in the scene.
3. Consideration of constraints and problems
Several constraints and problems started to occur the more the animation progressed. However, for every problem that came up, a solution must be found for the flash movie to work properly.
One of the problems that came up was the need to pause the animation for a specific time then continuing it or making something else happen. This was time consuming to do by simply increasing the distance between key frames. ActionScript gives much better flexibility to what will happen when and where. A solution was found to allow the animation to pause, using the following built-in function:
pause = setInterval(pauseFunc, timeOfDelay)
function pauseFun{
statement…
clear Interval(pause)
}
The timeOfDelay was the number of milliseconds that the animation would be paused, then after that interval of time the statements inside the function would be executed.
Another problem occured when I needed to separate the character frames in each scene. ActionScript helped in making sure that the two different character’s frames would be not messed up. I set up a global variable and when the user clicked on a character. The character’s name would go into the global variable. And on the beginning of each scene an if statement checked to see which character the user clicked. For example, if the user clicked on Kenny then the scene would jump to the frames that were associated with Kenny.
A problem arose when trying to make the characters blink independently of each other while using the same movie clip. The solution for the problem was to use the random() function to generate random numbers. This would make the characters blink at different times. For example, using the getTimer() function:
var num = random(500) + 3000;
var enableTime = getTimer() + num;
this.onEnterFrame = function()
if (getTimer() >= enableTime) {
nextFrame();
}
};
Random number between 0 and 500 added to the 3000. Converted into time scale then creating onEnterFrame function to see if the getTimer() function reaches the number in the variable enableTime.
4. Quality, creativity, originality and suitability of designs
Quality of the characters, scenes and other animation were all kept in vector graphics. This allowed them to have 100% quality no matter how large the vector graphic’s size was increased. This is because the vector graphics are actually mathematical equations, rather than pixels of colour. Most of the sounds were imported from AIFF or WAV format, simply because it is better to scale down the sound quality rather than having an already compression sound “recompressed”. The quality of the sound was kept at 16kbps and mono. This is because sound takes up a lot of space, and the sounds used in the flash animation were not greatly affected by the compression rate.
Creative aspects of the theme park animation were the little details put in. For example, the characters would blink independently of each other, on all the scenes. This is because a movie clip was nested inside the character’s movie clip, so that it would run separately from the character’s animation. Another creative aspect was the fact that if Kenny dies on a ride, the user would have the choice to either let Kenny live again or leave him dead. If the user chose “live” then Kenny’s soul would pop back into his body and his skin colour would go back to normal. If the user choice for Kenny to stay, then the ghost figure of him would leave the theme park.
REFERENCES:
- http://www.southparkstudios.com
- Colin Moock (2003): ActionScript for Flash MX: the Definitive Guide