6 Replies Latest reply on Jul 3, 2011 1:23 PM by NicoDesignLakes

    Creating a link to a state ... why is the state missing aaahHhh!

    NicoDesignLakes

      Hi,

       

      I've spent 1/2 day trying to get a button to link to a state, which seems to be missing from the Interactions > Choose Target > Application menu.

       

      I hit the 20 max state limitation and so now have to use states within custom/generic components ... but now when I try to link to them from a button in another component that substate is missing. Here is a diagram showing what I am trying to do ... and what I might be doing wrong?

       

      Capture.JPG

      So the first question is ... is it possible to link a button in one substate to a substate in another component. Substate might not be the right word ... but I mean a state within a component.

       

      Any help is greatly appreiated .. thanks.

       

      Thanks,

      Nick

        • 1. Re: Creating a link to a state ... why is the state missing aaahHhh!
          Chris W. Griffith Adobe Community Professional

          Which version of Flash Catalyst were you using? In Flash Catalyst 1.0, you were limited in what you were able to target with an interaction. With the release of Flash Catalyst CS5.5, you can target much deeper into a custom component. I was able to recreate the basic intent of your diagram and have attached the fxp. This will only work with the latest version of Flash Catalyst.

          • 2. Re: Creating a link to a state ... why is the state missing aaahHhh!
            NicoDesignLakes Level 1

            Hi Chris,

             

            Thank you so much for your help.

             

            I am using Catalyst 5.5

             

            I don't know if having the buttons on the actual scolling panel is maybe one step too far ... in terms of how deep the links can go?

             

            Here is my project attached where I have the buttons on the scrolling panel in the state called Room1. I am trying to link these buttons to the ProductHighlight States, which you can see if you go into that Component.

             

            (Sorry couldn't find the attach to post button so have uploaded it here: http://www.lakesmarketing.com/downloads/ComponentTargetingDemoProjectv2.zip )

             

            I've had a look at your project but couldn't see the same thing ... but I may be wrong.

             

            Your help is much appreciated.

            Thanks,

            Nick

            • 3. Re: Creating a link to a state ... why is the state missing aaahHhh!
              NicoDesignLakes Level 1

              Hi again Chris,

               

              Are you ok to have a look at my project?

              Sorry to assume .. how rude!

               

              Don't know if that is the sort of thing you have time for. But if you do thank you very much.

               

              If not, please could you let me know and I will start looking into other ways of achieving the same thing .. maybe using a data list might do it?

              Although a simple link to a state would be much easier.

               

              Thanks,

              Nick

              • 4. Re: Creating a link to a state ... why is the state missing aaahHhh!
                Chris W. Griffith Adobe Community Professional

                I assume you want the (i) buttons in the scrolling panel to link to the product info screens in the next state?

                 

                Here is the basic things I did to make this work.

                 

                In Flash Catalyst, I added an interaction to change the main application's state to 'Room01Products' on the (i). The rest of the modifications to the project where done in Flash Builder.

                 

                Once properly imported into Flash Builder,I opened the Mani.mxml file, then found the Room01Prodcuts component (yes there is a typo in the name, like I have never done that ) I then gave this component an id attribute:

                                <components:Room01Prodcuts id="productInfo" includeIn="Room01Products" x="0" y="0"/>

                 

                I then opened the Room01PanScrollingContentSkin.mxml file. This is located in the components directory of the project.

                 

                In this file, we will find the event handler for the (i) that we added in Flash Catalyst.

                 

                You should see a line of code like this:

                                mx.core.FlexGlobals.topLevelApplication.currentState='Room01Products';

                 

                add this line of code:

                                mx.core.FlexGlobals.topLevelApplication.productInfo.currentState='Product28';

                 

                You will see we reference the productinfo component in the code, and set it's currentState to 'Product28' I had it show something other than the first state of the component. Now when you click on the (i), it will change two states, one for the application, and one for the component.

                 

                Hope this helps,

                 

                Chris

                • 5. Re: Creating a link to a state ... why is the state missing aaahHhh!
                  NicoDesignLakes Level 1

                  Fantastic!

                  Thank you so much Chris.

                  I will give it a go now and let you know how I get on.

                  • 6. Re: Creating a link to a state ... why is the state missing aaahHhh!
                    NicoDesignLakes Level 1

                    Hi Chris,

                     

                    Thank you for your help and what you said in your message has done the trick.... but

                     

                    I got a bit lost in Flash Builder ... so following your logic I managed to do it all in Flash Catalyst!

                     

                    Here is what I did incase it helps anyone else:

                    - Within a scroll panel component (like two levels down from the top level states) I turned an info icon that was on the scrolling panel into a button

                    - I created two interactions for this button to link through to a substate that was sitting in another top level state, using a custom/generic component.

                     

                    First of all for that top level state you have to turn your content into a custom/genric component, when you click on that you can then create multiple substates within that top level state.

                     

                    (Back to the info icon in the scroll panel)

                    1. Create a link to the top level state ... usually selected in the drop downs as Application > State Title

                    2. Then create another interaction and this time choose 'select another item' (in the dropdown just above application) ... now in the artboard you have to navigate to the custom/genric component that is sitting in your top level state. This is where it has to be a custom/generic component otherwise catalyst won't let you select it. Once you've done that in the second dropdown you will now see all the states within that custom/generic component ... nice!

                     

                    By the way ... you have to have the first link in place for the interactive to navigate correctly ... first to the top level state and then onto the second link to the state within the custom/generic component in the top level state.

                     

                    I know that's a lot of states ...etc etc ... but I hope that helps someone else avoid a 2 week delay like I've had on my project. If it wasn't for Chris my delay would have been a lot longer ... so thank you!