4 Replies Latest reply on Apr 6, 2009 10:33 AM by kid electric

    Dynamic AS State Creation with SetProperty not working...

    kid electric Level 1

      I am trying to create a website that dynamically creates multiple states for content, download links, and contact info.  The reason I am using AS3 to create these states is because, in addition to reformatting/moving the UI/navigation elements, the states will also have content dynamically loaded at run-time from XML files (therefore cannot be hard-coded with MXML tags)

       

      Before I focus on reading the XML files for adding children in each state, I want to get the basic UI buttons and elements to move into desired positions in the Canvas using SetProperty for x and y on three buttons (Services, Downloads, and Contact)

       

      On initialization of the Application, I call the following:

       

      import mx.states.*; import mx.controls.Button; // Define variables private var newState:State; private var setXPropServices:SetProperty; private var setYPropServices:SetProperty; private var setXPropDownloads:SetProperty; private var setYPropDownloads:SetProperty; private var setXPropContact:SetProperty; private var setYPropContact:SetProperty; private function createStates():void {                  // Create and add the view states to the states Array.                 states = new Array();                 states.push(serviceState());                 states.push(downloadState());                 states.push(contactState());                                 //Create Transitions for each state; this must be dynamically created to reflect all AddChild elements to fade-in                 // createTransitions();             } private function downloadState():State {                //Configure the bServices properties                 setXPropServices = new SetProperty();                 setXPropServices.name ="x";                 setXPropServices.value = bServices.width/4;                 setXPropServices.target = bServices;                 setYPropServices = new SetProperty();                 setYPropServices.name ="y";                 setYPropServices.value = cMain.height/4;                 setYPropServices.target = bServices;                                 //Configure the bDownloads properties                 setXPropDownloads = new SetProperty();                 setXPropDownloads.name ="x";                 setXPropDownloads.value = bDownloads.width/4;                 setXPropDownloads.target = bDownloads;                 setYPropDownloads = new SetProperty();                 setYPropDownloads.name ="y";                 setYPropDownloads.value = bDownloads.height/4;                 setYPropDownloads.target = bDownloads;                                 //Configure the bContact properties                 setXPropContact = new SetProperty();                 setXPropContact.name ="x";                 setXPropContact.value = bContact.width/4;                 setXPropContact.target = bContact;                 setYPropContact = new SetProperty();                 setYPropContact.name ="y";                 setYPropContact.value = cMain.height/2;                 setYPropContact.target = bContact;                 // Finally, push all the overrides and return the State to the caller                 newState = new State();                 newState.name = "downloads";                 newState.overrides.push(setXPropServices);                  newState.overrides.push(setYPropServices);                  newState.overrides.push(setXPropDownloads);                  newState.overrides.push(setYPropDownloads);                  newState.overrides.push(setXPropContact);                  newState.overrides.push(setYPropContact); }

       

      This is just one of the example functions.  You may notice I am doing a bit if "dynamic" layout based on determining size of Main and various components.

       

      It compiles and runs okay, and I don't get an error when I click the the Downloads button (set to change state to "downloads" on click), so it is recognizing the states that were created... BUT all elements seem to go straight to 0 x and 0 y. (top left corner) instead of setting any of my specified values.

       

      I tried changing the values to strings using the String() method, which does nothing.  I even tried setting specific constant numbers as values for X and Y, and it has no effect...

       

      Any thoughts why it is, in fact, changing X and Y but is automatically moving them to 0, 0?

        • 1. Re: Dynamic AS State Creation with SetProperty not working...
          kid electric Level 1

          sorry, having trouble with this interface for inserting code...

           

          import mx.states.*;
          import mx.controls.Button;
          
          
          // Define variables
          private var newState:State;
          
          
          private var setXPropServices:SetProperty;
          private var setYPropServices:SetProperty;
          private var setXPropDownloads:SetProperty;
          private var setYPropDownloads:SetProperty;
          private var setXPropContact:SetProperty;
          private var setYPropContact:SetProperty; 
          
          
          
          private function createStates():void {
          
          
          // Create and add the view states to the states Array.
          states = new Array();
          states.push(serviceState());
          states.push(downloadState());                
          states.push(contactState()); 
          
          }
          
          
          private function downloadState():State {
               //Configure the bServices properties
               setXPropServices = new SetProperty();
               setXPropServices.name ="x";                
               setXPropServices.value = bServices.width/4;                
               setXPropServices.target = bServices;
               setYPropServices = new SetProperty();
               setYPropServices.name ="y";
               setYPropServices.value = cMain.height/4;
               setYPropServices.target = bServices;                
          
          
          
          
          
               //Configure the bDownloads properties                
               setXPropDownloads = new SetProperty();                
               setXPropDownloads.name ="x";
               setXPropDownloads.value = bDownloads.width/4;
               setXPropDownloads.target = bDownloads;
               setYPropDownloads = new SetProperty();
               setYPropDownloads.name ="y";                
               setYPropDownloads.value = bDownloads.height/4;                
               setYPropDownloads.target = bDownloads;                                
               //Configure the bContact properties 
          
               setXPropContact = new SetProperty();
               setXPropContact.name ="x";
               setXPropContact.value = bContact.width/4;
               setXPropContact.target = bContact;                
               setYPropContact = new SetProperty();                
               setYPropContact.name ="y";
               setYPropContact.value = cMain.height/2;
               setYPropContact.target = bContact;
          
          
               
          
               // Finally, push all the overrides and return the State to the caller
               newState = new State();                
               newState.name = "downloads";                
               newState.overrides.push(setXPropServices);            
               newState.overrides.push(setYPropServices);            
               newState.overrides.push(setXPropDownloads);            
               newState.overrides.push(setYPropDownloads);            
               newState.overrides.push(setXPropContact);            
               newState.overrides.push(setYPropContact); 
          
          }
          

          Hopefully this works better

          • 2. Re: Dynamic AS State Creation with SetProperty not working...
            kid electric Level 1

            Okay, I actually think it must be the dynamic layout that is causing problems.... when I set a constant/static number, it DOES seem to work okay.

             

             

            Anybody know if there is a way around this?  I'm trying to determine the size of the main Canvas (ie. the user browser window) to do dynamic layout (percent/fraction of screen); it looks like the Initialization of the app happens before the size of Main can be determined?

             

            Before I go and make a bunch of changes... does anybody know the answer to this: if I change the page layout so that I create ALL of it (not just the states, but also the initial state layout inside of a main Canvas element) in ActionScript functions upon App Init, do you think that sequence will then be able to determine Canvas.width and Canvas.height?  (in other words, right now I have State changes defined in AS3 but initial state layed out in MXML... if I first do the initial state in AS3, and basically don't use MXML at all for the whole site... would it be able to determine the width/height of the Canvas that is 100% of a browser window?)

             

            I think that might work, but I don't want to go through all of that work if it won't.

            • 3. Re: Dynamic AS State Creation with SetProperty not working...
              Gregory Lafrance Level 6

              I would try to avoid Canvas and absolute layout altogether. Rethink this and use auto-layout.

              • 4. Re: Dynamic AS State Creation with SetProperty not working...
                kid electric Level 1

                Normally I would use HBox/VBox style of layout, but this website is not functionally complex... however it does need to be visually appealing.  I am really saddened by the lack of relative-control (ironically, I have to use ABSOLUTE to get something RELATIVE ie. percentage)

                 

                Half of the benefit of using Flex is the fact that you can create visually smooth presentation because it is Flash, which is what I need in this case.  And I need it to look nicely laid-out regardless of viewing format (monitor type, resolution, browser, etc), which is nearly impossible unless I use formulas in absolute layout to simulate percentage-style layout design.  I don't understand why that's so difficult in Flash, when it's such a de-facto standard thing to do in, say, AJAX w/ CSS.

                 

                I considered just creating the site in Flash because of this, but I want to make a content-management interface so that the client can log in and change content (stored in XML files to be dynamically loaded at run-time), and the Flex framework makes this much easier than it would be to do from scratch in Flash.

                 

                 

                Auto-layout is great for basic functionality, but horrible for visually-pleasing presentation that is pretty much universal across browsers, platforms, and resolutions.  Since this site is more of a "brand recognition / info" site than anything else, it needs to look nice (hence there will also be animated transitions, such as buttons that move out of the way to a new part of the screen for UI/navigation on state changes... as far as I can tell, it is impossible to do that without using absolute x/y changes -- if you know a way I can get Move transitions to occur without using a Canvas container, let me know and I will go that route...)