5 Replies Latest reply on Jun 10, 2009 2:32 PM by Matt Finitz (Adobe)

    Example of Spark Wipe effect?

    dgassner

      Does anyone have an example of using the new Wipe effect outside the context of a transition?

      Thanks,

      David

        • 1. Re: Example of Spark Wipe effect?
          jody2009

          could you please explain what you mean "Wipe effect outside the context of a transition"? what kind of examples are you looking for? thanks.

          • 2. Re: Example of Spark Wipe effect?
            dgassner Level 1

            I'm looking for an example of calling the Wipe effect class's play() method. I've tried this in the application listed below, but get runtime errors trying to pass Spark primitives to the bitmapFrom and bitmapTo properties. If I remove these properties, no runtime error, but no effect either. I've also tried this to make sure I'm passing BitmapData objects, but again nothing happens:

             

            bitmapFrom="{wipeGraphic.getBitmapData()}"
                  bitmapTo="{myImage.getBitmapData()}"

             

            So, I'm looking for a working example.

            Thanks,

            David

             

            **

            version that gets a runtime error:

            **

            <?xml version="1.0" encoding="utf-8"?>
            <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                           xmlns:s="library://ns.adobe.com/flex/spark"
                           xmlns:mx="library://ns.adobe.com/flex/halo" >
              <fx:Script>
                <![CDATA[
                  import spark.effects.WipeDirection;
                ]]>
              </fx:Script>
              <fx:Declarations>
                <s:Wipe id="wipeIn" direction="{WipeDirection.RIGHT}"
                  bitmapFrom="{wipeGraphic}"
                  bitmapTo="{myImage}"/>
              </fx:Declarations>
              <s:Group x="143" y="89">
                <s:Rect id="wipeGraphic" width="{myImage.width}" height="{myImage.height}">
                  <s:fill>
                    <mx:SolidColor color="#EEEEEE"/>
                  </s:fill>
                </s:Rect>
                <s:BitmapImage id="myImage" source="@Embed('assets/flower1.jpg')"/>
              </s:Group>
              <s:Button x="140" y="338" label="Play Effect"
                        click="wipeIn.play()"/>
            </s:Application>

            • 3. Re: Example of Spark Wipe effect?
              Matt Finitz (Adobe)

              David,

               

              The spark Wipe effect is different from its predecessor in the fact that it inherits from AnimateShaderTransition. This class specializes in animating shaders during a transition. There are ways to make it work outside of a transition, but the usage is awkward.

               

              Another roadblock you'll hit is if you try to use the old wipe effect on new spark components. Due to the addChild/addElement API change, an RTE will be raised.

               

              If you want the old behavior on a spark component, you can wrap the object with a Halo container and use that as the target of a Halo wipe (i.e. WipeRight). Here's an example:

               

              <?xml version="1.0" encoding="utf-8"?>
              <s:Application
                  xmlns:fx="http://ns.adobe.com/mxml/2009"
                  xmlns:mx="library://ns.adobe.com/flex/halo"
                  xmlns:s="library://ns.adobe.com/flex/spark"
                  width="300" height="300">

               

                  <fx:Declarations>
                      <mx:WipeRight id="wipe" />
                  </fx:Declarations>

                  <mx:Box id="box">
                      <s:Button id="btn"
                          x="0" y="0"
                          width="150"
                          label="Spark Button"
                          click="wipe.play([box])"/>
                  </mx:Box>

                  <mx:Button id="btn2"
                      x="0" y="50"
                      width="150"
                      label="Halo Button"
                      click="wipe.play([btn2])"/>

              </s:Application>

              1 person found this helpful
              • 4. Re: Example of Spark Wipe effect?
                dgassner Level 1

                Thanks Matt,

                David

                • 5. Re: Example of Spark Wipe effect?
                  Matt Finitz (Adobe) Level 1

                  And here's an update of your example with the non-transition usage. It can be done. However, it helps to match the size of the target and the bitmap you are going from etc. You avoid some of that awkwardness in your example by binding your rect size to the size of the bitmap. Anyhow, hope this helps a bit more. The animateShader classes are very powerful once you understand their usages:

                   

                  <?xml version="1.0" encoding="utf-8"?>
                  <s:Application
                      xmlns:fx="http://ns.adobe.com/mxml/2009"
                      xmlns:s="library://ns.adobe.com/flex/spark"
                      xmlns:mx="library://ns.adobe.com/flex/halo" >

                   

                      <fx:Script>
                          <![CDATA[
                              import spark.effects.WipeDirection;

                              [Embed(source='asset/blue.png')]
                              public var blueImage:Class;
                              public var blueBitmap:Bitmap = new blueImage();
                          ]]>
                      </fx:Script>

                   

                      <fx:Declarations>
                          <s:Wipe id="wipeIn"
                          target="{wipeGraphic}"
                          direction="{WipeDirection.RIGHT}"
                          bitmapFrom="{blueBitmap.bitmapData}"/>
                      </fx:Declarations>

                   

                      <s:Group id="g1"
                      x="143" y="89">
                          <s:Rect id="wipeGraphic"
                          width="{blueBitmap.width}" height="{blueBitmap.height}">
                              <s:fill>
                                  <mx:SolidColor color="#EEEEEE"/>
                              </s:fill>
                          </s:Rect>
                      </s:Group>

                      <s:Button x="140" y="338"
                      label="Play Effect"
                      click="wipeIn.play()"/>

                   

                  </s:Application>