actionscript-3 - http://www.bcaa.it/ のような文字列効果を達成する方法

Question

このウェブサイトhttp://www.bcaa.it/のようなストリング エフェクトを実行したいのですが、 どのようなスクリプトやチュートリアルから学べますか?

基本的に私はウェブサイトと同じことを達成したいと思っています。跳ねる弦の効果を持たせ、アイテムをドラッグして近くにある他のアイテムを遠ざけ、ドラッグするとサブオブジェクトがイージングで追従します...

Answer 1

ちょっとこれをコーディングし始めたばかりです。私が取り組んでいるグラフ表示に似たものが必要です。これが私のスタートです。ボタンは2つだけですが、アイデアは推定/最適化できます。

<?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>