Help with Flex application design

Question

Hello everybody!

First of all, I am sorry that this is not a 'question that can be answered' like it is written in 'How to ask' section, but I think that stackoverflow is the place where I will get the best 'answers' so please help me with this one;

I have in mind to make some Flex application which will be used as some kind of (powerpoint) presentation.
My idea is to make some kind of template which will hold basic stuff like header, footer, and mainContent...
Header will be probably 'static' which means that it will hold some constant values (strings). Footer will have few static strings and an option to display current slide / total slides. Main content would be just some Canvas and I imagine that easiest way to make all my slides is to make a component (which will extend Canvas) for each slide so I will be able to 'design' each slide however I want...

The most important thing is that I should be able to define a transition between slides (some of Flex effects - Move, Fade, etc). And maybe even extend that option to some other Flex libraries (maybe like Distortion Effects or similar).
And finally I should be able to define how much 'steps' each slide has... For example, when you click next, slide can switch to next slide or it can stay on same slide and change some values inside of it (like changing graph values or something).

I started to make my application and for now I made an XML file which holds a title and effect definition for each slide. I made 3 AS classes which are header, footer and mainContent. I was playing around with effects and counting pages and such basic stuff and for now things seems fine... But I am stuck with 'implementing' my canvases (slide content) to each slide...

Nevertheless, I don't ask you to make some code for me... I just want to know if I get the idea correctly... I would need just few guidelines how to 'set-up' my application so it could have all those features I need =)

Thank you very much for any help really!
Cheers!

Answer 1

You seem to be going well with it. Have you considered using a view stack as slide holder?

<vbox>
  <header/>
  <viewstack>
    <Slide/>
    <Slide/>
  </viewstack>
  <footer/>
  <hbox-with-navigation-buttons/>
</vbox>

• The base class Slide extends Canvas
• The Slide class describes (abstract) methods to go to next/prev step.
• Viewstack listens for navigation button clicks and passes it to current slide and changes slides only if current slide has no more steps.
• Bind the header property of viewstack.selectedItem to the header
• Bind viewstack.selectedIndex to the page number in footer.

Answer 2

I'd use a viewstack as Amarghosh suggested, but then also create a base class or interface for each of your slides that has a 'stepForward()' and perhaps a 'stepBackward()' function. That way you'll know each of your items in your viewstack has those functions available for you to call, but each viewstack item can implement these functions differently.

Answer 3

You can use the hideEffect and showEffect properties of the viewstack's children to define cool transistion between slides. Something like this:

    <!-- wipe transistion effects -->
    <mx:WipeUp id="myWU" duration="300"/>
    <mx:WipeDown id="myWD" duration="300"/>

    <viewstack>
      <Slide id="slide_1" showEffect="{myWU"}" hideEffect="{myWD}"/>
      <Slide id="slide_2" showEffect="{myWU"}" hideEffect="{myWD}"/>
    </viewstack>

Will cause the wipe effects to be played when you switch from slide 1 to slide 2.