4 Replies Latest reply on Apr 30, 2010 12:46 PM by cyber0897

    need help with simplemotion path

    cyber0897 Level 1

      hey guys... seems like an easy solution... but its been kickin my butt

       

      i basically have a a data group, which has a bunch of items populating, and when i click one item in the list i need the datagroup to move down and another canvas to take its place above the datagroup...

       

      the basic setup i have is

       

       

      <canvas id="storyList">
           <scroller>
                <datagroup>
                     <itemrenderer>
                     </itemrenderer>
                </datagroup>
           </scroller>
      </canvas>
      <canvas id="storyDetails">
      </canvas>
      

       

       

      so basically once the user selects a story in the stoy list, i need to reduce the height or change the 'y' value of story list, and then show storyDetails above the storyList

       

      hope that makes sence...

        • 1. Re: need help with simplemotion path
          David_F57 Level 5

          hi,

           

          Before I get myself confused, have a look at this, and see if the replacement technique is the sort of thing you are after.

           

          http://gumbo.flashhub.net/menu/

           

           

          You can do some tricky like swap a with b or you can just have a list with 1 item showing and animate the scrollby

           

           

          David..

          1 person found this helpful
          • 2. Re: need help with simplemotion path
            cyber0897 Level 1

            hey david! thanks for responding..

             

            that is a little close to what i need, but instead of the cross fader, on click of my story list i need the list to move down and a fourm to display above the list... i've tried to do something like this, but it dosent work... lol

             

             

                 <s:states>
                      <s:State name="openDetails" />
                      <s:State name="closeDetails" />
                 </s:states>
                 
                 
                 <s:transitions>
                      <mx:Transition fromState="openDetails" toState="closeDetails">
                           <s:Animate target="{storyList}" duration="200">
                                <s:SimpleMotionPath property="height" />
                           </s:Animate>
                      </mx:Transition>
                      <mx:Transition fromState="closeDetails" toState="openDetails">
                           <s:Animate target="{storyList}" duration="200" >
                                <s:SimpleMotionPath property="height" />
                           </s:Animate>
                      </mx:Transition>
                 </s:transitions>
            
                 <mx:Canvas id="storyList" width="100%" height="100%" height.openDetails="70%" height.closeDetails="100%" borderVisible="false">
                 </mx:Canvas>
                 
                 <mx:Canvas id="displayStoryDetails" height="1%" height.openDetails="30%" height.closeDetails="1%" width="100%">
                      
                 </mx:Canvas>
            

             

             

            i wana also add the cross fader to the displayStoryDetails, but i htink i can figure that part out...

            • 3. Re: need help with simplemotion path
              David_F57 Level 5

              hi,

               

              How about this - its a newsfeed I did a while back, I can probably dig up the code for it and  move it to flex 4.

               

              http://www.racingvictoria.net.au/default.aspx

               

               

              David.

              1 person found this helpful
              • 4. Re: need help with simplemotion path
                cyber0897 Level 1

                thanks david!! i actually figure out something in the transition....

                 

                the code i ended up with is...

                 

                     <s:transitions>
                          <mx:Transition fromState="openDetails" toState="closeDetails">
                               <s:Animate target="{storyListCanvas}" duration="500">
                                    <s:SimpleMotionPath property="height" />
                                    <s:SimpleMotionPath property="y" />
                               </s:Animate>
                          </mx:Transition>
                          <mx:Transition fromState="closeDetails" toState="openDetails">
                               <s:Animate target="{storyListCanvas}" duration="500" >
                                    <s:SimpleMotionPath property="height" />
                                    <s:SimpleMotionPath property="y" />
                               </s:Animate>
                          </mx:Transition>
                          <s:Transition fromState="closeDetails" toState="openDetails">
                               <s:Fade id="fadeStoryDetail" target="{displayStoryDetails}" alphaFrom="0.0" alphaTo="1.0" duration="1000" />
                          </s:Transition>
                     </s:transitions>
                
                
                
                <canvas id="storyListCanvas" y.closeDetails="0" y.openDetails="445" height.closeDetails="100%" height.openDetails="45%"></canvas>
                <canvas id="displayStoryDetails" height.closeDetails="0%" height.openDetails="55%" x.openDetails="0"></canvas>
                

                 

                 

                 

                thank you so much for your help tho!!!