Create a Slide Presentation

1. File -> New ...
2. From the New Document dialog box (General tab), select: Flash Slide Presentation
3. Click: OK
4. Save it as:  test_slides.fla

   Save it to your project folder

• An organizational Outline pane appears
• The Layers/Timelines area is collapsed (but still available)
• Add screen [+] and remove screen [–] controls are available
• By default, a master presentation screen and a child slide1 screen is established

It will make more sense after you use this Slides mode for a while, but a Screen incorporates aspects of a Movie Clip, a Scene, and a Component.

Any visual content placed on the presentation (master, parent) Screen acts like a background image in HTML, or a Background layer in Photoshop: the content is always visible, displayed underneath any child slide. The organization appears upside down from how we work with Layers, but Screens are not like layers.  The organization is very much like an Outline list, starting out at the top with a major point or heading, and indenting for the minor points subordinate to the major point.

The Stage and the Work Area are no different from what they are in the default mode of working with Flash.

Adding content to Screens

1. In the Outline pane, select the presentation Screen/Slide
2. Toggle the visibility of the Layers by clicking on the Timeline visibility arrow
3. Insert a layer, and name them:
   • Frame
   • Background
4. In the Background layer, establish a rectangle shape with a gradient fill

   We will be entering text in the child slides, so create a gradient pattern that will work well with text of a particular color (your choice)

5. In the Frame layer, establish a stroke (or a rectangle with an inner-region cut out) of at least 10 pixels

   In the pictured example below, I modified one of the existing gradient patterns for the Background layer, and imported a Fireworks graphic (as a PNG) for the Frame graphic.  This is meant to be a project in which we are experimenting with the different Slide Presentation features, and we need something in the presentation Screen so that we can see that it is always in the background.

   

   While we are not animating anything in the presentation screen, we could if we wanted to. The authoring aspect within a Screen is just like authoring within a scene or a MovieClip.

6. Click on the Timeline visibility arrow to toggle the visibility of the Layers (closed)

   If we were working on something like the equivalent of a PowerPoint presentation, we wouldn't even need to toggle the Layers into visibility. There is already one layer with one keyframe at frame 1, and we could just add some text if that was all that was required by the project.

1. Just like renaming a Layer, double-click on the Screen name in the Outline pane, and enter: intro

With the intro screen selected in the Outline pane, use any of the drawing tools to add any visual content (or import a GIF/JPEG/PNG)

This time, you can add content (which we will delete in a moment) without opening the view to the Layers and Timelines.

Notice that even though the intro screen in the Outline pane appears 'below' the the presentation screen, the child intro screen appears Z-axis "in front of" the presentation screen content.

This test shows us several things: most important is that the parent presentation screen is always Z-axis "behind" the child screens, and that the parent presentation screen is automatically displayed as is the first child intro screen when the Flash presentation begins playing.

Content on multiple child screens

The initial way one begins working with the Slides Presentation mode probably mirrors how one would  start working on a PowerPoint presentation - start with the basic background graphics, and then add content on a (child) slide by slide basis.

Please understand that all references to "PowerPoint" are simply to draw an analogy to a similar authoring process ... one could call the Slides Presentation "PowerPoint done right" or "PowerPoint on steroids", but don't make the mistake of thinking that the Slides Presentation is just another way to do PowerPoint presentations.  The Slides Presentation is really a better way to set up a "segmented timeline" Flash presentation, without having to add a bunch of stop() frame actions and without having to add navigation controls and the accompanying ActionScript to goto a frame or scene and start playing.  So while this exercise starts off like authoring a PowerPoint presentation (deliberately so), you will see at the end that this is one way to approach Flash authoring when the material lends itself to a linear presentation with frequent stops and starts.

Because this is being placed on the parent presentation screen, it will be visible through all of the child screens, unless something on a child screen covers it. The text can go anywhere, although my recommendation is to place it towards the top of the stage, or towards the bottom, leaving room for the content of the child screens

Much like Edit in Place (switching to Symbol Edit mode by double-clicking an instance to begin editing it's parent symbol), you can see through the child intro screen to see the contents of the parent presentation screen

The Outline pane screen icons show a representation of the content of a screen. In the intro screen icon, the white text does not show up against the white fill area, but it's there.

In this step, we did not toggle the Layers/timeline area into view ... we didn't need to. Only if you want to do something more complex, or make use of the layer's timeline, do you need to access the Layers/timeline area.

Add another screen

Much like inserting a Layer, inserting a new screen adds a new screen with a default name in the next logical position (when inserting a new layer, the default is above the currently selected layer; with screens, the next logical location is after the current screen).

The content of the previous screen(s) in the child level are not visible ... only the contents of the parent screen.

Design – whether graphic, industrial, interior, or architecture – is the process of taking unrelated parts and putting them together in an organized unit. Each discipline works with solids and voids and each must respond to three questions: What are the elements I have to work with? Where do these elements go? What structure is necessary so they go together?

Create a fixed-width textfield by first dragging the Text tool across the stage for a width of approximately 350 pixels.  You can substitute your own content if you wish.  This tutorial isn't meant to produce a finished project ... but to explore the potential of the Slides Presentation.

Automatic navigation

The parent presentation screen and the first child screen intro automatically appear. The parent screen is persistent ... think of it as being like a background layer (but remember, a screen has nothing whatsoever to do with layers).  The first child screen is automatically displayed ... think of it as the first actual content of the presentation.

With the Slides Presentation, you have available to you automatic forward and backward navigation  controls, without you having to do anything!  The <spacebar> key advances the presentation to the next screen.  

Notice that the content of the previous child screen (intro) is replaced by the contents of the current child screen (preface).

The <left arrow> and <right arrow> cursor control keys navigate backwards and forwards one screen.

1. Right-click or Control-click on the preface screen in the Outline pane
2. From the contextual menu, select: Copy

   (With the contextual menu visible, examine the other choices that are available.)

3. Right-click or Control-click on the preface screen again
4. This time, from the contextual menu, select: Paste

   A copy of the preface screen is inserted after the screen you right/control-clicked on.

Design is simple when you remember it is a process, not a result:

Coordinates:  Where's the origin (0, 0)?

Make sure you have saved your work before you continue

1. Select the static text field in the process screen
2. In the Info panel, set the reference point to the upper-left corner
3. Look at the X: and Y: coordinates in the Info panel ... are they what you expected?

   Each persons coordinates will be different ... the ones in the example are:

   • X:  -176
   • Y:  -21
4. In the Info panel, set the reference point to the center point
5. Look at the X: and Y: coordinates in the Info panel:
   • X:  0
   • Y:  0

What does this tell you? (This is a basic Flash question.)

When the coordinates of the upper-left corner of an element are in negative values, that means the upper-left corner of the selected item is above and to the left of the (0, 0) point of reference.  When the coordinates of the midpoint of an element are (0, 0), that means that the midpoint is centered at the (0, 0) point of reference.
 
What this is telling you is that the frame of reference (the (0, 0) point) of a screen is dependent upon the content of the screen, and that the virtual registration point is automatically centered by Flash with respect to the content.  The consequence of this is that the coordinate structure of one screen is independent of the coordinate structure of another screen ... and that means that you cannot rely on the coordinates of an element in one screen (-176, -21) being the same location in a different screen.

Remember, the process screen is a copy of the preface screen, and the preface screen had a lot more text in it. We didn't change the horizontal dimension (it would not have changed if you had created a fixed width text field), just the vertical dimension (we had much less text).

1. In the Info panel, set the reference point to the upper-left corner
2. Set the coordinates to:
   • X:  0
   • Y:  0
3. Select the presentation screen
4. Turn on the Rulers, and drag a Guide from the left edge to 275 (half the width of the stage), and drag a Guide from the top edge to 200 (half the height of the stage).

   If you establish Guides from within a screen, they are only available when that screen is selected. The same is true when working on a MovieClip symbol ... any Guides established within Symbol Edit mode are not visible when you return to editing the main movie. The same is true with Screens: Guides established in a parent screen are visible in its child screens, but any Guide established in a child screen is not visible unless the child screen is selected.

5. Select the process screen
6. Examine the position of the static text field:
   

   Because we didn't change the width of the content, the coordinate system for the horizontal dimension remained the same, with X: 0 being the center of the process screens coordinate structure.

   However, we did significantly change the height of the content. But the coordinate structure of the process screen did not update itself ... it is still using the coordinate structure established in the preface screen (that was used to create this copy).

7. Move the text field back into it's original position

   File -> Revert

   This will only work if you saved your file as directed a couple of steps ago. I went back and reset the Guides to indicate the center of the workspace:

   

There are two solutions if you rely on coordinates to help place elements on the stage

1. Use Guides

   An easy solution

2. Add an invisible frame (rectangle stroke with no fill) as the first element in a new screen

   Select the Rectangle tool with no fill and a hairline stroke. Mix a color with the Alpha value of 0 for the stroke color. Then draw a no-fill rectangle (the dimensions of the stage works well), and then center it.  Repeat this process for each new screen.  If you use this method - and you only need to do so if you rely on the Info panel or Property Inspector coordinates for positioning - it is important that you do this before anything else.

1. Select the process screen in the Outline pane
2. Insert -> Screen

   This only becomes a menu option when working with Screens, which is why you never saw this in the Insert menu before

3. Rename the new screen:  define
4. Toggle open the visibility of the Layers and timelines
5. Insert a new layer, and name them:
   • content
   • frame
6. Select the frame layer
7. Select the Rectangle tool
   1. Fill: no-color
   2. Stroke: hairline
   3. Stroke color:

      In the Color Mixer, select the stroke color indicator, then change the Alpha value of the current stroke color to 0

   4. Draw a rectangle the size of the stage
   5. Select the rectangle (stroke)
   6. In the Info panel, set the orientation to the center point
   7. In the Align panel, click the To Stage button, then click the Match Width and Height button, then click the Align Horizontal Center and then the Align Vertical Center buttons
   8. If it really, really bothers you, go back to the Info panel (aligned to center point), and set the X: and Y: values to 0 (it will be off by a fraction of a pixel)
8. Lock the frame layer
9. Select the content layer
10. Collapse the visibility of the Layers/timelines area

Remember, the only reason you are doing this is to establish a uniform coordinate system within each of the child slides, and you are only doing this if you rely upon the X: and Y: coordinate values of an element for alignment purposes.  We didn't do this with the first several screens, and we encountered no problems while we were authoring.

Also remember that if you find that you need to do this after you have begun authoring within a screen, you are going to encounter problems as the coordinate space has already begun to be established.

After working with screens for a while, you will know whether or not you want to start off by establishing an invisible frame in a non-content layer of a screen. If you find this a useful hack, then you might want to do this as the very first step in a project, and then copy and paste this otherwise empty screen for each new screen you want to work with.

Define the problem you have been given.  This is usually a redefinition because you have been given an apparent problem. The redefinition must home in on the real issues. If you don't become clearer about how to handle the material, you haven't redefined the problem accurately enough.

This is obviously another trick 'question' (or more precisely a trick 'direction').  Not the adding of static text part, but the 'vertically below the text in the process screen' part. Remember, the content of a sibling (child) screen is not visible in subsequent sibling/child screens, only the content of a parent screen shows through to the siblings ...

Hey, wait a second ... is that a hint?

Parents and Children: It's all relative

A MovieClip can have a nested MovieClip within it, making the first MovieClip a parent to the nested MovieClip. Remember, when we want to address an enclosing timeline, we target the enclosing timeline with _parent.  The nested MovieClip can itself have a nested MovieClip, and from the perspective of the innermost MovieClip, we can target the enclosing timeline with _parent (and the outermost timeline with _parent._parent).

In our limited exploration of Screens so far, we have seen the Parent/Child nested hierarchy of screens represented in the Outline pane:

... where the nested/Child screens are indented from the position of the Parent screen. We can make any Child screen a Parent to other Child screens (in the same way that we can make a nested MovieClip instance a Parent to other nested MovieClip instances). The same rules that govern the display of a Parent screen AND the display of the first Child screen will apply, in the same way that both the presentation  AND the intro screen content were automatically displayed at the beginning of the Slide Presentation.

You may have noticed the options for inserting Nested Screen from the contextual menu and the Insert menu ... we can also convert a sibling screen into a child screen by dragging and dropping, in the same way that we can convert a Layer into a Masked Layer (or a Guided Layer) if we drag it up and  to the right of a Mask Layer (or a Guide Layer) ...

When you release, the define screen will be further indented, and has become a child of the process screen:

This now provides you with the Edit-in-Place capability you may be used to when double-clicking an instance on the Stage to edit the instance's Symbol while still being able to see the rest of the contents on the stage (grayed-out).

When working with screens, the child screen content is editable, but the parent screen content is still visbile but visibly grayed out.

Once the content has been positioned with respect to the parent screen, you can drag the child screen in the opposite direction towards the left to change it from a child (of the process screen in this example) to a sibling (of the process screen in this example). This process may be a little goofy ... you may need to drag it out of order (above the process screen in this example), and then drag it straight downwards to place it in the correct sequence.

1. Leave the define screen as a child to the process screen

When you tap the <spacebar> or the <right arrow> key, the preface screen appears.  When you tap one of those keys a second time, the process screen appears. But since the process screen is now a parent (to the define screen) both the content of the process screen and the content of its first child (define) screen appears.

If you had intended to display the "Design is simple" statement separately from the "Define the problem" statement (remembering that the text we are using is standing in for other content, which might be images, animations, video, or any other content Flash is capable of delivering), we can always insert a blank screen.

1. Select the define screen, and either: (1) click on the [+] Insert Screen button; or (2) Insert -> Screen (use the Insert menu); or (3) right-click (or control-click) on the define screen, and select Insert Screen. 

   Alternately, you could right-click (control-click) on the parent process screen, and select Insert Nested Screen from the contectual menu, or select the parent process screen, and Insert -> Nested Screen from the Insert menu

2. In the Outline pane, drag the new screen into position, above the define screen, but still nested as a child to the process screen
3. With the new screen selected, go to the Property Inspector, click on the Properties tab, and enter the new screen name: blank

Now the content of the process screen is displayed by itself, and navigating to the next screen displays both the process screen and the define screen content

Know the material. Digest it fully. At the very least, read it.

Traditionally, you would see Scene 1 (or the name of the scene you are working in), followed by a Symbol name (if editing the Symbol in Place), followed by another indicator, if you were working inside another nested element.

1. Name: distill

   Text:

   Distill the essential from the mass of confusing muchness. Nothing may be missing, and nothing may be extraneous. This is the definition of elegance.

2. Name: abstract

   Text:

   Abstract the main point so its importance to the reader is clear and it is visually arresting. A message that doesn't stop readers won't be read.

3. Name: unify

   Text:

   Unify all elements so they don't outshout each other.

4. The arrangement for these child screens of the process screen should look like this:
   • process
     • blank
     • define
     • know
     • distill
     • abstract
     • unify

Outside of additional screens containing text, this should continue to behave as you might expect ... each tap of the <spacebar> or <right-arrow> keys should advance the persentation to the next screen.  After the text in the unify screen, the next screen - frame - should be blank ... this is our template screen with an invisible rectangle stroke  the size of the stage.

It won't be extremely obvious until we add content to the frame screen, but the navigation from the child screens of process back to frame, which is a sibling of process, should be automatic and seamless. So going into one or more child slides, and coming out of one or more child slides to their parent slide level is automatically handled by the Slides Presentation mode of Flash.

a couple of nifty features

You can automatically load an external SWF or JPEG into a screen.

1. Select the (amost) empty frame screen, and insert two nested screens, and name them: escherIntro and escherRelativity
   • frame
     • escherIntro
     • escherRelativity
2. In the escherIntro screen, enter the static text:

   One of the masters of the manipulation of space is M. C. Escher ... almost everyone is familiar with his composition, "Relativity":

3. Select the escherRelativity screen
4. In the Property Inspector, click on the Parameters tab
5. In the contentPath field, enter the URL: relativity.swf
6. Save and test movie

   Assuming that the file relativity.swf is in the same folder, this is all you have to do to automatically load the SWF into the escherRelativity screen. Once you navigate to the frame screen, the child escherIntro content (text) will be displayed. The next forward navigation displays the escherRelativity screen where the relativity SWF will automatically be displayed.

One of the niftiest aspects of working with Screens is that you have easy access to a range of Transitions behaviors, from cross fades to pixel wipes.

The basic process starts by selecting a screen in the Outline pane, and then in the Behavior panel, clicking on the Add Actions [+] dropdown menu, [+] -> Screens -> Transition 

... which opens up the Transitions dialog box (more an inspector panel than anything else):

The different areas of the Transitions panel include:

List of effects

the different effects that are available

Preview

each time you make a selection or a change, the Preview area shows what the transition will look like

When

In applies the effect when the selected screen comes into view; Out applies the effect as the screen is leaving view (there are other event triggers possible than reveal and hide)

How long

determines the duration of the effect

Effect configuration

each effect will have different controls to modify the effect

Each of the transition effects will have different configuration controls, which makes sense, and they are all pretty self-explanatory, or invite experimentation to see the effects that they produce.

1. Select the screen to which you would like to apply a transition
   1. Select the preface screen in the Outline pane
2. Open the Behaviors panel

   Beneath the Behavior panel titlebar, to the right of the [+] Add Action menu and [-] Remove Action control is the name of the selected element

3. Apply a transition Behavior
   1. [+] -> Screens -> Transition

   The Transitions panel/dialog box appears

4. Select a Transition effect from the list of effects
   1. Select the Fly transition

      Any time you make a selection, the preview area display the results of that selection. So selecting the Fly transition will cause a preview of the effect to be displayed in the preview area.

5. Select the Direction

   In this context, direction refers to whether you want something to transition IN to view, or transition OUT of view.  Once we leave the Transitions panel back to the Behaviors panel, we can set the Event that triggers this behavior: the trigger can be when the screen comes into view - reveal - or when the screen leaves view - hide.

   Generally, if you set the direction of the transition to in, you will want the triggering event to be reveal (the default). If you set the direction of the transition to out, you will want the triggering event to be hide, which you will need to set after you finish with the Transitions panel and return to the Behaviors panel.

   1. Direction:  In  (*)   {selected}
6. Select the Duration

   This determines how long the transition effect takes to complete

   1. Duration:  2     {default}
7. Select the Easing factor:

   "Easing" means the same thing that it does with a Motion or Shape Tween: it slows down (or "eases up") the speed of the effect, so that it is slower at the beginning (Ease In) or slower at the ending (Ease Out).

   With scripted behavior like we have here, we have more options than Ease In (Regular In) and Ease Out (Regular Out).

   1. Easing -> Elastic

      (I don't know if I would recommend this Elastic easing setting from a design perspective, unless your intent is to annoy. We'll come back and modify this later.)

8. Effect-specific configuration

   Each transition will have it's own unique characteristics that can be modified.

   For the Fly effect, we can determine the angle at which the screen contents enter into view (In) or leave view (Out).

   1. Start Location -> Left Center
9. Click: OK

   The Transitions panel disappears, and the Behaviors panel becomes visible

   

   The Behaviors panel has two columns: an Event field and an Action field. The Event field determines the triggering Event for the behavior; the Action field displays the general category of the behavior.

   Clicking on the Event name presents a dropdown menu of the possible Events associated with the selected element (in this case, the selected element is the Screen named preface, so a list of events available to Screens will be presented:

   

   Hovering over the Action (behavior) field produces a tool tip displaying the parameters of the configured behavior:

   

   Examine the information presented in the tool tip ... it is revealing more than you might imagine.

10. With the preface screen still selected, open the Actions panel
    

    While this may very well appear to be more ActionScript gibberish, the discerning eye might extract a sense that the transition is being accomplished by ActionScript.

    Back before Dreamweaver, Golive, and Frontpage did all of their thinking for them, Web designers learned their craft by using the View -> Source feature of their browser, and looked at the HTML and the JavaScript that was used to create the page. They would then take what they found and experiment with the tags or the script, until they worked out for themselves what the tags or the script were doing, so that they could apply the technique in their own work.

    Unfortunately, the majority of today's Web designers (refugees from the print world for the most part) look down at "geeks" who look under the hood to see what's what ... never mind that it was these same "geeks" who created the original Web pages that spawned what we now think of as the Web. For those who still have an ounce of curiosity left in them, the significance about the realization – that the transition effects are being caused by ActionScript – is that all of the effects available in the Transitions panel are available directly by means of ActionScript.  And the significance of that is with a some exploration and experimentation, those transition behaviors are available without you having to write the ActionScript to create the Elastic effect ... all you would have to do is figure out how to access the class method – mx.transitions.TransitionManager.start() – or find a working example that you can modify for your own purposes, or now that you know it is possible, find an online tutorial or other resource, like http://www.macromedia.com/devnet/mx/flash/articles/tweening_print.html

    Anyway, the significance of the ActionScript that you see applied directly to a screen is that the transition behavior is created by ActionScript, and if it is created by ActionScript, then you have the potential of using that ActionScript for your own purposes.

11. Save and test movie

    The first child screen intro automatically appears when its parent presentation screen appears. No transition was applied to the intro screen. But when you tap the <spacebar> to reveal the next screen, the preface screen transitions into view, flying in from the left.

    

    What may be less noticeable is that when we advance to the preface screen, the contents of the intro screen blink out of view. Although Macromedia doesn't recommend it, you can apply both a  reveal event/transition in behavior (for the transition into view phase), and a hide event/transtion out behavior (for the transition out of view phase).

    Tap the <spacebar> key again, to advance to the process screen.  No transition effect is displayed.

    Tap the <left arrow> key, to rewind to the preface screen.  The fly transition effect is displayed.

    The trigger for the fly transition behavior is the preface screen coming into view (the reveal event) ... it doesn't matter whether you are going forwards or backwards in the presentation.

1. Select the element that has the Behavior applied to it (the preface screen)
2. In the Behavior panel, double-click on the behavior's Action field

   Not the label "Action" at the top of the column, but Transition...

3. In the Transitions panel:
   1. Duration: .75

      This changes the transition duration from the default 2 seconds to .75 seconds

   2. Easing -> Strong Out

      This changes the easing from Elastic to Strong Out (slower towards the end)

   3. Click:  OK
   
4. Save and test movie

   The Elastic effect has been replaced with a more straightforward motion tween, and the transition is quicker.

1. Select a screen in the Outline pane
   1. Select the preface screen
2. In the Behavior panel, add a behavior
   1. [+] -> Screen -> Transition
3. Configure the behavior parameters:

   Let's make selections that 'reverse' the transition in effect: we will use the same transition effect with the same duration, only move it from center stage off to the right, and have a slow start and a rapid end

   1. Effect:  Fly
   2. Direction:  Out (*)
   3. Easing -> Strong In
   4. Start Location:  Right Center

      'Start Location' is now the ending location, as we've set the direction of the transition to Out

   5. Click:  OK

      The Transition panel disappears, revealing the Behavior panel

4. Trigger the behavior when the screen is leaving view

   We need to change the triggering Event, from the default reveal to hide ... but which of the two reveal/Transition behaviors needs to be modified? First, the just-added behavior should be highlighted (just in the Event column). But if that gets deselected, you can hover over the behaviors and examine the tool tip:

   

   ... which unfortunately is not as helpful in this case as we might hope. The difference between this tooltip and the one for the previously established behavior is in the Direction value: in the first behavior, the direction was set to in, and the tooltip displayed direction = 0; in this behavior, the direction was set to out, and the tooltip is displaying direction = 1.

   1. Click on the reveal event associated with the direction = 1 action to produce the Event dropdown menu, and select: hide

      Now the transition (with the Direction set to Out) will be triggered when the screen is hidden (when another screen replaces this screen)

   
5. Save and test movie

   When you navigate to the preface screen, it flies into view from the left.

   When you navigate away from the preface screen, it flies away from view to the right.

6. Problem:

   We have a transition In behavior and a transition Out behavior applied to the preface screen, which are working fine.  However, we now have a momentary overlap during the transition Out behavior, when the contents of the next screen (process) are visible:

The overlap problem occurs when we have a transtion Out behavior applied to one screen, but no corresponding transition In behavior applied to the next screen.  If each screen in a sequence only had a transition In behavior, we wouldn't encounter this situation (hence Macromedia's warning). However, if we match the transition Out behavior of one screen with a corresponding transition In behavior (matching duration and Easing) with the next screen, we should be OK.

We configured the transtion Out behavior of the preface screen to these values:

• Effect:  Fly
• Direction:  Out
• Duration:  .75
• Easing:  Strong Out
• Start Location:  Right Center

For the transition In behavior of the next screen, we need to match these characteristics:

1. Select the process screen in the Outline pane
2. In the Behavior panel:
   1. [+] -> Screen -> Transition
3. In the Transition panel:
   1. Effect:  Fly

      While you don't absolutely have to use the same transition effects, consistency can be a more pleasing experience, unless you want to draw attention to the effect and away from the content, or break the consistency to emphasize a point in the presentation. In other words, have a good reason for doing so (but when learning, give yourself permission to experiment to your heart's content)

   2. Direction:  In

      We are attempting to synchronize the transition In behavior of this screen with the transition Out behavior of the previous screen

   3. Duration:  .75

      Depending upon the effect, you have some leeway over establishing different durations ... for example, you might want to set the duration for a fade out effect to a smaller value than the duration for fade in of the next screen.

   4. Easing:  Strong Out

      We want the same easing dynamics in both the transition out and the transition in of the next screen (although, for the same reasons as in the duration parameter, there may be times where you want to fine-tune the dynamics): if the previous screen's transition starts out fast but slows down towards the end, we want the current screen's transition to match those dynamics

   5. Start Location:  Left Center

      Since the previous screen is moving off to the right, it makes sense that we want this screen to move onto the stage from the left

   6. Click:  OK
4. Save and test movie

   By matching the characteristics of the transition Out behavior of one screen with the transition In behavior of the next screen, we can create a seamless transition with no overlaps.

   It will be up to you to determine if your project requires both a transition In and a transition Out behavior applied to all relevant screens ... some transition behaviors won't work well at all with both a transition In and a transition Out applied to each screen.  But at least you now know the basic process for making it work.

   

Since each transition effect will have different configurable parameters, let's look at a different transition

1. Select the escherRelativity screen
2. In the Behavior panel:
   1. [+] -> Screen -> Transition
3. In the Transition panel:
   1. Effect:  Pixel Dissolve

      This effect reveals (or hides) the contents of the screen in rectangular 'pixels' (actually, rectangular blocks whose actual pixel dimensions is determined in the effect-specific parameters)

   2. Direction:  In

      We want to transition IN to view the contents of the escherRelativity screen

   3. Duration:  1
   4. Easing:  Strong In

      This is strictly a judgement call. The effect will be slower at the beginning, so it will only be towards the end of the effect that the viewer will be able to perceive what is becoming visible

   5. xSections:  20
   6. ySections:  20

      These two controls determine the columns (xSections) and rows (ySections) that make up a grid-like checkerboard pattern where each rectangle is turned on randomly over time (duration). If the xSections value was equal to 1, there would be only one column (and very wide Pixel Dissolve blocks); if the xSections value was equal to 50, there would be 50 columns (and tall Pixel Dissolve blocks)

      Even though we set the Sections values to both be 20, these will not be square Pixel Dissolve blocks, because the area we are revealing does not start out square.

   7. Click:  OK
   
4. Save and test movie

   When you navigate from the escherIntro screen to the escherRelativity screen, the contents of the escherRelativity screen are revealed over time in randomly placed Pixel Dissolve blocks.

Cue Points

The Cue Points section is avaliable in a second page: screens_slides_cues.html

... with an automatic stop() action applied to the last frame of the Screen's timeline

Just as there are ActionScript features that allow us to go to a particular frame number, or to a particular scene (and frame number), as well as variations such as nextFrame() and nextScene(), so to are there ActionScript features that allow you to apply onRelease behaviors to button or movieclip controls to navigate to a particular screen. Go back to the Behavior panel, and look at the other options in [+] -> Screen category.

Although this tutorial was set up to show how to work with Screens in the Slide Presentation, and ended up seeming to be just like a PowerPoint presentation, that is only because we didn't add any dynamic content with a Screen.  You can treat the authoring process in the Slide Presentation as if you were working in Scenes, except that you don't have to add a stop() action at the end of a Screen (it is an automatic feature of Screens).

For example, the text effect at the beginning of the presentation (in the source file test_slides_step45.fla) can be found in the keyframe 1 of the Actions layer of the presentation screen. You may continue to author within a Screen in the same way that you would author within a Scene, with the added advantages of automatic stop() actions at the end of each Screen, AND the persistent background of the parent Screen (which is not possible with Scenes).

Also, in case the Layers/Timeline area or the Outline pane area goes missing, you can turn them back on (or turn one or both of them off if you are authoring within a Screen) by going to the Window menu, and selecting Screens or Timelines (which like the other Window menu items, are a toggle between being visible and not being visible).