1 / 35

Intro to Action Script 2

"The games of a people reveal a great deal about them.“ Marshall McLuhan. Intro to Action Script 2. 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

leonard-acevedo
Download Presentation

Intro to Action Script 2

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. "The games of a people reveal a great deal about them.“ Marshall McLuhan Intro to Action Script 2

  2. 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 Movie clip playback control movie_clip_control.fla

  3. 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 Movie clip playback control movie_clip_control.fla

  4. 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 Movie clip playback control

  5. 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 Movie clip playback control

  6. 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 Movie clip playback control

  7. 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 Movie clip playback control

  8. 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. The Cartesian coordinate system

  9. ORIGIN ( 0, 0) top left corner Positive Y is down, negative Y is up The Flash coordinate system

  10. A screen location can be specified by X and Y coordinate pairs. The Flash coordinate system

  11. 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. _xscale Horizontal scaling of an instance relative to the original symbol placed on stage. 100% of original horizonal scale. _yscaleVertical scaling of an instance relative to the original symbol. 100% of original vertical scale. Movie clip properties

  12. _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 ... -180 to 0 to 1800 being the original rotation of the instance. Movie clip properties

  13. _visible True 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 false0 or false being invisible, 1 or true being visible. Movie clip properties

  14. 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 Movie clip properties control mc_properties.fla

  15. 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; } Movie clip properties control mc_properties.fla

  16. 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; } Movie clip properties control mc_properties.fla

  17. 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; } Movie clip properties control mc_properties.fla

  18. 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% Movie clip properties control mc_properties.fla

  19. 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 true locks the object center to the cursor Dragging and Dropping Movie clips simple_drag.fla

  20. 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 Dragging and Dropping Movie clips drag_button.fla

  21. 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. Dragging and Dropping Movie clips drag_button.fla

  22. 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; } drag variable used to determine whether or not the movie clip should follow the cursor. true – drag (button pressed), false – no drag (button lifted) Dragging and Dropping Movie clips drag_function.fla

  23. Go back to the main timeline by clicking on the Scene1 button: Dragging and Dropping Movie clips drag_function.fla

  24. 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 Dragging and Dropping Movie clips drag_function.fla

  25. 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); Dragging and Dropping Movie clips multiple_MC.fla

  26. _root.attachMovie("sample","sample"+i,i); _root.attachMovie("sample","sample"+i,i); “sample” linckage id name of the movie clip “sample"+I name of the instance of movie clip on the stage i level 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. Dragging and Dropping Movie clips multiple_MC.fla

  27. // 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 Dragging and Dropping Movie clips multiple_MC.fla

  28. 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. Dragging and Dropping Movie clips multiple_MC.fla

  29. 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: Collision Detection collision.fla

  30. 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; } } Collision Detection collision.fla

  31. _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 Collision Detection collision.fla

  32. 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; Collision Detection collision.fla

  33. 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 Collision Detection collision.fla

  34. 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 thisassignment 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 Assignment - Confinement

  35. 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. Assignment - Confinement

More Related