Unhappy with Your Grade?
I have two ways you can bump up your grade if it is sagging.
“Get Out of Zero, Free” Card
I’m issuing a new amnesty program for single assignments which received a zero. Here are the rules:
- Email me to request that I reopen a D2L basket for you. Be specific about who you are, which assignment you need to submit, and that you’re using your “Get out of zero free” card. The assignment you request to submit must meet the following requirements:
- An assignment which is already late is to be turned in by 11:59pm of our Week 11 class.
- Any future assignment which is late must be in no later than a week after the due date.
- Resubmit the assignment to the correct basket in the D2L Dropbox.
- You can use this virtual card once per course only, and only for a single assignment.
- Absolutely NO work will be accepted after the Final Project deadline.
Here’s a reminder from the syllabus:
On-time projects may be redone with instructor approval.
Hardly anybody takes advantage of this, but it’s a great deal. If you turned in work on time and reasonably complete—but received less than full credit—come talk to me to arrange a redo.
Tutorial: Animating in Edge Animate
Now that you’ve had a bit of introduction to Edge Animate, and see how it compares to Flash, we’ll look a bit more deeply at working with objects on the stage an animating them.
- Create a new folder on your flash drive called edge-animations.
- Create an images folder inside the edge-animations folder and save this file into it.
- Open Adobe Edge Animate and create a new project.
- Save the file as edge-animations.html in your edge-animations folder.
- Use File > Import to import the chicken image onto the stage.
- Twirl open the Assets subpanel in the Library panel, and see that your chicken image is also visible as an asset.
- With the chicken image selected, click on the div button at the top of the Properties panel. For those of you familiar with HTML and CSS, this button lets you switch between an IMG tag in a div, or a background-image for a div. Leave this as div so that the chicken image is a background image.
- Locate the Shadow subpanel in the Properties panel. At first it is all grayed out, because a box shadow has not been applied to the image.
- Click the little slider icon in the upper-right corner of the subpanel. This turns on the box shadow, and gives you access to the shadow values.
- Try changing the values for X, Y, Blur and Spread to see what they do to the box shadow for the chicken. Click on the color swatch on the right to change the shadow color and opacity (A for alpha).
Notice that although this image has transparency all around the chicken, the shadow applies to the box containing it. This is the making use of the box-shadow CSS property.
- Add the word “chicken” to the stage using the Text tool.
- Apply a shadow to the text. This time, the text-shadow CSS property is being employed, so the shadow forms around the letters.
- See the little yellow warning triangle in the bottom-right corner of the stage area? Click it to see browser conflicts.
- Position the chicken image away from the upper-left corner a bit, and the chicken text up near the upper-right corner.
- In the Timeline panel, make sure that the three buttons (Auto-Keyframe Mode, Auto-Transition Mode, and Toggle Pin) are all turned off (grayed out.) We’re going to do a manual animation first.
- Select the chicken image. In the Properties panel, click the keyframe diamonds for the Opacity, X, and Y properties. Keyframes for each property will appear in the Timeline at 0:00. Set the Opacity to 0.
- In the Timeline panel, move the playhead to 0:01.
- Click the three gray keyframe diamonds to add keyframes for each property ay 0:01.
Three white diamonds appear at 0:01 for Left, Top, and Opacity. These need to be in place before you make any changes to the properties.
- Move the chicken image down to the lower-right corner of the stage.
- Set the image’s opacity back to 100. Notice how the three white diamonds at 0:01 are now hollow. That means that a change has been made from the previous keyframe, but no transition is in place. If you scrub the playhead, the chicken just jumps from one place to another.
- Right-click on the top hollow diamond to select it (the one for the Left property.) Select Create Transition.
An animated transition appears for the Left property. Now if you scrub the playhead, you should see a transition for left-to-right.
- Create transitions for the other two hollow keyframes.
- Press the space bar to play your animation.
- Now it’s time for a more automated method of animation. Click the Auto-Keyframe Mode and Auto-Transition Mode buttons to turn these automated features on.
- Move the playhead to 0:02.
- Move the chicken image to the left side of the stage. Notice how the keyframes and transitions are added for Left and Top without prompting. You did not change opacity, so that stays the same.
- With the chicken image selected at 0:02, click the Clipping tool in the tool bar. This allows you to control the CSS clipping and background-position values for a background-image such as this chicken.
- Move the playhead to 0:03. This is where we want the next keyframe(s).
- Turn on the Toggle pin, and drag the blue toggle pin from above the gold playhead back to 0:02. This will allow us to animate from the current state (0:02) to where the playhead is (0:03).
- Look for the white bulls-eye shape in the center of the chicken image. Click and drag it to the right to move the image outside of its frame. Hold the Shift key down while you do this to keep it straight. If you’ve used Adobe InDesign, you may be familiar with this separation of image and frame.
- Press the space bar to watch the animated segment.
- Locate the gold band between the Toggle pin and the playhead.
- Click and drag the gold band to the right so that it sits between 0:03 and 0:04. Notice that it moves the playhead with it. We can now automate a transition between 0:03 and 0:04.
- Move the chicken image back into its frame. Now you have transitions for the background-position between 0:02-0:03 and 0:03-0:04.
- Drag the gold bar to the right so it spans from 0:04 to 0:05.
- Move your mouse over the top center control point on the chicken image’s frame. The cursor turns into a vertical double-arrow.
- Drag the control point down to the bottom of the frame, clipping the image until no longer visible.
- Press the space bar to view the animation. How does it differ from moving the background position?
- Click on the Clip transition (the green bar) between 0:04 and 0:05 to select it and apply easing.
- Locate the Easing button in the Timeline, next to the automation buttons.
- Click it and select Ease Out. This will mean the animation will start slowly and end fast.
- From the second column, select Bounce. This means the clipping will finish about a quarter of the way through the time span, then bounce open a couple of times before staying closed. Click the Easing button above again to close the Easing subpanel.
- Press the space bar to view the animation with easing applied.
- Turn off the Toggle pin, and then press the space bar to view to entire animation.
- Click in the gray pasteboard off the stage to view Properties for the document.
- In the Properties panel, change the document title to Animated Chicken.
- Locate your edge-animations folder in Finder (Mac) or Windows Explorer (PC) and ZIP the folder.