5 Replies Latest reply on Jan 21, 2010 3:44 PM by cyber0897

    trying to add a motion path to a panel but i get errors...

    cyber0897 Level 1

      hey guys.. im trying to move a panel container from one location to another..

       

      basically when i start off the application the panel's horizontalCenter is set to "0"

       

      what i need it to do is move from that center location to left.

       

       

      the code i have is...

       

      <?xml version="1.0" encoding="utf-8"?>
      <s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
                 xmlns:s="library://ns.adobe.com/flex/spark" 
                 xmlns:mx="library://ns.adobe.com/flex/mx" width="100%" height="100%"
                 xmlns:imageHandler="modules.imageHandler.*">
           
           <fx:Script source="loginSuccessScript.as" />
           
           <fx:Declarations>
                <!-- Place non-visual elements (e.g., services, value objects) here -->
                <s:ArrayCollection id="sourceData">
                     <fx:Object label="Content Group" stackId="contentGroup" />
                     <fx:Object label="Images" stackId="images" />
                     <fx:Object label="Videos" stackId="videos" />
                     <fx:Object label="Flash Objects" stackId="flashObjects" />
                     <fx:Object label="Story Editor" stackId="storyEditor" />
                     <fx:Object label="Tag Management" stackId="tagManagement" />
                     <fx:Object label="Image and Video Format" stackId="format" />
                     <fx:Object label="Rules And Permissions" stackId="rulesAndPermissions" />
                </s:ArrayCollection>
                
                <s:Parallel id="clickMove" target="navContainer">
                     <s:Animate duration="250">
                          <s:SimpleMotionPath id="motionPath" valueFrom="0" valueTo="300"/>     
                     </s:Animate>
                     <!--s:Fade id="fade" alphaFrom="0.4" alphaTo="1.0"/-->
                </s:Parallel>
           </fx:Declarations>
           
           <s:states>
                <s:State name="all" />
                <s:State name="videoUpload" />
                <s:State name="imageUpload" />
                <s:State name="contentGroup" />
                <s:State name="flashObjects" />
           </s:states>
           
           <s:HGroup horizontalCenter="0">
                <s:Panel id="navContainer" width="250" height="100%">
                     <s:List id="nav" width="250" height="100%" dataProvider="{sourceData}" click="updateStack()" />
                </s:Panel>
                <s:Panel width="100%" height="100%" visible="false">
                     <mx:ViewStack id="displayComponents" creationPolicy="all">
                          <mx:Canvas id="blank">
                               
                          </mx:Canvas>
                          <mx:Canvas id="images">
                               <imageHandler:imageHandler />
                          </mx:Canvas>
                     </mx:ViewStack>
                </s:Panel>
           </s:HGroup>
           
      </s:Group>
      

       

       

      and in my actionscript in the updateStack function, i just call clickMove.play();

       

      ive also tried setting the simpleMotionPath property to "x" and "left" and neither of them work...

       

      and when i play the animation i get an error that says

       

      "error: Property null is not a property or a style on object navContainer: TypeError: Error #1006: value is not a function..

           ....

                ....

                     .....

      "

       

      or

      "error: Property x is not a property or a style on object navContainer: TypeError: Error #1006: value is not a function..

           ....

                ....

                     .....

      "

       

      or

       

      "error: Property left is not a property or a style on object navContainer: TypeError: Error #1006: value is not a function..

           ....

                ....

                     .....

      "

        • 1. Re: trying to add a motion path to a panel but i get errors...
          Chet Haase

          try target="" instead of target="navContainer"; you need to reference the object, not just give it's text id.

           

          Chet.

          1 person found this helpful
          • 2. Re: trying to add a motion path to a panel but i get errors...
            cyber0897 Level 1

            ahh yes... ur right... i forgot to reference that object... so i changed my target=navContainer to target="{navContainer}" that seems to have fixed the error.. except now i dont see my panel move that distance... maybe i just have it positioned wrong to bein with...

             

            the basic idea is ..

             

            when i click my list item... i want my list to move to the left... and the right panel which contains the viewstack of components to appear...

             

            right now it dosent do that.. it creates my list and my viewstack at the same time... and when i click the item, there is no motion...

             

            any ideas...?

            • 3. Re: trying to add a motion path to a panel but i get errors...
              cyber0897 Level 1

              ok never mind... so i think this i have my problem almost figured out...

               

              i changed my code to resemble the following...

               

              <?xml version="1.0" encoding="utf-8"?>
              <s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
                         xmlns:s="library://ns.adobe.com/flex/spark" 
                         xmlns:mx="library://ns.adobe.com/flex/mx" width="100%" height="100%"
                         xmlns:imageHandler="modules.imageHandler.*">
                   
                   <fx:Script source="loginSuccessScript.as" />
                   
                   <fx:Declarations>
                        <!-- Place non-visual elements (e.g., services, value objects) here -->
                        <s:ArrayCollection id="sourceData">
                             <fx:Object label="Content Group" stackId="contentGroup" />
                             <fx:Object label="Images" stackId="images" />
                             <fx:Object label="Videos" stackId="videos" />
                             <fx:Object label="Flash Objects" stackId="flashObjects" />
                             <fx:Object label="Story Editor" stackId="storyEditor" />
                             <fx:Object label="Tag Management" stackId="tagManagement" />
                             <fx:Object label="Image and Video Format" stackId="format" />
                             <fx:Object label="Rules And Permissions" stackId="rulesAndPermissions" />
                        </s:ArrayCollection>
                        
                        <s:Parallel id="clickMove" target="{cont}">
                             <s:Animate duration="500">
                                  <s:SimpleMotionPath id="motionPath" property="left" valueFrom="0" valueTo="600"/>     
                             </s:Animate>
                             <!--s:Fade id="fade" alphaFrom="0.4" alphaTo="1.0"/-->
                        </s:Parallel>
                   </fx:Declarations>
                   
                   <s:states>
                        <s:State name="all" />
                        <s:State name="videoUpload" />
                        <s:State name="imageUpload" />
                        <s:State name="contentGroup" />
                        <s:State name="flashObjects" />
                   </s:states>
                   
                   <s:HGroup horizontalCenter="0" id="cont" height="100%" width="100%">
                        <s:Panel id="navContainer" width="250" height="100%" left="300">
                             <s:List id="nav" width="250" height="100%" dataProvider="{sourceData}" click="updateStack()" />
                        </s:Panel>
                        <s:Panel width="30" height="100%" creationPolicy="all">
                             <mx:ViewStack id="displayComponents" creationPolicy="all">
                                  <mx:Canvas id="blank">
                                       
                                  </mx:Canvas>
                                  <mx:Canvas id="images">
                                       <imageHandler:imageHandler />
                                  </mx:Canvas>
                             </mx:ViewStack>
                        </s:Panel>
                   </s:HGroup>
                   
              </s:Group>
              

               

               

              forsome reason my hgroup will not center its self to the window... any reason why?

              • 4. Re: trying to add a motion path to a panel but i get errors...
                Shongrunden Adobe Employee

                It's likely because you have width="100%" on the HGroup.  If you remove that does it work?

                 

                EDIT: I believe what you mean to do is <s:HGroup width="100%" horizontalAlign="center" ... > rather than horizontalCenter=0.

                 

                This property was recently added, see more info here: http://flexponential.com/2010/01/20/major-axis-alignment-now-supported-in-spark/#comments

                • 5. Re: trying to add a motion path to a panel but i get errors...
                  cyber0897 Level 1

                  hmm... so i updated to the latest nightly build.. and that option appeared... thanks... that worked

                   

                  but i still dont have that motion path working yet.. but thats ok.. i think im just going to work on that towards the end...

                   

                  thank you