SlideShare une entreprise Scribd logo
1  sur  30
ARTDM 170, Week 13:
 Flash Text + Arrays
          Gilbert Guerrero
         gguerrero@dvc.edu
gilbertguerrero.com/blog/artdm-170/
Text in Flash

• There are two basic ways to add text
  to your Flash movies
 ‣ Using ActionScript
 ‣ Placing text on the stage
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);
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 =
    "Your Score: "+ numScore;
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;
  }
Adding a Timer
• Add a function that shows the time in
  a text field		
  function showTime(event:Event){
    gameTime = gameTimeLimit -
      getTimer();
    gameTimeField.text = "Time: "+
      clockTime(gameTime);
  }
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;
 }
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(
     "gameover");
 }
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
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;
Arrays
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();
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”;
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] +"." );
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];
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;
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
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.
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
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)
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);
  }
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
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
	           	             	              	              }
	           	             	              }
	           	             }
	           }
}
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
Homework, due April 27

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


Next week: Introduction to Processing

Contenu connexe

Tendances

Node meetup feb_20_12
Node meetup feb_20_12Node meetup feb_20_12
Node meetup feb_20_12
jafar104
 

Tendances (20)

SVGo workshop
SVGo workshopSVGo workshop
SVGo workshop
 
CDAT - graphics - vcs - xmgrace - Introduction
CDAT - graphics - vcs - xmgrace - Introduction CDAT - graphics - vcs - xmgrace - Introduction
CDAT - graphics - vcs - xmgrace - Introduction
 
Effector: we need to go deeper
Effector: we need to go deeperEffector: we need to go deeper
Effector: we need to go deeper
 
Graphical representation of Stack
Graphical representation of StackGraphical representation of Stack
Graphical representation of Stack
 
Proga 0706
Proga 0706Proga 0706
Proga 0706
 
3 1-1
3 1-13 1-1
3 1-1
 
Include
IncludeInclude
Include
 
How to make a video game
How to make a video gameHow to make a video game
How to make a video game
 
The Ring programming language version 1.5.2 book - Part 45 of 181
The Ring programming language version 1.5.2 book - Part 45 of 181The Ring programming language version 1.5.2 book - Part 45 of 181
The Ring programming language version 1.5.2 book - Part 45 of 181
 
Javasccript MV* frameworks
Javasccript MV* frameworksJavasccript MV* frameworks
Javasccript MV* frameworks
 
The Ring programming language version 1.5.4 book - Part 51 of 185
The Ring programming language version 1.5.4 book - Part 51 of 185The Ring programming language version 1.5.4 book - Part 51 of 185
The Ring programming language version 1.5.4 book - Part 51 of 185
 
Node meetup feb_20_12
Node meetup feb_20_12Node meetup feb_20_12
Node meetup feb_20_12
 
d3 is cool
d3 is coold3 is cool
d3 is cool
 
High performance GPU computing with Ruby RubyConf 2017
High performance GPU computing with Ruby  RubyConf 2017High performance GPU computing with Ruby  RubyConf 2017
High performance GPU computing with Ruby RubyConf 2017
 
[3] 프로세싱과 아두이노
[3] 프로세싱과 아두이노[3] 프로세싱과 아두이노
[3] 프로세싱과 아두이노
 
Prototype UI Intro
Prototype UI IntroPrototype UI Intro
Prototype UI Intro
 
The Ring programming language version 1.10 book - Part 64 of 212
The Ring programming language version 1.10 book - Part 64 of 212The Ring programming language version 1.10 book - Part 64 of 212
The Ring programming language version 1.10 book - Part 64 of 212
 
Writing videogames with titanium appcelerator
Writing videogames with titanium appceleratorWriting videogames with titanium appcelerator
Writing videogames with titanium appcelerator
 
The Ring programming language version 1.4 book - Part 8 of 30
The Ring programming language version 1.4 book - Part 8 of 30The Ring programming language version 1.4 book - Part 8 of 30
The Ring programming language version 1.4 book - Part 8 of 30
 
The Ring programming language version 1.5.3 book - Part 192 of 194
The Ring programming language version 1.5.3 book - Part 192 of 194The Ring programming language version 1.5.3 book - Part 192 of 194
The Ring programming language version 1.5.3 book - Part 192 of 194
 

En vedette

ARTDM170 Week2: GIF Animation
ARTDM170 Week2: GIF AnimationARTDM170 Week2: GIF Animation
ARTDM170 Week2: GIF Animation
Gilbert Guerrero
 
American Spy Hidden Camera watch
 American Spy Hidden Camera watch American Spy Hidden Camera watch
American Spy Hidden Camera watch
george david
 
Artdm170 week12 user_interaction
Artdm170 week12 user_interactionArtdm170 week12 user_interaction
Artdm170 week12 user_interaction
Gilbert Guerrero
 
Artdm170 Week6 Scripting Motion
Artdm170 Week6 Scripting MotionArtdm170 Week6 Scripting Motion
Artdm170 Week6 Scripting Motion
Gilbert Guerrero
 

En vedette (9)

ARTDM170 Week2: GIF Animation
ARTDM170 Week2: GIF AnimationARTDM170 Week2: GIF Animation
ARTDM170 Week2: GIF Animation
 
American Spy Hidden Camera watch
 American Spy Hidden Camera watch American Spy Hidden Camera watch
American Spy Hidden Camera watch
 
Conf Aen
Conf AenConf Aen
Conf Aen
 
Twitter improves your journalism
Twitter improves your journalismTwitter improves your journalism
Twitter improves your journalism
 
Artdm170 week12 user_interaction
Artdm170 week12 user_interactionArtdm170 week12 user_interaction
Artdm170 week12 user_interaction
 
Planning for an Uncertain Future. Jaap van der Meer, TAUS
Planning for an Uncertain Future. Jaap van der Meer, TAUSPlanning for an Uncertain Future. Jaap van der Meer, TAUS
Planning for an Uncertain Future. Jaap van der Meer, TAUS
 
Manage your changing workload
Manage your changing workloadManage your changing workload
Manage your changing workload
 
Planning Digital Enterprise Stories
Planning Digital Enterprise StoriesPlanning Digital Enterprise Stories
Planning Digital Enterprise Stories
 
Artdm170 Week6 Scripting Motion
Artdm170 Week6 Scripting MotionArtdm170 Week6 Scripting Motion
Artdm170 Week6 Scripting Motion
 

Similaire à ARTDM 170, Week 13: Text Elements + Arrays

ARTDM 170, Week10: Arrays + Using Randomization
ARTDM 170, Week10: Arrays + Using RandomizationARTDM 170, Week10: Arrays + Using Randomization
ARTDM 170, Week10: Arrays + Using Randomization
Gilbert Guerrero
 
Create a java project that - Draw a circle with three random init.pdf
Create a java project that - Draw a circle with three random init.pdfCreate a java project that - Draw a circle with three random init.pdf
Create a java project that - Draw a circle with three random init.pdf
arihantmobileselepun
 
ECMAScript 6 major changes
ECMAScript 6 major changesECMAScript 6 major changes
ECMAScript 6 major changes
hayato
 
NewTetrisScore.cppNewTetrisScore.cpp newTetris.cpp  Defines t.docx
NewTetrisScore.cppNewTetrisScore.cpp newTetris.cpp  Defines t.docxNewTetrisScore.cppNewTetrisScore.cpp newTetris.cpp  Defines t.docx
NewTetrisScore.cppNewTetrisScore.cpp newTetris.cpp  Defines t.docx
curwenmichaela
 
Im trying again -Okay, Im in need of some help - this is the c.pdf
Im trying again -Okay, Im in need of some help - this is the c.pdfIm trying again -Okay, Im in need of some help - this is the c.pdf
Im trying again -Okay, Im in need of some help - this is the c.pdf
eyeonsecuritysystems
 
import java.util.Scanner;public class Main {    public static in.pdf
import java.util.Scanner;public class Main {    public static in.pdfimport java.util.Scanner;public class Main {    public static in.pdf
import java.util.Scanner;public class Main {    public static in.pdf
anwarsadath111
 
Please help me make a UML for Java! Look at the code below and make a.docx
Please help me make a UML for Java! Look at the code below and make a.docxPlease help me make a UML for Java! Look at the code below and make a.docx
Please help me make a UML for Java! Look at the code below and make a.docx
JakeT2gGrayp
 
Get started with YUI
Get started with YUIGet started with YUI
Get started with YUI
Adam Lu
 

Similaire à ARTDM 170, Week 13: Text Elements + Arrays (20)

ARTDM 170, Week10: Arrays + Using Randomization
ARTDM 170, Week10: Arrays + Using RandomizationARTDM 170, Week10: Arrays + Using Randomization
ARTDM 170, Week10: Arrays + Using Randomization
 
Proga 0622
Proga 0622Proga 0622
Proga 0622
 
ES6(ES2015) is beautiful
ES6(ES2015) is beautifulES6(ES2015) is beautiful
ES6(ES2015) is beautiful
 
Mary Had a Little λ (QCon)
Mary Had a Little λ (QCon)Mary Had a Little λ (QCon)
Mary Had a Little λ (QCon)
 
Kwp2 091217
Kwp2 091217Kwp2 091217
Kwp2 091217
 
Create a java project that - Draw a circle with three random init.pdf
Create a java project that - Draw a circle with three random init.pdfCreate a java project that - Draw a circle with three random init.pdf
Create a java project that - Draw a circle with three random init.pdf
 
Raspberry Pi à la GroovyFX
Raspberry Pi à la GroovyFXRaspberry Pi à la GroovyFX
Raspberry Pi à la GroovyFX
 
Proga 0518
Proga 0518Proga 0518
Proga 0518
 
ECMAScript 6 major changes
ECMAScript 6 major changesECMAScript 6 major changes
ECMAScript 6 major changes
 
NewTetrisScore.cppNewTetrisScore.cpp newTetris.cpp  Defines t.docx
NewTetrisScore.cppNewTetrisScore.cpp newTetris.cpp  Defines t.docxNewTetrisScore.cppNewTetrisScore.cpp newTetris.cpp  Defines t.docx
NewTetrisScore.cppNewTetrisScore.cpp newTetris.cpp  Defines t.docx
 
JavaFX and Scala - Like Milk and Cookies
JavaFX and Scala - Like Milk and CookiesJavaFX and Scala - Like Milk and Cookies
JavaFX and Scala - Like Milk and Cookies
 
662305 11
662305 11662305 11
662305 11
 
Im trying again -Okay, Im in need of some help - this is the c.pdf
Im trying again -Okay, Im in need of some help - this is the c.pdfIm trying again -Okay, Im in need of some help - this is the c.pdf
Im trying again -Okay, Im in need of some help - this is the c.pdf
 
Ocr code
Ocr codeOcr code
Ocr code
 
import java.util.Scanner;public class Main {    public static in.pdf
import java.util.Scanner;public class Main {    public static in.pdfimport java.util.Scanner;public class Main {    public static in.pdf
import java.util.Scanner;public class Main {    public static in.pdf
 
COA_remaining_lab_works_077BCT033.pdf
COA_remaining_lab_works_077BCT033.pdfCOA_remaining_lab_works_077BCT033.pdf
COA_remaining_lab_works_077BCT033.pdf
 
662305 10
662305 10662305 10
662305 10
 
Sbaw090519
Sbaw090519Sbaw090519
Sbaw090519
 
Please help me make a UML for Java! Look at the code below and make a.docx
Please help me make a UML for Java! Look at the code below and make a.docxPlease help me make a UML for Java! Look at the code below and make a.docx
Please help me make a UML for Java! Look at the code below and make a.docx
 
Get started with YUI
Get started with YUIGet started with YUI
Get started with YUI
 

Plus de Gilbert Guerrero

ARTDM 171, Week 17: Usability Testing and QA
ARTDM 171, Week 17: Usability Testing and QAARTDM 171, Week 17: Usability Testing and QA
ARTDM 171, Week 17: Usability Testing and QA
Gilbert Guerrero
 
Artdm 170 week15 publishing
Artdm 170 week15 publishingArtdm 170 week15 publishing
Artdm 170 week15 publishing
Gilbert Guerrero
 
ARTDM 170, Week 14: Introduction to Processing
ARTDM 170, Week 14: Introduction to ProcessingARTDM 170, Week 14: Introduction to Processing
ARTDM 170, Week 14: Introduction to Processing
Gilbert Guerrero
 
ARTDM 171, Week 13: Navigation Schemes
ARTDM 171, Week 13: Navigation SchemesARTDM 171, Week 13: Navigation Schemes
ARTDM 171, Week 13: Navigation Schemes
Gilbert Guerrero
 
Artdm 171 Week12 Templates
Artdm 171 Week12 TemplatesArtdm 171 Week12 Templates
Artdm 171 Week12 Templates
Gilbert Guerrero
 
ARTDM 171, Week 10: Mood Boards + Page Comps
ARTDM 171, Week 10: Mood Boards + Page CompsARTDM 171, Week 10: Mood Boards + Page Comps
ARTDM 171, Week 10: Mood Boards + Page Comps
Gilbert Guerrero
 
ARTDM 170, Week 10: Encapsulation + Paper Prototypes
ARTDM 170, Week 10: Encapsulation + Paper PrototypesARTDM 170, Week 10: Encapsulation + Paper Prototypes
ARTDM 170, Week 10: Encapsulation + Paper Prototypes
Gilbert Guerrero
 
ARTDM 171, Week 9: User Experience
ARTDM 171, Week 9: User ExperienceARTDM 171, Week 9: User Experience
ARTDM 171, Week 9: User Experience
Gilbert Guerrero
 
ARTDM 171, Week 7: Remapping Cyberspace
ARTDM 171, Week 7: Remapping CyberspaceARTDM 171, Week 7: Remapping Cyberspace
ARTDM 171, Week 7: Remapping Cyberspace
Gilbert Guerrero
 
ARTDM 170, Week 7: Scripting Interactivity
ARTDM 170, Week 7: Scripting InteractivityARTDM 170, Week 7: Scripting Interactivity
ARTDM 170, Week 7: Scripting Interactivity
Gilbert Guerrero
 
Artdm170 week6 scripting_motion
Artdm170 week6 scripting_motionArtdm170 week6 scripting_motion
Artdm170 week6 scripting_motion
Gilbert Guerrero
 
Artdm170 Week6 Scripting Motion
Artdm170 Week6 Scripting MotionArtdm170 Week6 Scripting Motion
Artdm170 Week6 Scripting Motion
Gilbert Guerrero
 
Artdm170 Week6 Scripting Motion
Artdm170 Week6 Scripting MotionArtdm170 Week6 Scripting Motion
Artdm170 Week6 Scripting Motion
Gilbert Guerrero
 
Artdm170 Week6 Scripting Motion
Artdm170 Week6 Scripting MotionArtdm170 Week6 Scripting Motion
Artdm170 Week6 Scripting Motion
Gilbert Guerrero
 
Artdm170 Week5 Intro To Flash
Artdm170 Week5 Intro To FlashArtdm170 Week5 Intro To Flash
Artdm170 Week5 Intro To Flash
Gilbert Guerrero
 

Plus de Gilbert Guerrero (20)

Designing for Skepticism and Bright Sunlight
Designing for Skepticism and Bright SunlightDesigning for Skepticism and Bright Sunlight
Designing for Skepticism and Bright Sunlight
 
ARTDM 171, Week 17: Usability Testing and QA
ARTDM 171, Week 17: Usability Testing and QAARTDM 171, Week 17: Usability Testing and QA
ARTDM 171, Week 17: Usability Testing and QA
 
Artdm 171 week15 seo
Artdm 171 week15 seoArtdm 171 week15 seo
Artdm 171 week15 seo
 
Artdm 170 week15 publishing
Artdm 170 week15 publishingArtdm 170 week15 publishing
Artdm 170 week15 publishing
 
ARTDM 171, Week 14: Forms
ARTDM 171, Week 14: FormsARTDM 171, Week 14: Forms
ARTDM 171, Week 14: Forms
 
ARTDM 170, Week 14: Introduction to Processing
ARTDM 170, Week 14: Introduction to ProcessingARTDM 170, Week 14: Introduction to Processing
ARTDM 170, Week 14: Introduction to Processing
 
ARTDM 171, Week 13: Navigation Schemes
ARTDM 171, Week 13: Navigation SchemesARTDM 171, Week 13: Navigation Schemes
ARTDM 171, Week 13: Navigation Schemes
 
Artdm 171 Week12 Templates
Artdm 171 Week12 TemplatesArtdm 171 Week12 Templates
Artdm 171 Week12 Templates
 
ARTDM 171, Week 10: Mood Boards + Page Comps
ARTDM 171, Week 10: Mood Boards + Page CompsARTDM 171, Week 10: Mood Boards + Page Comps
ARTDM 171, Week 10: Mood Boards + Page Comps
 
ARTDM 170, Week 10: Encapsulation + Paper Prototypes
ARTDM 170, Week 10: Encapsulation + Paper PrototypesARTDM 170, Week 10: Encapsulation + Paper Prototypes
ARTDM 170, Week 10: Encapsulation + Paper Prototypes
 
ARTDM 171, Week 9: User Experience
ARTDM 171, Week 9: User ExperienceARTDM 171, Week 9: User Experience
ARTDM 171, Week 9: User Experience
 
ARTDM 171, Week 7: Remapping Cyberspace
ARTDM 171, Week 7: Remapping CyberspaceARTDM 171, Week 7: Remapping Cyberspace
ARTDM 171, Week 7: Remapping Cyberspace
 
ARTDM 170, Week 7: Scripting Interactivity
ARTDM 170, Week 7: Scripting InteractivityARTDM 170, Week 7: Scripting Interactivity
ARTDM 170, Week 7: Scripting Interactivity
 
Artdm170 week6 scripting_motion
Artdm170 week6 scripting_motionArtdm170 week6 scripting_motion
Artdm170 week6 scripting_motion
 
Artdm170 Week6 Scripting Motion
Artdm170 Week6 Scripting MotionArtdm170 Week6 Scripting Motion
Artdm170 Week6 Scripting Motion
 
Artdm170 Week6 Scripting Motion
Artdm170 Week6 Scripting MotionArtdm170 Week6 Scripting Motion
Artdm170 Week6 Scripting Motion
 
Artdm171 Week6 Images
Artdm171 Week6 ImagesArtdm171 Week6 Images
Artdm171 Week6 Images
 
Artdm170 Week6 Scripting Motion
Artdm170 Week6 Scripting MotionArtdm170 Week6 Scripting Motion
Artdm170 Week6 Scripting Motion
 
Artdm170 Week5 Intro To Flash
Artdm170 Week5 Intro To FlashArtdm170 Week5 Intro To Flash
Artdm170 Week5 Intro To Flash
 
Artdm171 Week5 Css
Artdm171 Week5 CssArtdm171 Week5 Css
Artdm171 Week5 Css
 

Dernier

一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样
一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样
一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样
yhavx
 
How to Build a Simple Shopify Website
How to Build a Simple Shopify WebsiteHow to Build a Simple Shopify Website
How to Build a Simple Shopify Website
mark11275
 
ab-initio-training basics and architecture
ab-initio-training basics and architectureab-initio-training basics and architecture
ab-initio-training basics and architecture
saipriyacoool
 
Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...
gajnagarg
 
怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证
怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证
怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证
ehyxf
 
一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证
一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证
一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证
eqaqen
 
Top profile Call Girls In eluru [ 7014168258 ] Call Me For Genuine Models We ...
Top profile Call Girls In eluru [ 7014168258 ] Call Me For Genuine Models We ...Top profile Call Girls In eluru [ 7014168258 ] Call Me For Genuine Models We ...
Top profile Call Girls In eluru [ 7014168258 ] Call Me For Genuine Models We ...
gajnagarg
 
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
instagramfab782445
 
Abortion pills in Kuwait 🚚+966505195917 but home delivery available in Kuwait...
Abortion pills in Kuwait 🚚+966505195917 but home delivery available in Kuwait...Abortion pills in Kuwait 🚚+966505195917 but home delivery available in Kuwait...
Abortion pills in Kuwait 🚚+966505195917 but home delivery available in Kuwait...
drmarathore
 
Q4-Trends-Networks-Module-3.pdfqquater days sheets123456789
Q4-Trends-Networks-Module-3.pdfqquater days sheets123456789Q4-Trends-Networks-Module-3.pdfqquater days sheets123456789
Q4-Trends-Networks-Module-3.pdfqquater days sheets123456789
CristineGraceAcuyan
 
怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证
怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证
怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证
eeanqy
 
Call Girls In Ratnagiri Escorts ☎️8617370543 🔝 💃 Enjoy 24/7 Escort Service En...
Call Girls In Ratnagiri Escorts ☎️8617370543 🔝 💃 Enjoy 24/7 Escort Service En...Call Girls In Ratnagiri Escorts ☎️8617370543 🔝 💃 Enjoy 24/7 Escort Service En...
Call Girls In Ratnagiri Escorts ☎️8617370543 🔝 💃 Enjoy 24/7 Escort Service En...
Nitya salvi
 
怎样办理巴斯大学毕业证(Bath毕业证书)成绩单留信认证
怎样办理巴斯大学毕业证(Bath毕业证书)成绩单留信认证怎样办理巴斯大学毕业证(Bath毕业证书)成绩单留信认证
怎样办理巴斯大学毕业证(Bath毕业证书)成绩单留信认证
eeanqy
 
Jual Obat Aborsi Bandung ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan ...
Jual Obat Aborsi Bandung ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan ...Jual Obat Aborsi Bandung ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan ...
Jual Obat Aborsi Bandung ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan ...
ZurliaSoop
 

Dernier (20)

The hottest UI and UX Design Trends 2024
The hottest UI and UX Design Trends 2024The hottest UI and UX Design Trends 2024
The hottest UI and UX Design Trends 2024
 
Gamestore case study UI UX by Amgad Ibrahim
Gamestore case study UI UX by Amgad IbrahimGamestore case study UI UX by Amgad Ibrahim
Gamestore case study UI UX by Amgad Ibrahim
 
一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样
一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样
一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样
 
How to Build a Simple Shopify Website
How to Build a Simple Shopify WebsiteHow to Build a Simple Shopify Website
How to Build a Simple Shopify Website
 
ab-initio-training basics and architecture
ab-initio-training basics and architectureab-initio-training basics and architecture
ab-initio-training basics and architecture
 
Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...
 
怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证
怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证
怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证
 
一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证
一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证
一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证
 
Top profile Call Girls In eluru [ 7014168258 ] Call Me For Genuine Models We ...
Top profile Call Girls In eluru [ 7014168258 ] Call Me For Genuine Models We ...Top profile Call Girls In eluru [ 7014168258 ] Call Me For Genuine Models We ...
Top profile Call Girls In eluru [ 7014168258 ] Call Me For Genuine Models We ...
 
High Profile Escorts Nerul WhatsApp +91-9930687706, Best Service
High Profile Escorts Nerul WhatsApp +91-9930687706, Best ServiceHigh Profile Escorts Nerul WhatsApp +91-9930687706, Best Service
High Profile Escorts Nerul WhatsApp +91-9930687706, Best Service
 
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
 
Abortion pills in Kuwait 🚚+966505195917 but home delivery available in Kuwait...
Abortion pills in Kuwait 🚚+966505195917 but home delivery available in Kuwait...Abortion pills in Kuwait 🚚+966505195917 but home delivery available in Kuwait...
Abortion pills in Kuwait 🚚+966505195917 but home delivery available in Kuwait...
 
TRose UXPA Experience Design Concord .pptx
TRose UXPA Experience Design Concord .pptxTRose UXPA Experience Design Concord .pptx
TRose UXPA Experience Design Concord .pptx
 
Q4-Trends-Networks-Module-3.pdfqquater days sheets123456789
Q4-Trends-Networks-Module-3.pdfqquater days sheets123456789Q4-Trends-Networks-Module-3.pdfqquater days sheets123456789
Q4-Trends-Networks-Module-3.pdfqquater days sheets123456789
 
怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证
怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证
怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证
 
Independent Escorts Goregaon WhatsApp +91-9930687706, Best Service
Independent Escorts Goregaon WhatsApp +91-9930687706, Best ServiceIndependent Escorts Goregaon WhatsApp +91-9930687706, Best Service
Independent Escorts Goregaon WhatsApp +91-9930687706, Best Service
 
Call Girls In Ratnagiri Escorts ☎️8617370543 🔝 💃 Enjoy 24/7 Escort Service En...
Call Girls In Ratnagiri Escorts ☎️8617370543 🔝 💃 Enjoy 24/7 Escort Service En...Call Girls In Ratnagiri Escorts ☎️8617370543 🔝 💃 Enjoy 24/7 Escort Service En...
Call Girls In Ratnagiri Escorts ☎️8617370543 🔝 💃 Enjoy 24/7 Escort Service En...
 
Just Call Vip call girls Fatehpur Escorts ☎️8617370543 Two shot with one girl...
Just Call Vip call girls Fatehpur Escorts ☎️8617370543 Two shot with one girl...Just Call Vip call girls Fatehpur Escorts ☎️8617370543 Two shot with one girl...
Just Call Vip call girls Fatehpur Escorts ☎️8617370543 Two shot with one girl...
 
怎样办理巴斯大学毕业证(Bath毕业证书)成绩单留信认证
怎样办理巴斯大学毕业证(Bath毕业证书)成绩单留信认证怎样办理巴斯大学毕业证(Bath毕业证书)成绩单留信认证
怎样办理巴斯大学毕业证(Bath毕业证书)成绩单留信认证
 
Jual Obat Aborsi Bandung ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan ...
Jual Obat Aborsi Bandung ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan ...Jual Obat Aborsi Bandung ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan ...
Jual Obat Aborsi Bandung ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan ...
 

ARTDM 170, Week 13: Text Elements + Arrays

  • 1. ARTDM 170, Week 13: Flash Text + Arrays Gilbert Guerrero gguerrero@dvc.edu gilbertguerrero.com/blog/artdm-170/
  • 2. Text in Flash • There are two basic ways to add text to your Flash movies ‣ Using ActionScript ‣ Placing text on the stage
  • 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. Placing text on the stage • Use the text tool to add text to the stage
  • 5. Placing text on the stage • Add an instance name • Select Dynamic Text
  • 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. 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; }
  • 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. 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. Declare the new variables private var gameTimeLimit:int; private var gameTime:int;
  • 12. Initialize and start the clock gameTimeLimit = 20000; addEventListener( Event.ENTER_FRAME,showTime);
  • 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. 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. 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;
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Homework, due April 27 • Work on your final projects • Read Getting Started on the Processing site Next week: Introduction to Processing

Notes de l'éditeur