Progression prepares "Scene Function" to produce the Web site easily. This is equivalent to page in HTML and as we cruise around the page of the HTML site, we cruise around the scene and refer the contents in Progression.

To handle the scene in Component style, please use the "Progression Scene Editor (Scene Editor)". Please select the "Progression Scene Editor" that exist in "Other panels" of "Window" of a screen upper toolbar and execute the Scene Editor.

Only the root scene is set in the initial state of Scene Editor. The root scene is an element that corresponds to top page or the homepage on the Web site. When creating contents, the site structure will be defined by setting the child scene below the root scene.

Then, let's make the scene structure. To make the child scene, please open scene menu by clicking the icon of the item that becomes a parents scene (root scene in case of this time) and click "Insert nested scene".

The made child scene can set the scene name by editing the text area just right of icon. Please set it like a left image this time.

Now the scene structure was made. However, nothing is changed at the actual screen because the scene is just a container. To make the screen, it is necessary to set the cast.

The cast is a setting of the symbol releted to the scene which wants to display. At first, let's set the cast of root scene. Open the "Scene menu" and select the "Insert Cast Item".

When the cast created, let's set the cast name to the text area right to the icon just like scene.Set to "IndexPage" this time.

Set the cast to the child scene just the same. At this time set like left image.

After the cast setting is completed, reflect the setting to the FLA file. Please select "Export the Cast as symbol" of "Export" in the upper part of the panel, and write the movie clip symbol corresponding to the cast to the library of the FLA file.

The scene making is completed now. Please select "Save" of "File" in the upper part of the panel, and overwrite save the easycasting.xml in the deploy folder in the project made ahead.

• Download sample for this chapter

Then, let's make displaying graphic for the movie clip symbol written ahead. First of all, please set the page_index.gr symbol which exists in the assets folder of the library inside the IndexPage symbol.

Please set the page_feature.gr symbol inside the FeaturePage symbol just the same and set the page_contact.gr symbol respectively inside the ContactPage symbol.

After the symbol was made, let's set the effect when displaying it. The component is used to set the effect. Please select "Components" of "Window" of a screen upper toolbar.

When open the component panel, let's confirm the component that exists in the "Progression Effects" group. To apply the effect to all symbols related as cast, drag & drop the component registered here. In that case, several effect components can be set at the same time^※1.

At this time there are no instructions, so set your favorite component to the IndexPage symbol, FeaturePage symbol and ContactPage symbol.

Making the movie clip symbols are done.

• ※1Some component can not use with perticular component at same time

• Download sample for this chapter

Now, the structure and parts of the contents were made. However, we need button to move between the contents freely. We will explain how to create the button here.

At first select "New symbol" of "Insert" of a screen upper toolbar, and make the new movie clip symbol named IndexButton.

After the movie clip symbol was made, open it and set the button_index.gr symbol in assets folder inside the IndexButton symbol like previous section.

Set the button_logo.gr symbol inside the LogoButton symbol, button_feature.gr symbol inside the FeatureButton symbol and button_contact.gr symbol inside the ContactButton symbol just the same.

Then let's set the component to make graphics works as button. Open the component panel and drag & drop and set the RollOverButton component of "Progression Buttons" group.

After set up, open the parameter panel with the component selected and set the navigatePath which shows the destination path with slash syntax ^※1 as below.

• ※1Start from slash and the scene name tied with slash delimiter. Please note that the end doesn't end in the slash.

Creating button is now completed. Set the created button to the stage and preview the FLA file to check if actually function as button.

• Download sample for this chapter

At last, let's create the progress bar displayed during waiting to read the SWF file.

Close the index.fla which edited at previous section because we don't use this time. Please open preloader.fla instead.

When you open the preloader.fla, layer, frame and label are already set in the timeline.

Preloader component which do the read wait process is set to the component layer. This component does not need to edit so please remain as is.

Three label (the load label, the complete label, and the error label) has already been set to the label layer. This label is used when the Preloader component process the read operation and automatically animation is processed from load label to complete label according to the state of the file reading. In case some problem occurs during reading operation, it displays the error label.

This time, let's make the progress display with the bar type. Because animation is processed between the labels of two points mentioned above when wait reading, set the graphics with status of 0% read to the frame of load label and status with 100% read to the frame of complete label and setup the tween.

Because the progressArea.gr symbol and progressBar.gr symbol are prepared in assets folder of library for symbols to display, set these to the corresponding frame and set the width of the progressBar.gr symbol to 0% and setup the tween between two points.

Set the display when failed reading to the frame of the error label to complete preloader.fla.

• Download sample for this chapter

That's all for making contents with Progression. Lastly, we'll show you how to publish contents.

Open "deploy" folder in this project. All files that are needed for Progression contents exists in this folder. If you don't have special reason, all you have to do is upload files in this folder.