Unhappy with Your Grade?

I have two ways you can bump up your grade if it is sagging.

“Get Out of Zero, Free” Card

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.

Redos

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.

  1. Create a new folder on your flash drive called edge-animations.
  2. Create an images folder inside the edge-animations folder and save this file into it.
  3. Open Adobe Edge Animate and create a new project.
  4. Save the file as edge-animations.html in your edge-animations folder.
  5. Use File > Import to import the chicken image onto the stage.
edge animations
  1. Twirl open the Assets subpanel in the Library panel, and see that your chicken image is also visible as an asset.
edge animations
  1. 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.
edge animations
  1.  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.
edge animations
  1. 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.
edge animations
  1. 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).
edge animations

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.

  1. Add the word “chicken” to the stage using the Text tool.
edge animations
  1. Apply a shadow to the text. This time, the text-shadow CSS property is being employed, so the shadow forms around the letters.
edge animations
  1. See the little yellow warning triangle in the bottom-right corner of the stage area? Click it to see browser conflicts.

We’re being informed that the text-shadow that’s been applied to the chicken text will not work in Internet Explorer versions 9 or earlier.
edge animations

  1. Position the chicken image away from the upper-left corner a bit, and the chicken text up near the upper-right corner.
edge animations
  1. 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.
edge animations
  1. 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.
edge animations
  1. In the Timeline panel, move the playhead to 0:01.
edge animations
  1.  Click the three gray keyframe diamonds to add keyframes for each property ay 0:01.
edge animations

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.

edge animations
  1. Move the chicken image down to the lower-right corner of the stage.
edge animations
  1. 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.
edge animations
  1. Right-click on the top hollow diamond to select it (the one for the Left property.) Select Create Transition.
edge animations

An animated transition appears for the Left property. Now if you scrub the playhead, you should see a transition for left-to-right.

edge animations
  1. Create transitions for the other two hollow keyframes.
edge animations
  1. Press the space bar to play your animation.
  2. 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.
edge animations
  1. Move the playhead to 0:02.
edge animations
  1. 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.
edge animations
  1. 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.
edge animations
  1. Move the playhead to 0:03. This is where we want the next keyframe(s).
edge animations
  1. 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).
edge animations
  1. 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.
edge animations    edge animations
  1. Press the space bar to watch the animated segment.
  2. Locate the gold band between the Toggle pin and the playhead.
edge animations
  1. 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.
edge animations
  1. 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.
edge animations
  1. Drag the gold bar to the right so it spans from 0:04 to 0:05.
edge animations
  1. Move your mouse over the top center control point on the chicken image’s frame. The cursor turns into a vertical double-arrow.
edge animations
  1. Drag the control point down to the bottom of the frame, clipping the image until no longer visible.
edge animations
  1. Press the space bar to view the animation. How does it differ from moving the background position?
edge animations
  1. Click on the Clip transition (the green bar) between 0:04 and 0:05 to select it and apply easing.
edge animations
  1.  Locate the Easing button in the Timeline, next to the automation buttons.
edge animations
  1. Click it and select Ease Out. This will mean the animation will start slowly and end fast.
edge animations
  1. 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.
edge animations
  1. Press the space bar to view the animation with easing applied.
  2. Turn off the Toggle pin, and then press the space bar to view to entire animation.
  3. Click in the gray pasteboard off the stage to view Properties for the document.
  4. In the Properties panel, change the document title to Animated Chicken.
edge animations
  1. Save your file. Go to File > Preview in Browser to see your completed animation working in the browser with just HTML, CSS and JavaScript.
  2. Locate your edge-animations folder in Finder (Mac) or Windows Explorer (PC) and ZIP the folder.