[DAY 18] [DEVELOPMENT] Completing the Comic (Overview)

With everything added and sorted on the comic, I'm very happy with how it all turned out. Not only has it been a hard job, but it was nice to see it all completed in the end, and all ready for people to go through it and read it. I have tested the comic on many people who were willing to go through it and really see it for themselves. I asked for their opinion and what they would like to improve it. (Which will be explained in each section.)
I will go through each and every piece of the comic, from the Menu page down to the last options of the comic itself, because I think it all deserves an update of how things progressed and how they work.

----------------------------------------------------------------------

The Menu

Originally, the start of the comic (or the menu in this case) was just going to consist of a 'Play' button and a loading screen, where you can just straight read through the comic, with no extras as such. Instead, I added life to the comic, adding options where you can browse through character descriptions and details of how the story came to be. As said before, the way the links are presented was inspired by website layouts, and how they attract people to click on them, because of their animations. However, the loading bar which I really wanted to include was taken out of the plan all together. Because I had the bulk of the comic finished already, I felt that it would have been silly to replace a bunch of coding to a page above or such so that I could fit the loading page in. (I'm very disappointed it never came to be.)

The background was really inspired by game Menu's, and how they use gorgeous animations to softly grasp the players eyes, and make them feel like they should explore more (unfortunately the animation isn't interactive, but it would have been nice to be able to click on it and it maybe stop glowing and such).

  

Character Description Overview;

With this page, I wanted the layout to be as simple as possible, because a lot of distractions and animation happens in the comic itself, so it's more of a breather. The black and white links on the side, naming each individual character, are the links to the information, which pops up when ever you select them (hovering over these links turns them the opposite colour). When clicked, an animation of the character appears, as does a wall of text, giving you detailed information about the character and how they are in the real world.
The most common feedback I had for this was that the layout was not to peoples tastes, it was very 'slap dash' and really needed a bit more detail to it. However, people complimented the animation of each character popping up on each page, illustrating who they are with their description. (I realise I should also state the person's name, whom you're reading about.)
This page actually had more meaning to it, like the 'Story Description' page I'm going to go through in a moment, I was going to do voice overs for the text, making it more fun to read. Unfortunately, it couldn't be done because of the lack of working equipment and time.

 

Story Summery Overview;

Unlike the 'Character Description', the Story Summery page really has quite a lot of text on it, which people complimented that there wasn't much on there in the first place, making it seem like a digital story they were browsing through. Originally, I was also going to do a voice over for this as well, but all failed and it was never added. 

I think having this page is a great idea, because people would be quite confused as to how Huppel, the main protagonist, found herself dead and walking through Death's lair. In my opinion, back story is key to having a great base for something. Having no back story never really explains a characters reason for being who they are or why they're in the position they are in the first place. It's all so complicated, and a lot of research is involved for it, but very worth the aggravation.

The page is simplistic, however they layout is different, and very broad, making the text more spread out on the page for the reader to gaze through, and get a great grip on how this story came to be. I found it hard to actually think of something for the 'Present Day' link without actually spoiling the story for the people who haven't read the comic already. What I did instead was link that link to the comic itself, starting the comic and heading into the then and there moment of the story.

  

----------------------------------------------------------------------

The Comic

Extremely intimidating this comic seemed when I first approached the idea of it, but I was out there and willing to go through it to see the final outcome. There was so much I left out, and many things were left untold, which I wish I had added in. However, I could not find the time to complete them, so found alternatives to make the story still make sense, not trailing off to the ends of the earth not explaining itself. In total, there is 128 images which were added into the comic, however all are sketches and quick colouring to manipulate the style of Nawlz, one of the most inspiring interactive comics.
One of the biggest flaws people complained about was the 'Continue' button, which near enough appears on every page you see. I found that people were more attracted to moving images, and animated titles then pressing continue frequently to progress further and further into the story. (I added the 'Continue' button so that the reader wouldn't get lost from what was happening in the story. However, they did the opposite effect and was wanted out of the comic so that more story could flow in to them.)
I have learned a lot from designing this comic, my drawing ability has increased, and I feel that anatomy has improved. I did a few sketches before I did the comic, teaching myself techniques to be able to quickly throw perfect sketches onto the spot, rather then spending time fleshing out a character, and adding detail.

  

The Coding Overview;
I think I would like to go over this one quickly. Unfortunately, the coding which enabled the comic to determine your fate, depending on what you have pressed, was not included into the final piece.
The linking between pages, and finding a way for the coding to work inside scenes was quite impossible. Even trying to make the link work on the main timeline really messed up with other coding which fell inside the symbols on each frame, making it difficult to work with. 
What I shall do for the future is look up a way to make this work, so that some day in the future, I shall go back to this comic and include this feature into the comic. I feel this will make the comic much more interesting to 'play', and you will learn about the characters quirks and availabilities. (Even though there's only 4 choices and one main choice, it all really effects your gameplay in many more ways then you can imagine. I have added in the extras so that when something does happen, you shall see that event happen no matter what.)


The Choices Overview;
The choices were peoples favourite part to view. The amount of enjoyment I see on peoples faces as they click through the available choices and letting it determine their outcome. The idea of choices is to get attached to what the character is thinking, or what is happening in a scene, therefore, making it quite shocking when something bad happens to the protagonist. 
There are only three choices which you can choose from, they also occur randomly as the story progresses, so it doesn't give you time to think about what you are going to do next. I coloured these links in a light-ish green to match the text which appears in speech bubbles (the speech bubbles and text, they flicker and appear onto the screen). There are a few hints in the comic where it tells you, remotely, how to beat Death and his trickery. I made this subtle because I thought, if the coding was to work, people would get the good ending straight away. That's not what I wanted. In fact, I wanted the player to go back and play it again to see the different scenes that they can come up with; There are three to choose from, after all!

  

Final Scene Overview;
Unfortunately for the final scene, it doesn't really happen as I want it to. Because of the coding not working, I was forced to scrap two endings which were going to happen at the end of the comic. Instead, are just there for show if any one was ever to look at the flash file I made. I'm really disappointed but slightly happy about how the drawn outcomes came to be. I really like the angles and the plot twists which I placed into the comic itself, it's really satisfying to see it has a finish, rather then it being no work at all.
For the endings, I chose to do 4 different outcomes (Unfortunately, you will only be able to see two of them). These 4 outcomes consists of two wins and two failures depending on how well you did in the comic, determines your fate.
At the end, people were thrown at the part where you had to either choose the sword or the fathers hand. So I labelled them and made the options glow. I'm very happy with how I came to do this, because instead of strips of writing, like the other choices, you get to click on the comic itself, which I found my self really chuffed with after I learned how to do selections on images.

  

----------------------------------------------------------------------

If you would like to see my comic, you can click here to view it and voice your own opinions.

[DAY 17] [DEVELOPMENT AND RESEARCH] Loading Bar for Comic

I thought what would be different and convenient for readers would be a loading bar. What a loading bar does is pre-loads the file so that there's no glitches or inconveniences when the person is going through a flash product, or reading through it in my case. I'm unable to say that is loading bar will be added, as I never really thought this through when I reached half of my comic and most of it was coded and connected to certain pages, but I thought I'd work with it and see whether I could make it work.
I wanted to add this loading bar at the start of the comic, where the reader would have to wait for the comic to load properly. Very glad to find a tutorial which explains and shows you how to really set out a loading bar, and how much help it is for the person viewing the file (it even gifted the coding which I spent trying to understand so that I can include it). No one likes to wait around for a file to load.

Quick look at the coding.

Thank you, Kirupa.

----------------------------------------------------------

(This part shows you how much is loaded of the file.)
bytes_loaded = Math.round(this.getBytesLoaded());


(This part shows you how much in total will be loaded.)
bytes_total = Math.round(this.getBytesTotal());


(This part is where a division is made, between 100 and what ever is left of the file to load.)
getPercent = bytes_loaded/bytes_total;


(This part determines the width of your loading bar and times it by 100.)
this.loadBar._width = getPercent*100;


(This part targets the text box this coding will work with when you connect it. Telling the viewer it's 100% done.)
this.loadText = Math.round(getPercent*100)+"%";


(This part commands the clip to play the file after the loading is complete.)
if (bytes_loaded == bytes_total) {
this.gotoAndPlay(3);
}

----------------------------------------------------------

If I did this, the comic would feel more professional, and would show that I have truly thought about the reader, specially if they have a rubbish connection on their internet, they don't want to be interrupted by the long wait, stuck on a page they have been on for ages really isn't fair to them. Pre-loading is the best possible way to express the full potential of a file, at least.

Here are some small concept sketches of how I would like
the loading bar to look like, and where the percentage would
sit around the image.

[DAY 16] [DEVELOPMENT] Considering the Coding for the Choices

How the comic is going to work is with choices; Choices determine what your ending will be on the comic. I wanted this comic to be a multiple choice comic because it gives you more of a wide range of options that will encourage you to fight for an ending you truly desire. Information will be given to help you combat your thinking and really push towards something you deserve.
So, I wanted to construct a code which helps me devise a system that helps this out. That would mean giving variables to a number, and what ever number you accumulate by the end goes towards the ending which you have made happen. When something good happens, you gain a number, and when something bad happens, nothing is given to you.

With help, a coding was made so that each time you click "Choice One" on this Flash file, it would add one to the score, until the ending which tells you that you have finished.






To show that the choice count is working, it adds '1' to the score above the buttons, and sends a message to me on the flash file, saying that '1' has been added to the remaining total (This is called tracing).

Quick look at the Coding.

Thank you, Mike.

----------------------------------------------------------------

stop(); (This is used to stop the frame from continuing to the next.)
var playerWin = 0; (If the player clicks the right button, it passes on to the next frame.)
_root.onEnterFrame = function (){
_root.choice1.onRelease = function () {
playerWin +=1;
trace(playerWin);
}
if (playerWin >= 2) {
_root.gotoAndPlay(2);
trace ("did work");
}
(This coding here traces that if the person clicks the wrong button all together, the variable of '1' is not added to the total, and you carry on with nothing.)
//else {
//trace ("Didn't work");
//}
}

----------------------------------------------------------------

[DAY 15] [DEVELOPMENT] Structuring the Comic in Flash

For each stage of the comic, I will be labelling and commenting on each frame so I can make the comic as professional as possible. By doing this, I will be able to navigate the pages perfectly, knowing what each and every stage does and what it will mean for the reader/player.
I took the simple point and click approach; pressing continue, selecting what you want to do for the next sequence. This is because, as each stage is animated and appears on the users screen, it's just a one image flick through. Having too many selections, or too many panels, would ruin its tradition, and some what make the comic harder to read through.

Main Menu

Here is the current title screen. At the moment, it isn't much to look at, but what is visible is the availability this menu gives. Easy to read, easy to flick through, and very kind to the eyes. I took reference of website pages, and how they structured their hyper links and buttons on a website to appeal to a certain customer, or viewer. I thought this would be a great idea because the majority of people use websites daily, and what content the websites have gives them their positive edge. I'm very happy with this lay out, however, I may change what the menu looks like as I progress more and more into the comic itself, and when it's completed.

Main Comic

In the main comic area, there's three layers, this is to separate the actions from the scenes which are placed on the layer 'Scenes'. The only actions that are on the 'Actions' layer is a stop(); which will enable each frame to stop and play the Movieclips which I have inserted into the 'Scenes' layer. On the side, as you can see in this image, I have added notes, showing what this certain scene does to the players selection reputation. This is so, when I go through and add the options into the story, it will be easier for me to code the selections to the right frames.  

MovieClip Scenes

Each scene of this comic is a MovieClip. I did this because I thought the structure of the whole comic would be simpler without the whole obstruction of massive tweens and images in the way on the main timeline, when it can all be simplified into one. The layers in each MovieClip are the same, unless there is extra layers needed (such as the 'Images' layer) then they can be added, with a number at the end to show how many layers of 'Images' there is. I wanted to keep them all the same on each scene, so then I would never get mixed up with what is what, and gifts more freedom to the work.

[DAY 14] [DEVELOPMENT] Piecing Together the Comic Images

For my comic, I decided to process images in Photoshop, as there is more freedom in Photoshop for what I want to do, then it is in Flash. Flash gives out gorgeous vector images, however doesn't pull of the style I want to show to people.

Each one of the images that I create for my final comic, is set out like this. The first layer (Layer 4) is the texture I use to compliment the comic. The comic is meant to be quite dark, and not very pleasing, so it's best that this texture is used to give it volume and atmosphere. The second layer (Layer 6) is where I normally place the line art. The third layer (Layer 5) is the background layer, the background is all done on one layer so that I know where everything is, and it's all not so confusing.

Starting off with a base sketch, which is normally done on the layer underneath the texture layer. I go with a simple, naked, body structure, so I know where the clothing lies and the hair settles on the body.  This also gives me a sense of how the scenery will fill the area.


When the base sketch is complete, I'll then start to add onto it (clothing, hair, etc.), until the sketch is exactly how I want it to be. I'll sometimes to alterations to the end product so the anatomy looks pleasing to the eye, and not loud, and out of control.

When the line art is done and dusted, I start adding the colour. This image is one of the last pieces of the comic, but I thought it was a great scene to show how the background is chosen. Because the story is kind of based on a world which can be altered by the character Death, I try and make each image seem out of proportion, including the colouring.

Finished! Patches of additional things go on a different layer all together, this gives the image I have created extra depth if it's one of the most intense bits of the story. I love adding extras to make the reader ponder and make their own decisions on what is going on in the story.

[DAY 13] [DEVELOPMENT] Hanë Hairstyle Choices and Facial Features

The hairstyle of both Huppel and Hanë is quite important because their clothing design isn't really an option. In a dark environment, you will only want to view their facial features to determine who is who.
Same as Huppel, Hanë went through the same process with hairstyles. Hanë is much older then Huppel, so I wanted to make sure his hairstyle complimented his features and age. I felt Hanë was a much harder concept to come up with because he was quite a different character to what I am used to, I have not really attempted to make a male character stand out.

Hanë is drawn with Deaths clothes because Huppel will be manipulated by the presentation of his features. I wanted a memorable, wise and strict face, some what of a teacher pursuing quiet in a huge classroom. 

Results;

----------------------------------------------------------------------------------------

Hairstyle 1; 0

Hairstyle 2; 0

Hairstyle 3; 5

Hairstyle 4; 3

Hairstyle 5; 4

Hairstyle 6; 0

Hairstyle 7; 5

Hairstyle 8; 10 (This one won overall.)

[DAY 12] [DEVELOPMENT] Huppel Hairstyle Choices and Facial Features

With hairstyles, I wanted to give each character a look which really stood out. One, because that way, the character is easily remembered and more easy to gain a relationship between a person and a character. Two, it has to suit the characters personal features, such as their face and figure. Complimenting hair is the key to successful characters.
With Huppel, I had a real struggle coming up with hair that she would suit. Being German, I didn't want to make her stereotypical. Instead, I went with a punk look, with her hair being blonde with very dark and dyed brown raccoon tails. I felt this gave Huppel more of a colour selection to her design, and was to be kept as her main hair colour design.

I then drew out 8 separate heads on Photoshop and did a few sketches of different types of hair styles. By this time, I also decided on Huppels facial features and eye colour. I then printed the copy out and went around asking people what hair cut style they preferred out of the 8 on the page. I also put the image on Facebook for people online to look at too.

Results;

----------------------------------------------------------------------------------------

Hairstyle 1; 1

Hairstyle 2; 6 (This one won overall.)

Hairstyle 3; 2

Hairstyle 4; 1

Hairstyle 5; 0

Hairstyle 6; 0

Hairstyle 7; 4

Hairstyle 8; 1