3 Replies Latest reply on Aug 10, 2017 10:25 AM by resdesign

    Recreate this: Randomly floating bubbles created with Flash

    Jonofunker Level 1

      Hi,

       

      my coding skills are very limited - so I came here to seek help

       

      Back in the Flash-days I got hold of some ActionScript that gave me the following result:

       

      Randomly floating bubbles created with Flash - YouTube

       

      It was a piece of code that I could just apply to an object, and it would have this floating movement.

       

      It is a nice and subtle effect to spice up an ad

       

      Anyone who can help me recreate this in Adobe Edge?

       

      (I found this thread about a similar effect, but it require some adjustments which I dont know how to do: Constant random X & Y movement + constraints?)

       

      Thank you very much.

        • 1. Re: Recreate this: Randomly floating bubbles created with Flash
          resdesign Adobe Community Professional & MVP

          What version of EA do you have?

          • 2. Re: Recreate this: Randomly floating bubbles created with Flash
            Jonofunker Level 1

            I am using Adobe Edge Animate CC 2015.0

            • 3. Re: Recreate this: Randomly floating bubbles created with Flash
              resdesign Adobe Community Professional & MVP

              If you want to use Tim's script change the min and max for be less dramatic. Of course this is only for 1 object. You will need to do this for each bubble. I will try and get a sample later but you might want to try this.

              FYI, change the name of your symbol to your symbol name as well as the stage size.

               

              var timerTween;

              // used to offset the bounds

              var objWidth = sym.$("bubble").width();

              var objHeight = sym.$("bubble").height();

               

              // stage width/height

              var windowWidth = 600;

              var windowHeight = 400;

               

              // min/max vars

              var minXPos = 10;

              var minYPos = 10;

               

              var maxXPos = 50;

              var maxYPos = 50;

              // timer function

              sym.initTimer = function(){

                        // very short timer, to call "tweenObject" function

                        timerTween = setTimeout(function() {

                             sym.tweenObject();

                                      }, 10);

              }

               

              // here's where we get random values and actually tween the object, using the jQuery "animate" method

              sym.tweenObject = function(){

                  var tweenTime = sym.getRandomInRange(1000, 3000);

                   var xPos = sym.getRandomInRange(minXPos, maxXPos);

                   var yPos = sym.getRandomInRange(minYPos, maxYPos);

                   sym.$("bubble").animate({left:xPos, top:yPos}, tweenTime, 'swing', sym.initTimer);

              }

              // utility function to give us random values

              sym.getRandomInRange = function(start, end) {

                   return Math.round( start + (Math.random() * (end - start)) );

              }

              // let's start the animation, shall we?

              sym.initTimer();