A Flash Developer Resource Site

Results 1 to 16 of 16

Thread: How do you do this???

  1. #1
    Member
    Join Date
    Oct 2006
    Posts
    31

    How do you do this???

    Can anyone tell me how to get the effect on this website?

    http://www.mountseymour.com/

  2. #2
    up to my .as in code Chris_Seahorn's Avatar
    Join Date
    Dec 2004
    Posts
    4,389
    Years ago I would have said custom coding. Not these days...I'll bet my hat that is a pre-canned effect from either a generator or one of the authoring platforms with built in effect engines (Swishmax, Koolmoves,etc). They can control every aspect with a simple GUI option choice (particle scale, velocity, fade time, etc).

    Now I don't have a snowflake handy but you'll get the idea. Keep your mouse there, the effect will progress.....

    http://flashnow.servebbs.com/examples/ozzie123.html

    To get the effect of different snowflakes they most likely nest two or three generator clips (using slightly different flake shapes) into one master clip that tracks the mouse.

  3. #3
    Senior Member Genesis F5's Avatar
    Join Date
    Jan 2002
    Location
    Unallocated memory
    Posts
    1,845
    It's an extremely easy effect to pull off with minimal code. Here's an example I made for you. I've commented the important parts, but if you have any further questions, please let me know.
    Attached Files Attached Files

  4. #4
    Member
    Join Date
    Oct 2006
    Posts
    31
    Thanks. That was fast! How about the other effect of the images showing up through that grungy background? The same agency did the same type of thing with this site http://www.lululemon.com/. The mouse thing gets annoying but the way the images show up is cool. How is that done?

    Thanks a bunch!

  5. #5

  6. #6
    Senior Member Genesis F5's Avatar
    Join Date
    Jan 2002
    Location
    Unallocated memory
    Posts
    1,845
    I came in a day late and a dollar short.

  7. #7
    Senior Member Genesis F5's Avatar
    Join Date
    Jan 2002
    Location
    Unallocated memory
    Posts
    1,845
    Grunge? What do you mean? The clover / flower looking animation that zooms in to reveal the pictures underneath?

  8. #8
    up to my .as in code Chris_Seahorn's Avatar
    Join Date
    Dec 2004
    Posts
    4,389
    They are two different effects. One applied to the mouse like Genesis showed you...another effect (a masked reveal) on the underlying image (I have a feeling he's gonna plop down some code so I'll save some time and leave it at that). He's rocking tonight

  9. #9
    Member
    Join Date
    Oct 2006
    Posts
    31
    I can't keep up with you two! The "grungy thing" is on the Mt. Seymour site but they do the same type of effect with the "clover thingie" on the Lululemon site. It does indeed look like a mask effect but how do you make the mask "move" like that? I'm still a total newbie and understand masks but, so far, all I've been taught are static masks.

    You both really rock!

  10. #10
    up to my .as in code Chris_Seahorn's Avatar
    Join Date
    Dec 2004
    Posts
    4,389
    I still have my money on Swishmax or Koolmoves. I'm thinking that is not a flash site per se. Today there are tons of authoring tools that export as flash and you can't tell the difference but usually that many cheesy mouse effects spells low cost third party tool IMO. A lot of these effects are seconds away with a generator (why hand code what's pre coded...especially things like the masked reveals). Not to mention both of the packages I mentioned have over 250 pre-cans each.

  11. #11
    Senior Member Genesis F5's Avatar
    Join Date
    Jan 2002
    Location
    Unallocated memory
    Posts
    1,845
    Ah, OK. I see what you mean. On the Seymour site, that's just a transparent GIF / PNG (most likely) laid on the top layer of the movie.

    Here's the clover example. Very barebones, but it demonstrates how to create dynamic masks.

    Thanks, CS. I'll let you take the next one

    Edit: I agree with CS on the prefab components.
    Attached Files Attached Files

  12. #12
    up to my .as in code Chris_Seahorn's Avatar
    Join Date
    Dec 2004
    Posts
    4,389
    And there you have it...the man is definitely on a roll. Nice job Genesis

    Good luck ozzie !!!

  13. #13
    Senior Member Genesis F5's Avatar
    Join Date
    Jan 2002
    Location
    Unallocated memory
    Posts
    1,845
    Haha, I've been away from the help forums for too long. Very eager to get back into the full swing of things.

  14. #14
    Member
    Join Date
    Oct 2006
    Posts
    31
    Very cool Genesis F5! And far simpler than expected.

    I will admit to being disappointed that it could be a third party generator though. That's a ripoff! These guys make big bucks...and they could be cheating. Crummy. Oh well, I'm glad to know how its done so I can be a puritan.

    Thanks to you both!

  15. #15
    up to my .as in code Chris_Seahorn's Avatar
    Join Date
    Dec 2004
    Posts
    4,389
    hahaha...well...Swish and the others smoke us on internal effects (the sheer amount of clickable GUI options for each effect is staggering) but they are all trapped in the world of AS1 (not to mention limited in many other ways) so we Flashers smoke them on power

    I only own all the third parties because I supply sourcecode for them but otherwise never use them. Stick with Flash...advance Genesis's code example and you'll be the better coder

  16. #16
    Senior Member Genesis F5's Avatar
    Join Date
    Jan 2002
    Location
    Unallocated memory
    Posts
    1,845
    Here's a version that's a little more like what they use. I use alternating movie clips, all sharing one mask by taking turns with it. When the picture needs to change, I swapDepth them so the preloading movie is brought to the front and set the mask to that. It gives the illusion that it's multiple frames when in reality it's just two that keep playing that game you play with stacking your fists or whatever it is.

    You can use as many pictures as you want. You can easily adapt this to read XML lists and you can set it up to load external pictures or even movie clips. Right now it just loads some low resource graphic files I threw together.
    Attached Files Attached Files

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