A Flash Developer Resource Site

Results 1 to 6 of 6

Thread: History of stuff - how do they do the shimmering stroke affect?

  1. #1
    Junior Member
    Join Date
    Dec 2008
    Posts
    3

    History of stuff - how do they do the shimmering stroke affect?

    hello people,

    I recently came across an amazing website here: www.storyofstuff.com and I'm trying to work out how they did some of the animation.

    If you right click and zoom in you can see that the animation is flash overlaid on video but I can't work out how they got the "shimmering" effect.

    I looked at After Effects and you can do some cartoon-style effects there but given that the animation is all vector I reckon I must have been done in Flash (possibly not if anyone has any ideas?).

    I have a project where we want to do something similar and would really appreciate any help on this.

    thanks Toby

  2. #2
    Junior Member
    Join Date
    Dec 2008
    Posts
    3
    ps sorry, I just realised I wasn't being very clear - I mean the fact the strokes of the cartoon appear to move slightly from frame to frame. Maybe it's been done frame to frame but this would be a pain in the ass - is there any automated way of doing this?

  3. #3
    Character Animator The_e-Tahn's Avatar
    Join Date
    Jul 2002
    Location
    cube #45, calarts
    Posts
    635
    Ah! This is a classic effect used in 2D animation in order to keep your still images still "alive" and "animated". (So, if you're going to have a 'live' character standing still on screen, say they're listening to another character speak, in order to not make them a static image, the animator gives them this 'shimmering'/jittering effect).
    What you're looking at is really simple: a quick toggling between two frames. Draw your original image and then lock your layer. Trace exactly over it on another layer. Chances are, your line strokes won't have the exact same width, and they'll probably be slightly off from your original lines. Take this traced image and move it to your second frame. Make this 'sequence' a movie clip; it'll repeatedly repeat, thus giving you the jittering image effect by alternating between both drawings.
    Also, you could (within that movie clip) make multiple copies of these frames and alter their speeds (say, show drawing 1 for 2 frames, drawing 2 for 1 frame, drawing 1 again for 3 frames, drawing 2 for 1 frame, etc etc etc).
    hope this helps

  4. #4
    Junior Member
    Join Date
    Dec 2008
    Posts
    3
    hi, thanks for getting back to me. I suspected it had been done manually - I guess there's no actionscript way of changing the strokes dynamically? I achieved something similar by flicking between high, medium and low quality looping on three frames but understandably the strokes became a bit pixelated on low quality.

  5. #5
    Character Animator The_e-Tahn's Avatar
    Join Date
    Jul 2002
    Location
    cube #45, calarts
    Posts
    635
    yes, that would work, but still-- all you have to do is draw the same thing twice and repeat the movie clip (that's an awful lot better than ahving to draw out every single frame as a jitter, right?) So yeah. I'm sure there *is* some crazy AS way to program it, but it'd be easier just to draw it.
    Plus you get more drawing practice in

  6. #6
    Senior Member
    Join Date
    Jun 2004
    Location
    UK
    Posts
    451
    This effect has a name -- it's called "boiling". There IS at least one animation package that can do this automatically -- Anime Studio. There's a current offer on the "standard" version at the moment -- I think it's only $19 or so. You can try before you buy too: Anime Studio. Be aware, though, that THIS effect cannot be exported directly from the program as a SWF file. SWF files *can* be exported, but it's best to keep animation as fairly uncomplicated vector shapes. (The effect you want can be exported as MOV or AVI animation files, or as an image sequence.)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  




Click Here to Expand Forum to Full Width

HTML5 Development Center