A Flash Developer Resource Site

Page 1 of 3 123 LastLast
Results 1 to 20 of 41

Thread: Liquid effect buttons

  1. #1
    Relaxing tmoore935's Avatar
    Join Date
    Oct 2001
    Location
    colorado, usa
    Posts
    1,713

    Liquid effect buttons

    http://www.flutlicht.com/

    Are the liquid buttons a flash 8 effect or can it be done with actionscript?
    Any programming language is at its best before it is implemented and used.

  2. #2
    Monkey Moderator Lexicon's Avatar
    Join Date
    Jul 2001
    Location
    UK
    Posts
    2,038
    I think that has been done outside of Flash and it is a load of images. It would be tricky to get such a nice effect in AS, although it is not outside the realms of possibility. Experiment with the displacementMapFilter.

    I've done a similar effect with a couple of displacement maps, but it doesn't quite work as well as the one you linked to.
    www.lexicon-design.co.uk
    If we aren't supposed to eat animals, then why are they made of meat?
    If Vegetarians like animals so much, why do they eat all their food?

  3. #3
    Relaxing tmoore935's Avatar
    Join Date
    Oct 2001
    Location
    colorado, usa
    Posts
    1,713
    Thank you for the reply. I am new to displacement filters and was hoping to get a tutorial or fla on it. I see the one on the porfolio page of your site.the button with two displacement maps. I am not a novice but I am no pro.
    Any programming language is at its best before it is implemented and used.

  4. #4
    Monkey Moderator Lexicon's Avatar
    Join Date
    Jul 2001
    Location
    UK
    Posts
    2,038
    Unfortunately the fla of that example decided to corrupt itself so I've had to rebuild it for you. Bear in mind it is a work in progress, so I'm sure it can be improved upon. I've tried to add a few comments to help explain it.
    Attached Files Attached Files
    www.lexicon-design.co.uk
    If we aren't supposed to eat animals, then why are they made of meat?
    If Vegetarians like animals so much, why do they eat all their food?

  5. #5
    Relaxing tmoore935's Avatar
    Join Date
    Oct 2001
    Location
    colorado, usa
    Posts
    1,713
    Thank you. I will be looking at it when I get home from work.
    Any programming language is at its best before it is implemented and used.

  6. #6
    Monkey Moderator Lexicon's Avatar
    Join Date
    Jul 2001
    Location
    UK
    Posts
    2,038
    enjoy!
    www.lexicon-design.co.uk
    If we aren't supposed to eat animals, then why are they made of meat?
    If Vegetarians like animals so much, why do they eat all their food?

  7. #7
    BetaBop
    Join Date
    Sep 2005
    Location
    SF, CA, USA
    Posts
    40

    awsome

    I was looking for something like this. I couldn't figure out the displacement code. I think this will set me in the right direction, but my goal is to have it follow the mouse like the other versions I see online, instead of on(press) etc. If anyone knows how to then make it look like your cursor is moving through water like a boat, instead of a continous waterdrop, that would be out of control.
    -erok

  8. #8
    Monkey Moderator Lexicon's Avatar
    Join Date
    Jul 2001
    Location
    UK
    Posts
    2,038
    Its exactly the same method, use an onMouseMove to attach the circlular animated movieClips instead of the click and onEnterFrame in the button example.

    You are presumably going to be using a larger image and so it is probably worth using just the one displacement map instead of 2 to keep your framerate up. The water effect on an image on my website uses just the one map and it looks pretty funky with it. (wanted to do that since I first saw it done in Javascript)
    www.lexicon-design.co.uk
    If we aren't supposed to eat animals, then why are they made of meat?
    If Vegetarians like animals so much, why do they eat all their food?

  9. #9
    BetaBop
    Join Date
    Sep 2005
    Location
    SF, CA, USA
    Posts
    40
    GREAT.still working at it. I don't really understand this whole thing yet. I can't get rid of the preview(blured black box) without destroying the script. The mouse move thing was easy, but I still wish it updated more frequently. Can deal with later, but if you could give me a hint about the black preview box that would be great. Sorry, I'm usually better at this but I'm not extremely proficient with flash and now my heads all wrapped up.
    PS this won't be sitting online, so I have no problems with lagging framerates.

  10. #10
    Monkey Moderator Lexicon's Avatar
    Join Date
    Jul 2001
    Location
    UK
    Posts
    2,038
    You can get rid of the black preview box easily by setting the visibility of bmp1 and bmp2 to false. They contain the displacement bitmaps and don't need to be visible, I just have them on show as they illustrate how it works.

    You could try making the animation of the attached circle movieclip faster to speed it up a little. The spring back of the image will be affected by the amount of blur you apply to the displacement map(s), so increasing the x and y blur factors will make it spring back faster. You could also apply a colour matrix filter to the bitmaps to increase the springback speed further, but see if changing the amount of blur helps first.
    Last edited by Lexicon; 09-28-2005 at 07:18 PM.
    www.lexicon-design.co.uk
    If we aren't supposed to eat animals, then why are they made of meat?
    If Vegetarians like animals so much, why do they eat all their food?

  11. #11
    BetaBop
    Join Date
    Sep 2005
    Location
    SF, CA, USA
    Posts
    40
    hmmm. tried
    //test for clearing the bmps
    bmp1.visible=bmp2.visible=false;

    but nothing happened.
    I changed the alpha to 0 and it's gone, but does this mean it's still processing because it's still in the BG. How do I do away with it entirely. well I got it to go away for now so I'll just continue along my way, but thanks for the help,
    "yourrrr grrreat"
    -tony the tiger.

    I'm gonna go fidle with the rest now.

  12. #12
    Monkey Moderator Lexicon's Avatar
    Join Date
    Jul 2001
    Location
    UK
    Posts
    2,038
    bmp1._visible=bmp2._visible=false;
    www.lexicon-design.co.uk
    If we aren't supposed to eat animals, then why are they made of meat?
    If Vegetarians like animals so much, why do they eat all their food?

  13. #13
    BetaBop
    Join Date
    Sep 2005
    Location
    SF, CA, USA
    Posts
    40
    i'wee-tard
    sowry

  14. #14
    BetaBop
    Join Date
    Sep 2005
    Location
    SF, CA, USA
    Posts
    40
    thanks for all the help, greatly appreciated. I'm not as concerned with the spring back but rather that it plays over itself leaving a trail. Right now, as I move the mouse it doesn't play throught the circle animation until I stop and the function stops refreshing itself. I thought maybe I could change the displace if i>10 etc. but no luck. Just to much for me right now. Do you know of any tutorials that might help explain this. I'm gonna try to read through guy's posting on the macromedia sight. might shed some light for me, anyways...

  15. #15
    Monkey Moderator Lexicon's Avatar
    Join Date
    Jul 2001
    Location
    UK
    Posts
    2,038
    sorry, I don't know of any tutorials, I learned it by trial and error and reading the help files.

    if you don't want a trail like that then limit the number of circles you attach over a given period of time etc. I'm not really sure what you are after so it's hard for me to suggest anything.
    www.lexicon-design.co.uk
    If we aren't supposed to eat animals, then why are they made of meat?
    If Vegetarians like animals so much, why do they eat all their food?

  16. #16
    BetaBop
    Join Date
    Sep 2005
    Location
    SF, CA, USA
    Posts
    40
    well I guess I want it to work exactly like this:
    http://www.kneib.biz/f8files/water_with_f8.html

    And yeah I'm getting along with the help files, but sometimes the extra help or point of view really helps. thanks though for the attention. I'll also try a single displacement map. I guess I also don't understand why you masked the circle mc...

  17. #17
    Monkey Moderator Lexicon's Avatar
    Join Date
    Jul 2001
    Location
    UK
    Posts
    2,038
    you mean like this?

    http://www.lexicon-design.co.uk/port...num=1&dfrom=16

    That works by attaching the circles on mouse move so you should have got it earlier. Maybe post the fla so I can see whats going on.
    Last edited by Lexicon; 11-18-2005 at 10:22 AM. Reason: edited link
    www.lexicon-design.co.uk
    If we aren't supposed to eat animals, then why are they made of meat?
    If Vegetarians like animals so much, why do they eat all their food?

  18. #18
    BetaBop
    Join Date
    Sep 2005
    Location
    SF, CA, USA
    Posts
    40

    yup that's it

    herre's my file. I figured it work too, then I attemted to add a matrix that mutliplied on mouseMove. No go though, or at least not yet and as you have put it I shouldn't need to do anything more.

  19. #19
    BetaBop
    Join Date
    Sep 2005
    Location
    SF, CA, USA
    Posts
    40
    so it didn't attach cause it was to large, so I over compensated and whola, here you go. I changed the BG img so its loading a buit off the _x value but it's still the same script etc.
    Attached Files Attached Files

  20. #20
    Monkey Moderator Lexicon's Avatar
    Join Date
    Jul 2001
    Location
    UK
    Posts
    2,038
    here you go.

    I removed one of the displacement filters and fixed it so that it attached the circles properly on mouse move.
    Attached Files Attached Files
    www.lexicon-design.co.uk
    If we aren't supposed to eat animals, then why are they made of meat?
    If Vegetarians like animals so much, why do they eat all their food?

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