1 / 15

Drawning with code & working with colors

Learn how to draw using code in Flash ActionScript and work with colors. Explore the Drawing API, drawing commands, line styles, movement commands, filling areas, and working with colors dynamically.

rgilyard
Download Presentation

Drawning with code & working with colors

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. Introduction to Flash ActionScript Drawning with code & working with colors Thomas Lövgren thomas.lovgren@humlab.umu.se

  2. The Drawning API • With the The Drawning API ActionScript allows you to draw using code • Some of the drawing commands : • lineStyle: to define the stroke of the drawn movieclip • moveTo: to define a start point for the drawn movieclip • lineTo: to draw a line from the current spot to the specified new one • curveTo: to draw a curve from the current spot to the specified new one • beginFill: to define the fill color and transparency of the drawn movielcip • endFill: to close a drawn object and apply the fill set in beginFill

  3. Drawning with code • Graphics are commonly drawn with a mouse • ActionScript also allow drawing with code • Using the functions lineStyle andlineTo, for drawing straight lines lineStyle(); lineTo();

  4. Drawing a line • Example: Draw a grey line from point (0,0) to (100, 25) with thickness 1 • First you need to specify what kind of line to draw with • Setting the lineStyle parameters • Line thickness • Colour • Alpha (transparency) lineStyle(1, 0xcccccc, 75); lineTo(100, 25);

  5. Drawing coordinates • When you begin to draw, the ”pencil point” is in (0, 0), as you draw lines, the ”pencil” follows lineStyle(1, 0x101070, 100); lineTo(300, 200);//draws a line from (0,0) to (300, 200) lineTo(170, 300);//draws a line from (300, 200) to (170, 300)

  6. Drawning with code • The moveTo command moves the ”pencil” without drawing lineStyle(1, 0xcccccc, 75); moveTo(100, 100); lineTo(100, 25);//draws a line from (100,100) to (100,25) moveTo(100, 100); lineTo(50, 50);//draws a line from (100,100) to (50,50)

  7. Drawning with code • Creating a movie clip in which to draw • The drawing will be in Level 1 • It’s often useful to draw in a separate movie clip (rotate, scale, depth etc) //create an empty movieClip to draw within this.createEmptyMovieClip("myClip", 1); //instance name and level myClip.lineStyle(1, 0xcccccc, 100); myClip.moveTo(100, 100); myClip.lineTo(500, 300);

  8. Curve To The curveTo command makes a curve //create an empty movieClip to draw within this.createEmptyMovieClip ("curveLine", 1);//instance name and level curveLine.lineStyle(2, 0x2B3524, 100); //set up the "pencil" curveLine.moveTo(100, 100); //move the "pencil" curveLine.curveTo(250, 100, 350, 250); //draw the curve

  9. Drawning filled Areas • The commandbeginFill: specifies colour and alpha • Draw the lines of the shape endFill this.createEmptyMovieClip("myClip", 1); myClip.beginFill(0xcccccc, 75); myClip.moveTo(100, 100); myClip.lineTo(200, 100); myClip.lineTo(200, 200); myClip.lineTo(100, 200); myClip.endFill();

  10. Working with colors • Two general ways to create and handle colors: • 1. Manual: with the Color Mixer, Color Swatches, or with the Color effects in the Properties panel (movieClips) • 2. Coding/dynamic: using Color object methods

  11. The Color Object • The Color object lets you set the RGB color value and color transform of movie clips and retrieve those values once they have been set • You must use the constructor new Color() to create an instance of the Color object before calling its methods • Method summary for the Color object: • Color.setRGB: Sets the hexadecimal representation of the RGB value for a Color object • Color.getRGB: Returns the numeric RGB value set by the last setRGB call • Color.setTransform: Sets the color transform for a Color object. • Color.getTransform: Returns the transform information set by the last setTransform call

  12. Working with colors • Changing the color of a movieClip is made possible by the Color object and its setRGB method • To use the Color object's methods: • 1. create an instance of the Color object • 2. assign it a name • 3. indicate which movie clip it applies to (targets) var myColor = new Color (_root.myShirt_mc); • This statement targets the movie clip instance myShirt , which resides on the main ( _root ) Timeline

  13. Changing color - setRGB method • Changing the color of a movieClip by pressing a button varmyColor = new Color (_root.myShirt_mc); //sets the RGB value of myColor to a hexidecimal value of 663399 //the 0x means it's hexadecimal color_btn.onPress = function(){ myColor.setRGB(0x663399); //purple color }

  14. Random Color • Example of a simple random color function //button/function for random colors color_btn.onPress = function(){ myColor = Math.round(Math.random() * 0xFFFFFF); myColoredObject = new Color (_root.my_mc); myColoredObject.setRGB(myColor); }

  15. Sketchpad A sketchpad could be used for simple drawing //button/function for drawing onMouseDown _root.onMouseDown = function(){ if (_xmouse < 455){ _root.lineStyle(lineThickness, selectedColor); _root.moveTo(_root._xmouse, _root._ymouse); _root.onMouseMove = drawLine; } } function drawLine() { _root.lineTo(_xmouse, _ymouse); }

More Related