Animate: Making Scene Transitions and Walk Cycle

 This Activity was very simple and based on Opacity transition which means the transition between two footage or clips by fading away from one another. 

We started by creating a new document named city example with;

Width: 960  

 Frame Rate: 30

 Height: 640   

Platform Type: HTML5 Canvas

Then we made 7 new layers for, Actions, Labels, Buttons, City_day, City_night, Sky_day, Sky_Night. 

Thereafter, We designed skyscrapers according to our perspectives and added windows and colours with a background of Day and night. However, We had to convert the Buildings and Background into a symbol of the movie clip to animate it in different colours and animate windows. 

Then we duplicated it and used the same symbol as the night sky and night buildings. Then we changed things in night assets and drag dropped them into our main scene. 

We worked on buttons once that was finished. We worked on texts "Day and Night" and converted them into symbols of buttons to animate it as a button and give it a HIT area so it works smoothly.

Then there was the fun part of animating it. We inserted keyframes in frames 10, 30, 40, 60, 70. to add a fade away or dissolve effect. Then we added labels in layers to clarify animations and scene transitions. 

Then we selected the city day layer from frame 10 until the end and made it a classic tween to give a transition effect. We then selected the first frame with the label sunset and made alpha 100 and at the last key of sunset we made it alpha 0 so it looks it is fading away. Then we selected the first key of sunrise and checked if it is zero and it still was so the last keyframe had to be 100 in order to reverse the fading away effect.

Programming in Animate has always been easy because of the code snippets provided. We added the code in the actions layer first of stopping playing at various frames and then of fading away effect which is triggered by buttons of day and night.

That was it. It worked well and I liked this activity so much that I created another example with better designs. We faced an issue though. In the scene when there is a day and you press day buttons it shows the transition from night to day. To overcome this we changed instance names in night and day so it does not shows transitions.

The session after we learned walk cycle in animate was identical to the photoshop walk cycle activity that we did. 

We started by creating and naming layers.

Head

Body

Toparm

Backarm 

Topleg1

Topleg2

Backleg1

Backleg2

Then we brought our walk cycle guide to the scene and started creating our character according to the layers. We created all body parts in their respective layers and modified some of them into movie clip. 

We then started animating that piece by inserting keyframes. We used the bone tool which creates a rig like structure which we can animate at different frames. We used bone tool for hands so we can create animation and for legs we used two different shapes so we can just animate it by rotating the shape and changing the anchor point. 

We keyframed the motion according to the guide at an instance of two frames each and completed whole animation it looked just like photoshop. However there was a slight problem of speed we had to find a way to slow it down so did just the simplest thing we stretched out the keys for one more frame. It looked good so we brought whole movie clip into main sequence and copy pasted it multiple times and created a art work.