FMP – Animation Development

Screen Shot 2017-06-05 at 18.30.37

I made the background of the animation white with a slight grey tint around the outside. In addition, I got an image of an iPhone and put my designs inside the phone to make it look more aesthetically pleasing and have it make more sense.

For the intoduction I used the position tool to make the logo and the name of the app to come onto the screen gradually while making it look smooth by using the “easy ease” on the keyframe. The

Screen Shot 2017-06-05 at 18.29.38

I used the text tool to create the animation of the name being typed into the phone with key frames. The same was done with the password but instead I used “full stops” and enlarged it to fill more of a gap.

Screen Shot 2017-06-05 at 20.09.44

While sliding the pages from side to side, I put 4 white sections which matched the background around the phone so the pages stayed inside the page. I also used the position tool to move the pages using key frames and the same with the side navigation bar.

Screen Shot 2017-06-05 at 20.10.27

I used the position tool to make the pin move around the map while using different key frames and speeds to slow down the pin at a certain point to make it seem more realistic and not too robotic by making it all one speed but instead stopping at different key frames and using the easy ease to make it gradually slow down and speed up.

Screen Shot 2017-06-05 at 20.12.02

When I made the switch go from black to green, I made two seperate images and layed one ontop of another. I put the opacity to 0 for the seperate layer which was added ontop and when the time was right, i put the opacity to 100 with keyframes while using the easy ease to make it seem more smooth.

Cursor Animation

I made a seperate animation to create the cursor on the main animation to show where the user was clicking on the page to get around the app.

I first started off by going on the rectangle tool and applying it on the new composition. From there, these were the different steps I did which lead to the final outcome of the cursor animation.

Screen Shot 2017-06-05 at 20.25.57Screen Shot 2017-06-05 at 20.27.39Screen Shot 2017-06-05 at 20.18.08Screen Shot 2017-06-05 at 20.28.37Screen Shot 2017-06-05 at 20.33.05

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s