Skip navigation
Currently Being Moderated

No transistion possible between components and "higher levels"?

Jun 3, 2010 7:35 AM

Hi all,

 

if you saw my last post you know that I hit a "20 page limit"

Now i'm making an attempt to fix the issue by creating components, the idea is to:

 

- have my main pages(home, about, contact etc) as components
- inside these components will be the sub-pages of every page.


For Example:

 

homeaboutcontact
|-sub page 1_home
|-sub page 2_home
|-sub page 3_home
|-sub page 1_about
|-sub page 2_about
|-sub page 3_about
|-sub page 1_contact
|-sub page 2_contact
|-sub page 3_contact


Now the problem is this:
I want to go from sub page 3_home  to about.

 

While this is possible what's not possible is to (or so it seems) create transistions between these states.

What I want is to simply be able to build navigation with transitions like I currently have.

(see: http://hotel-interieur.nl/site/Main.html) but by using components in order to bypass the 20 page limit. But it seems flash catalyst is making this impossible, which brings me to a nother question:
Why on earth would you build a 20page limit?

 

When you create a button within a component, you can say  under interactions:

on click, play transaction to ... (something outside the component) But  the thing is: it's not possible to create this transistion as far as i  can see.

 

If anyone can help me with that I would be very greatfull. In fact, I would be willing to pay for it.

 

To make things less abstract: I've created a simple application. What I would like in this example is the square to fade out and the circle to fade in. See the application here:  http://www.hotel-interieur.nl/help/Main.html

Link to the FXP: http://www.mediafire.com/?xdm3jd4zhju (so you can see how it's structured.)

Thanks a ton for reading this and I hope someone can help me out.
Kind regards,
Jason.

 
Replies
  • Currently Being Moderated
    Jun 3, 2010 2:02 PM   in reply to spiritonline123

    Here are the rules for what you can access/target for interactions.

     

    1. You can always target the top level, or main application

    2. You can target the current component (the one you are editing in Edit-In-Place)

    3. You can target any component instances in the current component. If your current component contains 2 custom components, then you can target either.

     

    Anything else you will not be able to target with interactions.

     

    -Bear

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 3, 2010 2:30 PM   in reply to spiritonline123

    Hi Jason,

     

    In addition to the rules Bear notes, you might also find this video helpful:

     

    http://tv.adobe.com/watch/max-2009-design/structuring-ui-design-comps- for-use-in-flash-catalyst

     

    In particular, jump to the 11:15 mark, and watch through to about 20:30. Ian demos how, and explains why, it is good to push as much interactivity as possible 'down' into custom components, vs. using only application or top-level states. You should experience better performance.

     

    Also, I noticed in the simple help FXP you posted that the durations on your transitions were set to "0". You can use the Smooth Transitions button in the Timeline to assign a default duration of 1/2 second to your transitions, which will help achieve the fades you are looking for. I played around just a tiny bit with the transitions in your FXP to get some fades similar to what you describe:

     

    transition1.png

     

    Hope this helps. Thanks for posting!

    -Kim

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 4, 2010 11:25 AM   in reply to spiritonline123

    Hello Jason,

     

    Transitions in Catalyst can only exist between different states of the same component. When you are setting "Play transition to adobe help:circle", your top level application (adobe help) transitions between the Page 1 and circle states. To create the transition you're looking for, just create a transition between Page 1 and circle like so:

     

    transition-ex.png

     

    You can't transition between different components' states in Catalyst. As long as your transitions between "Page" components are not unique from sub-page to sub-page, this solution should work fine.

     

    -Bear

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 4, 2010 3:51 PM   in reply to spiritonline123

    Hi Jason,

     

    Which transitions in particular are you having trouble with? I think one of the problems may just be conceptual. Even though you're breaking your project into separate components only to avoid the 20 state limit, you still need to think of them as individual components, not arbitrarily grouped states of your top level application. These components have various states that you can set on them, and each transition corresponds to a start and end state on a single component.

     

    Looking at your webpage, the only problem I could see that you might be having is dismissing the content boxes that drop down within the various pages. You can just make sure to return each page to an empty "default" state before displaying the nav bar.

     

    Here is how I would structure your component:

    Navigation Bar component - Contains the navigation buttons, and backgrounds. It's responsible for the "banner" portion of your page. Has a state for displaying the banner for each of your pages.

    Individual page components - over ons, news, home, references, contact. Contains the buttons you want to popup content, and the content itself. Different content displays in different states. Also contains a default "empty" state. The transitions to the empty state clean everything up visually.

     

    Your top level application would probably show the full navbar in one page, and each content component in its own page. When you click on something and want to show the navbar, first set the current content page to its "empty" state, and then transition to the state showing your full nav bar.

     

    You may have to play around with this a bit, but try to keep in mind that you can set states of multiple components to play the appropriate transitions. Transitions can also include "set state" actions on other components.

     

    -Bear

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 6, 2010 6:54 PM   in reply to spiritonline123

    While Catalyst doesn't support this now I think you could suport something like this in the future with something like this.

     

    So if you have the following states in the root:

     

    - RedState

    - BlueState

    - GardenState

     

    Then in GardenState you have a component with three states:

     

    - FirstState

    - SecondState

    - ThirdState

     

    You could use the syntax "state.substate" to navigate to it. So to go from RedState to the ThirdState in GardenState you would use:

     

    currentState = "GardenState.ThirdState";

     

    Although, honestly, the Flash Catalyst team probably won't support this in the next version if ever.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 7, 2010 10:29 AM   in reply to thx1138

    Catalyst (and the Flex framework it is built upon) uses a stateful model. This means that all components remain in the state you left them. So if you want a component to be in the default state, you should probably make sure you explicitly set its state beforehand.

     

    Attached is a basic example of what your site pages might look like. It only includes what your transitions might look like between two example pages, in case you were still wondering.

     

    -Bear

    Attachments:
     
    |
    Mark as:
  • Currently Being Moderated
    Jan 18, 2011 11:01 PM   in reply to Bear Travis

    Bear Travis wrote:

     

    Catalyst (and the Flex framework it is built upon) uses a stateful model. This means that all components remain in the state you left them. So if you want a component to be in the default state, you should probably make sure you explicitly set its state beforehand.

     

    Attached is a basic example of what your site pages might look like. It only includes what your transitions might look like between two example pages, in case you were still wondering.

     

    -Bear

    Bear,

     

    Your post here (on set default state of custom component):

     

    http://forums.adobe.com/message/2899317

     

    is a life saver. Thank you.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points