如何實現像http://www.bcaa.it/

Question

字符串效果我想做一個像這個網站的字符串效果http://www.bcaa.it/ 我可以學習什麼樣的腳本或教程？

基本上我想實現與網站相同。有彈跳的字符串效果，拖動項目，並遠離其他項目，靠近它，拖動和子對象後跟緩動...

Answer 1

嘿剛開始編碼這個，需要類似的圖形顯示我工作。這裏是我的開始，只是兩個按鈕，但這個想法可以外推/優化：

<?xml version="1.0" encoding="utf-8"?> 
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
         xmlns:s="library://ns.adobe.com/flex/spark" 
         xmlns:mx="library://ns.adobe.com/flex/mx" 
         creationComplete="windowedapplication1_creationCompleteHandler(event)"> 

    <fx:Script> 
     <![CDATA[ 
      import mx.events.FlexEvent; 

      private var optimalDistanceUpdateTimer:Timer; 

      private var optimalDistance:Number = 100; 

      private var objectUserGrabbed:Button; 

      private var delayDenominator:Number = 6; 

      protected function button1_mouseDownHandler(event:MouseEvent):void 
      { 
       objectUserGrabbed = event.target as Button; 
       objectUserGrabbed.startDrag(); 
      } 

      protected function button1_mouseUpHandler(event:MouseEvent):void 
      { 
       objectUserGrabbed.stopDrag(); 
      } 

      protected function windowedapplication1_creationCompleteHandler(event:FlexEvent):void 
      { 
       optimalDistanceUpdateTimer = new Timer(33); 
       optimalDistanceUpdateTimer.addEventListener(TimerEvent.TIMER, optimalDistanceTickedHandler); 
       optimalDistanceUpdateTimer.start(); 
      } 
      private function optimalDistanceTickedHandler(event:TimerEvent):void 
      { 
       var targetPoint:Point; 
       var deltaX:Number; 
       var deltaY:Number; 

       if(!objectUserGrabbed) 
        return; 

       if(objectUserGrabbed == button1) 
       { 
        //Basically here I'm playing of Pythagorean theorem for a 45 degree triangle the x component and the y component are the distance of the hypotenuse over Sqrt(2) for different offsets, radially you'd need to adjust this to compute the target point for each object... would do something like var angleForEach:Number = 360/numObjects; then figure out the target point for each of the objects in a loop var angleForThis = angleForEach*index; (in this example only two objects, no loop needed) 
        targetPoint = new Point(objectUserGrabbed.x-optimalDistance/Math.SQRT2, objectUserGrabbed.y-optimalDistance/Math.SQRT2); 


        deltaX = (targetPoint.x-button2.x); 
        deltaY = (targetPoint.y-button2.y); 

        button2.move(button2.x+deltaX/delayDenominator, button2.y+deltaY/delayDenominator); 
       } 
       else 
       { 
        targetPoint = new Point(objectUserGrabbed.x+optimalDistance/Math.SQRT2, objectUserGrabbed.y + optimalDistance/Math.SQRT2); 

        deltaX = (targetPoint.x-button1.x); 
        deltaY = (targetPoint.y-button1.y); 

        button1.move(button1.x+deltaX/delayDenominator, button1.y+deltaY/delayDenominator); 
       } 
       lineDrawingArea.graphics.clear(); 
       lineDrawingArea.graphics.lineStyle(1); 
       lineDrawingArea.graphics.moveTo(button1.x + button1.width/2,button1.y + button1.height/2); 
       lineDrawingArea.graphics.lineTo(button2.x + button2.width/2,button2.y + button2.height/2); 
      } 
     ]]> 
    </fx:Script> 

    <fx:Declarations> 
     <!-- Place non-visual elements (e.g., services, value objects) here --> 
    </fx:Declarations> 
    <s:Group id="lineDrawingArea"/> 
    <s:Button id="button1" label="Item 1" mouseDown="button1_mouseDownHandler(event)" mouseUp="button1_mouseUpHandler(event)" x="0" y="0"/> 
    <s:Button id="button2" label="Item 2" mouseDown="button1_mouseDownHandler(event)" mouseUp="button1_mouseUpHandler(event)" x="0" y="0"/> 
</s:WindowedApplication>