actionscript-3 - 如何实现像 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>