View finished animation here.
-Radial Wipe Technique
-Easing Techniques to drop in images and text
Creating the Radial Wipe Effect
Download Tutorial Files here.
To preview the finished animation in Edge Animate, open completedProject.html from the tutorial files folder and press CMD/CTRL + Return/Enter to play it. This is the animation you will create in this tutorial.
Create a new project. Save the project as myProject.html. Navigate to the Properties panel on the right hand side of the Edge Animate workspace and change the Overflow property in the pull down menu to hidden.
Drag a vertical guide from the ruler and place it at 275px. Then drag a horizontal guide from the ruler and place it at 200px.
Import all assets onto the stage from the folder titled “assets” in the project folder you downloaded at the beginning of the lesson. When the images come to the stage, arrange them so that they match the original artwork’s layout. Refer to the screenshot of the Elements panel below to arrange your assets in the layout and layer order shown.
Set up the Wipe
Select your pieShape image by clicking on it in the stage or by selecting it in the Elements Panel and position it at center of artwork where your guides intersect. Refer to screenshot below for accuracy.
Select the Transform tool from the toolbar and drag the Transform origin from the center of your pieShape image down to the lower left corner. It will snap into place.
Duplicate your pieShape image 3 times (for a total of four pie shapes)
Align the pieShape images to cover artwork 360 degrees, by rotating each pie shape. Do this by selecting the Transform tool and rotating the image using the rotation handles. Activate the rotation handles by hovering over the corners of the object. You can also do this by typing in the values 90, 180, and 270, respectively for each pieShape image in the rotation property option under Transform in the Properties panel.
Keyframe the Project
The first pieShape image will be the control shape. Navigate to the Timeline and make sure that the Auto Keyframing button is turned on, and also make sure that Auto Transitions button is turned on. In the Properties panel under Transform, click the Add Keyframe icon next to Rotation. This is called keyframing. Then drag the playhead to .5 seconds, and click the add keyframe button again (hollow diamond next to the word Rotate under the pieShape layer) and type in the value 360 in the rotation property box for the pieShape image to rotate 360 degrees.
Drag the playhead back to .125 seconds and click CMD/CTRL + “L” to create a label called 90. This will help us determine where to time our pie shapes. Repeat at .25 seconds, .375 seconds, and .5 seconds, with the labels: 90, 180, 270, and 360 respectively.
At .125 seconds (on the 90 label) keyframe the pieShapeCopy image with a display property set to off. Set one more keyframe right before this keyframe with the display property set to on. This “now you see me now you don’t” effect will give the illusion that the pie shapes are all connected and will help the radial transition be seamless. Repeat this at each label for 180 and 270 on both the pieShapeCopy2 and pieShapeCopy3 images respectively. Refer to the panel below for accuracy.
At .25 seconds, set a keyframe on the first pieShape image with opacity set to 100 – 0 %, with 0% being on .5 seconds. This will help the last part of our transition finish up nicely. Press CMD/CTRL + Enter/Return to preview your animation. Save your file.
Using Easing Techniques to Create the Drop
Keyframing the Drop In
Drag the playhead to .5 seconds and select _07seedRight image in the Actions panel to the left of the Edge timeline. Click the Add keyframe icon in the properties panel under Position and Size next to Y.
Drag the playhead to 1.250 seconds. Click the add keyframe icon next to Translate y. Then drag the playhead back to .5 seconds. Drag _07seedRight image above the stage - this will make it appear hidden before it drops in. Scrub through this sequence to see the sunflower seed fall into place. Refer to screenshot below for accuracy.
Now it’s time to add easing: On the timelines, click the Master Transition Bar on your seed animation you just did and right click. Select "Easing…" Then select Ease out and choose Bounce. Scrub through your animation and see that the effect we just did added a playful and natural bounce effect to the animation. Repeat for the _08seedLeft image, this time offsetting the timecode to start at .750 seconds and end at 1.500 seconds.
Using Easing Techniques for the Text Transition
Keyframing the Text
Select the _05sunshineText image and choose the Transform tool from the toolbar. Click and drag the Transform origin towards the center of the text. Repeat for both the _04sunflowerText and _06seedsText layers.
Drag the playhead to .5 seconds and select the _05sunshineText image in the left hand Actions panel of the Edge timeline. Click the add keyframe button under Transform next to Scale X and Scale Y.
Right click the Master transition bar of the transition that you just created and select “Easing…” and then select “Ease out” and choose “Elastic”. Repeat this for the images “_04sunflowerText” and “_06seedsText” images, offsetting the values from the first text layer by .250 seconds each.
These steps have helped you to create a natural and playful effect to your animation with a few simple clicks!
Select the _01outerPetals layer in your Actions panel. Drag the playhead to 0 seconds, and click the add keyframe icon under Transform and next to Rotation. Change the value to -180 Degrees in the rotation property box.
Drag the playhead to 4 seconds and click the add keyframe icon again this time typing in the value 0 in the rotation property box.
Drag the playhead to 12 seconds and click the add keyframe icon and type in the value 360. This will complete the rotation of the background for one cycle.
Drag the playhead back to 4 seconds and click CMD/CTRL + “L” to make a label, type in loop in the label box.
Click the Open Timeline Actions icon and select Complete. Then select Play From on the right hand panel and type in ‘loop’ in place of the default 1000.
Right click the Master Transition Bar on the _01outerPetals layer and choose “Easing...” and select “Linear”.
Click CMD/CTRL + Return/Enter to preview your Edge Animation in your browser.