4 Replies Latest reply on Jan 5, 2010 9:57 AM by JoanaBCunha

    How to make Jelly Effect for Button

    Kapil Soni

      Can any one suggest how to make a button have jelly effect in adobe Catalyst like Eg : http://www.flashmovielist.com/watch/webdesign_jelly_effect_flash_altamash_375928.html


      when you click the clock it bounces

        • 1. Re: How to make Jelly Effect for Button
          Tvoliter Adobe Employee

          Hi Soni,

               I checked out the site you references with the Jelly effect. The animation appears to randomly move the object and non-uniformly scale the object at the same time to achieve the effect.


          You could achieve something similiar Catalyst in two ways:



          1) Create an Action Sequence that has a series of Move and Resize effects that script how the object rooms. This method doesn't make use of randomness, so the animation would look the same every time.


          To do this:

          1) Create a button (this will start the animation)

          2) Draw the object(s) that you want to appy the jelly effect. Group the objects if they are not already.

          3) Select the button and choose "Add Interaction" in the Interactions panel

          4) Choose "On Click, Play Action Sequence" in the dialog that appears and click ok. A new action sequence appears in the timeline

          5) Select the objects you grouped early

          6) In the Timeline panel, choose Add Effect > Move. Do this several times

          7) In the Timeline panel, choose Add Effect > Resize. Do this several times

          8) You now have the bulding blocks for the Jelly effect, you now need to edit the Move and Resize effects to control the animation

          9) First Stragger the Move and Resize effects so effects of the same type don't overlap

          10) Next, select each effect and edit the effect's properties in the Properties panel. This is how you specify how the effect moves or resizes the object


          Note: notice that when you select an effect you can also control easing in the Properties panel. There is a "bounce" and "elastic" easing that will make your move and resize effects have a bouncy or elastic feel.


          The other option is to use Flash and Catalyst together

          1) Build the Jelly effect in Flash and export it as a swf file

          2) Import the SWF file by selecting File > Import > SWF file

          3) To make the SWF play use an action sequence.

          4) Select a button and make a "on click, play action sequence" interaction in the Interactions panel (similiar to the steps above)

          5) Select the swf on the artboard and choose Add Effect > SWF Control > Play in the timeline



          • 2. Re: How to make Jelly Effect for Button
            JoanaBCunha Level 1

            Hi soni! were you able to control the SWF? I've been having problems with it.

            • 3. Re: How to make Jelly Effect for Button
              Kapil Soni Level 1

              Well i have not yet tried it out. but i am sure that some particular SWF files which are effected with content outside SWF file dosent work on the cataylyst. of your swf file is one single file it is ok and would work fine. Only problem is you have to run 2-3 time to check the alignment of the swf file on the webpage that is annoying.

              • 4. Re: How to make Jelly Effect for Button
                JoanaBCunha Level 1

                I didn't thought about that! your right! how can you put animations if you

                don't know where the swf is positioned