2 Replies Latest reply on May 8, 2011 6:17 PM by Lee Burrows

    looking for your advice on a component layout

    vertex_shader

      Let's say I have 5 buttons represented by the letter O and two arrow buttons to scroll left/right

       

      <  O O O O O >

       

      If there are 50 buttons offscreen what is the best way to layout this component in flex 4?

      I'm thinking mask on a basic layout and tweening the positions.

       

      Do you have a better idea?

        • 1. Re: looking for your advice on a component layout
          vertex_shader Level 1

          this is what i whipped up in 5 mins. The animation performance is terrible. I must be doing something wrong.

           

           

          <?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/mx"
                         >
               <fx:Declarations>
                    <s:Animate id="fwd" target="{ hgroup }" duration="250">
                         <s:SimpleMotionPath property="horizontalScrollPosition"
                                 valueBy="40"/>
                    </s:Animate>
                    <s:Animate id="rev" target="{ hgroup }" duration="250">
                         <s:SimpleMotionPath property="horizontalScrollPosition"
                                 valueBy="-40"/>
                    </s:Animate>
               </fx:Declarations>
          
               <fx:Script>
                    <![CDATA[
                         private function leftClick():void
                         {
                              rev.play();
                         }
                         private function rightClick():void
                         {
                              fwd.play();
                         }
                    ]]>
               </fx:Script>
               <s:layout>
                    <s:VerticalLayout horizontalAlign="center" paddingTop="20"/>
               </s:layout>
               <s:HGroup id="hgroup" width="225" clipAndEnableScrolling="true">
                    <s:Button label="1"/>
                    <s:Button label="2"/>
                    <s:Button label="3"/>
                    <s:Button label="4"/>
                    <s:Button label="5"/>
               </s:HGroup>
               <s:HGroup>
                    <s:Button label="l" click="leftClick()"/>
                    <s:Button label="r" click="rightClick()"/>
               </s:HGroup>
          </s:Application>
          
          
          
          
          • 2. Re: looking for your advice on a component layout
            Lee Burrows Level 4

            hi

             

            it looks like a list with horizontal layout and custom skinning and itemrenderer - cant you do that?