1 Reply Latest reply on Jul 5, 2010 4:11 PM by swood30

    Transition to next state but remember previous state choices

    swood30

      All of the Flash Catalyst material that I've seen so far covers the implementation of one component (i.e. button, checkbox, etc.) or multiple components that do not directly impact one another.  For example, the selection of a button can transition the user to a next page where they can enter their email address in a text field.


      What I haven't seen covered anywhere is how to attach components to an image where the selections made previously need to be seen in the current state and prior to the next component selection.


      Simplified example:  I have two rectangle shape boxes displayed on the initial page/state.

      Box #1 is Blue.

      Box #2 is Red.


      I create a button component for EACH Box representing the color Yellow.

       

      If the user selects the button for Box #1, I transition them to the state where box color changes from Blue to Yellow.

      OR

      If the user selects the button for Box #2, I transition them to the state where box color changes from Red to Yellow.

       

      So...I can have the following combinations:

      Box #1    Box #2

      Blue        Red

      Yellow     Red

      Blue        Yellow

      Yellow     Yellow


      If Yellow is chosen for Box #1...I transition to a state where Box #1 is Yellow & Box #2 is Red...NOW if I want to select Yellow for Box #2...I transition to a state where Box #2 is Yellow and Box #1 is Blue (but should be Yellow based on my initial choice). 

       

      How do I build transitions to states where choices made previously are carried through to the next state?

      Choice, go to next state, New choice, remember all choices previously made, go to next state? Etc.

      AND, per the example above...if I have 60 buttons (each representing a different color), there would be too many possible combinations to have to build each possible state and how to navigate to each based on the previous response???  Help!!

       

      Thanks!

      Scott

        • 1. Re: Transition to next state but remember previous state choices
          swood30 Level 1

          Ok...so I figured this out!  YAY!!!

          I selected my item and created a custom component which allowed me to have many states of that same item.  I made a different color of my item for each state.  I repeated this procedure for a second item.

           

          Note:  Since the color grid provided in FC inside the HUD (I think this is what the area is called where you can duplicate States and change it's properties) is limited, I had to create more layers in Illustrator representing some more colors and patterns.

           

          I grouped all of the path (color) layers applicable to my first item and assigned my first custom component.

          I grouped all of the path (color) layers applicable to my second item and assigned my second custom component.

           

          Inside the HUD for the first component, I duplicated the first state and selected the group over in the layers panel.  I then removed the visible (eyeball) from the first color and it reveals the second color in the list.  Now my state color matches the path color from my layers panel.  I repeated this exercise for each State that changes color, and since I brought over Illustrator patterns...I was able to show a State color as a pattern!!

           

          I also created a button component for each color for the first item and separate button components for each color for the second item.

           

          I then added an interaction to each button as applicable...for example, button1, belonging to my first custom component, onClick transitions from State 1 (of the first custom component) to State 1 from any State which is the 1st color...button 2 onClick transitons from State 1 to State 2 from any State which is the 2nd color, and so on.

           

          I repeated this procedure for all buttons transitioning to the correct State of the correct custom components.

          I achieved the results I was looking for : )

           

          I have about 60 colors/patterns, which will become 60 states for each custom component I create.  Before I get much further I need to know if I'm going to hit some limit with the number of States I'm able to create for each custom component??

           

          Thanks!!