Interactive water ripple effect

Den nemmeste bølgeeffekt er nogle simple bølgeringe ved brug af noget blend. Hvis du vil have dine tegninger til at bølge, skal du lege med noget hardcore BitmapData. Sådan noget vil jeg slet ikke kaste mig ud i. Men du kan slippe ret billigt, hvis du kan godtage det lidt mere primitive. Men skriv dig dette bag øret:

På trods af mit eksempels simplicitet, hakker det, hvis der kommer nok ringe. Og BitmapData er endnu tungere at arbejde med end blendmodes og filters, og så skal du samtidig bruge en meget mere avanceret kode, og du skal holde styr på mange, mange flere bitmapdata-objekter. Hvis du ikke er professionel og ved, hvad du har med at gøre, vil jeg holde mig til den simple effekt. Desuden vil en flot bølgeeffekt være ret ressourcekrævende.

Hér er eksemplet (kodet i Flash CS 3):

------------
Ring.as

package {
    import flash.display.Sprite;
   
    public class Ring extends Sprite {
        private var Lighten:InternalRing;
        private var Darken:InternalRing;
       
        private static const DimError:String = "Please use the method Radius instead.";
       
        public function Ring(Radius:Number = 100):void {
            Lighten = new InternalRing(Radius, 255, "ADD");
            Darken = new InternalRing(Radius, 45, "SUBTRACT");
           
            addChild(Lighten);
            addChild(Darken);
        }
       
        public function set Radius(NewRadius:Number):void {
            Lighten.width = Lighten.height = NewRadius * 2;
            Darken.width = Darken.height = NewRadius * 2;
            Lighten.UpdateOpacity();
            Darken.UpdateOpacity();
        }
       
        public function get Radius():Number {
            return Lighten.width / 2;
        }
       
        public static function get MaxRadius():Number {
            return InternalRing.MaxRadius;
        }
       
        override public function set width(value:Number):void {
            throw new Error(Ring.DimError);
        }
       
        override public function get width():Number {
            throw new Error(Ring.DimError);
        }
       
        override public function set height(value:Number):void {
            throw new Error(Ring.DimError);
        }
       
        override public function get height():Number {
            throw new Error(Ring.DimError);
        }
    }
}
internal class InternalRing extends flash.display.Sprite {
    import flash.display.BlendMode;
    import flash.filters.*;
   
    public static const Blur:Number = 10;
    private static const MaxOpacity:Number = .4;
    public static const MaxRadius:Number = 150;
   
    public function InternalRing(Radius:Number, Angle:Number, Effect:String):void {
        this.graphics.beginFill(0x0);
        this.graphics.drawCircle(0, 0, Radius);
        this.graphics.endFill();
        UpdateOpacity();
       
        this.blendMode = BlendMode[Effect];
       
        var InnerShadow:DropShadowFilter = new DropShadowFilter(InternalRing.Blur, Angle, 0xffffff, 1, InternalRing.Blur, InternalRing.Blur, 1, 1, true);
        var OuterShadow:DropShadowFilter = new DropShadowFilter(InternalRing.Blur, Angle, 0xffffff, 1, InternalRing.Blur, InternalRing.Blur, 1, 1);
        var ShadowBlur:BlurFilter = new BlurFilter(InternalRing.Blur, InternalRing.Blur, 1);
        this.filters = new Array(InnerShadow, OuterShadow, ShadowBlur);
    }
   
    public function UpdateOpacity():void {
        this.alpha = InternalRing.MaxOpacity / InternalRing.MaxRadius * (InternalRing.MaxRadius - this.width / 2);
    }
}

------------
program.fla

import fl.transitions.easing.Regular;
import fl.transitions.Tween;
import fl.transitions.TweenEvent;

stage.addEventListener(MouseEvent.MOUSE_DOWN, DrawRing);

function DrawRing(E:MouseEvent):void {
    var R:Ring = new Ring();
    var T:Tween = new Tween(R, "Radius", Regular.easeOut, 0, Ring.MaxRadius, 30);
    T.addEventListener(TweenEvent.MOTION_FINISH, End);
   
    addChild(R);
   
    R.x = mouseX;
    R.y = mouseY;
   
    function End(E:TweenEvent):void {
        removeChild(R);
    }
}

------------

Jeg har ikke brugt alverdens tid på koden, men alligevel har jeg da gjort mig lidt umage med at få lavet noget, så du kan se det i aktion. Desværre skal du som sagt passe på med ikke at klikke alt for meget, og så har Flash en lille bug i Tween-klassen, så hvis du klikker helt vildt meget eller klikker på et meget uheldigt tidspunkt, vil nogle ringe fryse. Det er jo lidt skidt.

Jeg håber, det er noget, du kan bruge til noget. Dette er rene koder, men hvis du vil løse problemet sådan hér, kan du faktisk lave det, så det ikke er nær så tungt, hvis du laver noget af det som symboler i stedet for at holde dig til koder. Jeg har ikke testet efter med symboler, men det plejer at løsne lidt op.

Hilsen maqhem

Ah det passer heller ikke, at jeg ikke har brugt så lang tid på koden. Jeg brugte faktisk en del tid på den. Men det er fint nok, for jeg kan jo lide at arbejde med Flash :)

Og et lille tip er at køre med framerate 30. Så er det rimelig glat.

Hvis du forresten ønsker nogle mere markante ringe, kan du øge MaxOpacity i InternalRing til eksempelvis 1.1, og skal de lempes en smule i synlighed, kan du gøre tallet mindre.

Tusind tak! Men kan jeg importere denne kode til Flash CS3?

Den er skrevet i Flash CS3, så selvfølgelig kan du det. Bare lav de to filer, jeg har angivet, og skriv koden, jeg gav dig. Læg dem i samme mappe.

Men hvordan importerer jeg koderne? (Jeg er ny til programmet)

Du skal intet importere. Du skal lave en Flash File (ActionScript 3.0) og skrive koden, jeg skrev under program.fla; og så skal du lave en ActionScript File og skrive koden, jeg skrev under Ring.as. Den sidstnævnte SKAL du gemme som Ring.as, og så skal de to filer ellers bare placeres i samme mappe.

Hvis du er i tvivl om, hvor du skriver koder i en fla-fil, så er det i værktøjet Actions (Window > Actions).

Er det muligt at sætte baggrundsbillede på?

Du kan jo bare tegne et. Eller kopiere et ind i Flash. Det gør man ikke anderledes end med alle andre programmer.

TAK! Det virker perfekt! For at jeg kan give dig mine point, bliver du nødt til at poste et "svar"... (ikke en kommentar)

Nu hvor spørgsmålet er besvaret, kan jeg tillade mig at lægge et svar.

Tak for hjælpen!

Her er den:  http://www.gratisupload.dk/show.php?fileId=8452

Nice ... men den bliver hurtig langsom hvis man går ret meget amok med musen. ;^)

Ja desværre. Men man kan lave nogle fede supernovaer, hvis man går helt berserk med klikkeriet.