Flash: Screens

Screens are included in Flash MX Pro. They allow the creation of complex applications without the need to use the Timeline. They provide templates for applications that would take far longer to build individually. Screens enable you to make hierarchical or nested documents of two main types, slide show presentations and forms.

Presentations

Flash MX Pro includes a way to create presentations using 'screens'. To start a new screen presentation choose File/New and choose 'Flash Slide Presentation'. To open the sample provided by Macromedia find it in the place specified and open it.

The screens outline includes a master presentation slide and a single new slide. The designer adds new slides and content and links so that the presentation can move from slide to slide. Each screen has its own timeline and functions like a regular Flash document.

The presentation slide controls basic properties of the slide show and hosts master elements like a master page in a DTP program. Any content added to the presentation slide will appear on all child slides so things like navigation buttons and logos can be added quickly and consistently.

Typically you would use layers to create the elements of the presentation (master) slide.

Clicking on the stage of the presentation slide allows you to change properties such as the size and the Publish settings.

To add navigation buttons create a button in the way you have used previously. Add a new layer and call it 'navBar'. Draw a bar at the bottom of the screen and give it a gradient fill in your chosen colour scheme.

Draw a rectangle, group its elements and convert it to a symbol of type button. Give the button an instance name in the Properties panel. With the button selected choose Window/Development Panels/Behaviors. Click the Add button and choose Screen/Go to Next Slide. Drag the button on to the navigation bar and scale it using the properties panel.

Repeat the procedure for a previous slide button, choosing Screen/Go to Previous Slide as the behaviour. The screen behaviours also include Go to First Slide and Go to Last Slide options and also a Go to Slide and Show Screen and Hide Screen options. Adding all of these should fill up the navigation bar nicely.

Note that the Go to Slide option requires you to select the slide in advance, it is not an open choice. You could use this feature to provide a list of slide numbers across the navigation bar, each one of which is a button linking to that slide.

To add a new slide to the presentation click on the Add (plus) button or right click the master slide and choose Insert Screen. Rename the slide in the Properties panel. Slides can be dragged to change their position in the sequence and they can also be nested inside each other so that they inherit properties of their parent slide.

To add nested slides select the parent, right-click the thumbnail and choose Add Nested Screen from the popup menu. You can also paste nested screens from the menu.

You can change items on any number of slides at the same time by Shift-selecting them and adding or editing content.

Transitions

To add transitions to slides as a group select the master slide, which is either the master for the whole presentation or one that you have set for a series of nested screens.

Click the Add button in the Behaviors panel and choose Screen/Transition. Choose the transition you require, leave the direction on 'In' and leave the time at 2 seconds. Set the Start Location and Shape to whatever you require.

When you have finished select the 'Reveal' block in the Event column and replace it with 'revealChild' from the drop-down list.

Add another transition, this time choosing 'Out' as the direction and a shorter time such as 0.5 seconds. Adjust the transition type, Start location and Shape to whatever suits. Change the Event for this transition to 'hideChild'. Your slide show should now apply the same transition between slides/screens.

Now that you have a completed slide/screen presentation you can use it as a template for later use. Just delete the content and save it with a suitable name.

Photo Slide Show

One way to use a presentation is to create a photo slide show.

Start a new Flash document of type Slide Presentation. In the master slide set the size of the stage to the maximum image size in your image set on the X and Y axes, plus a little more for the navigation bar (e.g. 25 pixels).

Add a toolbar along the bottom of the stage in a colour of your choice. Add a button of your own design (e.g. use a small box and the '>' character for 'next' and the '<' for previous.

Set the 'next' and 'previous' buttons you made to symbols of type button. Use the Behaviors panel as described above to set the 'next' button to the Next Slide and the 'prev' button to the Previous Slide. Move these buttons into the navigation bar.

Click on the first slide and use Ctrl/R to import an image onto the stage. Add new slides and import images as required. (It is best not to place too many images in a single slide presentation as this will make the .swf file quite large and leave the browser waiting for the complete image set to download. The Flash content of the .swf file is tiny but the added images will add up in size to the equivalent of the separate images. However, when the images are loaded separately the user can see them appearing whereas with the current Flash .swf file they can't.)

Save and Publish the file and allow the creation of a HTML page, which will include the embedded .swf file. Example.

Forms

Screens are also used to create on-screen forms for data gathering.

Home