SlideShare a Scribd company logo
1 of 3
Download to read offline
Parallax scrolling animation evaluation:

Method:
To start off with this project, I downloaded a cartoon running panel, which looked like this:




I then traced over each image but changing it to look like my character. When I had
finished this, I made a background which would be used in my animation. We needed to
use 5 different layers for this background, e.g. Grass in the foreground, trees in the mid
ground, hills behind the trees, clouds and then the sky. For inspiration when doing this, we
watched a video narrated by Walt Disney, explaining his invention, the multi-plane
camera. He explained that the different panes/layers needed to move at different speeds
when the character was moving across the screen. So the foreground would move fastest,
the mid ground would move a bit slower, the background would move slower, the clouds
would move very slowly and the sky would not move at all.
As my character was an alien, I made the background look as if he was on the moon. Here
are my five different layers:

This is my foreground.




This is the mid ground:




This is the background (after the mid ground):
This is what I used as clouds, but because it is on the moon, I used asteroids:




This is what all my background layers put together look like:




When I had finished the background and the images of my character running, I grouped all
of the layer in each of the documents, by selecting all of the layers and pressing command
G. I then went to the long road media blog and downloaded a “Safety Cage” to put on
Photoshop. When I had done this, I dragged the background layer onto the safety cage
document and put the safety cage in the middle of the page. When animating it, I wanted
the character to run past most of the background, So instead of moving the safety cage, I
dragged the different background layers to the right of the page. I then dragged the
running images onto this same document. I wanted to make the character run to the
middle of the safety cage before making the background move, so it looked as if the
character was running onto the page. To do this, I got the first running image and put it just
inside the safety cage, I then made a new frame (before starting this I went to Window-
animation and convert to animation), when I had made the new frame I turned on the
visibility to the next image and put it further into the frame, and I then turned off the
visibility to the last image and made a new frame. I repeated this until the character was in
the middle of the safety cage.
When it was in the middle, instead of moving the character, I moved the different layers of
the background. On each frame, I changed the running image and stacked them on top of
each other, so it still looked as if it was running, but it wasnʼt moving across the page.
When moving the background layers, I did not move the sky (stars and Earth). I moved the
asteroids 10 pixels across, The U.F.Oʼs 20 pixels, the mid ground 30 and the foreground
40. To make this easier, I held shift and pressed the left arrow, which moves it 10 pixels
each time. I repeated this until it was near the end of my background, and when it was I
did what I did at the start, which was move the character instead of the background and
make it look like it ran off the page.
When I had finished this, I changed the canvas size to 1920 by 1080, which is the HD
preset. I then saved for web and devices and changed the size on that before saving and
changed looping options to “forever”. At first, it did not work when I had uploaded it to
tumblr, so I had to save it again and change it to a lower size.

Am I happy with the outcome:

I am pleased with my final product, but there were some problems on the way. One of
these was that I had made the file too big when I had uploaded it to tumblr. I then had to
open it again and re-size it, but the computer was being slow so this was a long process.
When I had saved it again, I realized I had not changed the looping options to forever, so I
needed to save it again, which took long. However, it eventually worked and I managed to
get it onto tumblr working fine.
I am also pleased with my background. As it was on the moon, I could not use the normal
things for a background e.g. trees and clouds etc. I think it looks quite good using the
asteroids instead of clouds and U.F.Oʼs etc, and I think adding the American flag was quite
a good idea.
I think it could be improved if I had placed the images very close to each other so it looked
more smooth, but apart from that I am very pleased with it.

Comparison with other animation techniques:

Out of all the animation techniques we have used, this is my favourite one. Although it
takes longest to do, I enjoyed doing this more than the others.

More Related Content

Similar to Parallax scrolling evaluation

3. fmp production experiments(3)
3. fmp production experiments(3)3. fmp production experiments(3)
3. fmp production experiments(3)Media Studies
 
FMP - production experiments
FMP - production experimentsFMP - production experiments
FMP - production experimentsDaisyPotter
 
6. production reflection(2)
6. production reflection(2)6. production reflection(2)
6. production reflection(2)Abigail Long
 
Production Reflection
Production ReflectionProduction Reflection
Production ReflectionAbigail Long
 
Special effects presentation finished
Special effects presentation   finishedSpecial effects presentation   finished
Special effects presentation finishedcaleb taylor
 
1. production experiments
1. production experiments1. production experiments
1. production experimentsjoshpalmmer
 
Production Process
Production Process Production Process
Production Process DanMorland
 
Ci 350 photoshop
Ci 350 photoshopCi 350 photoshop
Ci 350 photoshopnapier163
 
Production Process
Production Process Production Process
Production Process DanMorland
 
Fmp2 production reflection
Fmp2 production reflectionFmp2 production reflection
Fmp2 production reflectionbronparsons
 
01.) Production experiments
01.) Production experiments01.) Production experiments
01.) Production experimentsgeorgewetton1
 
Production reflection fmp y1
Production reflection fmp y1Production reflection fmp y1
Production reflection fmp y1GemmaNicholls1
 
Alice startpartfour
Alice startpartfourAlice startpartfour
Alice startpartfoursumidahilo
 
Alice Start Part Four
Alice Start Part FourAlice Start Part Four
Alice Start Part FourCraig Perkins
 
Overall progress - barry
Overall progress - barryOverall progress - barry
Overall progress - barrycrimzon36
 
Fmp2 production reflection
Fmp2 production reflectionFmp2 production reflection
Fmp2 production reflectionbronparsons
 

Similar to Parallax scrolling evaluation (20)

3. fmp production experiments(3)
3. fmp production experiments(3)3. fmp production experiments(3)
3. fmp production experiments(3)
 
Experiments
ExperimentsExperiments
Experiments
 
Experiments
ExperimentsExperiments
Experiments
 
Week 1 day 1
Week 1 day 1Week 1 day 1
Week 1 day 1
 
FMP - production experiments
FMP - production experimentsFMP - production experiments
FMP - production experiments
 
6. production reflection(2)
6. production reflection(2)6. production reflection(2)
6. production reflection(2)
 
Production Reflection
Production ReflectionProduction Reflection
Production Reflection
 
Special effects presentation finished
Special effects presentation   finishedSpecial effects presentation   finished
Special effects presentation finished
 
1. production experiments
1. production experiments1. production experiments
1. production experiments
 
Production Process
Production Process Production Process
Production Process
 
Ci 350 photoshop
Ci 350 photoshopCi 350 photoshop
Ci 350 photoshop
 
Production Process
Production Process Production Process
Production Process
 
Fmp2 production reflection
Fmp2 production reflectionFmp2 production reflection
Fmp2 production reflection
 
01.) Production experiments
01.) Production experiments01.) Production experiments
01.) Production experiments
 
Production reflection fmp y1
Production reflection fmp y1Production reflection fmp y1
Production reflection fmp y1
 
Unity workflow
Unity workflow Unity workflow
Unity workflow
 
Alice startpartfour
Alice startpartfourAlice startpartfour
Alice startpartfour
 
Alice Start Part Four
Alice Start Part FourAlice Start Part Four
Alice Start Part Four
 
Overall progress - barry
Overall progress - barryOverall progress - barry
Overall progress - barry
 
Fmp2 production reflection
Fmp2 production reflectionFmp2 production reflection
Fmp2 production reflection
 

More from dannatdip

Presentation questionnaire
Presentation questionnairePresentation questionnaire
Presentation questionnairedannatdip
 
Dan and ed presentation
Dan and ed presentationDan and ed presentation
Dan and ed presentationdannatdip
 
Contact sheet
Contact sheetContact sheet
Contact sheetdannatdip
 
Presentation
PresentationPresentation
Presentationdannatdip
 
Lrrh survival horror_pitch
Lrrh survival horror_pitchLrrh survival horror_pitch
Lrrh survival horror_pitchdannatdip
 
Pixar keynote
Pixar keynotePixar keynote
Pixar keynotedannatdip
 

More from dannatdip (6)

Presentation questionnaire
Presentation questionnairePresentation questionnaire
Presentation questionnaire
 
Dan and ed presentation
Dan and ed presentationDan and ed presentation
Dan and ed presentation
 
Contact sheet
Contact sheetContact sheet
Contact sheet
 
Presentation
PresentationPresentation
Presentation
 
Lrrh survival horror_pitch
Lrrh survival horror_pitchLrrh survival horror_pitch
Lrrh survival horror_pitch
 
Pixar keynote
Pixar keynotePixar keynote
Pixar keynote
 

Parallax scrolling evaluation

  • 1. Parallax scrolling animation evaluation: Method: To start off with this project, I downloaded a cartoon running panel, which looked like this: I then traced over each image but changing it to look like my character. When I had finished this, I made a background which would be used in my animation. We needed to use 5 different layers for this background, e.g. Grass in the foreground, trees in the mid ground, hills behind the trees, clouds and then the sky. For inspiration when doing this, we watched a video narrated by Walt Disney, explaining his invention, the multi-plane camera. He explained that the different panes/layers needed to move at different speeds when the character was moving across the screen. So the foreground would move fastest, the mid ground would move a bit slower, the background would move slower, the clouds would move very slowly and the sky would not move at all. As my character was an alien, I made the background look as if he was on the moon. Here are my five different layers: This is my foreground. This is the mid ground: This is the background (after the mid ground):
  • 2. This is what I used as clouds, but because it is on the moon, I used asteroids: This is what all my background layers put together look like: When I had finished the background and the images of my character running, I grouped all of the layer in each of the documents, by selecting all of the layers and pressing command G. I then went to the long road media blog and downloaded a “Safety Cage” to put on Photoshop. When I had done this, I dragged the background layer onto the safety cage document and put the safety cage in the middle of the page. When animating it, I wanted the character to run past most of the background, So instead of moving the safety cage, I dragged the different background layers to the right of the page. I then dragged the running images onto this same document. I wanted to make the character run to the middle of the safety cage before making the background move, so it looked as if the character was running onto the page. To do this, I got the first running image and put it just inside the safety cage, I then made a new frame (before starting this I went to Window- animation and convert to animation), when I had made the new frame I turned on the visibility to the next image and put it further into the frame, and I then turned off the visibility to the last image and made a new frame. I repeated this until the character was in the middle of the safety cage.
  • 3. When it was in the middle, instead of moving the character, I moved the different layers of the background. On each frame, I changed the running image and stacked them on top of each other, so it still looked as if it was running, but it wasnʼt moving across the page. When moving the background layers, I did not move the sky (stars and Earth). I moved the asteroids 10 pixels across, The U.F.Oʼs 20 pixels, the mid ground 30 and the foreground 40. To make this easier, I held shift and pressed the left arrow, which moves it 10 pixels each time. I repeated this until it was near the end of my background, and when it was I did what I did at the start, which was move the character instead of the background and make it look like it ran off the page. When I had finished this, I changed the canvas size to 1920 by 1080, which is the HD preset. I then saved for web and devices and changed the size on that before saving and changed looping options to “forever”. At first, it did not work when I had uploaded it to tumblr, so I had to save it again and change it to a lower size. Am I happy with the outcome: I am pleased with my final product, but there were some problems on the way. One of these was that I had made the file too big when I had uploaded it to tumblr. I then had to open it again and re-size it, but the computer was being slow so this was a long process. When I had saved it again, I realized I had not changed the looping options to forever, so I needed to save it again, which took long. However, it eventually worked and I managed to get it onto tumblr working fine. I am also pleased with my background. As it was on the moon, I could not use the normal things for a background e.g. trees and clouds etc. I think it looks quite good using the asteroids instead of clouds and U.F.Oʼs etc, and I think adding the American flag was quite a good idea. I think it could be improved if I had placed the images very close to each other so it looked more smooth, but apart from that I am very pleased with it. Comparison with other animation techniques: Out of all the animation techniques we have used, this is my favourite one. Although it takes longest to do, I enjoyed doing this more than the others.