Category Archives: Ben

Web animation for interactive media: Task 3

Here is my finished vector based project for web design:



This animation was created in after effects as a demonstration of what a functional website would look like based on my pre-production and planning, all of the assets were made previously used for my graphic narrative, so not much creative effort was needed to create this project, since the old assets served their purpose.

My goal was to have an interactive website where the user can explore the different elements within the games story, with each page/slide having its own distinct theme and feel, while making it easy to access and navigate.

Although I think the end product is suitable, I think that more could have been done to make it more animated and lively, the buttons light up as you interact with them, however, you are greeted by still images when you visit each page, perhaps the the various creatures on display and their backgrounds could have been made to move around in order to make visiting the website more engaging and exciting.



Creating this in after effects required A few extra assets on top of the ones I already had in order to make it interactive. Firstly, a mouse cursor from Google, since you cannot screenshot your own mouse on mac.

Image result for mouse cursor

I also wanted some sort of highlight to make sure that the user knows they have a clickable item selected that can take them somewhere, I took the original image from my graphic narrative:


And added some glow effect to them in Photoshop, and placed them over the original items in after effects to give off the illusion that something is being highlighted, when it is actually a different image entirely.

swirly not highlightedswirly highligted

I then wanted some sort of left and right arrows, to make the website navigable in a slide show style, so I created these arrows in Photoshop with the “Custom Shape Tool”


I then added my original asssets from my graphic narrative, that would be reachable by clicking one of the symbols on the main menu. to the them to both sides of each slide, adding a navigational tool for people to explore each slide.

fire transition

To create the transition from each slide, I then took a box of each color, orange, blue, green, and grey, and had them mask the entire after effects project using scaling opacity, when the opacity of the box reached 100%, It would then remove the previous image, and introduce the next one.



I then used the appropriate colours to have a transition from each slide.








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.

Narrative Structure

The aim was to create a simple, open narrative that is easy to understand, that can co-exist with a video game set in the same universe alongside it. A simple flashback at the very beginning explains to the audience that it was a big bang that created these violent and unstable creatures. Aside from this flashback, every event in the narrative takes place at the same time from each element’s perspective, with each element’s story moving forward chronologically. The main focus of my graphic narrative was to represent the 4 different playable elements within the game, along with their own unique personality traits and habitats, as well as their never-ending violent conflict with each other fighting for territory. I think that each image has made it clear to the audience that these 4 chaotic races are at war with each other.

Image Construction

In order to create a vibrant, colourful,  and simple style for my graphic narrative, I have created each image using very basic primary and secondary colours. I have used simple pencil tool shapes to create various objects, either being a piece of a character or environment. I chose to add small yellow text boxes to each image, creating a comic-strip cartoon type feel to each image. I have kept the text minimal however, to maintain emphasis on the images themselves. Since the images are quite simple, I do not think that much text is required for the audience to understand what is going on. For each image of the different elements, I have included the text boxes in order to be consistent with the rest of the graphic narrative, but I have only used them as labels for each element tucked away in the corner of each image.

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.