Evaluation of James and Jakes comic.

James's comic:
I like the style of drawing that he has and the story line, although some buttons would make the comic more interactive.

Jake's comic:
I like Jake's simple use of shape to make his character and the use of the photos in the background to show the movement of his character. I think that the quality of the images in the background could be better but they are good enough for this project.

Tom's comic:
I like the how tom has used photos and adjusted the amount of frames between each, I think the effect builds tension and very effective. I would say that the opening start screen could be improved by making the moving background fill the whole stage.

Evaluation

The aim of this project was to discover a new way to work incorporating traditional design processes with modern day computers and technology. For the final piece I needed to create an interactive comic in flash.

For my artist research I looked at comic book cover art as I thought I would help to influence my comic and would give me ideas for a character. After looking at the covers I decided that I would have a robot as my main character and therefore started to research tin robots and illustrations of robots. I also looked into story boards as they helped develop my ideas and a basic structure for my store. By looking at the story boards I could also see how a comic is presented so I could do something similar myself. I also look at some interactive comics that are similar to the comic I wanted to create.

I started experimenting by creating a robot and drawing up my story board and started combining graphite rubbings with Photoshop to create some textures. I also used photos and manipulated them in Photoshop for example putting a hippo head on a lizard’s body. I started experimenting in Flash by making a panning and tweeing animation.

From my story board my final comic is slightly different, towards the end of my original story there was going to be a fight between the robot and another character. As I moved through the comic production I thought that it would be better if I have a big slug that the robot killed.

Although I learnt a lot about animation using flash, it wasn’t my favorite project. Despite this I still want to find out more about Flash and develop some more projects.

Frame by frame animation.

I created this frame by frame animation using Photoshop. I am combining the traditional way of animation with a modern way of production.

Traditional vs Digital

There are many advantages and disadvantages to both traditional and digital ways of working, here are some examples:

One of the main advantages of digital imaging is the ability to go back and dramatically edit the image without being destructive, in contrast to this a traditional method of painting or drawing cannot be re-worked with the same amount of accuracy and is hard to make any edits without change the image dramatically.

One attraction and advantage to using traditional methods of design is the ability to work anywhere. For example an artist could work at the top of a mountain with a sketch book and a pencil, but a digital artist work have to rely on the power within their computer and in turn they would be limited to the time they can spend on a project at any one time.

Many digital artist would argue that they can replicate any texture or effect in the real world within their software, however this is not true. Although traditional artist might not be able to do this either, they can create something that is much closer. The traditional artist has in their favor the ability to use the raw material within their work, for example they could use sand or mud.

With the development of digital media the boundaries to which people can go to with their work has grown. For example animation and interactivity has opened many opportunities for artist, such as media that responds to movement and light. This kind of media could have never been created without the advancement of computers or the media software that runs on them. On the animation front computer software has enabled animators to use tools such as tweening that considerably reduce the amount of time it takes to produce an animation in contrast to traditional frame by frame animation.

One thing that I think has been lost with more artists using their medium in a digital form is people working together. It is much harder for a group of digital artist to work in the same room on the same piece at the same time, and this is where a traditional artist benefits. They usually require less expensive equipment, a computer, and they can all see what a fellow artist is doing. A good example of artist working together is graffiti, they may be many people working on the same wall and they can all respond to what other is doing.

Within traditional artists pallet they can mix any colour, however if they use up this colour and try to recreate it the chances are they will not get a direct match. They advantage of digital production is that the artist has up to 16 million colours that can be saved and used again and again

I think that the final big advantage to digital production is the final outcome. I f the final piece is an animation or is interactive it can be displayed throught a projector or on a tv, and if the piece is made for print all the prints will be exactly the same and produced in only a couple of hours. In contrast to this traditional art work , such as a painting, will take much longer to reproduce with less accuracy.

Under water scene using Photoshop.

 The base image I used for the project is a close up of some coral with a fish within it.

The first edit I did was to, using the stamp tool, remove the fish from the image. I then used the curves and the levels to create areas of darkness and adjusted the contrast to add brightness to some areas.

I then added an image of a scuba diver to the background and gave it an "overlay" layer style, I also applied a mask to it so I could hide the right side of the image. I also adjusted the levels of the scuba diver and reduced the opacity. Using the bush tool and motion blur I crated some light ray coming from the direction of the diver and reduced their opacity so they are very faint in the background.

I then placed some coral in the foreground and slightly blured it to give it some depth for when I later added in the text. In the left hand corner I duplicated the background to put it in the foreground so later the text can sit behind it.

 I then added the text "LIFE" in a font called "Molot", to this text I added a large outer glow in green and a small drop shadow to give it some depth. I then added a layer mask of an image that I created to give the text some texture. Above the text I added some light steaks using the brush tool and motion blur,  I reduced the opacity then using the blur tool made it look like the text is giving off some kind of chemical.

I then added some bubbles to above the text to emphasise the idea that it is giving of some kind of chemical. I also reduced the bubbles opacity and added a layer mask so that I could hide some bubbles and emphasise others.

 To the entire image I applied levels and curves adjustment layers to darken certain areas.

Next I added some mutated fish and some more coral to the right side of the image. To these I then applied levels adjustment layer masks .

Finally I applied a green overlay to the rock in the foreground to make it look like it was covered in sea weed. 

Image sources:
Font: Molot (http://jovanny.ru/)
All foreground, background and base image: http://sxc.hu/

The light.

Experiment to create a light streak using soft edged brushes (0% hardness) and the smudge tool (85% strength) in Photoshop. We also used layers to add different colours which when combined with the smudge to gives the image a blended look.

Light with specks.

To my light I next added small bubbles to give the effect that it was moving. To create the bubbles I modified a soft bush by changing the scattering and the shape dynamics. I also blurred the top off the light to give it more movement and added a high light to the top.

The final image.

To create the final image I added the light from the previous steps and another green version. I used a variety of quick masks, clipping masks and adjustment layers (levels, curves and hue saturation) to add highlighting to the model's face. I used motion blur on the light beams to add movement and added thin soft brush strokes with an overlay setting which give depth and a source of light to the image. I  also used semi-opaque gradients to add specific dark areas to the image.

  

Creation of a liz-po.

Half hippo half lizard. I used the head of a hippo and the body of a lizard. I added a colour balance adjustment layer to change the hippo to the same shade of green as the lizard. Using a layer mask on the hippo I revealed the lizard and blended it in. I then added a levels and brightness/contrast layers and used the stamp tool to get rid of the remaining visible lizard head.

Combining traditional techniques with digital media.

To create this poster I used the traditional technique of photography and with that I was able, with computer software, to cut up the images and combine them, add vector images, a gradient and using the brush tool add more grass to the image. Without combining the two techniques I would not be able to create an image like this.

I took these rubbing using a graphite stick so that I could scan them into the computer and create some textures from them. these textures can then be used in my work.

This is an example of the type of patterns and textures that can be created using this method. The advantage of creating patterns and textures this is that the same effect cannot be created using only a computer.

The advantages of tweening, in contrast to frame by frame animation.

One of the main advantages of using Flash for animation is tweening. Tweening is a proses that the computer performs, the computer fills in the frames between key-frames to create a smooth motion. In contrast to this the traditional way of animating, frame by frame, takes a lot longer and can be less smooth and precise as the more modern alternative option.

Creating a tween.

The first step to creating a tween is to have your object, if it is a bitmap image it will have to be converted into a movie clip (F8).

In frame 1 create your object, in this case I am using a cycle from the shape menu.

 The next step is to go to the the frame that you would like you movement to end at and on this fame create a new key frame. With the needle on this frame reposition the object to the end position of the movement.

To create the tween right click on a frame between frame 1 and the newly created key fame. a dropdown menu will appear and from this menu click "create classic tween", by doing this the flash will fill in all of the frames and crate a smooth movement.

This is a very powerful tool as in contrast to traditional "frame by frame" animation this tool can dramatically reduce the amount of time it takes to create the animation, and it is also very accurate in filling in the frames.

Creating the robot.

The next step for this comic was to make the character. To do this,in Photoshop, I made each part of the robot and imported them individually to the library.

 Over ten frames I import the separate parts of the robot. For the moving parts at frame five I create a new key frame with them in their different position and in frame ten return them to their original position, I then tween the key frame to make the movements move smooth.

 To make the moving parts of the robot repeat, I add an action to frame ten that says return to frame one. By adding this action I can tween the robot across the main stage, with it moving, until I get to frame 59 on the main stage where I add the action below.

 On frame 59 of the main stage I add an action that says as follows:

robot.gotoAndStop (11), this makes the robot stage go to its frame 11 and stop. At frame 11 within the robot stage there is a still of the robot in a standing position with a speech bubble and some text.

stop(), this action will stop all the animation within the main stage. This means that the street lamp on the backdrop will stop moving across the stage.


robot.addEventListener(MouseEvent.CLICK, fl_ClickToGoToAndPlayFromFrame_2);


function fl_ClickToGoToAndPlayFromFrame_2(event:MouseEvent):void
{
robot.gotoAndPlay(1);
gotoAndPlay (59)
}
This action says that when the screen is clicked, "robot" goes to frame 1 and play, and on the main stage "go to and play" at frame 59. By using this action once the viewer has read the captions they can click the screen to carry on with the comic.

At frame 90 on the main stage I have tweened the robot to move to the other side of the stage. At frame 90 the robot is about to fly off, so it's arms and legs need to stop moving. To achieve this I add an action that says, "robot. gotoAndStop (12)" at frame 12 within the robot stage there is a still of the robot which is what I need to create the fly effect.

The last part of this scene was to have the robot flying off the stage, to do this I tweened the robot between frames 90 and 123 changing the angle and position.

Adding the back drop.

The backdrop to this part of the comic is a city, so I made some tower blocks in Photoshop and imported them into the Flash library. I made the towers much bigger than the stage as later in the scene they will move across the stage to give the effect of faster movement.

To emphasise the effect of movement I have added a street lamp, which I made in Photoshop, that will move across the stage.

Making the pulsating start screen.

To make the word start pulsate I created a scene that was 60 frame long. At frame 1 the word start was at its smallest. At frame 30 I made a key frame and adjusted the "start" to it's largest, and finally at frame 60 made another key frame and returned "start" to the same size as frame 1. By then tweening these key frames together I crate the pulsing effect as the 60 frames constantly repeat.

Above is a close up of the key frames and the tweening between them.

To make the "start" keep pulsating and the spiral to keep turning until it is clicked I must create an action on the main stage. The action code is above, but in short says that until the screen is clicked return to frame 1 within "start" stage. And once the screen is clicked got to frame 3 on the main stage to continue the rest of the animation/comic.

Creating the turning background

After creating the spiral background I place it into a new 960x640px Flash document. To make the spiral turn I first made it into a move clip, I then made four key frames between each the spiral would turn 45 degrees.

Creating the back ground for the first part of my comic.

To create the background for this section in my comic I made a spiral in Photoshop using the brush tool. I found the center of the document, and from there made in coming out in different shades of red. When I have this rotating in the background I think it will give a really good effect.

Storyboard.

This is my storyboard that shows the sequence in which my animation will take place.

Flash zooming and panning.

 First I imported a photo of a town centre and converted it into a movie clip. Using the transform tool I resized it so the height was just larger the the stage.

To create the zoom I clicked on frame 50 and pressed F6 to create a new keyframe. With frame 50 selected I scaled up the photo, I then right clicked between frame 1 and 50 and chose create classic tween. By doing this the computer fills in the frames to create a smooth animation of the photo scaling.

For the panning animation I did the same steps as before, apart from this time I changed the photo's position instead of it's size.  

Below is the clip.

Audio recording with marantz.

I learnt how to set up the marantz audio recorder. I learnt how to create pre sets that allow me to change the set up in  seconds and also how to change the levels which adjust the recording quality. On the top of the marantz there are two male mic plugs, I used the mono plug as I was only using one mic, if i was to plug in two mics I would create a stereo recording.

Idea generation.

• A Robot.
• Vintage tin robot style.
• Helps old people cross the road.
• Has rockets in it's feet so it can fly.

Hotel interactive comic (http://www.hoteloscartangoecholima.com/splash.html)

Hotel is an on-line interactive comic, it is about a man that goes to a hospital and a twisted doctor manipulates his mind by giving him drugs.

Within the comic you reader can click on different elements and they will react. For example in the scene below, by clicking on the man at the table he will press the buttons on his phone and start talking.  

The text in this comic is shown on the walls, which I think is a different but really good way of displaying the text.

Marvel Comics Research.

Marvel Comics are one of the most well know comic book creators in the world, they are most well know for there comics including "The Fantastic Four" and "X-Men".