Your SlideShare is downloading. ×
ARTDM 170, Week 13:
 Flash Text + Arrays
          Gilbert Guerrero
         gguerrero@dvc.edu
gilbertguerrero.com/blog/ar...
Text in Flash

• There are two basic ways to add text
  to your Flash movies
 ‣ Using ActionScript
 ‣ Placing text on the ...
Text with ActionScript
gameScore = new TextField();
gameScore.x = 10;
gameScore.y = stage.stageHeight -30;
gameScore.width...
Placing text on the stage

• Use the text tool to add text to the
  stage
Placing text on the stage

• Add an
  instance name
• Select
  Dynamic Text
Placing text on the stage

• In your ActionScript refer to the
  instance name to update the text
  value
	 myScore.text =...
Updating the score

• In our jumping brick game, each time a
  collision is detected with the myBalloon
  object, we can u...
Adding a Timer
• Add a function that shows the time in
  a text field		
  function showTime(event:Event){
    gameTime = gameTimeLimit -
 ...
Translate milliseconds using
this function
 //Translates milliseconds to easily
 readable Minutes and Seconds
 public func...
Declare the new variables
 private var gameTimeLimit:int;
 private var gameTime:int;
Initialize and start the clock
 gameTimeLimit = 20000;

 addEventListener(
   Event.ENTER_FRAME,showTime);
End the game when time has
run out
 //end the game if time has run out

 if(gameTime < 0) {
   MovieClip(root).gotoAndStop...
Show the score on the Game
Over screen
  //end the game if time has run out

  if(gameTime < 0) {
    MovieClip(root).numH...
On the root timeline
• In the first frame a variable must be
  created	
  var numHits:Number;

• In the last frame, after i...
Arrays
What is an Array?

• Arrays group data together in a
  single element
• Can be thought of as a variable that
  stores vari...
Storing and Retrieving

• Arrays can be used to store data
  var fruits:Array = new Array();
  fruits = [“apples”,“oranges...
Storing and Retrieving

• Data can be retrieved from arrays
  using the index numbers
  trace(fruits[0]); //apples
  trace...
Arrays and Objects

• Arrays can be used to store objects
  var redBall:Ball = new Ball();
  var orangeBall:Ball = new Bal...
Arrays and Objects

• Instead of using the variable names for
  each ball, we can use the array

  ballArray[0].x = 100;
 ...
for() loops

• for() statement allows you to repeat an
   operation a certain number of times
      for(var i:int=0; i < N...
Using arrays and for loops

• In the case of our ballArray, we could
  use a for() statement instead of typing
  out every...
Creating multiples with arrays
•   We can use a for() loop to create and add
    the balls to an array
      var ballArray...
Randomization

• Generate a random number between 0
  and .999999
Math.random()

• Round down using Math.floor and to
  mul...
Randomizing location and
velocity
• Combining for() loops, arrays, and random
  numbers we can create hundreds of objects
...
Array Functions

• Add an item to the end of the array
  fruits.push(“strawberries”)
  ;

• Remove an item from the middle...
Script
package {
	           import flash.display.*;
	           import flash.events.*;
	
	           public class MyAnima...
Timeline
March                              April                    May              Last day of class
9        16      2...
Homework, due April 27

• Work on your final projects
• Read Getting Started on the
  Processing site


Next week: Introduc...
Upcoming SlideShare
Loading in...5
×

ARTDM 170, Week 13: Text Elements + Arrays

690

Published on

Published in: Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
690
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide






























  • Transcript of "ARTDM 170, Week 13: Text Elements + Arrays"

    1. 1. ARTDM 170, Week 13: Flash Text + Arrays Gilbert Guerrero gguerrero@dvc.edu gilbertguerrero.com/blog/artdm-170/
    2. 2. Text in Flash • There are two basic ways to add text to your Flash movies ‣ Using ActionScript ‣ Placing text on the stage
    3. 3. Text with ActionScript gameScore = new TextField(); gameScore.x = 10; gameScore.y = stage.stageHeight -30; gameScore.width = 300; var myTextFormat:TextFormat = new TextFormat("Arial", 18, 0x006600, true, false, false, null, null, "left"); gameScore.defaultTextFormat = myTextFormat; gameScore.selectable = false; gameScore.multiline = true; gameScore.wordWrap = true; gameScore.autoSize = TextFieldAutoSize.LEFT; gameScore.text = "Your Score: 0”; addChild(gameScore);
    4. 4. Placing text on the stage • Use the text tool to add text to the stage
    5. 5. Placing text on the stage • Add an instance name • Select Dynamic Text
    6. 6. Placing text on the stage • In your ActionScript refer to the instance name to update the text value myScore.text = "Your Score: "+ numScore;
    7. 7. Updating the score • In our jumping brick game, each time a collision is detected with the myBalloon object, we can update the score when we remove the balloon if( myBrick.hitTestObject(myBalloon) ) { removeChild(myBalloon); numBalloons = 0; numScore = numScore + 1; myScore.text = "Your Score: "+ numScore; }
    8. 8. Adding a Timer
    9. 9. • Add a function that shows the time in a text field function showTime(event:Event){ gameTime = gameTimeLimit - getTimer(); gameTimeField.text = "Time: "+ clockTime(gameTime); }
    10. 10. Translate milliseconds using this function //Translates milliseconds to easily readable Minutes and Seconds public function clockTime(ms:int) { var seconds:int = Math.floor(ms/1000); var minutes:int = Math.floor(seconds/ 60); seconds -= minutes*60; var timeString:String = minutes +":"+ String(seconds+100).substr(1,2); return timeString; }
    11. 11. Declare the new variables private var gameTimeLimit:int; private var gameTime:int;
    12. 12. Initialize and start the clock gameTimeLimit = 20000; addEventListener( Event.ENTER_FRAME,showTime);
    13. 13. End the game when time has run out //end the game if time has run out if(gameTime < 0) { MovieClip(root).gotoAndStop( "gameover"); }
    14. 14. Show the score on the Game Over screen //end the game if time has run out if(gameTime < 0) { MovieClip(root).numHits = numScore; MovieClip(root).gotoAndStop( "gameover"); } • The score must be sent to a variable at the root, numHits
    15. 15. On the root timeline • In the first frame a variable must be created var numHits:Number; • In the last frame, after it has received data from the game, it is used to display the score in the text field finalScore finalScore.text = "YOUR SCORE: "+ numHits;
    16. 16. Arrays
    17. 17. What is an Array? • Arrays group data together in a single element • Can be thought of as a variable that stores variables var arrayName:Array = new Array();
    18. 18. Storing and Retrieving • Arrays can be used to store data var fruits:Array = new Array(); fruits = [“apples”,“oranges”,“bananas”]; • Or: var fruits:Array = new Array(); fruits[0] = “apples”; fruits[1] = “oranges”; fruits[2] = “bananas”;
    19. 19. Storing and Retrieving • Data can be retrieved from arrays using the index numbers trace(fruits[0]); //apples trace(fruits[1]); //oranges trace(fruits[2]); //bananas // I like to eat apples and oranges. trace( "I like to eat "+ fruits[0] +" and "+ fruits[1] +"." );
    20. 20. Arrays and Objects • Arrays can be used to store objects var redBall:Ball = new Ball(); var orangeBall:Ball = new Ball(); var yellowBall:Ball = new Ball(); var ballArray:Array = new Array(); ballArray = [redBall, orangeBall, yellowBall];
    21. 21. Arrays and Objects • Instead of using the variable names for each ball, we can use the array ballArray[0].x = 100; ballArray[0].y = 100; ballArray[1].x = 200; ballArray[1].y = 100; ballArray[2].x = 300; ballArray[2].y = 100;
    22. 22. for() loops • for() statement allows you to repeat an operation a certain number of times for(var i:int=0; i < N; i++) { trace(i); } • If N=3, then output would display: 0 1 2 The script runs while i is less than N, but not greater than or equal to it
    23. 23. Using arrays and for loops • In the case of our ballArray, we could use a for() statement instead of typing out every line for(var i:int=0; i < 3; i++) { ballArray[i].x = 100*(i+1); ballArray[i].y = 100; } • The above code would set all the y values to 100. The x values would be a multiple of 100, i.e. 100, 200, and 300.
    24. 24. Creating multiples with arrays • We can use a for() loop to create and add the balls to an array var ballArray:Array = new Array(); for(var i:int=0; i < 300; i++) { var thisBall:Ball = new Ball(); ballArray.push(thisBall); ballArray[i].x = 50*(i+1); ballArray[i].y = 100; } • In this case we can create hundreds of circles on the screen with a few lines of code
    25. 25. Randomization • Generate a random number between 0 and .999999 Math.random() • Round down using Math.floor and to multiply Math.random by a number get a random integer between zero and your number //generates integers from 0 to 29 Math.floor(Math.random()*30)
    26. 26. Randomizing location and velocity • Combining for() loops, arrays, and random numbers we can create hundreds of objects and give each one a different location and velocity for(var i:int=0; i < 300; i++) { var thisBall:Ball = new Ball(); ballArray.push(thisBall); ballArray[i].x = Math.floor(Math.random()*400); ballArray[i].y = Math.floor(Math.random()*500); ballArray[i].moveX = Math.floor(Math.random()*20); ballArray[i].moveY = Math.floor(Math.random()*20); }
    27. 27. Array Functions • Add an item to the end of the array fruits.push(“strawberries”) ; • Remove an item from the middle of an array fruits.slice(5,1); • More array functions: Chapter 5 in AS 3.0 Cookbook
    28. 28. Script package { import flash.display.*; import flash.events.*; public class MyAnimation extends MovieClip { // Setup the values private var bounce:Number = -0.9; private var gravity:Number = .5; private var oldX:Number; private var oldY:Number; private var N:uint = 3; private var ballArray:Array = new Array(); //Constructor public function MyAnimation() { init(); } //Methods public function init():void { for (var i:uint = 0; i < N; i++){ var thisBall:Ball = new Ball(); ballArray.push(thisBall); ballArray[i].graphics.lineStyle(5,0x000000); ballArray[i].graphics.beginFill(0xCCCCCC); ballArray[i].graphics.drawCircle(0,0,25); ballArray[i].x = Math.floor(Math.random()*500); ballArray[i].y = Math.floor(Math.random()*400); ballArray[i].moveX = Math.floor(Math.random()*20); ballArray[i].moveY = Math.floor(Math.random()*20); addChild(ballArray[i]); } addEventListener(Event.ENTER_FRAME, onMoveCircle); } public function onMoveCircle(pEvent:Event):void { for (var i:int = 0; i < ballArray.length; i++){ ballArray[i].moveY = ballArray[i].moveY + gravity; ballArray[i].x = ballArray[i].x + ballArray[i].moveX; ballArray[i].y = ballArray[i].y + ballArray[i].moveY; if(ballArray[i].x > stage.stageWidth - ballArray[i].width/2 || ballArray[i].x < ballArray[i].width/2) { ballArray[i].moveX = ballArray[i].moveX*bounce; //change direction } if(ballArray[i].y > stage.stageHeight - ballArray[i].height/2 || ballArray[i].y < ballArray[i].height/2) { ballArray[i].moveY = ballArray[i].moveY*bounce; //change direction } } } } }
    29. 29. Timeline March April May Last day of class 9 16 23 30 6* 13 20 27 4 11 18 25 Create a project title and description Present final projects Paper prototypes (two days) Design background, characters, and other game elements Embed game elements in game symbol Add movement and keyboard interaction Add Start and Game Over screens Add scoring and game over trigger
    30. 30. Homework, due April 27 • Work on your final projects • Read Getting Started on the Processing site Next week: Introduction to Processing

    ×