Category: Ben – Video for Web

Moonlit Wings – Final & Evaluation


Due to various technical and time limitations/difficulties, I have been unable to create Moonlit Wings as an interactive webcomic. I have however been able to create an effective simulation of what it could look like as an interactive executable. Regarding vector-based images, Adobe After Effects does not support vectors, so the images I made in Adobe Illustrator I had to convert to PNG.

Screen Shot 2017-06-28 at 12.19.31
An example of a vector based icon that I then had to convert into PNG

The finished product, representing what an interactive webcomic of Moonlit Wings could look like. If we are grading this on simply an interactive/animated version of the original webcomic, I’d call it a success.

Aesthetic Qualities 

I had designed the original webcomic around it’s use as an interactive piece, so everything worked well together. I just ripped the original assets from the comic and compiled them separately.

Screen Shot 2017-06-28 at 12.24.35

Screen Shot 2017-06-28 at 12.22.00
A plethora of different PNGs, ripped directly from the graphic narrative for use in animation

However, being so accurate to the original it inherits the same problems.

Again, the graphics were certainly the strongest part without a doubt. Like the vast majority of my work, I put a disproportionate amount of effort in when it comes to making things look visually appealing, and it’s only augmented by the use of animation. As far as the animation itself is concerned, it’s very simple and I feel that it mirrors the art style itself.

Technical Qualities

All of the animation was created using basic keyframes, and then smoothing them to provide more organic movement.

Screen Shot 2017-06-28 at 12.45.06

For the glowing elements of the animation, I simply overlayed a separate PNG and adjusted the opacity with keyframes. I used this effect on the radar, mast lights and red alert light.

Screen Shot 2017-06-28 at 13.22.34

All of the animated parts in the video are created using these simple techniques. Overall, I found the whole process simple but time consuming and tedious. In the end though I got the desired result.

The final animation was exported as H.264 in MP4 using Adobe Media Encoder, with the preset set to Youtube 1080p. Creating the animation in 30 fps HD gave it a silky smooth look and everything transitioned well. I was going to include some sound effects to really help immerse the viewer, but I ended up having no time at all.

Time Management & Workflow

Time management for this project was absolutely atrocious. I spent most of the time trying to learn Fungus, only to learn a few weeks before the end of the module that it wasn’t necessary and I was forced to use after effects instead. This basically rendered all the time I’d spent learning the basics of Fungus void completely, and given me little to no time at all to get back into the swing of After Effects.

It was a disaster and a huge panic, but I managed to get everything out on time. And I’m actually pretty satisfied with the result, there isn’t much more I think I could have done given the time I had.


At the end of the day, It’s a good concept. But that’s all it really is, a concept. If I were more competent at Fungus I probably could have created something interactive, but not nearly as to the same level of polish I achieved in After Effects.

I’m satisfied that it stays as true as possible to the original source material while adding some extra flair and immersion with the animations.


Web Animation Sequence Planning


Tall Story Studios has announced tat my graphic narrative concept has been selected to enter the next round of the competition.  As a result, I am required to turn my graphic narrative into an interactive web animation.

Web comics (animated or otherwise) have become increasingly popular over the years, with big names like VALVe and Blizzard choosing to expand their games with extra material in the form of online comics. Comics published on the internet also become widely available to far more people, as opposed traditional physical copies.


The visual style of the project will have be exactly the same as the original graphic narrative, as to not cause a disconnect between the two. This will be very simple to do as not only is the graphic style not complex to reproduce, I’ll be re-using a lot of the original assets and simply animating them.

Screen Shot 2017-05-03 at 09.38.09.png




For example, when the viewer opens this page they will see the bullets fly past the screen and the searchlight pan up and down over the page. Moving the mouse around on the page will also cause the aircraft to react, moving up and down and left-to-right depending on the location of the mouse on the page.


In this frame for example, the viewer could be able to mouse over certain objects and click on them. An example would be the radar flashing or the dials moving. The horizon outside could also gently sway left-to-right, helping give the effect of a ship at sea. Of course not all frames can have interactive elements, but all the frames will be animated to some degree.


In this scene, I would have to add something extra to enable the interactivity. There isn’t anything obvious to click on in this scene, so I’ll have to add switch or lever or sorts that turns on the spotlight. The red lights at the top could flash to make the scene feel less static.


The assets I’ll use will be straight out of the graphic narrative, with some converted/redrawn as vectors (as the client requests at least some vector images to be used).

I created the assets with animation in mind, as a result the individual elements are all divided into individual layers and alphas for easy customisability.  For a more in-depth look about the asset art style and asset creation, see this post here.

Legal and Ethical Considerations

When it comes to copyright, the contemporary issues apply. As far as I’m aware (since these are designs dating back to the 1930s) copyright/creative license does no apply to the vehicles used. I will however be refraining from using company names such as Grumman, Kure Kaigun Kosho, or Mitsubishi to avoid any complications, as these names/brands are still in active use today.

Ethical considerations are always an issue regarding media based on war. As I said, to avoid any racial/ethical issues, I will not be portraying any disrespectful/negative stereotyping or have one country superior over another, even if these things did occur in history. This is simply not to offend anyone or limit my target audience by ways of discrimination.

Animation Specification 

The setting of the graphic narrative takes place in the Pacific Ocean, 1942. Unsurprisingly that period of time (1941-1945) remains a relevant subject in the minds of the public, especially in America. The war in the Pacific Ocean has lead to countless game, film and novel adaptations, notably movies such as Pearl Harbour and Midway, and games such as Battlestations: Pacific and World of Warships. Both aspects of the Graphic Narrative, the historical setting and the medium, are popular with the public.

The Webcomic will be posted online, and contain interactive animated vector-based images, as per the clients request.

Web Animation Presentation



Introduction – Web Animation

This is a short presentation about Web Animation. I’m going to briefly cover the history of animation, different animation types and the different softwares you can use.

The Uses of Animation

We’ve all seen animated adverts on sites, they pop up everywhere. It’s a really effective way of getting a viewers attention, especially if everything on that page is particularly static or still, it stands out really well.

It’s also an effective way of getting as much in that box as possible, as these types of ads tend to alternate between texts to give you more information.

Brief History of Animation – Pt.1

Even though this isn’t animation per-se, its the first example of an attempt to capture movement and motion. This was made in the Paleolithic era nearly 2.6 million ago. The real animation came with this Phenakistoscope, created by Joseph Plateau in 1832.

Brief History of Animation – Pt.2

This is where animation starts to become more familiar to ones we know today. Though these two animations look very different and were made nearly 60 years apart from each-other, they both rely on the exact same principles; repeated drawings layered onto static backgrounds. This was the only way to create animation until the advent of computer art/animation in the 60’s.

Brief History of Animation – Pt.3

If you think about it, every single animation up to this point, nearly one and a half centuries of animation had been 2D, so imagine the impact that 3D  had on the animation industry. This piece here is called The Adventures of André and Wally B, and was one of the first 3D animated films ever produced. It was created by a company called The Graphics Group, who would later rebrand themselves as Pixar. 

This other image is a still from a short film also from Pixar called Piper, which I personally think is the most beautifully rendered animation yet. This is 30 years of technological progress you can see here.

The computer age didn’t leave 2D animation behind in the slightest. This last image is of Adobe Flash, one of many different programs you can use to create digital 2D animation.

The Science of Animation 

All animation, whatever the format or medium relies on frames, and it’s only because of this mechanism in our brain that we are able to experience these seemingly fluid movements. The higher the frames-per-second of course the more fluid the movement looks. Here you can see what a Phenakistoscope looks like when it’s spinning, and when seen through it’s view port.

A frametate is the one thing that has been consistent throughout the entire history of animation.

The Uses of Web Animation – Entertainment 

Animation since it’s conception has been used for entertainment, and it’s only been broadened with the internet. Here you can see a page from an animated comic. Like the animated adverts we discussed earlier, animation and movement catches your attention and can really emphasise certain things. This makes it perfect for use in comics and graphic novels.

The one on the right here is an example of an interactive graphic novel. Like the last it has animated elements, but this one allows of the viewer to interact directly with the elements on the page, clicking buttons and dragging objects using animation and effects.

The Uses of Web Animation – Advertisements 

If graphic narratives can be interactive, so can adverts. Interactive ads, when moused over, allow the viewer to play a “mini game” of sorts, something normally related to the product. An example of this is this advert for World of Tanks, that allows the viewer to choose an ammo type and a package for a tank.

The icons light up when you mouse over them like you’d expect normally. What ends up happening of course when you select an icon it takes you to the World of Tanks website.

The Uses of Web Animation – Interface Elements

Animation with interfaces is everywhere, and chances are most of the time you don’t even notice it. There is a saying, and it goes “If a UI designer does their job well, its like they’ve done nothing at all” This is the same for UI animation. It’s normally really subtle, like a slight shadow or change of colour when you mouse over an icon, or the way that a dropdown menu animates.

All these little things provide that little bit of extra information and help the viewer understand the UI easier.

Animation Formats 

Nearly all animated adverts you’ll see on the internet will be Gifs, because they can be loaded quickly, provided they are compressed appropriately. Most interactive adverts use .FLA, which is from Adobe Flash, and requires a Flash-player installed on the machine to view.

Web Animation Software

These different softwares each serve different purposes and for different formats, but they each enable an animation of sorts for the web. Flash, as we’ve discussed is the most common format for creating animated and interactive graphics.

Quicktime is able to provide something called Quicktime VR, which allows the viewing of panoramic photography in the browser, letting the viewer to interactively pan around an image.

Realplayer, though somewhat obsolete and outmoded, has similar capabilities to Flash and Quicktime and is still used. Realplayer allows the playback of videos from websites, and was used by the BBC until recently, though most sites now favour either Flash or HTML5 for video.


Graphic Narrative – Evaluation and Processes

My comic book was uploaded and it received some pretty nice feedback, mostly about the graphics, but honestly the graphics are the only generally engaging feature anyway.

General Personal Consensus


The graphics were certainly the strongest part without a doubt. Like the vast majority of my work, I put a disproportionate amount of effort in when it comes to making things look visually appealing, and it’s nice to see that people noticed and appreciated that with the feedback I got. Someone even said “As soon as I saw the cover, it reminded me of the old Marvel comics I used to read as a kid”. That’s not exactly the vibe I was going for but I’ll happily take it.


By far, the weakest part of the product. There’s no human characters, no dialogue and no emotion. I would have really liked to include a real human element into the comic, but various things stopped me from doing that. Partly me wanting to keep the age rating down, and mostly me being completely incompetent at drawing human characters.

I was aiming for a more artful approach if you will, trying to convey a story from just still images with zero speech what so ever, but because of that I felt that nothing that occurs in the comic has any particular weight or depth. It’s a shallow story, and it’s made even worse because of these faults.


Pacific Steel: Moonlit Wings is a success. At face value. What it lacks in depth, emotion, story telling ability, length and general setting it hopefully makes up for with the visual aspect.

I’m starting to see that’s a re-occurring theme with my work. Pretty graphics but no more than a hollow shell beneath.

Production Process

This module wasn’t without it’s difficulties. I’m really not a fan of drawing. So much not a fan of drawing that I decided to simply write my storyboard out with some descriptive writing, so at the very beginning I found the production process very difficult. It was hindered further by the fact that I decided to use Paint.NET, a program that I was very familiar with, and a program that isn’t available for me to use at college.

Concept and Planning 

The nature of Moonlit Wings was directly tied to my animation concept for Pacific Steel. And if really wish I hadn’t come up with an concept with such a mundane setting.

I really love history, but a lot of people really couldn’t care less, and it would be extremely hard to convince people through my work that history is engaging and exciting without disregarding historical facts. A benefit of using a historical setting however is that all the visual designs for characters, objects and vehicles have already been made for me. T


To save myself from the absolute torture that is drawing, I took a slightly sleazy but ultimately effective route. After contact with my tutor to confirm that this was okay to do, I decided to trace over 3D models. Some ripped from other games and some created by myself. This spared me a boatload of time, time that was rather limited.

I was able to manipulate these objects into suitable poses, perspectives and lighting conditions, and then simply trace over them in Paint.NET. For the ship and the aircraft I used models ported into a game called Garry’s Mod, and for the ship interior I modelled that myself with Cinema 4D.


The initial picture of a the model, ported from World of Warships


Final image created in Paint.NET


3D model of the bridge created with C4D


Final 3D Render


Ditto, final product


The simple technique of using layers to slowly draw and build up the image. The final results in around 5 or 6 layers for each object


I experimented with a few different graphic styles before settling with my chosen style. A more in-depth look at that can be found here. 

The style was easy to produce and visually effective.

The rest is simply various techniques in Paint.NET, then compiling the individual assets into the comic book panels that come together and compose Moonlit Wings.


The main issue (other than time and lack of talent) was inexperience. I’m not a writer nor have I ever produced anything like this before. The whole time I was just throwing things around to see what stuck, I didn’t really know what I wanted it to be up to the very end when I was started composing everything together,and by then it can be considered too late to change anything.

Creating the narrative was also very difficult. My initial idea was for Moonlit Wings was more in-depth, with human characters with interactions, dialogue, and personal motivations. After realising I couldn’t draw people, I couldn’t 3D model people, and couldn’t write a convincing conversation between two people I gave up on the idea.

Technical issues only came with Paint.NET’s limitations, mostly over having to create the art at a ridiculously high resolution so it wouldn’t look rough and blocky when displayed at normal resolutions.

Regarding time, to my surprise I actually finished 2 days early. In an ideal world that would have given me 2 days to fine-tine and add more stuff but that wouldn’t be the case. I couldn’t think of anything to improve on as I’d created it to the best of my ability.


The general feedback for Moonlit Wings was very good. I scored 5 across the board from 18 individuals for the most part, and tied for the lead as the highest rated product in the room. A few individuals just looked at the first page and instantly gave me a 5 star rating, which was flattering, though very strange.

From these results once could assume that the product would be commercially viable. Though the pool of people for the feedback was quite small, and generally all share similar likes and dislikes when it comes to media. A more in-depth collection of feedback can be found here. Unfortunately, at the time I created that survey I was too deep in development to make any changes based on the feedback I gathered.

I’ve heard from someone, and I totally agree with this, is that it’s very generic. It’s nothing that hasn’t been done in one form or another before, and I’ve been really struggling to find ways of making it unique, original and ultimately more interesting. I refer back to my previous statement; “I really love history, but a lot of people really couldn’t care less, and it would be extremely hard to convince people through my work that history is engaging and exciting without disregarding historical facts”

Others say (again I totally agree) that the scenes jump too far forward, and often too fast to create a cohesive narrative. I should have added interim panels to help ease the visual flow, and given more time I certainly would have.


Through this ordeal though, I have found various new skills with Paint.NET and Cinema 4D, and learned that I can avoid drawing anything if I try hard enough. In the end I’ll have to say that, though I am disappointed in a few areas, I surprised myself and achieved my intentions.



Graphic Narrative – Various Considerations


Luckily for me, I have all the resources I need to start production on my graphic narrative. However, if I were to take a more professional approach to this, I would considering acquiring the following;

  • WACOM Intuos “7 graphics tablet – £57.00
  • Adobe Photoshop/Illustrator – £191.00

This would allow me to create more professional seeming artwork for the comic, as opposed to using standard mouse and Paint.NET.

Audience/Target Market

Pacific Steel aims to take advantage over what is currently popular in the media markets.

The setting of Pacific Steel takes place in the Pacific Ocean, 1941. Unsurprisingly that period of time (1941-1945) remains a relevant subject in the minds of the public, especially in America. The war in the Pacific Ocean has lead to countless game, film and novel adaptations, notably;

Midway (1976) (43.2 million USD)


Pearl Harbour (2001) 449.2 million USD


And an upcoming film ‘Greyhound’, in which Tom Hanks plays the role of a Destroyer captain in the Pacific Ocean.

This era of history is hardly restricted to adaptations in film, however-

War Stories (Sales data unknown, but it must have been good to warrant 4 series and 11 issues)


Considering the successes of these older films, and how currently popular titles such as World of Warships are, it’s clear to see that Pacific Steel could follow the chain of success. Especially when it’s presented in the incredibly popular comic book medium.


Comic book sales are on the rise, and look to be come increasingly popular in the future due to the immense popularity of superhero movie genre.


Should the worst happen and I’m unable to draw up the artwork for the comic in time, I will use the ported 3D models I’ve been using as reference images and use various post-processing effects in Paint.NET and apply a toon shader to them. This is a very quick way of getting the desired comic-book effect, but doesn’t look nearly as good as the hand-drawn method.

Post Production/Delivery 

My graphic narrative will be delivered digitally, accessed through the Pacific Steel website, where the game is also situated. Putting the comic book online ensures that everyone who has access to the game Pacific Steel, will also have access to the comic book series. Many incredibly popular games such as Team Fortress 2 and Overwatch have a running online comic book series.

Releasing online also removes extra costs associated with physical materials, printing and transportation.


Both aspects of Pacific Steel, the historical setting and comic book medium, are incredibly popular with the public. Taking the action and stories that happened throughout World War II, and combining it with the release of a mobile game (see market research here)  I feel that Pacific Steel will appeal to people of all ages and interests. More importantly, creating Pacific Steel for a comic book will allow for as much consumer exposure as possible. With this information, I could produce Pacific Steel knowing that it has the best chance of being a success.


Pacific Steel – Graphic Narrative Proposal


Pacific Steel is a game set in the pacific ocean, 1942. The United States Navy (USN) and the Imperial Japanese Navy (IJN) are fighting for control of various islands in the pacific.

The graphic narrative for Pacific Steel is a short comic book aims to encapsulate but a small portion of the struggle for naval supremacy at that time. The brief blurb of the comic book would go like this;

“It’s the dead of night, 1942. A lone American patrol boat, USS Erie quietly patrols the shores off a top-secret naval base in the pacific ocean. Suddenly, out of the night appear two silhouetted shapes, familiar shapes. Are they friend? Or are they foe?”

To get the whole story, you can read my storyboard here.

The narrative is more about setting an atmosphere, action and artistic style, than any real story/plot. It’s designed to be a running series, with “TO BE CONTINUED” being the last panel.


This graphic narrative plans to provide Tall Boy Studios with it’s proposed “Online graphic-narrative series” that complements the release of the mobile game of the same name. Pacific Steel, both the game and comic book series takes place in a time period and location that is widely popular and recognisable with the public, the Pacific Theatre of the 1940’s.

The narrative will be both visually engaging and action-packed as America and Japan fight for supremacy on a variety of different military fronts. The narrative will be split up into separate “chapters” depicting different, historically accurate scenarios. Each chapter lasting 3 comics each.


More detail on Legal/Ethical constraints can be found here.

The assets/panels will be drawn using Paint.NET, using very simple techniques. I will then compose all the assets and environments into various “sheets” and present them in a comic book style panel setup.

Copyright constraints aren’t particularly an issue regarding games based around history, as all of the designs/schematics and blueprints are now open to use by the public for educational purposes. Ethical issues however, are an issue.

To avoid any ethical/racial issues, I will not be portraying any disrespectful/negative stereotyping or have one country superior over another, even if these things did occur in history. For example, I won’t be portraying the IJN using kamikaze/suicidal tactics. The main reason I chose the year 1942 was a period where the IJN and USN were on (mostly) equal footings, and the kamikaze had not been developed.

Visual Design

The overall design/aesthetic is traditional of your typical comic book. The style of bold shadows/lighting is present throughout almost all comic books. Part of the reason for this might be simply that the style is quicker and easier to do, but it also lends a far more dramatic and sharper feel to the scenes.

This style is also, massively popular with comic books. Every major comic book uses this style, so it’s clearly effective. The actual designs of the assets are all historical, so they will resemble their real-life counterparts are much as possible whilst keeping within the chosen art style.

Look and Feel/Technical Specifications 

Here is a fantastic example of the sort of style I would love to emulate, depicting a similar scene/setting to my own comic. The striking dark shadows really make the scene seem more dramatic and harsh. The effect of the scene wouldn’t be as potent if a softer art style was used.


I will adopt a similar, though far less detailed technique to achieve an exciting and dramatic look for my graphic narrative.


Here is a quick test I did to see if I could pull of this style. I did, to an extent. It’s far from perfect, but it was relatively easy to make.  Not only did this style take less layers, time and effort to make that I thought, I reckon it resembles the comic book style well enough.

Legal and Ethical Considerations 

When it comes to copyright, the normal issues apply. As far as I’m aware (since these are designs dating back to the 1930s) copyright/creative license does no apply to the vehicles used. I will however be refraining from using company names such as Grumman, Kure Kaigun Kosho, or Mitsubishi to avoid any complications, as these names/brands are still in active use today.

Ethical considerations are always an issue regarding games based on war. As I said, to avoid any racial/ethical issues, I will not be portraying any disrespectful/negative stereotyping or have one country superior over another, even if these things did occur in history.This is simply not to offend anyone or limit my target audience by ways of discrimination.

Target Audience/PEGI

As documented in Look and Feel/Technical Specifications and in  Graphic Narrative –  Style Considerations, my art style will be the essential action comic-book style. The graphic narrative won’t feature any blood, gore, sexual themes or even any human characters.

After researching PEGI’s rating criteria, I can say that Pacific Steel will fall under the PEGI 7 rating.


Any game that would normally be rated at 3 but contains some possibly frightening scenes or sounds may be considered suitable in this category.

Pacific Steel might be considered PEGI 3, were it not for the requirement of; “The child should not be able to associate the character on the screen with real life characters, they should be totally fantasy” Pacific steel is a fantasy/fictional story, but it’s themes and visuals are based on historical fact.


The end result will be a short digital comic book, showcasing a brief encounter between opposing American and Japanese forces in the pacific ocean.