Back To Flash and ActionScript Forum

Advanced ActionScript Help!

  • ScRat0i71
  • Novice
  • Novice
  • No Avatar
  • Joined: Apr 12, 2007
  • Posts: 15
  • Loc: Detroit
  • Status: Offline

Post September 2nd, 2007, 1:30 pm

Need someone with crazy actionscript knowledge to help on this one.

I have a project Im working on that is due in 2 days, and this is the flash piece I'm emulating with my tweaks: http://www.burstlabs.com/

What im doing is making the bubbles *not overlap and have them hover in a circle formation. So what I'm using, which is the only way i can think of is springs. My code is below, and any help would be totally appreciated and this is a totally sweet project to add to anyones resumes. If you happen to live in Michigan and your an actionscript guru I will buy you a drink if you can help me on this! : )


I will be on A I M / M S N all day: ScRat0i71



Code: [ Select ]
var left:Number = 0;
var right:Number = Stage.width;
var top:Number = 0;
var bottom:Number = Stage.height;
var numBubbles:Number = 5;
var spring:Number = 0.005;
var gravity:Number = 0;
init();

var spring2:Number = 0.1;
var friction:Number = 0.9;
var spring2Length:Number = 25;


function init() {
    var bubbleArray:Array = new Array();
    for (var i:Number = 0; i<numBubbles; i++) {
        var bubble:MovieClip = attachMovie("bubble", "bubble" + i, i);
        bubbleArray[i] = bubble;
        bubbleArray[i]._x = Math.random() * Stage.width;
        bubbleArray[i]._y = Math.random() * Stage.height;
        bubbleArray[i]._xscale = bubbleArray[i]._yscale = 80 + Math.random()*50;
        bubbleArray[i].vx = 0;
        bubbleArray[i].vy = 0;
        bubbleArray[i].v2x = 0;
        bubbleArray[i].v2y = 0;
        bubbleArray[i].d2x = 0;
        bubbleArray[i].d2y = 0;
        
        
        ////////// --- SPRING TO CIRCLE --- //////////
        springTo(circle, bubbleArray[i]);
        springTo(bubbleArray[i], circle);
        clear();
        lineStyle(1, 0, 100);
        moveTo(circle._x, circle._y);
        lineTo(bubbleArray[0]._x, bubbleArray[0]._y);
        ////////// --- SPRING TO CIRCLE --- //////////
        
        /// -- color
        var orangeColor1:Color = new Color(bubbleArray[i].bg);
        var orangeColor2:Color = new Color(bubbleArray[i].bg_left);
        var orangeColor3:Color = new Color(bubbleArray[i].bg_right);
        var whiteColor:Color = new Color(bubbleArray[i].txt_menu);
        orangeColor1.setRGB(0xE9851A);
        orangeColor2.setRGB(0xE9851A);
        orangeColor3.setRGB(0xE9851A);
        whiteColor.setRGB(0xFFFFFF);
        
        /// -- button state
        bubbleArray[i].onRollOver = function() {
            this.swapDepths(10000);
            this._width += 30;
            this._height += 5;
            this.bg.colorTo(0xFF9A2E, .15, "easeOutQuad");
            this.bg_left.colorTo(0xFF9A2E, .15, "easeOutQuad");
            this.bg_right.colorTo(0xFF9A2E, .15, "easeOutQuad");
        }
        bubbleArray[i].onRollOut = function() {
            this._width -= 30;
            this._height -= 5;
            this.bg.colorTo(0xE9851A, .25, "easeOutQuad");
            this.bg_left.colorTo(0xE9851A, .25, "easeOutQuad");
            this.bg_right.colorTo(0xE9851A, .15, "easeOutQuad");
        }
        /*
        /// -- set textField width
        bubbleArray[i].txt_menu.autoSize = "center";
        
        /// -- set text
        bubbleArray[0].txt_menu.text = "Lorem ipsum";
        bubbleArray[1].txt_menu.text = "dolor sit amet";
        bubbleArray[2].txt_menu.text = "consectetuer adipiscing";
        bubbleArray[3].txt_menu.text = "elit";
        bubbleArray[4].txt_menu.text = "Nulla porta tempus sapien";
        
        /// -- set size/position of bg
        bubbleArray[i].bg._width = bubbleArray[i].txt_menu.textWidth + 10;
        bubbleArray[i].bg_left._x = bubbleArray[i].txt_menu._x -10;
        bubbleArray[i].bg_right._x = bubbleArray[i].txt_menu.textWidth / 2 + 12;
        */
    }
}
function onEnterFrame(Void):Void {
    for(var i = 0; i < numBubbles - 1; i++)
    {
        var bubbleA:MovieClip = this["bubble" + i];
        for(var j = i + 1; j < numBubbles; j++)
        {
            var bubbleB:MovieClip = this["bubble" + j];
            var dx:Number = bubbleB._x - bubbleA._x;
            var dy:Number = bubbleB._y - bubbleA._y;
            var dist:Number = Math.sqrt(dx*dx + dy*dy);
            var minDist:Number = bubbleA._width + bubbleB._width;
            if(dist < minDist)
            {
                var angle:Number = Math.atan2(dy, dx);
                var targetX:Number = bubbleA._x + Math.cos(angle) * minDist;
                var targetY:Number = bubbleA._y + Math.sin(angle) * minDist;
                var ax:Number = (targetX - bubbleB._x) * spring;
                var ay:Number = (targetY - bubbleB._y) * spring;
                bubbleA.vx -= ax;
                bubbleA.vy -= ay;
                bubbleB.vx += ax;
                bubbleB.vy += ay;
            }
        }
    }
    for (var i = 0; i < numBubbles; i++) {
        var bubble:MovieClip = this["bubble" + i];
        move(bubble);
    }
}
function move(bubble:MovieClip) {
    bubble.vy += gravity;
    bubble._x += bubble.vx;
    bubble._y += bubble.vy;
    if (bubble._x + bubble._width / 2 > right) {
        bubble._x = right-bubble._width / 2;
        bubble.vx *= -.9;
    } else if (bubble._x - bubble._width / 2 < left) {
        bubble._x = left+bubble._width / 2;
        bubble.vx *= -.9;
    }
    if (bubble._y + bubble._width / 2 > bottom) {
        bubble._y = bottom-bubble._width / 2;
        bubble.vy *= -.9;
    } else if (bubble._y - bubble._width / 2 < top) {
        bubble._y = top+bubble._width / 2;
        bubble.vy *= -.9;
    }
}

function springTo(ballA, ballB)
{
    if(!ballA.dragging)
    {
        var d2x:Number = ballA._x - ballB._x;
        var d2y:Number = ballA._y - ballB._y;
        var angle:Number = Math.atan2(d2y, d2x);
        var targetX:Number = ballB._x + Math.cos(angle) * spring2Length;
        var targetY:Number = ballB._y + Math.sin(angle) * spring2Length;
        ballA.v2x += (targetX - ballA._x) * spring2;
        ballA.v2y += (targetY - ballA._y) * spring2;
        ballA.v2x *= friction;
        ballA.v2y *= friction;
        ballA._x += ballA.v2x;
        ballA._y += ballA.v2y;
    }
};

/*
function doDrag()
{
    this.dragging = true;
    this.startDrag();
}
function doDrop()
{
    this.dragging = false;
    this.stopDrag();
}
*/
  1. var left:Number = 0;
  2. var right:Number = Stage.width;
  3. var top:Number = 0;
  4. var bottom:Number = Stage.height;
  5. var numBubbles:Number = 5;
  6. var spring:Number = 0.005;
  7. var gravity:Number = 0;
  8. init();
  10. var spring2:Number = 0.1;
  11. var friction:Number = 0.9;
  12. var spring2Length:Number = 25;
  15. function init() {
  16.     var bubbleArray:Array = new Array();
  17.     for (var i:Number = 0; i<numBubbles; i++) {
  18.         var bubble:MovieClip = attachMovie("bubble", "bubble" + i, i);
  19.         bubbleArray[i] = bubble;
  20.         bubbleArray[i]._x = Math.random() * Stage.width;
  21.         bubbleArray[i]._y = Math.random() * Stage.height;
  22.         bubbleArray[i]._xscale = bubbleArray[i]._yscale = 80 + Math.random()*50;
  23.         bubbleArray[i].vx = 0;
  24.         bubbleArray[i].vy = 0;
  25.         bubbleArray[i].v2x = 0;
  26.         bubbleArray[i].v2y = 0;
  27.         bubbleArray[i].d2x = 0;
  28.         bubbleArray[i].d2y = 0;
  29.         
  30.         
  31.         ////////// --- SPRING TO CIRCLE --- //////////
  32.         springTo(circle, bubbleArray[i]);
  33.         springTo(bubbleArray[i], circle);
  34.         clear();
  35.         lineStyle(1, 0, 100);
  36.         moveTo(circle._x, circle._y);
  37.         lineTo(bubbleArray[0]._x, bubbleArray[0]._y);
  38.         ////////// --- SPRING TO CIRCLE --- //////////
  39.         
  40.         /// -- color
  41.         var orangeColor1:Color = new Color(bubbleArray[i].bg);
  42.         var orangeColor2:Color = new Color(bubbleArray[i].bg_left);
  43.         var orangeColor3:Color = new Color(bubbleArray[i].bg_right);
  44.         var whiteColor:Color = new Color(bubbleArray[i].txt_menu);
  45.         orangeColor1.setRGB(0xE9851A);
  46.         orangeColor2.setRGB(0xE9851A);
  47.         orangeColor3.setRGB(0xE9851A);
  48.         whiteColor.setRGB(0xFFFFFF);
  49.         
  50.         /// -- button state
  51.         bubbleArray[i].onRollOver = function() {
  52.             this.swapDepths(10000);
  53.             this._width += 30;
  54.             this._height += 5;
  55.             this.bg.colorTo(0xFF9A2E, .15, "easeOutQuad");
  56.             this.bg_left.colorTo(0xFF9A2E, .15, "easeOutQuad");
  57.             this.bg_right.colorTo(0xFF9A2E, .15, "easeOutQuad");
  58.         }
  59.         bubbleArray[i].onRollOut = function() {
  60.             this._width -= 30;
  61.             this._height -= 5;
  62.             this.bg.colorTo(0xE9851A, .25, "easeOutQuad");
  63.             this.bg_left.colorTo(0xE9851A, .25, "easeOutQuad");
  64.             this.bg_right.colorTo(0xE9851A, .15, "easeOutQuad");
  65.         }
  66.         /*
  67.         /// -- set textField width
  68.         bubbleArray[i].txt_menu.autoSize = "center";
  69.         
  70.         /// -- set text
  71.         bubbleArray[0].txt_menu.text = "Lorem ipsum";
  72.         bubbleArray[1].txt_menu.text = "dolor sit amet";
  73.         bubbleArray[2].txt_menu.text = "consectetuer adipiscing";
  74.         bubbleArray[3].txt_menu.text = "elit";
  75.         bubbleArray[4].txt_menu.text = "Nulla porta tempus sapien";
  76.         
  77.         /// -- set size/position of bg
  78.         bubbleArray[i].bg._width = bubbleArray[i].txt_menu.textWidth + 10;
  79.         bubbleArray[i].bg_left._x = bubbleArray[i].txt_menu._x -10;
  80.         bubbleArray[i].bg_right._x = bubbleArray[i].txt_menu.textWidth / 2 + 12;
  81.         */
  82.     }
  83. }
  84. function onEnterFrame(Void):Void {
  85.     for(var i = 0; i < numBubbles - 1; i++)
  86.     {
  87.         var bubbleA:MovieClip = this["bubble" + i];
  88.         for(var j = i + 1; j < numBubbles; j++)
  89.         {
  90.             var bubbleB:MovieClip = this["bubble" + j];
  91.             var dx:Number = bubbleB._x - bubbleA._x;
  92.             var dy:Number = bubbleB._y - bubbleA._y;
  93.             var dist:Number = Math.sqrt(dx*dx + dy*dy);
  94.             var minDist:Number = bubbleA._width + bubbleB._width;
  95.             if(dist < minDist)
  96.             {
  97.                 var angle:Number = Math.atan2(dy, dx);
  98.                 var targetX:Number = bubbleA._x + Math.cos(angle) * minDist;
  99.                 var targetY:Number = bubbleA._y + Math.sin(angle) * minDist;
  100.                 var ax:Number = (targetX - bubbleB._x) * spring;
  101.                 var ay:Number = (targetY - bubbleB._y) * spring;
  102.                 bubbleA.vx -= ax;
  103.                 bubbleA.vy -= ay;
  104.                 bubbleB.vx += ax;
  105.                 bubbleB.vy += ay;
  106.             }
  107.         }
  108.     }
  109.     for (var i = 0; i < numBubbles; i++) {
  110.         var bubble:MovieClip = this["bubble" + i];
  111.         move(bubble);
  112.     }
  113. }
  114. function move(bubble:MovieClip) {
  115.     bubble.vy += gravity;
  116.     bubble._x += bubble.vx;
  117.     bubble._y += bubble.vy;
  118.     if (bubble._x + bubble._width / 2 > right) {
  119.         bubble._x = right-bubble._width / 2;
  120.         bubble.vx *= -.9;
  121.     } else if (bubble._x - bubble._width / 2 < left) {
  122.         bubble._x = left+bubble._width / 2;
  123.         bubble.vx *= -.9;
  124.     }
  125.     if (bubble._y + bubble._width / 2 > bottom) {
  126.         bubble._y = bottom-bubble._width / 2;
  127.         bubble.vy *= -.9;
  128.     } else if (bubble._y - bubble._width / 2 < top) {
  129.         bubble._y = top+bubble._width / 2;
  130.         bubble.vy *= -.9;
  131.     }
  132. }
  134. function springTo(ballA, ballB)
  135. {
  136.     if(!ballA.dragging)
  137.     {
  138.         var d2x:Number = ballA._x - ballB._x;
  139.         var d2y:Number = ballA._y - ballB._y;
  140.         var angle:Number = Math.atan2(d2y, d2x);
  141.         var targetX:Number = ballB._x + Math.cos(angle) * spring2Length;
  142.         var targetY:Number = ballB._y + Math.sin(angle) * spring2Length;
  143.         ballA.v2x += (targetX - ballA._x) * spring2;
  144.         ballA.v2y += (targetY - ballA._y) * spring2;
  145.         ballA.v2x *= friction;
  146.         ballA.v2y *= friction;
  147.         ballA._x += ballA.v2x;
  148.         ballA._y += ballA.v2y;
  149.     }
  150. };
  152. /*
  153. function doDrag()
  154. {
  155.     this.dragging = true;
  156.     this.startDrag();
  157. }
  158. function doDrop()
  159. {
  160.     this.dragging = false;
  161.     this.stopDrag();
  162. }
  163. */
[/code]
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post September 2nd, 2007, 1:30 pm

  • graphixboy
  • Control + Z
  • Mastermind
  • User avatar
  • Joined: Jul 11, 2005
  • Posts: 1828
  • Loc: In the Great White North
  • Status: Offline

Post September 2nd, 2007, 4:37 pm

could you be a little more specific about whats wrong? You won't get much help by saying your trying to copy something and not telling us whats broken
  • ScRat0i71
  • Novice
  • Novice
  • No Avatar
  • Joined: Apr 12, 2007
  • Posts: 15
  • Loc: Detroit
  • Status: Offline

Post September 2nd, 2007, 7:42 pm

Ahh yes. That would make sense as well.

If you check the link http://www.burstlabs.com/ and compare it to my project http://romanodx.com/projects/xxxxxx/bubbleTest.html you will notice quite a bit of difference.

My problem arises here:
1) - I need fluid like movement within a circular barrier like this site.

2) - Need to dynamically tween a rollover popup instead of an instant grow and back look. (smooth transition up and down). Right now its just bubbleArray[i]._width += 30; bubbleArray[i]._height += 5; thats the code for now. I'm thinking it has to be a function because the size is generated different every time and I cant use the lmc_tween to just scale up or down, because it returns the dynamically generated random size to the set size of 100...

3) - Objects that are floating can not overlap each other and must stay in a sort of circular arrangement. I'm not an actionscript genious, but the only thing I can find that is remotely close to what i need is using springs? I'm really not sure how to go about this neat effect.


What I have done in this project, or thought would work is this:
1) - Use "Actionscript Animation - Making things move" by Keith Peters chapter 8 "springs" and try to make a motion without using gravity so all the array controlled instances will bounce off eachother with a 10 pixel shell in between, which obviously in my example is a lot bigger than 10 pixels and I cant figure that out.

2) - Use another "spring" type movement to form a circular pattern. Using the springTo function in this script I was hoping to link one instance to the middle "circle" that is hidden, and then link all the others to the one that is linked to the circle, and the last one linked to the circle so its a chain around the circle. That, however, is not working at the moment. (you will notice a simple line trying to draw to the position of one box every time to show a link to the middle "circle" thats hidden.)



I hope this explanation will help show you what I'm trying to do with this.
Also, copy my actionscript and paste it into flash and create an instance of a movieclip on the stage called bubble, and create another movieclip on the stage of a circle and in the linkage name it circle. If you use AIM or MSN please add my screen name and I can talk and better explain if a question arises of what it is I'm looking to do.

Thanks a million! : )
  • dhonsvick
  • Beginner
  • Beginner
  • No Avatar
  • Joined: May 27, 2007
  • Posts: 49
  • Status: Offline

Post September 2nd, 2007, 10:14 pm

Heres a fluid Grow and Shrink function. Put these functions in your actions frame under root.


Code: [ Select ]

function grow(clip, scale){
        var xs:Tween = new Tween(clip, "_xscale", Strong.easeOut, clip._xscale, scale, 1, true);
        var ys:Tween = new Tween(clip, "_yscale", Strong.easeOut, clip._yscale, scale, 1, true);
    }
    function shrink(clip){
        var xs2:Tween = new Tween(clip, "_xscale", Strong.easeOut , clip._xscale, 100, 1, true);
        var ys2:Tween = new Tween(clip, "_yscale", Strong.easeOut, clip._yscale, 100, 1, true);
        
    }
  2. function grow(clip, scale){
  3.         var xs:Tween = new Tween(clip, "_xscale", Strong.easeOut, clip._xscale, scale, 1, true);
  4.         var ys:Tween = new Tween(clip, "_yscale", Strong.easeOut, clip._yscale, scale, 1, true);
  5.     }
  6.     function shrink(clip){
  7.         var xs2:Tween = new Tween(clip, "_xscale", Strong.easeOut , clip._xscale, 100, 1, true);
  8.         var ys2:Tween = new Tween(clip, "_yscale", Strong.easeOut, clip._yscale, 100, 1, true);
  9.         
  10.     }




Now you can call _root.grow(<instance name>,percent); From anywhere in your movie or submovies.
ie
Code: [ Select ]
_root.grow(myInstance, 150);

grows myInstance 150% And
Code: [ Select ]
_root.shrink(myInstance)
to go back to normal.);
  • ScRat0i71
  • Novice
  • Novice
  • No Avatar
  • Joined: Apr 12, 2007
  • Posts: 15
  • Loc: Detroit
  • Status: Offline

Post September 4th, 2007, 9:00 pm

That function you gave me is kewl, but it's not helping with the dynamic instances remembering scale and such.
  • graphixboy
  • Control + Z
  • Mastermind
  • User avatar
  • Joined: Jul 11, 2005
  • Posts: 1828
  • Loc: In the Great White North
  • Status: Offline

Post September 5th, 2007, 5:51 am

just mod dhonsvick's script to keep track of the start state.

Code: [ Select ]
function grow(clip, scale){
    clip.startXscale = clip._xscale;
    clip.startYscale = clip._yscale;
   var xs:Tween = new Tween(clip, "_xscale", Strong.easeOut, clip._xscale, scale, 1, true);

   var ys:Tween = new Tween(clip, "_yscale", Strong.easeOut, clip._yscale, scale, 1, true);

  }

  function shrink(clip){

   var xs2:Tween = new Tween(clip, "_xscale", Strong.easeOut , clip._xscale, clip.startXscale, 1, true);

   var ys2:Tween = new Tween(clip, "_yscale", Strong.easeOut, clip._yscale, clip.startYscale, 1, true);

   

  }
  1. function grow(clip, scale){
  2.     clip.startXscale = clip._xscale;
  3.     clip.startYscale = clip._yscale;
  4.    var xs:Tween = new Tween(clip, "_xscale", Strong.easeOut, clip._xscale, scale, 1, true);
  6.    var ys:Tween = new Tween(clip, "_yscale", Strong.easeOut, clip._yscale, scale, 1, true);
  8.   }
  10.   function shrink(clip){
  12.    var xs2:Tween = new Tween(clip, "_xscale", Strong.easeOut , clip._xscale, clip.startXscale, 1, true);
  14.    var ys2:Tween = new Tween(clip, "_yscale", Strong.easeOut, clip._yscale, clip.startYscale, 1, true);
  16.    
  18.   }


what its doing...

clip.startXscale = clip._xscale; - clip is a reference to what ever movieclip you pass to the function so this just takes that clip and makes a variable inside of it thats equal to the xscale before the transform occurs.

Then when you shrink the clip back down you want to read in the start value stored in the clip instead of the default 100% value that dhonsvick used.
  • ScRat0i71
  • Novice
  • Novice
  • No Avatar
  • Joined: Apr 12, 2007
  • Posts: 15
  • Loc: Detroit
  • Status: Offline

Post September 10th, 2007, 8:07 pm

Awesome! Thanks man! When i get the chance i will put that in and that is definitely what im looking for!

Would you happen to know anything about loading xml into dynamically created instances that float around without touching each other?
  • graphixboy
  • Control + Z
  • Mastermind
  • User avatar
  • Joined: Jul 11, 2005
  • Posts: 1828
  • Loc: In the Great White North
  • Status: Offline

Post September 12th, 2007, 8:06 am

just about everything you could possibly need to know about xml to use it in Flash via Kirupa.com

Page 1 of 1

Post Information

  • Total Posts in this topic: 8 posts
  • Users browsing this forum: No registered users and 44 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.