Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Like this presentation? Why not share!

Like this? Share it with your network

Share

ARTDM170 Week 7: ActionScript Basics

on

  • 977 views

 

Statistics

Views

Total Views
977
Views on SlideShare
976
Embed Views
1

Actions

Likes
1
Downloads
26
Comments
0

1 Embed 1

http://www.slideshare.net 1

Accessibility

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

ARTDM170 Week 7: ActionScript Basics Presentation Transcript

  • 1. ARTDM 170, Week 7: ActionScript Basics Gilbert Guerrero gguerrero@dvc.edu gilbertguerrero.com/blog/artdm-170
  • 2. Adobe Flash Open Flash and create a new ActionScript 3.0 document...
  • 3. Create an ActionScript class • Save your ActionScript file, example: MyAnimation.fla • Go to New... > ActionScript File to create a new external AS file • Save the file using the same name as your Flash file, example: MyAnimation.as
  • 4. Screen Output • var myText: TextField = new TextField(); myText.text = "Hello World!"; addChild(myText); • The first line creates a new area to display the text, a textfield • The second line puts your text in the textfield • The third line adds the textfield to the stage
  • 5. ActionScript Class Class file declaration • package { Library classes needed import flash.display.*; import flash.text.*; Class definition • public class HelloWorld2 extends MovieClip { • public function HelloWorld2() { var myText: TextField = new TextField(); myText.text = "Hello World!"; addChild(myText); } } Constructor }
  • 6. Create a new AS class package { import flash.display.*; public class MyAnimation extends Sprite { public function MyAnimation() { } } }
  • 7. Drawing a circle with code • Add this code to your class to draw a circle on the screen public var myCircle:Sprite = new Sprite(); myCircle.graphics.lineStyle(5,0x000000); myCircle.graphics.beginFill(0xCCCCCC); myCircle.graphics.drawCircle(0,0,25); addChild(myCircle);
  • 8. Moving objects • An instance of a movie clip can be moved to any location using x and y as coordinates: myCircle.x = 300; myCircle.y = 200;
  • 9. Movement • By updating x and y in every frame you can move objects. // Move the clips myCircle.x = myCircle.x + 10; myCircle.y = myCircle.y + 10;
  • 10. Traditional Animation frame frame frame 1 2 3
  • 11. Computer Animation render display render display frame 1 frame 1 frame 2 frame 2 Executes code Executes code
  • 12. (Dynamic) Flash Animation There’s only one frame! get apply render display initial rules to frame frame state state
  • 13. Event Listeners • By using an event listener that's triggered by ENTER_FRAME the movie clip instance will move on it's own addEventListener(Event.ENTER_FRAME, myFunction); myBtn.addEventListener(MouseEvent.CLICK, myFunction);
  • 14. Triggering movement package { import flash.display.*; import flash.events.*; public class HelloWorld extends MovieClip { // Setup the values private var moveX:Number = 10; private var moveY:Number = 10; private var myCircle:Sprite; public function HelloWorld() { myCircle = new Sprite(); myCircle.graphics.beginFill(0xCCCCCC); myCircle.graphics.drawCircle(0,0,25); addChild(theBall); addEventListener(Event.ENTER_FRAME, onMoveCircle); } public function onMoveCircle(pEvent:Event):void {     myCircle.x = myCircle.x + moveX; myCircle.y = myCircle.y + moveY; } } }
  • 15. Bounce the clip off the edges • The edge of the stage can be detected by determining if the movie clip's x or y values are greater or less than the stage width or height: myClip.x > stage.stageWidth  myClip.x < 0  myClip.y > stage.stageHeight myClip.y < 0   • stage.stageWidth and stage.stageHeight are variables stored by Flash that you can access at any time.
  • 16. Change direction • The direction of the clip can be changed when an edge is detected: if(myClip.x > stage.stageWidth || myClip.x < 0) {         moveX = -moveX;      }   if(myClip.y > stage.stageHeight || myClip.y < 0) {         moveY = -moveY;      }  
  • 17. Bounce the clip off the edges // Setup the values var moveX:Number = 10; var moveY:Number = 10; function moveClip(pEvent:Event):void {     if(myClip.x > stage.stageWidth ||  myClip.x < 0){         moveX = -moveX;  //change direction     }         if(myClip.y > stage.stageHeight ||  myClip.y < 0){         moveY = -moveY;  //change direction     }         // Move the clips      myClip.x = myClip.x + moveX;     myClip.y = myClip.y + moveY; } // Trigger the movement automatically addEventListener(Event.ENTER_FRAME, moveClip);
  • 18. Use the edge of the ball For a more realistic bounce the edge of the ball should be detected when it comes into contact with the edge.  Do this by adding or subtracting half the width of the ball: myClip.width/2 myClip.height/2 The full statements: myClip.x > stage.stageWidth - myClip.width/2 || myClip.x < myClip.width/2 myClip.y > stage.stageHeight - myClip.height/2 || myClip.y < myClip.height/2
  • 19. Bounce using the ball edges var moveX:Number = 10; var moveY:Number = 10; function moveClip(pEvent:Event):void {     if(myClip.x > stage.stageWidth - myClip.width/2 ||  myClip.x < myClip.width/2){         moveX = -moveX;  //change direction     }         if(myClip.y > stage.stageHeight - myClip.height/2 ||  myClip.y < myClip.height/2){         moveY = -moveY;  //change direction     }        myClip.x = myClip.x + moveX;     myClip.y = myClip.y + moveY; }