Everyone has noticed those Flash page curls advertisements, but I bet you never thought it’d be this easy to add to your Flash movie? This article demonstrates the use of a new SWiSH Max2 / miniMax2 component “peelaway”.

Even if you don’t need an advertisement the corner fold can allow the user access to additional controls or buttons and leave the full space available at the “top” level. This is a very good use of space since all the facing area is available to display the main images, text or buttons, but additional levels can be easily accessed via the corner fold.

Unfortunately corner folds are reasonably complex to achieve. We have taken the pain out of the process by creating a corner fold component called “peelaway”. This component will be released in future releases of SWiSH Max2 and miniMax2, but it is available here for those that are interested. A demonstration movie giving an idea of how the component can be used is shown below and is also included in the zip file attached to the bottom of this article.

The component has a number of configuration parameters. The parameters used in the demonstration are shown in the image to the right. The color parameters should be self evident, but the others may require some explanation.

Closed Fold – This is the amount of fold (in pixels) that is shown when the document is in its unfolded or closed state. Although this value can be zero, it should not be zero if the Mouse Over Area option is set to Fold.

Maximum Fold – This is the maximum size of the fold as a percent with respect to the shortest side (height or width). This size includes the Fold Radius. Initially set this to 100 and see how it looks.

Fold Radius – This is the radius (in pixels) of the fold corners. 30 looks realistic to me. A lower number will give a sharper fold, a larger number will give a less sharp fold.

Fold Speed – The speed that the page folds or unfolds. The higher the number, the faster the fold.

Event Function – This allows the user to specify the name of a function that will be called when an event associated with the component occurs. The supported events are:

Opened – The peel is fully extended.
Closed – The peel has returned to its non extended state.
rollOut – The mouse has just rolled off the mouse over area.
rollOver – The mouse has just rolled into the mouse over area.

As with the event function used by other components, the first parameter is the name of the object, the second parameter is the current state of the component (a text string corresponding to one of the states described above). The demonstration .swi shows how to use the event function to play a sound and start the background flashing once the peel is fully opened.

Mouse Over Area – The mouse over area can either correspond to the total size of the page (Page selected) or the fold area including the section that has been uncovered (Fold selected). The use of the Fold mode, allows other buttons on the displayed area to be used until covered by the fold. The Page mode must be used if the minimum fold size is set to 0, otherwise it is not possible to start the peeling.

Note that the component does not do rigorous checking of the parameter values you enter. So please make sure that:

1. The movie / image contained by the imageholder movie clip has its shortest side larger than the Closed Fold parameter.
2. The Maximum Fold parameter represents a size larger than Closed Fold.

Demonstration Movie Explanation

The demonstration movie uses the peel effect to show a main page. When the mouse is moved over the fold area, the fold is opened. When the fold is fully open, the exposed background is set to flash, and a gong sound is played.

The newly exposed button can then be used to stop and start the sound effect when the fold is fully opened.

The Outline panel of the demonstration movie is shown below:

When the peelaway component is expanded, it shows an image holder movie clip. The contents of this movie clip can be changed to contain whatever you want to display with the peelaway component.

In the example, you would delete the “demomovie” movie clip then insert the movie clip, or image of your choice.

Once you have inserted the image / movie clip, you should set the transform and reference points to be top right hand corner, and then set x=0 and y=0.

This will position your image or movie clip correctly within the peelaway component.

The peelaway component adjusts itself to work with a rectangle that surrounds all objects within your movie.

The remaining objects in the movie are:

Button_star – One of the component buttons, configured to be a “toggle” button. Note that the Event Variable parameter is set to _parent.G_NoSound. This is used to pass the current toggle state to the main movie. The sound effect is only played if G_NoSound is false.

flashbgnd - A movie clip that does a flashing background. It simply contains two rectangle shapes that are shown and hidden in turn.

sounds - A movie clip to hold the sound effect.

Important  – Note the peelaway object is the top object in the Outline panel tree. This is important as it is used to hide the other objects that become visible once the fold takes place.

The behavior of the movie is then defined by the script in the main movie. That script is shown and explained below:

Demo Movie Script

function Events(n,v) {
    if ("peelaway" == n) {
        // event was caused by peelaway component
        if ("Opened" == v) {
            // the fold is now fully open
            flashbgnd.play();    // start the background flashing
            flashbgnd._visible = true;    // make background visible
            if (!G_NoSound) {
                // conditionally play sound.
                // depends on the button state. on = no sound.
                sounds.play();
            }
        } else {
            // other possible values are
            // rollOut, Closed and rollOver
            // for all of those states, just stop and hide the flashing
            flashbgnd._visible = false;
            flashbgnd.stop();
        }
    }
}
onSelfEvent (load) {
    // G_NoSound is set / reset by the Button_star component via
    // the defined event variable: _parent.G_NoSound.
    // As button initial state is off, initially set
    // G_NoSound to off. G_NoSound == false means play sound.
    G_NoSound = false;    // enable sound for first use

    // stop and hide the flashing background
    flashbgnd._visible = false;
    flashbgnd.stop();

    // stop the sound effect clip.
    sounds.stop();
}

Script Description

The onSelfEvent (load) event is used to set the initial state. The variable G_NoSound has its initial value set to false to enable the sound effect. This variable is modified by the button, “Button_star” to show the current button state when the button is pressed.

The flashing background is made invisible and the sounds movie clip is stopped preventing the sound effect from playing.

The Events function processes events from the peel away component.

If the event is from the peelaway component (n, the name = “peelaway”) the event status is checked.

If the status indicates that the peelaway is “Opened” then the script starts the flashing background (flashbgnd._visible = true, flashbgnd.play()) and conditionally plays the sound effect depending on the value of G_NoSound.

If the status indicates something different, the background flashing is stopped (flashbgnd.stop(), flashbgnd._visible = false).

If you want to examine the scripting that does the actual peelaway, please feel free to examine the peelaway component. To do this, right click on peelaway in the outline panel, then uncheck the attributes: Read Only Script, Conceal Script and Conceal Child Objects. The scripting can then be viewed in the script panel. The scripting within the component is reasonably complex and beyond the scope of this article.

The peelaway.zip file contains the component (peelaway.swi and peelaway.swf) as well as the demonstration movie (peelawaydemo.swi).

Unzip the files onto your computer and copy peelaway.swi and peelaway.swf into the components folder in your SWiSH Max2 or SWiSH miniMax2 program folder.  Unless you changed the default installation folder, the file path would typically be:

C:\Program Files\SWiSH Max2\components\Effects\2D
or,
C:\Program Files\SWiSH miniMax2\components\Effects\2D

If you are running Max2 (or miniMax) when you copy the component, you may need to refresh the component tree by right clicking on the tree in the Components panel then selecting ‘Reload’.  To use the component, simply drag it into your movie.

Tags: curl, fold, paper, peel, peelaway

This entry was posted on Friday, May 1st, 2009 at 1:14 pm and is filed under Max2, components, miniMax2, scripting, tutorials. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.