Category Archives: Ben

Task 2: Plan a Web Animation Sequence


For this task, I will create an interactive animation based on the graphic narrative I created for Unit 55: Graphic Narrative. Based on the way my graphic narrative was presented, I think the best course of action would be to layout the animation sequence in a comic book style, with each frame of the comic dedicated to each part of the narrative as it was before. This will be a time efficient way to create a web animation with existing assets, which can also be improved for the sake of the animation if necessary.

Here is a mind map of some of my ideas, the blog post will go into greater detail from the ideas presented here:


There are a few options for presenting my graphic narrative, here are a few options that I have thought about:

  • Have a web page dedicated to each type of element, water, earth, air, fire
  • Have 1 web page layed out in a comic strip, with each framed dedicated to each element
  • Have a powerpoint-styled sequence where the user can click a button to change the element displayed on screen
  • Have all 4 elements on one long horizontal strip that the user can scroll through to view each one

Having explored these options, I personally think that the best option is to have a single page with a vertical comic strip that can be scrolled down so the user can view each element in the narrative.

Animating the Graphic Narrative

To go about animating the existing assets for my web page, I think it would be best to look at each scene and how I could animate each one in order to bring it to life.



Firstly, the volcanoes in the background could be made to erupt or simply emit smoke, while also having lava trickle down, I think the background of this image could also use a bit more detail in order to include more animation to make the scene more lively. I would like to attempt to make the fiery elemental creature surge onto the screen, or have the environment scroll across, revealing the creature. I would also like to give the creature some sort of idle animation while he is visibly, so he is not completely static. Either his arms could move, his body could flicker like a flame, or the two flames in either of his hands could be created by him by having some sort of ignite or explosion effect to make them appear.



I would like the water world to have more activity running through it, like some fish or bubbles moving through the background, For the creature, I would like to find some kind of way to make his body bubble or ripple, something to make it more supernatural and less static. I would also like to make the creature’s armor move in some way, perhaps by pulsating.



This frame will be the most static and peaceful out of each one, but I would still like to animate the creature in the frame to some degree, either by having him jump, walk, or roll into the scene.



I will probably revise the background for this scene, since I am not entirely happy with it, making it the only existing asset I will not be using. To animate the creature, I think it would be a good idea to have it materialise by several pieces coming together to create it. I would then have a windy, chaotic background to match.

Hopefully, all of these ideas will be easily feasible through vector animation on a software such as Adobe After Effects. The goal is to make sure that each animation reflects the personality of each element. Fire should be chaotic and intense, while earth should be more calm and sluggish.


The animation will need to have some sort of interactive quality to it, my goal is to create a unique way to interact with each frame, for example, the fire scene might have a volcano that will erupt if you click on it, or the water scene could have fish that react to your mouse cursor. Hopefully this should allow for a more engaging and dense website with some explorable depth for the viewers to interact with.

Legal and ethical

Briefly, I do not think there are any immediate legal or ethical concerns that require attention. All of the assets here have been created by me, and it is difficult to identify a way in which these fictional environments and creatures could possibly offend anybody, since there are not any human characters, and no historical events in human history that some people may find offensive. The kind of fictional universe I have created only contains cartoon violence,  none of the themes here should cause any controversy.

Pre-Production Conclusion

If all goes to plan, then this website should be an animated, interactive, narrative using the original assets from unit 55 that can be tweaked to add more detail and look more aesthetically pleasing, with a vibrant and varied colour palette, and decent looking cartoonish graphics.



Unit 65: Task 1 – Understand uses and principals of web animation

Here is my presentation for unit 65: Task 1 – Understand uses and principals of web animation

web animation presentation


Slide 1- Intro

Slide 2 – Talking about how animation is used in web design and showing exmaples

Slide 3 – Quickly showing some examples of animation in web design, different examples such as banner ads and logos

Slide 4 – Showing the evolution and history of animation and talking briefly about each one, how most efficient animation methods are now digital

Slide 5 – Explaining vector animation and comparing it to pixel animation

Slide 6 – Talking about compression, why its important to reduce file size, and methods of compression

Slide 7 – Web animation softwares, talking about the features, advantages and disadvantages of each

Slide 8- Talking about web animation players, where they can be found, advantages and disadvantages of each

Graphic Narrative Evaluation


My Pitch presentation can be found here: graphic-narrative-presentation

The following is an evaluation of my graphic narrative based on my game idea: The Living Realms.

The idea behind this graphic narrative was to take the elemental creatures that you often find in a generic fantasy setting, and make them the main characters of the graphic narrative. The aim was to pitch a cartoony, vibrant and colourful idea for a graphic novel with fire, water, earth, and air all clashing in spectacular graphic battles as you get to know the various characters and elements in the universe alongside playing the game.

Creation process

The entirety of the graphic narrative was created within Adobe Photoshop using the pen, pencil, and brush tool, along with a few effects and gradients. Here is an example of one of my characters and the creation process behind him.

This is one of the basic shapes I created using the pencil tool


I then duplicated these shapes to create a shell for my character that started to resemble some sort of body


I then used the brush tool with diffuse and a lowered opacity , the fill tool, and Gaussian blur. I also positioned the layers accordingly to make the individual plates resemble some sort of armour or outer shell for my character, here is the final result.


However, this is not the only method I used to create my characters, another method I used was to create them in Cinema 4D first for the animation task, and then trace around them in Photoshop to recreate them in a cartoony way that better suits the art style of the graphic narrative.

Cinema 4d Character


Graphic narrative character



I think that both of these production techniques worked well as they created the cartoony-looking characters I wanted without either of them looking too out of place either with the other characters or the environment.The actual production process was not too challenging as Photoshop was my main means of production, which I am quite familiar with, I was also able to work on the project from home, which helped me to manage my time much better, and allowed me to continue working while ill, which certainly produced a better result. I managed to create a product that I am satisfied with a several days to spare, so I think that I managed my time well.

Overall I think that the production process went well, although if I had dedicated more time to learning the software even further and advancing my skills, I could have created an even better product. For example, one of the things I struggled with the most while creating the narrative were the environments , more specifically the water city that I created, I am satisfied with the characters I have created, but I feel like I should have dedicated more time into creating more visually appealing backgrounds.

Pitch Presentation

When it came the pitch, I wanted to make the earth, air, water, and fire concept clear to the client as well as the characteristics that each element personified, since I don’t really have any named characters. I also wanted to make my intentions clear; the graphic novel was intended to be a narrative alongside a game release. The idea was to create a novel that helps establish the games universe and characters so that the game itself can be more focused on the mechanics and gameplay, while the novel can help add more story and depth to the games fantasy and universe. When the time came to actually pitch my idea, my powerpoint file was corrupted on Google drive, so my presentation was delayed, I did not think to back up the file since I had never lost a powerpoint document before, although I may have been able to save time and effort if I had a backup plan. I also think this error worked in my favour too though, since the extra time allowed me to make a better, more in depth powerpoint that was much better than the first.

I explained to the audience that I wanted to use this graphic narrative as a bonus feature of purchasing the proposed game. I think this is a viable commercial strategy as it is common practice in a modern games industry to add some bonus content to a product for an extra amount of money. Collectors edition products usually contain little extras such as statues, figures, posters, soundtracks, books or novels, and behind the scenes content.

Overall I think that the presentation was well received. A few of my peers told me that it made sense and I managed to hold their attention without rambling on for too long, and everybody that gave me peer review seemed to understand the concept well. While I feel like I did a good job of conveying the concept, characteristics, and story to the audience, I think that my presentation lacked some depth as I forgot a few details like market research and expanding on my choice of target audience, I could have also elaborated on my inspirations for this product. This would have allowed me to further project my ambition and goals when it came to the novel I was trying to create, so even if my concept is understood and well received, my goals when it comes to marketing and creating a profitable product were not, since they were not made clear.





PRE PRODUCTION for 3D animation, working to a brief, and graphic narrative

Here is the proposal for my game idea for the 3D animation unit, as well as working to a brief task 2 and Idea generation and concept development. Inside you will find gameplay ideas, legal and ethical concerns/sensitivities, the storyboard, concept art, target audience, and mood board:


And here is the budget and production schedule:



And here are a few initial brainstorm ideas that I had early on:


The first one was later scrapped for a newer one:


Which was then replaced by the finished brainstorm of the idea that I was happy with:


Inspiration from the MMO genre (Massive Multiplayer Online)

For my game idea, I want to create a massive open world area that encourages player vs player combat. The reason I want to create a game in this style is some of the games that I have played have this open world combat feature, which can create some hilarious and unique moments in your gameplay experience. Another advantage of the open world in a competitive player vs player game is that due to the large scope of the world, you will often fight in a lot of different places, as opposed to just fighting in a few different arenas like most multiplayer experiences have you do. Not only does this mean that you will not likely fight in the same place often (unless you choose to), but it also means you can discover new areas and a lot of interesting conflicts over certain areas can be made.


Red Dead Redemption


This game has a multiplayer free roam element to it that allows players to explore the game world as they please, there are a few objectives around the zones to do that can be done solo but are worth teaming up for too, however, the players can also attack each other, and killing another player gives you a small amount of experience you can use to level up. Players having this ability can create some very intense, fun, and comical moments and players have formed rival gangs to fight each other in the free roam world. This also adds a sense of danger and threat that I think that any MMO should have, it also gives incentive for players to interact with each other, either to team up or kill one another.

World Of Warcraft


This game has 2 different factions to choose from when you create your character, these two enemy factions will be able to attack one another if they encounter each other out in the world. This sort of open world player vs player combat can be a lot of fun, (on the winning side) and offers a large part of replay-able PVP in a huge variety of different zones.

Why these games inspire me

The reason I chose to use these two examples is that they are both games that I have personally got a lot of enjoyment from in terms of open world player vs player combat, so I think it would be good to put my focus into creating a game that I would very much enjoy myself.

Available Resources

Everything that I need should be readily available to me at all times, fortunately, most of the resources I need are accessible from a computer, either at home or college. But I may also need headphones to watch tutorials and expand my knowledge on the software that I will be using, as well as a USB to store my work on.

Contingency plans

There are a few measures I will take to help make sure that the production of this project goes smoothly. Firstly, I will make sure that all of the software available at college such as Cinema 4D, Adobe after effects, and Photoshop are also accessible at home in case time grows short or for some reason I cannot make it to college. Hopefully this will make sure that I can finish the project in time, it also allows me to manage my time more efficiently since I will easily be able to work any time it feels necessary. I will also make sure to have a backup USB or another place to store my work, just in case it gets lost or corrupted. I will also save multiple copies of my work, this will mean if I mess something up and cannot undo the problem for whatever reason, I can easily access an older version of my work.

Health and Safety

There are a few health and safety concerns that must be addressed while creating these 3D environments and graphic narratives. First and foremost, exposure to a computer screen for long periods of time can strain the eyes and cause headaches, It is recommended to take a 15 minute break every hour. Sitting up straight is also another important issue since slouching can damage your posture. Another concern would be to make sure you keep liquid/water away from the computer, not only can it be dangerous if it spills, but it can also disrupt work if the computer breaks.

Concept art – characters

water elemental fixed.png





Game idea – Year two mind map

Here are a couple of mind maps for game ideas, here is the first idea:





and this is my second idea, that i vastly prefer to the first, as it is much simpler and sounds a lot more fun in my opinion, with less focus on story and more focus on gameplay.  This will likely be my final idea and the one i settle with.



2D Starcraft Trailer Evaluation

I have finished my 2D trailer and have now presented it to my peers in the classroom.  After the presentation, my peers shared their opinions on the strengths, and weaknesses of my animation, and how it would compare to industry standards. I have five sheets from peers that have shared their opinions on my animation. The average rating for my animation overall was a 7.5 out of ten. Overall the reception of the trailer was better than I expected, as I wasn’t expecting to create an animation of high quality due to time constraints and lack of experience with after effects. Looking through all of the sheets, here are the most common points that seem to present themselves the most.

What are the strengths?

  • The sounds enhance the trailer, and carried it well
  • The animation goes well with the live action footage, there is a nice transition in the live action scene
  • The effects are cool and they suit the genre.
  • The music was excellent and timed with the end title well.
  • This animation was well presented and the theme and story behind it was interesting throughout

What are the weaknesses?

  • The sound is too sudden in some places, and could be unexpected or make people jump
  • Graphics on some of the assets are blurry, resized, and inconsistent in their graphical style.
  • The animation has several white flashes which could be inappropriate to watch for any viewers with epilepsy

How could they have improved ?

  • The length of the transitions could have been shortened to save time
  • I should darken the flashes to make the trailer more suitable for viewers with epilepsy or at least add on a warning at the start of the trailer.
  • Create higher resolution assets that look less blurry and distorted.
  • Could have better volume control and timing of animation segments. (shorten length of transitions)

These are all of the main points that have been raised by my peers. I am glad that some of these have appeared, as there are a lot of strengths and weaknesses that I did not notice myself when creating the trailer. This feedback has really allowed me to see problems that were invisible to me despite watching it back several times.

The fact that the sounds were praised was a surprise to me as I had no idea they would be received so well, since they were created by recording simple noises that can easily be created around the household. I also didn’t think that the presentation and context would be received as well by the audience either. I always knew that I wanted my trailer to be more of a story based teaser than a gameplay focused trailer. Unfortunately I planned to do more with this and could have possibly improved the trailer even further, I wanted to have more live action scenes in which the three races are amassing their forces and preparing for battle. I didn’t get to add this in the end however, as when I put my finished compositions together, the end result was a minute long and too long to extend, I also wanted visually appealing scenes to take priority over scenes that could have seemed a bit inactive and more boring to look at.

Most of the negatives that were brought up I had no idea about, apart from some of the blurry graphics, by the time I saw this as a problem, I didn’t have time to change it though, so I just had to create the best animation possible with the time and assets that I had. Since this was one of the most common criticisms of my animation, I will make sure that I get the resolution correct and make sure things are resized properly when it comes to future endeavours with Photoshop. I did not think that the flashing white lights would be a problem at the time, it just never occurred to me. So it is fortunate that people have pointed it out so that I can remember to include it if necessary in the future. Volume is another key criticism, which I will make sure that I control the volume better in the future by lowering the decibels in audacity.

I am happy with the outcome of this assessment as I know that all of the criticisms of the trailer can be easily fixed, I am glad that my peers would consider this worthy of industry standard if I improved and fixed it in some places.