AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Intro to Action Script 2 "The games of a people reveal a great deal about them.“ Marshall McLuhan

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Movie clip playback control movie_clip_control.fla Movie clips contain timeline with layers and most of elements of main Flash movie By default the movie clip will loop frames in its timeline in the flash movie View the example “movie_clip_control.fla” in the Pickup folder Notice myMovieClip symbol in the library and two instances of this movie clip on the stage: Left instance has no name ( properties panel > instance name is empty) Right instance is named “myMovieClip” Test movie

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Movie clip playback control movie_clip_control.fla The second instance “myMovieClip” is controlled by Action Script commands applied for the buttons Select Play button on the stage and review the following Action Script command in the Actions window Play button plays myMovieClip timeline on (press) { _root.myMovieClip.play(); } _root addresses the main timeline of the Flash movie _root.myMovieClip addresses myMovieclip on the main timeline.play() plays the myMovieclip timeline

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Movie clip playback control Select Stop button on the stage and review the following Action Script command in the Actions window Stop button stops myMovieClip timeline on (press) { _root.myMovieClip.stop(); }.stop() stops myMovieClip timeline at the current frame

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Movie clip playback control Select First Frame button on the stage and review the following Action Script command in the Actions window First Frame button returns myMovieClip to the first frame of its timeline and stops on (press) { _root.myMovieClip.gotoAndStop(1); }. gotoAndStop(1) returns myMovieclip to the first frame (1) and stops

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Movie clip playback control Select Next Frame button on the stage and review the following Action Script command in the Actions window Next Frame button moves myMovieClip one frame forward on (press) { _root.myMovieClip.nextFrame(); }. nextFrame() moves myMovieclip forward one frame

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Movie clip playback control Select Previous Frame button on the stage and review the following Action Script command in the Actions window Previous Frame button moves myMovieClip one frame backward on (press) { _root.myMovieClip.prevFrame(); }. prevFrame() moves myMovieclip backward one frame

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 The Cartesian coordinate system Given a fixed point of reference or ORIGIN an axis of direction PLUS (+) or MINUS (-), and a UNIT MEASURE, the Cartesian Coordinate system assigns to the screen a HORIZONTAL and VERTICAL AXIS.

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 The Flash coordinate system ORIGIN ( 0, 0) top left corner Positive Y is down, negative Y is up

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 The Flash coordinate system A screen location can be specified by X and Y coordinate pairs.

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Movie clip properties a short-list of visible read/write properties _xHorizontal position of a movie clip, in pixels. Measured from the left side of the clip's _parent's stage to the registration point of the movie clip. Zero, the left side of the stage. _yVertical position, in pixels. Zero, the top of the stage. _xscaleHorizontal scaling of an instance relative to the original symbol placed on stage. 100% of original horizonal scale. _yscale Vertical scaling of an instance relative to the original symbol. 100% of original vertical scale.

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Movie clip properties _widthThe width, in pixels, of the space occupied by the movie clip. Completely relative, that is, once changed, there is no stored value representing the original width of the element _heightThe height, in pixels, of the space occupied by the movie clip. Completely open _alphaTransparency percentage. 0 being completely transparent; 100 being completely opaque _rotationDegrees of rotation. note: Yes, you can set _rotation to 360; _rotation can be set to any number, but one complete revolution looks the same as two, or three, or seventeen to 0 to being the original rotation of the instance.

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Movie clip properties _visibleTrue and False are Boolean values. When a clip's _visible property is set to false, buttons inside the clip will no longer detect events. 1 or 0; also, true or false 0 or false being invisible, 1 or true being visible.

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Movie clip properties control mc_properties.fla Action Script can control external properties of the movie clip Open “mc_properties.fla” file from the Pickup folder and save it on your flash drive

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Movie clip properties control mc_properties.fla Note the movie clip name is “fox” Check the movie size: Modify > Document > dimentions width=550 height = 400 Select buttons on the stage and study the action script commands in the Actions window sets horizontal location of the fox to 200 on (press) { _root.fox._x = 200; }

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Movie clip properties control mc_properties.fla sets horizontal location of the fox to 275 middle of the stage ( 550 / 2= 275) on (press) { _root.fox._x = 275; } sets horizontal location of the fox to 350 on (press) { _root.fox._x = 350; }

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Movie clip properties control mc_properties.fla sets angle of rotation of the fox to 0 on (press) { _root.fox._rotation = 0; } sets angle of rotation of the fox to 30 degrees clockwise on (press) { _root.fox._rotation = 30; }

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Movie clip properties control mc_properties.fla sets proportional scale of fox to 50% on (press) { _root.fox._xscale = 50; _root.fox._yscale = 50; } sets proportional scale of fox to 100% sets proportional scale of fox to 150%

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Dragging and Dropping Movie clips simple_drag.fla Open “simple_drag.fla” file from the Pickup folder Note the movie clip instance name is “circle” Study the 1 FRAME script: startDrag("circle",true); “circle”name of the movie clip truelocks the object center to the cursor

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Dragging and Dropping Movie clips drag_button.fla Open “drag_button.fla” file from the Pickup folder Double click on the “circle” movie clip in the library and study the following script applied to the invisible button inside the “circle” movie clip in the button layer: on (press) { startDrag("",false); } on (release) { stopDrag(); } Executes the startDrag command when the user presses button down, and stopDrag command when the user lifts up the button

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Dragging and Dropping Movie clips drag_button.fla on (press) { startDrag("",false); } “ “ Empty quotes addresses the current movie clip. Because the button is inside the “circle” movie clip, that particular movie clip can be dragged. false Will maintain the original distance between the cursor and movie clip instead of locking it to the center. This makes it appear as if cursor has grabbed a part of the circle and is dragging the circle by that point. stopDrag Stops dragging. Only one movie clip can be dragged at the time, so no parameters.

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Dragging and Dropping Movie clips drag_function.fla Open “drag_function.fla” file from the Pickup folder Double click on the “circle” movie clip in the library and study the following script applied to the invisible button inside the “circle” movie clip in the button layer: on (press) { drag = true; } on (release) { drag = false; } dragvariable used to determine whether or not the movie clip should follow the cursor. true – drag (button pressed), false – no drag (button lifted)

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Dragging and Dropping Movie clips drag_function.fla Go back to the main timeline by clicking on the Scene1 button:

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Dragging and Dropping Movie clips drag_function.fla Select the movie clip “circle” on the stage and study the following script in the actions window: onClipEvent (enterFrame) { if (drag) { this._x = _root._xmouse; this._y = _root._ymouse; } This script sets _x and _y properties of the movie clip to _xmouse and _ymouse cursor position in the main timeline

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Dragging and Dropping Movie clips multiple_MC.fla Open “multiple_MC.fla” file from the Pickup folder Select dummy “actions” movie clip on the stage and study the following script applied: onClipEvent (load) { // create 10 movie clips for(i=0;i<10;i++) { _root.attachMovie("sample","sample"+i,i);

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Dragging and Dropping Movie clips multiple_MC.fla _root.attachMovie("sample","sample"+i,i); “sample”linckage id name of the movie clip “sample"+Iname of the instance of movie clip on the stage ilevel of the movie clip instance. Describes an order in which movie clips are drawn First movie clip drawn at level 0, second at level 1, third at level 2, and so on. Flash won’t let two movie clips be created at the same level.

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Dragging and Dropping Movie clips multiple_MC.fla // set the location of clips _root["sample"+i]._x = i*50+50; _root["sample"+i]._y = 100; } _root["sample"+i]._y = 100; The vertical location of all movie clips set to 100 _root["sample"+i]._x = i*50+50; The horizontal locations are different starting with 50 and ending at 500

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Dragging and Dropping Movie clips multiple_MC.fla onClipEvent (enterFrame) { // loop through and rotate each movie clip for(i=0;i<10;i++) { _root["sample"+i]._rotation += 5; } The code loops through all movie clips and rotates each one by 5 degrees. The result is all 10 movie clips are rotation on the stage.

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Collision Detection collision.fla The code detecting whether two objects collide, or whether the cursor location collides with an object Open “collision.fla” file from the Pickup folder Note “target” and “bullet” movie clips Select dummy “actions” movie clip on the stage and study the following script applied:

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Collision Detection collision.fla onClipEvent (enterFrame) { // see if the bullet hit the target if (_root["target"].hitTest(_root["bullet"])) { // collision, so target grows _root["target"]._xscale += 5; _root["target"]._yscale += 5; // bullet resets _root["bullet"]._x = 350; } else { // no collision, continue to move bullet _root["bullet"]._x -= 5; }

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Collision Detection collision.fla _root [ "target“ ]. hitTest ( _root [ "bullet“ ]) hitTest function to determine if two objects collide or an object is covering a certain point on the screen _root [ "target“ ] “target” movie clip _root [ "bullet“ ] “bullet” movie clip

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Collision Detection collision.fla if ( _root [ "target“ ]. hitTest ( _root [ "bullet“ ]) ) If bullet hits the target this condition is TRUE the target scale increased by 5% _root["target"]._xscale += 5; _root["target"]._yscale += 5; And bullet horizontal position is set to 350 _root [ "bullet“ ]. _x = 350;

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Collision Detection collision.fla else { _root["bullet"]._x -= 5; } If there is no collision, condition is FALSE, ELSE statement is executed The code moves bullet -5 pixels at a time to the left towards the target

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Assignment - Confinement 1.Create an interactive animation using Action Script in Flash with a small bouncing object (box) inside the larger object (cube). Cube and box are just examples here – create your own objects to deliver the idea of confinement. The concept of this assignment revolves around the idea of being constrained in a box. The box is a metaphor for the physical, social, political or psychological constraints that we and/or others place upon us. The box also represents a sense of place in the realm of the virtual as well as in our conscience. InterPlay: Loose Minds in a Box SIGGRAPH2005 Use: Variables &&/|| Functions &&/|| Collision detection &&/|| movie clip properties

AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007 Assignment - Confinement Optional for extra grade: 2,3,4. Add more bouncing boxes. Use different speeds. Change size of the boxes each time it bounces from the cube. If the box becomes larger then the cube, create an animation to brake the cube.