Tài liệu Creating an Interactive Placeholder ppt

< Day Day Up > Creating an Interactive Placeholder A placeholder is nothing more than a movie clip instance empty or otherwise into which external content can be loaded also known as a

< Day Day Up >

Creating an Interactive Placeholder

A placeholder is nothing more than a movie clip instance (empty or otherwise) into which external content can be loaded (also known as a target) Creating an interactive

placeholder involves giving that placeholder the capability of interactivity when an event

of some sort occurs The great thing about loading external content into an instance that has been scripted in such a way is that even though the instance's content will change, its scripted functionality can remain the same Look at the following example:

this.onMouseDown = function(){

placeholder_mc._rotation += 30;

}

If you attach this script to the main timeline, the placeholder_mc instance rotates 30 degrees each time the mouse is clicked This instance can be thought of as an interactive placeholder because any external movie or JPG loaded into it will also rotate when the mouse is clicked The only thing that changes is the instance's content

There are many ways to create interactive placeholder movie clip instances with a

minimum of scripting The following exercise shows an example

1 Open virtualaquarium3.fla

When we worked with this file in the preceding exercise, we set the movie to dynamically load JPGs into the movie clip instance named placeholder_mc In this exercise, we'll add ActionScript to make the loaded content draggable and to scale

it 150 percent when the mouse button is pressed The ActionScript will also ensure that when the mouse button is released, dragging ceases and the content is scaled back to 100 percent In the process of setting up this functionality, we'll use the black rectangle (a movie clip instance named maskClip_mc) on the left of the stage as a dynamic mask

Let's get started

2 With the Actions panel open, select Frame 1 of the Actions layer and add the following script at the end of the current script:

3

4 var placeholderStartX:Number = placeholder_mc._x;

5

6 var placeholderStartY:Number = placeholder_mc._y;

7

This script creates two variables whose values represent the initial x and y

positions of the placeholder_mc movie clip instance, into which our JPGs are loaded The importance of these values will become evident in a moment

TIP

We could have opened the Property inspector, selected the instance, copied the x and y values shown there, and set placeholderStartX and placeholderStartY

accordingly, but the method shown in Step 2 is much more dynamic It allows the values to change automatically if the instance is moved to a new point on the stage during development

3 Add the following script below the script you just added in Step 2:

4

5 this.onMouseDown = function(){

6

7 if (placeholder_mc.hitTest(_xmouse, _ymouse)){

8

9 maskClip_mc._x = placeholderStartX;

10

11 maskClip_mc._y = placeholderStartY;

12

13 placeholder_mc.setMask(maskClip_mc);

14

15 placeholder_mc._xscale = 150;

16

17 placeholder_mc._yscale = 150;

18

19 startDrag(placeholder_mc, false);

20

21 }

22

23 }

24

This step attaches an onMouseDown event handler to the main timeline, causing the script to execute whenever the mouse button is pressed An if statement determines whether the mouse pointer is over the placeholder_mc instance when the mouse is pressed If so, the remaining actions are executed In other words, because our JPG images are being loaded into this instance, these actions execute only if the mouse button is pressed while the pointer is on top of the image

The first two actions within the if statement dynamically position the black rectangle maskClip_mc movie clip instance so that its x and y values equal placeholderStartX and placeholderStartY, respectively This action places the maskClip_mc instance directly over the placeholder_mc instance during this script's execution

The next action dynamically sets the maskClip_mc instance to mask the

placeholder_mc instance's content—necessary because the next two lines in the script scale the size of placeholder_mc by 150 percent By masking the

placeholder_mc contents, those contents appear to remain within the panel

window even though placeholder_mc becomes larger

The last action in the event handler makes the placeholder_mc movie clip instance

draggable

4 Add the following event handler below the script you just added in Step 3:

5

6 this.onMouseUp = function(){

7

8 stopDrag();

9

10 with(placeholder_mc){

11

12 setMask(null);

13

14 _xscale = 100;

15

16 _yscale = 100;

17

18 _x = placeholderStartX;

19

20 _y = placeholderStartY;

21

22 }

23

24 }

25

This script—executed when the mouse button is released—simply reverses the actions that occur when the mouse button is pressed The script first stops the dragging process; then the next several lines use a with statement to perform a set

of actions in relation to the placeholder_mc instance The first action removes the mask from the instance

NOTE

Using null removes the mask effect completely

The next two actions scale the instance back to its original size Because this instance was draggable, the last two actions perform the necessary task of resetting

it to its original position

5 Choose Control > Test Movie

As soon as the movie begins to play, click and drag the image of the shark When the mouse button is pressed, the image becomes larger and draggable, and the dynamic mask we set up takes effect Release the mouse button, and you'll see maskClip_mc The reason for this is that when our script removed the masking effect, we didn't compensate for the fact that maskClip_mc would become visible

again as a normal clip Obviously, this isn't what we want, but there's an easy fix

6 Return to the authoring environment With the Actions panel open, select Frame 1

of the Actions layer and attach this script:

7

8 maskClip_mc._visible = false;

9

This line of script makes the instance invisible as soon as it loads, and it remains this way because our movie doesn't contain an action to change it Because the instance is invisible, it won't interfere with viewing the images in the

placeholder_mc instance, even when the masking effect is disabled

7 Choose Control > Test Movie

As soon as the movie begins to play, click and drag the image of the shark With the mouse button pressed, the image becomes larger and draggable, and the

dynamic mask we set up takes effect Release the mouse button, and the image

appears as it did originally This time, maskClip_mc no longer appears, because it's invisible

Load a new image, using the right-arrow button Click that newly loaded image, and you'll find that it has retained its original functionality The image's

functionality resides not within the loaded asset, but in the instance into which the asset is loaded (placeholder_mc); although the loaded content may change, the

instance and its functionality remain the same

8 Close the test movie and save the file as virtualaquarium4.fla

This step completes this exercise We'll continue to build on this file in the

following exercises

< Day Day Up >