The first step in creating the animation was to open Flash and create a new ActionScript 3 Flash project. The stage, as it is referred to in Flash, was then resized to less than 300 pixels wide, and adjusted to a 16:9 aspect ratio. Using the brush tool and a Wacom bamboo drawing tablet, I drew the main lines of the scene. I made use of the Shift key to lock the brush to 45° angled lines, making the horizontal and vertical lines much easier to draw. I used a very dark grey for the main lines. These lines also stretched outside of the stage, and I drew lines completely outside of this area to create closed areas for the blocks of the assault course. I then used the fill tool, using a a lighter-grey colour, to complete the blocks, and started on the secondary-layer items.
Using a lighter grey than the original lines, I drew the ladder and the supporting strut using the pen once more. I used the Shift key for both, when drawing long lines. For parts, such as the rungs of the ladder, I just drew by hand and judged by eye. Using colours and different sized brushes (and the Shift key to an extent once more), I added graffiti. I had no intention of creating readable words or recognisable imagery, but rather simple colourful, shapes resembling street art, achieved in part by the thin running paint lines below the shapes. The graffiti-style words were added in the three locations I had specified with rectangles on the storyboard images, evenly distributing them across the scene.
Once the scene had been established I moved on to character animation. I created a new layer and switched on onion skinning, which makes the previous and next frame(s) faintly visible. This is greatly useful in creating smooth animation and consistent movement patterns during different parts of the animation. Using the F6 and F7 keys on the keyboard, I moved through the animation frame-by-frame. Only at two consecutive points did I extend a drawing beyond a single frame, and this was during a moment of very little movement. In retrospect, I feel I would have created a higher quality animation had I drawn every twentieth frame, perhaps, and then created the tweens afterwards. This would have led to a less fluctuating overall size of the character and a better overall speed to the animation.
Once all of the frames had been drawn I added padding frames at the end, allowing for a few blank frames in the animation before it looped. I then exported the animation from Flash Professional as an SWF (small web format), which can be easily embedded in websites. This is the standard output format for Flash-based creations. To simply distribute the *.fla
file that Flash saves as is not sufficient, as the Flash Professional application is required in order to open the file. SWFs, on the other hand, can be opened by Adobe Flash Player, which runs as a plugin in the case of most modern browsers. Links to both the project file and flash object are given below.
Test | Expected Outcome | Actual Outcome |
---|---|---|
Does the animation meet it intended purpose? | The animation was supposed to entertain or educate a child. | I feel the animation would entertain children, if for a limited amount of time. There's also the possibility that the animation could inspire a child to pursue a sport such as freerunning or parkour. |
Are there any errors in the animation? | The animation should not be subject to errors. It should, by default, play and loop once completed. | I didn't notice any kind of error in the animation when I viewed it embedded in this page. A direct link given further down the page to the SWF should be opened by a browser and displayed without issue. If this is not the case, it is the fault of the browser, and I recommend the use of Google Chrome or Mozilla Firefox |
Is the animation file size suitable for use on the web? | The animation was created using the tools in Adobe Flash Professional. This means that each frame's data is stored in a vector-based format, not raster. This is much more space efficient, and I would be surprised if the final animation was more than 200 KB. In comparison, RAW still photos from a DSLR can easily reach 10 MB. | The final animated Flash object stands at only 38 KB. To put this in perspective, just the text for other assignments, such as Unit 2 Assignment 2, have reached 46 KB. |
Is the framerate suitable? | The animation is set at thirty frames-per-second, meaning that the animation should appear smooth at full speed, while not overloading the image viewing engine processing it. | I found that although some less capable machines were significantly impacted when displaying the GIF on screen, as shown by CPU load and temperature, the GIF could easily be played for a suitable period of time. |
Does the animation play in a web browser? | Yes, by use of the Adobe Flash Player plugin used to display SWF objects. | As expected. |
In order to help gauge the success of the animation, I asked for feedback from peers.
How does the animation compare to the storyboard design? — The animation follows the frames shown in the storyboard and accurately represents it.
Does the animation meet it intended purpose? — Although the animation would not be classed as educational, but I feel the animation was entertaining and achieves its purpose as a result. Initially the outcome of the animation is unclear, making it more interesting.
Are there any errors in the animation? — The animation plays smoothly and appears to be of a sufficient framerate. Only the figure moves, and the animation could be made more interesting by letting the environment change as well, but the animation is successful nevertheless. The frames do not flicker and there are no broken frames, which is good.
Do you have any suggestions for improvement? — The animation could be made more successful with the addition of a partially animated environment. For example, the concrete in the top right could crack or collapse as the character lands on it, forcing the figure to find another route out of the scene.
<object>
element.
The first step was to open Cinema 4D and save immediately. This allows quick saving using keyboard shortcuts whilst creating the animation. I then started to create the scene; I created the main sphere and imported the large softbox from a lightkit created by a Cinema 4D tutorial videographer on YouTube. I also added a seamless floor, which ensures that the horizon of the infinite floor is not noticeable. I changed the colour of the floor to a dark grey in the process.
I then continued to build the scene, adding the large sphere in the centre, adding dynamics tags (enabling physics simulation), adding the smaller spheres and key-framing the attraction of the centre sphere and the size of the smaller spheres. I modelled the light positioned around the scene using a series of primitive shapes, such as cuboids and cylinders. At the time, I was less experienced, and used a luminous material on the front of the light, but I now know this to be less effective and more demanding on the renderer than using actual area lights in the same position. Luminosity can still be used for the appearance of the lights, but should have no actual lighting impact. Once I had created a single softbox that I was content with, I used cloner object to radially duplicate the original around the centre of the scene. This allows for perfect distribution and easy control over other variables such as the distance from the centre. Using a cloner also means that only the original need change, and the whole group will change as well.
After this, I went on to create the textures for all of the objects in the animation. I added five small spheres to a cloner object, and added a luminous texture to one of the five. This resulted in 20 of the total 100 spheres glowing. I added a Fresnel effect to the reflective objects to make them more realistic. Once the animation using keyframes was complete, and I was happy with the result, I started adjusting the render settings. This included setting an output path for the rendered frames (a sequence of *.png
images), setting the width and height of the frame, enabling advanced light calculation (Global Illumination in Cinema), enabling ambient occlusion, raising the anti-aliasing level (allowing for more clear reflections) and changing other settings to reduce the render time. Once this was complete I added the project to the queue and let the images render. Each frame, rendered at 480p (853 × 480 pixels), took around a minute and a half to render, bringing the total render time to over an hour.
Once the images had finished rendering I opened After Effects and began post-production. The images were first imported and strung together into an animation, and the default length of the composition After Effects had created was reduced as I was going to overlap the animation with itself and create a close loop. After duplicating the animation on the timeline, I created the loop. I first moved the duplicate so that it would end thirty frames after the main copy started. I then used a keyframed mask to clip the duplicate in such a way that it wouldn't interfere with the animation starting above. This almost failed as one of the small spheres moved very close to the bottom of the top softbox as more spheres were due to fall. Had the sphere been one frame slower in its size decrease, the quality of the overall animation would have suffered.
After the loop overlap was complete, I decided to add some basic colour correction. I used gradient maps and different blending modes such as Screen and Overlay to change the tint of particular colours in the animation. I also adjusted more traditional values, such as contrast, brightness and saturation. Once this was complete, I exported the composition from After Effects to a QuickTime (*.mov
) video clip using the MPEG-4 codec. In order to generate the final GIF, I used Photoshop. Although many users are not aware of the fact, Photoshop can be used to process video, and does this proficiently. The animation was imported and then, using the Save for Web... dialogue, exported as an animated GIF image. Using this save feature in Photoshop naturally creates images close to there most optimised potential. This means that the final GIF cannot realistically be made smaller without impacting performance or image quality.
Test | Expected Outcome | Actual Outcome |
---|---|---|
Does the animation meet it intended purpose? | The animation was supposed to entertain or educate children. | I feel that the animation is entertaining and interesting to watch. The animation could potentially spark interest in a child regarding magnetism and gravitational fields too. Cinema 4D could also be used to simulate the orbits of planets in space should it be required to, which could be useful educationally. |
Are there any errors in the animation? | The animation should be largely error free, and should play. There may have been some slight errors in composition however. | The animation plays and does not have any glaring graphical errors. That said, the background of the scene does change lightness quite drastically through the animation. This is due to the new spheres under the light appearing instantly, and blocking out the light. The issue was somewhat corrected in post-production using After Effects, but the change in lightness is still easily noticed. |
Is the animation file size suitable for use on the web? | The final animation should be manageable in terms of file size, but the age of the GIF format will likely result in a large file. | The final GIF consumes 3.4 MB of digital space, which I believe to be acceptable for a GIF animation. The format is dated and does not compress the data efficiently, compared to modern video clip standards. Although the size is not ideal, the compatibility that the format offers outweighs the drawback. |
Is the framerate suitable? | The animation was created at thirty frames-per-second. I would expect this to be sufficient and allow the animation to appear smooth when running. | The animation appears as expected and runs at the intended 30 frames-per-second, or at least not significantly slower. This means that the motion plays smoothly and individual frames are not noticeable. |
Does the animation play in a web browser? | Yes, as all modern browsers have support for animated GIFs. | As expected. The GIF can cause a drop in performance on some computers, but this is not drastic. |
In order to help gauge the success of the animation, I asked for feedback from peers.
How does the animation compare to the storyboard design? — The is a difference between the final animation and the initial storyboard in that the balls were designed to fall on the floor once the larger ball stopped pulling them towards it, but they instead dissipated through the air around the ball.
Does the animation meet it intended purpose? — The animation does achieve its purpose as it entertains, and has potential to educate. For example, it could be used in a science lesson to visualise gravity among a number of objects.
Are there any errors in the animation? — No, the animation plays smoothly without any flickering or noticeable frame changes, and the loop is seamless.
Do you have any suggestions for improvement? — Instead of simply attracting all of the smaller balls to the centre, they could bounce around the scene, and deflect off of the softboxes.
The Flash format is very useful for creating animations in 2D. The tools in Adobe Flash Professional, such as the brush, are very unique, and work very well with a graphics tablet. Although this application is very feature-filled, for example including a simple IDE for writing the ActionScript back-end of many Flash applications, the animation I created was of minimal complexity and used only simple tools.
The first tool I used was the brush. I used this to draw the scene, and often used the Shift key to constrain the brush tool to 45° lines. After completing the lines I drew on the stage with further lines outside of it, I was able to use the fill tool to add a light grey inside of the dark-grey lines. Unless a drawn line meets its starting point, creating an isolated area inside, the fill tool cannot the used. The bounds of the stage do not act to isolate areas in this way, which can be confusing to users. The brush tool is very easy to use for creating smooth lines, which are ideal for animation. The brush tool also creates vector imagery, meaning that is can be freely scaled up and down without any loss of quality. This form of storing data uses mathematical equations to express shapes, rather than arrays of pixels, and is not only good for performance, but consumes much less space on storage media. The smoothing of lines performed by the brush tool creates line similar to that which would be created by a real brush-tip pen.
In order to create the graffiti on the blocks of concrete, I changed the brush colour and size at the bottom of the tool panel (right of the UI). For the paint drips below this graffiti, I used a thin brush and the Shift key once more. The line smoothing helped create a much better effect than I had initially expected.
With the set created, I moved onto creating the animated frames. The first step was to create a new layer using the button in the bottom left of the Timelime panel. This was to be the layer that the stick-figure would be drawn on. By separating the subject from the scene I was able to create new frames and remove the character each time, without needing to redraw or copy and paste the rest of the stage. Separating components of any design helps to make the project more maintainable in the future, and makes the initial production quicker overall. After drawing each frame I would progress to the next using the F7 key. During a few sections of the animation I also duplicated frames (F6 key), or rather extended the keyframes I was creating beyond one frame, so that I would not need to draw frames at times of little change in the subject. The use of a single keyboard event to progress by a frame is very easy to get used to, and makes simple animations very quick to create and accessible to people of virtually any skill level.
In order to improve the smoothness of the frame changes, and therefore the appearance of the animation on a whole, onion skinning can be used. Referring to the thinness and translucency of a single layer of onion cells, this technique allows the animator to see the previous frame set to only ~30% opacity. This is very useful in creating frames that follow on well from their predecessors, and creating even animation. The number of frames before and after the current position on the timeline that are visible can be changed easily; simply drag the two grey handles either side of the playhead right or left. When creating an animation, I tend to choose to see the previous two frames, and the frame ahead. This is useful when editing already-drawn frames that have frames after them, or adding 'tween frames. Onion skinning in Flash Professional can be enabled by clicking the first blue/purple icon from the left along the bottom of the Timeline panel. This button can also be used to disable it.
Cinema 4D is a hugely capable application, that allows users to complete a great range of tasks and achieve incredible effects. The variety of rendering engines available behind the program – not to mention the opportunity for developers to create more – means that designers can target different visual styles very effectively, and tune the software calculating the images finely. For a beginner, the program may seem daunting, but on the whole, it is very easy to learn to use.
Along the top of the interface are large icons allowing the user to quickly access basic tools, render the scene immediately in the editor viewport, and add the various building blocks to the scene. The objects are grouped into a number of different categories: primitive shapes such as cubes and cylinders; primitive splines (paths) such as circles and freehand curves; NURBS used to create and modify objects given other objects; arrays and other modelling mechanisms; deformers for actions such as twisting and pillowing objects; environment objects including infinite floors and skies; cameras for capturing complex shots; and lights for lighting the scene in many different ways. It's very easy to find the objects you need, and they are greatly customisable in the Attributes panel. On top of this, the entire UI can be edited as well, which allowed me to add a Render Region button to the top toolbar, and would also allow me to remove the Undo and Redo buttons if I felt they were unnecessary. Having so many built-in object presets greatly improves a creators workflow, and creating a UI that works for can greatly improve productivity..
In the second animation I used a good deal of tools and functionality in Cinema, while still only scratching the surface of what it is capable of. Some of the most prominent items I used are detailed below.
As a first step in creating the animation, I build the basic scene using the primitive and environment object categories. To begin I added the main sphere in the centre, and then the seamless floor. I added another sphere by duplicating the pre-existing one in the Objects panel in the top right, and scaled it to the correct size using the Attributes panel in the bottom right. Using a cloner object from the MoGraph toolkit, I duplicated the smaller sphere in a 10 × 1 × 10 grid, and positioned the array above the larger sphere. MoGraph cloners can be used to duplicate a huge variety of objects, including shapes, lights and other MoGraph objects, in many different ways. For example, the clones can be arranged in a grid, in a line, radially or to fill the volume of another object. MoGraph also includes Effectors, such as the random effector, which can be used to quickly vary the sizes of copies in a MoGraph cloner. The tasks I undertook to create the scene up until this point were very easy, mostly just involving adding items and adjusting their parameters.
Initially brought to Cinema 4D with MoGraph 2, dynamics allows for interesting physics simulation inside Cinema. Dynamics tags such as rigid body, collider body and soft body can be added to objects to change the way in which they act when the animation is played or rendered. The base tag, the rigid body, gives the object it's placed on typical physical properties, causing it to fall and collide realistically with other objects. The soft body acts similarly but creates a shape that morphs as it collides. The collider body retains it's shape and position, making it immovable but still considered in the dynamics calculation. There are also different shape modes, such as MoDynamics, which is useful in animating models not created solely from the shape primitives or objects such as tori that can safely intersect. Many other parameters of dynamics tags can be altered, such as mass, bounce, friction and softness. Although dynamics in Cinema are very capable, they do fall short somewhat when one uses soft bodies. This functionality will likely be improved in future releases, or may have already been in Release 16, which I have yet to use. Unfortunately Cinema 4D has yet to include any water simulation software, as is included in other packages such as Blender. Many designers therefore resort to RealFlow for this, and export animated meshes that can then be rendered in Cinema.
Also part of the dynamics in Cinema are the particle simulation tools. The one used in this animation was the Attractor. An Attractor can be placed inside of a standard object, and causes others to move towards it. This is particularly useful when using a collider body object in the centre of the scene. Placing an Attractor inside of a dynamically moving object is more difficult, but still possible. In the animation, the Attractor causes the smaller spheres to gravitate towards the large blue sphere. Other particle simulation tools include the deflector, emitter and more.
The process of modelling the soft boxes around the scene mostly involved creating and adjusting cubes and cylinders. I positioned the light face down on the floor and built the structure on the back using cylinders and a cuboid for the centre block. The light itself was created by cuboids, one forming the black case and another the luminous front. I then rotated the whole rig and positioned the first light. I built the stand using the same methods, and then made all of the objects children of a null object, effectively grouping them. This made it a lot easier to place the light inside the cloner object, and create a ring of soft boxes around the central sphere. Although the use of Global Illumination, often called indirect illumination in other packages, means that the luminous texture would light the scene, this is not always greatly effective. Instead, I positioned area lights a few centimetres in front of the lights – using the same width, height and rotation – and enabled area shadows. This form of shadow calculation, although having a big impact on render time, creates the most realistic shadows possible. The light above the scene was from a light-kit made by another Cinema 4D user, and also uses an area light and area shadows.
An important step in the production of any animation in 3D space is texturing. Even using simple textures without bump maps or images has a big effect on the appearance of an image or clip. In my animation, I created a handful of materials for different objects, including reflective blue and green for the spheres, a luminous green for 20% of the smaller spheres, a matte black for the back of the lights, luminous white for the front and a reflective dark grey for the floor. Although the reflections on the floor are not obvious, the reflection accounts for the seamless floor effect. The reflections use a Fresnel filter, making surfaces more reflective when viewed at an angle, which is the way in which reflections occur in reality. This creates a noticeably more realistic-looking final image. The reflections are also slightly blurred, which is typical of coloured, reflective objects. Although Cinema is able to handle refraction, distortion and transparency, making realistic caustics possible, these effects can be very difficult to configure correctly. The material presets in the program do not include clear glass textures, and creating them by hand can be complex. Creating good textures is a sure route to a much more refined final product.
In order to animate the scene, keyframes were created for various parameters. These are very easy to create; simply move the the point on the timeline that you would like the keyframe to appear at, adjust the attribute to the desired values, and then click the Create keyframe button above the timeline or Ctrl + click the small circle to the left of the property name in the Attributes panel. The keyframe will show as a green square on the timeline if the affected object is selected in the Objects panel. This keyframe can be moved along the timeline and its values adjusted by overwriting the original. The interpolation between frames can also be adjusted using a drop-down menu in the Attributes panel when a keyframe has been selected. The default modes include spline, linear and step. The first gradually changes the property, letting it accelerate and decelerate smoothly. Linear interpolation changes the value by a set amount each frame, meaning moving objects, for example, instantly start and stop. The third option, step, doesn't interpolate the value, but rather changes it to the value of each keyframe as the keyframe is reached. This can be useful for more slide-show-esque animation or quickly moving objects out of shot. The program allows f-curves to be adjusted as well, giving the user very fine control over the motion, in particular, of an object over time. Keyframing and interpolation in Cinema 4D is very easy to become proficient with, and allows for a lot of control, but more preset curves could improve workflow. An example of this would be spline curves that only ease the animation at one end, as is available in CSS transitions on the web.
The camera objects allow the view of the scene to be animated and the projection changed. For example, the default projection is perspective, but isometric and other parallel projections exist too. This can be used to create a unique visual style, and one that has become considerably more popular in recent years. In order to create the camera movement shown in the animation, I created a null object and kept its location at (0, 0, 0). I then made the camera, now moved back from the scene, a child of the null. By rotating this null object I was able to rotate the camera around the centre of the scene. In order to be able to loop the animation later in After Effects, I had to use linear interpolation for these keyframes. Changing the settings for a camera is very easy to do, and can develop skills in composition of shots.