ARTDM 170, Week 5: Intro To Flash

743 views

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
743
On SlideShare
0
From Embeds
0
Number of Embeds
17
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • ARTDM 170, Week 5: Intro To Flash

    1. 1. ARTDM 170, Week 5: Intro to Adobe Flash Gilbert Guerrero gguerrero@dvc.edu gilbertguerrero.com/blog/artdm-170
    2. 2. Homework • Please turn in your homework
    3. 3. Adobe Flash Open Flash and create a new ActionScript 3.0 document...
    4. 4. Basic Setup • Click the first Keyframe in the timeline to select it • Open the ActionScript window by going to Window > Actions
    5. 5. Trace output • Add a call to the trace function: trace(“Hello World!”); • Go to Control > Test Movie to test out your ActionScript • Trace helps troubleshoot code by sending notes to you in the Output window
    6. 6. 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
    7. 7. Your first ActionScript class • Save your ActionScript file • Go to New... > ActionScript File to create a new external AS file • Save the file using the same name as your Flash file, example: HelloWorld2.as
    8. 8. ActionScript Class • package { import flash.display.*; import flash.text.*; • public class HelloWorld extends MovieClip { • public function HelloWorld() { var myText: TextField = new TextField(); myText.text = "Hello World!"; addChild(myText); } } }
    9. 9. 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 }
    10. 10. Constructors package { import flash.disp • Function that import flash.text executes as soon as the class loads public class Hell • Must be named the same as theMovieClip { class • Other functions public function come afterward var myText: T
    11. 11. Putting it together • To use the class in your Flash movie you must associate it with the movie. • In the Properties panel associate the external AS file with HelloWorld.fla by typing the filename into the class field
    12. 12. Display Objects • Visual elements that appear in ActionScript • Such as textfields, graphics, buttons, movie clips, and user interface components • Example: var myText: TextField = new TextField();
    13. 13. Object Properties • Objects have properties • Each object has itʼs own properties • Properties of the objects can be changed directly • Example: myText.text = "Hello World!";
    14. 14. Display Lists • Creating objects does not add them to the stage. You must place them directly. • Example: addChild(myText);
    15. 15. The Stage • The main movie area where everything takes place that the user will see
    16. 16. The Library • Where youʼll store all the media thatʼs associated with your Flash movie
    17. 17. The Timeline • Frames • Keyframes • In-between Frames • Empty Keyframes • Labels • Layers
    18. 18. Writing ActionScript
    19. 19. ActionScript Window • Wonʼt use most of the buttons until you get used to ActionScript • Use the Show/Hide Toolbox button to collapse the left column • Disable Script Assist for now
    20. 20. Comments • To add a comment: // single comment /* multi-line comment */ • Comments are notes you can add for yourself or other developers • Comments can also be used to “turn off” code
    21. 21. Use descriptive naming • Variable names: tennisBall, userRacket, userScore • Function names: hitBall( ), calcScore( ), headPunch( )
    22. 22. Use functions • Use functions for repetitive tasks or tasks that appear in many places • Example: public function showTime() { timeDisplay.text = “Time: ” + timeElapsed; } showTime();
    23. 23. ActionScript Logic
    24. 24. if-else statements if (this is true) {     then do this }
    25. 25. if-else statements if (this is true) {     then do this } else {     do this }
    26. 26. if-else statements if (this is true) {     then do this } else if (this is true) {     then do this } else {     do this }
    27. 27. Equal, not equal, or... • Assume this: a = 1; b = 2; c = 1; • These are true statements: (a == c)  a is equal to c (a != b)   a is not equal to b (a == 1 || c == 1)  a is equal to 1 or c is equal to 1 (b > a)  b is greater than a (a >= c) a is greater than or equal to c (a + c == b) a plus c is equal to b
    28. 28. Variable Types • When they first appear, they must be declared using var • Variable type must also be declared (after the colon): var moveX:Number = 10;
    29. 29. Variable types Primitive: Complex:  Boolean Object int Array null Date Number Error Function String RegExp uint XML undefined  XMLList • Declare any data type using an asterisk (*): var myX:*;
    30. 30. Placement • An instance of a movie clip can be moved to any location using x and y as coordinates: myClip.x = 300; myClip.y = 200;
    31. 31. Movement • An instance of a movie clip can be told to move by adding a value to x or y: // Setup the values var moveX:Number = 10; var moveY:Number = 10; // Move the clips myClip.x = myClip.x + moveX; myClip.y = myClip.y + moveY;
    32. 32. 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);
    33. 33. Homework, due Sept 23 • Read Chapter 1, p1-42 in the ActionScript 3.0 Cookbook
    34. 34. Thank You

    ×