Skip navigation
spiritonline123
spiritonline123
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.

1227 Views   11 Replies   Latest reply: Ed@SF, Jan 18, 2011 11:01 PM
 
Replies
  • Bear Travis
    Currently Being Moderated
    1. Bear Travis,
    Jun 3, 2010 2:02 PM   in reply to spiritonline123
    Report

    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:
  • Kim Isola
    Currently Being Moderated
    2. Kim Isola,
    Jun 3, 2010 2:30 PM   in reply to spiritonline123
    Report

    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:
  • spiritonline123
    Currently Being Moderated
    3. spiritonline123,
    Jun 4, 2010 8:33 AM   in reply to Kim Isola
    Report

    Hi,

     

    once more, great to see adobe staff participating in these forums. It's really appreciated by the users (at least by me)

     

    However: I think we are misunderstanding each other as to what my question is.

     

    Bear:

    I understand that you can target the top level or other components with interactions but my question is:

    How do I create transitions between a component and the top level application ?

    when you place something within a component it seems like objects are no longer shared with the top level application, thus making transition between the component and the top level application impossible.
    (it also doesn't show in the state transistions list. like in the example I made: I can't find a state transistion from purple/pink sub-page to blue circle)

     

    Kim:

    the video as well as your post do not answer my question as the are transitions on the same level I did not state that properly at the example but the question was: how do I get the purple/pink sub-page to fade out and show the blue circle?

     

    I'm looking forward to your replies,

    Once more: thanks a ton for your time!

    Jason.

    ------------------------------------------------------------

    EDIT: I've though about a solution long and hard and found a possible fix but it will require one thing. Please let me explain with the square and circle example:

     

    The square is a component that holds 3 states/pages:

     

    state 1.           red square

    state 2.           pink square

    state 3.           blue circle-----------------------------|

                                                                                 |

    on the top level there are 2 states/pages           ----------- Same blue circle (copy)|

    page 1.          red square                                    |

    page 2.          blue circle------------------------------|

     

    now the blue circle in both the square component and the top level will be the exact same thing (a copy)


    This way I can make the fading transition within the component, trick then would be:

    Set an eventhandler that would transfer you to the blue circle in the top level as soon as the transition within the component is finished. This way you've transferred the user to top level without him/her noticing it.

     

    Now this does add a new question: Is it possible to have interactions triggered on transition finish?

    (or put differently: onload of blue circle in the component go to blue circle in top level)

     

    Here is a screenshot slide to illustrate my story:

    http://img210.imageshack.us/slideshow/webplayer.php?id=1toplvl.png

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

    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:
  • spiritonline123
    Currently Being Moderated
    5. spiritonline123,
    Jun 4, 2010 2:01 PM   in reply to Bear Travis
    Report

    Hi Bear,

     

    thanks for your reply.

    Am I correct, that according to what your saying it's impossible to create my website (in a components nested form) whith the effects in the navigation as I currently have ?
    Please refer: http://hotel-interieur.nl/site/Main.html

     

    If I'm not correct could you then please explain to me how I would set my website up as a nested component version and still have these effects?


    (PS: I've watched the tut I actually have the whole course but it doesn't solve my problem.)

     

    Thanks.
    Jason.

     
    |
    Mark as:
  • Bear Travis
    Currently Being Moderated
    6. Bear Travis,
    Jun 4, 2010 3:51 PM   in reply to spiritonline123
    Report

    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:
  • spiritonline123
    Currently Being Moderated
    7. spiritonline123,
    Jun 5, 2010 8:50 AM   in reply to Bear Travis
    Report

    Hi Bear,

     

    thanks for all the time you put into this! I really apreciate it.

     

    Thanks to your reply I've managed to almost acomplish what I want. I'm not sure if its according to how you wrote it but it gave me the insight I needed. However, it seems that there is a bug in flash catalyst:

    (please refer the XPS for what's written bellow: http://www.mediafire.com/?1q1n1azwdz5 )

     

    Wouln'd you agree that when you link a page in component A to component B the page would always jump to the deafult state of component B?

    It seems that's not the case with my project. Please see what happens when you go from the navigation to home, it jumps to a different state then the default one! Any insight would be highly apriciated.


    Once more: Thanks a ton for all your help.

     

    (PS: Would it possible for you to set up the home and navigation according to your insight? Then I could really see how it would be set up and use the technique for all the other pages. I would be willing to pay for this if requested.)

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

    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:
  • Bear Travis
    Currently Being Moderated
    9. Bear Travis,
    Jun 7, 2010 10:29 AM   in reply to thx1138
    Report

    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:
  • spiritonline123
    Currently Being Moderated
    10. spiritonline123,
    Jun 7, 2010 10:56 AM   in reply to Bear Travis
    Report

    Hi Bear,

     

    Thanks a ton for the example! Much appreciated.

     
    |
    Mark as:
  • Ed@SF
    Currently Being Moderated
    11. Ed@SF,
    Jan 18, 2011 11:01 PM   in reply to Bear Travis
    Report

    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:
Actions

More Like This

  • Retrieving data ...

Incoming Links

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