Wednesday, March 4, 2015

UPDATE to Lab 4: Tweens

During the demo on Monday, Jose suggested a new method for setting up the Day 0-4 polygons needed for the shape tweens. Below I have the initial system followed by the new approach. Both work, but I believe the new approach is easier.

---Writeup's version--
The writeup tells you to start on Frame 1 and draw a polygon to match the Day 1 line (which extends on the east side way out into the Atlantic/Gulf for the later masking step). Then you add a keyframe at your Day 1 frame to get a copy of the shape there. To get Day 0 you go back to frame one and move the nodes of the polygon to fit around NYC. Once that looks good you jump ahead in the timeline (to Day 2), add a keyframe, and adjust the Day 1 shape to fit Day 2. And then add a keyframe at Day 3, and adjust the Day 2 shape to fit the Day 3 line. And then a keyframe at Day 4, with adjustments to the Day 3 shape to cover the entire 48 states. This process works, but you have to be very careful not to cross nodes or let them snap together lest Flash get confused (resulting in a shape tween that twists upon itself). 

--New version--
The new idea (from Jose - thanks!!) is to simply digitize a brand new shape for each Day. This initially may sound like more work, but I believe it is easier to draw a fresh polygon than move individual nodes (and adjust their handlers to fit the new Day). The shape tween doesn't care how you make the shapes at each keyframe -- it can be something adjusted or a brand new shape. With this approach, you can start at Day 0, make a small "city" circle for NYC. The add a keyframe at Day 1. Delete your NYC circle and draw a new polygon for the Day 1 line that pushes way out into the water. Then a new keyframe for Day 2. Delete Day 1's shape and make a new one for Day 2, etc.

For both versions, you will be adding shape tweens in-between the Days to make the movement progress over time. Make sure your polygons have transparent fills (for a drawing object this is found by clicking on the paint bucket color options -- there is text at the top for "Alpha" which is an adjustable %). If you want to have the color change through time, you can change the color of the fill slightly for each Day. 

One more note: to get your pen tool to give you curves, you need to click and drag when putting down a node. The "drag" will bring up "handlers" which give you curve adjustments. If you need to add handlers to a node, hold down the Pen tool and select Convert Anchor Point Tool. Click and drag on the node and handlers should appear. 


If you have more questions or have found a handy trick, post a comment! Anything that saves time/work is a good thing!

3 comments:

  1. How do I make the caret move along the timeline to correspond to the day? Like when the lines moving get to Day 1, the caret should be there too, but it's not for me.

    ReplyDelete
  2. Add a motion tween to the caret that fills the entire length of the movie (from day 0 to the end). Then add special keyframes within the motion tween to align the caret to a specific spot at a specific frame. The special keyframes are added the same way -- right click on the frame within the motion tween and select Keyframe. There are different versions...I select All. This special keyframe will appear as a small diamond within the blue keyframe block. Move the caret to the exact spot and the tween will adjust to get it there on that frame.

    Theoretically, if you get your timeline spaces perfectly spaced, you won't need this step, but with text labels for the timeline, there is often a bit of spacing variation.

    ReplyDelete