5 Replies Latest reply on Feb 21, 2011 1:08 PM by Shongrunden

    Problem with Itemrenderer & Transition in mobile project

    ChristophFlex Level 1

      Hallo,

       

      i made an itemrenderer to display my stuff properly in a list. when the user selects a listitem a transition is played. the problem is, when the user scrolls the list the transition for the selected item is played again.

      i seems to me, that the state of the selected item is changed when the user scrolls. it jumps to normal and goes instantly back to selected and this starts my transition again.

       

      <s:states>
      <s:State name="normal" />
      <s:State name="selected" />
      </s:states>


      <s:transitions>
      <s:Transition fromState="normal" toState="selected">
      <s:Sequence duration="800" >
      <s:Parallel>

      <s:Resize target="{this}" />

      <s:Fade startDelay="500" target="{test2}" />         
      <s:Fade startDelay="500" target="{test3}" />              
      <s:Fade startDelay="500" target="{test4}" />              
      <s:Fade startDelay="500" target="{test5}" />              
      <s:Fade startDelay="500" target="{test6}" />

       

      </s:Parallel>
      </s:Sequence>
      </s:Transition>
      </s:transitions>

       

      This only occours when i scroll the list via touch on the device or via mouse-drag in the emulator. if i use the mousewheel to scroll in the emulator everything is fine. So am i doing something wrong or what can i do to stop the animation from being played again during scrolling?

        • 1. Re: Problem with Itemrenderer & Transition in mobile project
          Shongrunden Adobe Employee

          Sounds like you might be running into this bug: http://bugs.adobe.com/jira/browse/SDK-26990

           

          This should be fixed in the latest builds.  You will need to be on the prerelease program to grab a recent build before Hero is released.

          • 2. Re: Problem with Itemrenderer & Transition in mobile project
            ChristophFlex Level 1

            No, i dont think so. As i said this bug appears in a mobile project and 

            only when scrolled with touch gesture/mouse drag.

            i made a video of it:

             

            http://www.youtube.com/watch?v=NWo2oV9XB7c

             

             

             

            Am 16.02.2011, 18:57 Uhr, schrieb Shongrunden <forums@adobe.com>:

             

            Sounds like you might be running into this bug: 

            http://bugs.adobe.com/jira/browse/SDK-26990

            This should be fixed in the latest builds.  You will need to be on the 

            http://iamdeepa.com/blog/?p=85 to grab a recent build before Hero is 

            released.

            >

            • 3. Re: Problem with Itemrenderer & Transition in mobile project
              Shongrunden Adobe Employee

              Thanks for providing that video.  There have been a few changes to how item renderers interact with touch scrolling since the preview release at MAX.  One of those changes is introducing what we call a "down" state concept where the renderer goes into the down state without necessarily being selected.  Getting the transitions correct in this case can be a little tricky.

               

              I believe your example should be fixed in the latest builds but it's hard to tell without sample code.  Is there any chance you could provide the code of your ItemRenderer?  If so then I can confirm that it works in the latest build and also show how it will need to be modified for the down state changes.

              • 4. Re: Problem with Itemrenderer & Transition in mobile project
                ChristophFlex Level 1

                Thanks for your help!

                 

                <?xml version="1.0" encoding="utf-8"?>
                <s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
                                           xmlns:s="library://ns.adobe.com/flex/spark"
                                              xmlns:fxg="fxgAssets.*"
                                              xmlns:components="components.*"
                                              >

                    
                <!-- States ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
                    
                     <s:states>
                          <s:State name="normal" />
                          <s:State name="selected" />
                     </s:states>
                    
                    
                <!-- Script ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
                    
                     <fx:Script>
                          <![CDATA[
                              
                               // imports ------------------------------------
                              
                               import mx.events.FlexEvent;
                              
                    
                               // event handlers -------------------------------------------
                              
                               protected function editField(event:MouseEvent):void
                               {
                                   
                               }


                               protected function deleteField(event:MouseEvent):void
                               {
                                   
                               }
                                             
                              
                               protected function initializeButton(s1:String,s2:String,event:FlexEvent):void
                               {
                                   
                                    import fxgAssets.*;
                                   
                                    editIcon;
                                    editIcon2;
                                    deleteIcon2;
                                    deleteIcon;
                                   
                                    var cls:Class=getDefinitionByName(s1) as Class;
                                    event.target.img1=new cls();
                                   
                                    cls=getDefinitionByName(s2) as Class;
                                    event.target.img2=new cls();               
                               }


                          ]]>
                     </fx:Script>

                    
                <!-- Declarations ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
                    
                     <fx:Declarations>
                         
                     </fx:Declarations>
                    
                         
                <!-- Transitions ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
                    
                     <s:transitions>
                               <s:Transition fromState="normal" toState="selected" >
                                         <s:Sequence duration="800" >
                                                   <s:Parallel>                                       
                                                        <s:Resize target="{this}" />                                       
                                                        <s:Fade startDelay="500" target="{editButton}" />         
                                                        <s:Fade startDelay="500" target="{deleteButton}" />              
                                                        <s:Fade startDelay="500" target="{product}" />              
                                                        <s:Fade startDelay="500" target="{date}" />              
                                                        <s:Fade startDelay="500" target="{test6}" />              
                                                   </s:Parallel>    
                                              </s:Sequence>                        
                               </s:Transition>                   
                     </s:transitions>
                    
                    
                    
                <!-- Graphics ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
                    
                     <s:Rect width="100%" height="1" bottom="0">
                          <s:fill>
                               <s:SolidColor color="0xe0e0e0" />
                          </s:fill>
                     </s:Rect>
                    
                    
                     <s:Rect width="100%" height="100%" includeIn="selected">
                          <s:fill>
                               <s:LinearGradient rotation="90">
                                    <s:GradientEntry color="#ffba00" ratio="0" alpha="1"/>
                                    <s:GradientEntry color="#ffba00" ratio="1" alpha="1"/>
                               </s:LinearGradient>
                          </s:fill>
                     </s:Rect>
                    
                     <s:Line id="test6" xFrom="15" xTo="225" yFrom="75" yTo="75" includeIn="selected" >
                          <s:stroke>
                               <s:SolidColorStroke color="white" weight="5"/>
                          </s:stroke>
                     </s:Line>

                    
                <!-- UI components ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
                    
                     <s:VGroup width="100%" >
                          <s:HGroup width="100%" >
                               <s:HGroup width="50%"  horizontalAlign="left">
                                    <s:Label id="fieldName" text="Acker 1" width="100%" paddingTop="25"  paddingBottom="25" fontSize.selected="31" fontWeight.selected="bold"/>         
                               </s:HGroup>
                         
                               <s:HGroup width="50%" horizontalAlign="right">
                                    <components:MainMenuButton click="editField(event)"
                                                                     skinClass="skins.MainMenuButtonSkin"
                                                                     preinitialize="initializeButton('fxgAssets.editIcon2','fxgAssets.editIcon',event)"
                                                                     id="editButton" scaleX="2.5" scaleY="2.5" includeIn="selected"
                                                                     />
                                   
                                    <components:MainMenuButton click="deleteField(event)"
                                                                     skinClass="skins.MainMenuButtonSkin"
                                                                     preinitialize="initializeButton('fxgAssets.deleteIcon2','fxgAssets.deleteIcon',event)"
                                                                     id="deleteButton" scaleX="2.5" scaleY="2.5" includeIn="selected"
                                                                     />
                               </s:HGroup>
                          </s:HGroup>
                              
                          <s:VGroup includeIn="selected" paddingBottom="5" paddingLeft="5" paddingRight="5" paddingTop="5"  >
                               <s:Label id="product" text="Produkt: Mais" width="100%" paddingBottom="10"/>
                               <s:Label id="date" text="Zeitraum: Di 01.01.2011 - Mi 02.02.2011" width="100%" paddingBottom="10"/>              
                          </s:VGroup>
                     </s:VGroup>
                    
                </s:ItemRenderer>

                • 5. Re: Problem with Itemrenderer & Transition in mobile project
                  Shongrunden Adobe Employee

                  Thanks for providing this.  I verified that this should work as you are expecting in the latest SDK version.