3 Replies Latest reply on Nov 12, 2009 9:44 AM by Ri-co91

    how to control the opacity of a component?

    Ri-co91 Level 1

      Hello everyone.

       

      I was wondering if it is possible to control the opacity of a custom component by using a slider/horizontal cursor

      example  : let's say i want to control the opacity of a black circle;

      if the cursor is on the left, set  the opacity to "0" and if the cursor is on the right, set the opacity to "100"

       

      Is it possible to do this by only using flash catalyst? if yes can you tell me how?

      If my quetion is not clear please check my attached file.

      Thanks.

        • 1. Re: how to control the opacity of a component?
          acath Level 4

          Hi Ri-co,

           

          You can create a slider component in Flash Catalyst, but you can't hook it up to the opacity of a component. You can do this very easily in Flash Builder:

           

          Find the tag for your component:

           

           

           

          -Adam

          • 2. Re: how to control the opacity of a component?
            Tvoliter Adobe Employee

            The ability to affect an attribute of an item (like opacity in your example) using a slider isn't supported in Catalyst 1.0. This would have to be added in Flash Builder using data binding. We realize connecting sliders and scrollbars to different aspects of UI is something users want to do in Catalyst, it just didn't fit into 1.0

             

            Fortunately, Flash Builder makes this pretty easy. Here is the code. I started this in Catalyst and made one change in bold below

             

            <?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:d="http://ns.adobe.com/fxg/2008/dt"

                 xmlns:fc="http://ns.adobe.com/flashcatalyst/2009"
                 width="800" height="600"

                 backgroundColor="#FFFFFF" preloaderBaseColor="#FFFFFF">

              <fx:DesignLayer d:userLabel="Layer 1">
                    <s:Ellipse x="421.5" y="159.5"

                           width="243" height="219"

                           alpha="{alphaController.value}">
                        <s:stroke>
                            <s:SolidColorStroke caps="none"

                                     joints="miter" miterLimit="4" weight="1"

                                     color="#5380D0"/>
                        </s:stroke>
                        <s:fill>
                            <s:SolidColor color="#00A700"/>
                        </s:fill>
                    </s:Ellipse>
                    <s:VSlider x="349" y="183"

                                height="199" width="11"

                                id="alphaController"

                                minimum="0" maximum="1" value=".5" snapInterval=".1"/>
                </fx:DesignLayer>
            </s:Application>

             

            Ty

            1 person found this helpful
            • 3. Re: how to control the opacity of a component?
              Ri-co91 Level 1

              Thanks to both of you guys. your answers helped me a lot.

               

              We realize connecting sliders and scrollbars to different aspects of UI is something users want to do in Catalyst, it just didn't fit into 1.0

              So will it be possible to do it in a further version of Catalyst?