5 Replies Latest reply on Apr 8, 2010 1:55 AM by daslicht

    Adding effects to images

    meena_r
      Hi,
      I am new to flex development though I am enjoying it very much, I need to develop my web application such that there is some animation/ effects on images like blur/ rotate (same as we can add in PowerPoint) I know by flash we can put very rich animations and effects. These effects should not wait for any user interaction so I think on creationComplete trigger I can put those and they remain there for some seconds then user will see the main log in panel. I don't know how can I set that Style for image. Please suggest.
      Thanks for your help.
        • 1. Re: Adding effects to images
          peterent Level 2
          Let's say you want to apply a Blur effect. Here's how you can do this in ActionScript:

          var blur:Blur = new Blur();
          blur.play( [yourImageID] ); // argument must an Array

          If you want to Blur and and Rotate at the same time you need to use a Parallel effect:

          var para:Parallel= new Parallel();
          var blur:Blur = new Blur();
          var rotate:Rotate = Rotate();

          para.add(blur);
          para.add(rotate);
          para.play( [yourImageID] );

          That should get your started. Be sure to read the documentation on each effect so you know what other options to set. For example, you can set the amount of blur and the rotation angles on those effects.
          • 2. Re: Adding effects to images
            meena_r Level 1
            Thanks for your response however when I tried above code I did not get any effects. please have a look and let me know if I am missing something. I have put error messages in comment section

            <?xml version="1.0" encoding="utf-8"?>
            <!-- http://blog.flexexamples.com/2008/03/08/creating-a-simple-image-gallery-with-the-flex-tile list-control/ -->
            <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml"
            layout="absolute" backgroundColor="white" creationComplete="init()">
            <mx:Script>
            <![CDATA[

            import mx.effects.*;


            private function init():void{

            var myArray:Array = new Array();
            myArray[0] = myImage;
            var blur:Blur = new Blur();
            blur.play(myArray); // argument must an Array

            var para:Parallel= new Parallel();
            var blur:Blur = new Blur();
            var rotate:Rotate = Rotate(); //incorrect number of argument expected 1

            para.add(blur); //undefined method error
            para.add(rotate); //undefined error
            para.play( myArray );
            }
            ]]>
            </mx:Script>

            <mx:Image id="myImage" source="@Embed(source='../image/GPSbig.jpg')" />


            </mx:Application>
            • 3. Re: Adding effects to images
              peterent Level 2
              Hi,
              I see that I had a typo. It should have been var rotate:Rotate = new Rotate();

              For the blur.play() method, you can use [ ] notation as a short-cut for the Array. So blur.play( [ myImage ] ); works just as well.

              I was hoping you would read the Flex documentation on the effects. I didn't have the docs open when I wrote the code, so I apologize for giving you the wrong function name. It should be:

              para. addChild(blur);
              para. addChild(rotate);
              para.play();

              Sorry for the inconvenience. All of this information is the Flex documentation, including other effects you might like to use.
              • 4. Re: Adding effects to images
                MotionMaker Level 1
                In addition to peterent changes if you think you would repeat the rotation again, you may want to consider defining the rotation variable a private class variable and issuing a rotate.end() at the start of the function . Running once if fine but if you run it again before complete you can get some unpredicable results.

                private var rotate:Rotate = new Rotate();
                private function rotateImage():void
                {
                rotate.end();
                • 5. Re: Adding effects to images
                  daslicht Level 2

                  Hi,

                  is there a way to apply a effect only to a specific region of a Image ?

                   

                  Cheers

                  Marc