{"id":1908,"date":"2012-07-27T02:49:47","date_gmt":"2012-07-27T06:49:47","guid":{"rendered":"http:\/\/www.searchenginegenie.com\/web-design-blog\/?p=1908"},"modified":"2012-09-08T03:04:00","modified_gmt":"2012-09-08T07:04:00","slug":"watercolor-painting-sketch-pad-program","status":"publish","type":"post","link":"https:\/\/www.searchenginegenie.com\/web-design-blog\/watercolor-painting-sketch-pad-program\/","title":{"rendered":"Watercolor Painting Sketch Pad Program"},"content":{"rendered":"

<\/embed><\/object><\/p>\n

Here is a canvas texture to paint on<\/h2>\n

<\/span><\/a><\/div> \r\n\r\n\t\t\t\t
\r\n \"image-1909\"\r\n <\/div><\/a><\/p>\n

Step 1 : Document Setup<\/h2>\n

Open Adobe Flash and Modify the Document Properties.
\nModify > Document<\/strong><\/p>\n

<\/span><\/a><\/div> \r\n\r\n\t\t\t\t
\r\n \"image-1910\"\r\n <\/div><\/a><\/p>\n

Step 2 : Import and Create Background Object<\/h2>\n

Import the supplied canvas.jpg onto the Stage.
\nFile > Import > Import to Stage… <\/strong><\/p>\n

Convert the image on Stage to a MovieClip with a Linkage Identifier.
\nModify > Convert to Symbol<\/strong>
\nName:<\/strong> canvas_mc
\nCheck:<\/strong> ‘Export for ActionScript’<\/p>\n

<\/span><\/a><\/div> \r\n\r\n\t\t\t\t
\r\n \"image-1911\"\r\n <\/div><\/a><\/p>\n

Giving the MovieClip a Linkage Identifier allows us to reference the MovieClip with Actionscript. You will see in next step.<\/p>\n

Step 3 : Attaching a MovieClip with ActionScript<\/h2>\n

Leave the MovieClip instance currently on Stage.<\/p>\n

 <\/p>\n

Select Frame 1 on the Timeline and open the ActionScript Window.
\nWindow > Actions<\/strong><\/p>\n

Enter the following code:<\/p>\n

<\/span><\/a><\/div> \r\n\r\n\t\t\t\t
\r\n \"image-1912\"\r\n <\/div><\/a><\/p>\n

Line 1<\/strong>: Attaches an instance of the Canvas to the stage at level 2.
\nLine 2<\/strong>: Makes the new canvas 50% transparent. This will make the ‘paint’ appear as if it were on canvas.<\/p>\n

Step 4 : Create a MovieClip to contain the painting.<\/h2>\n

Enter the following code:<\/p>\n

<\/span><\/a><\/div> \r\n\r\n\t\t\t\t
\r\n \"image-1913\"\r\n <\/div><\/a><\/p>\n

Step 5 : Creating the Paint Brush Listener for the Mouse.<\/h2>\n

Enter the following code:<\/p>\n

<\/span><\/a><\/div> \r\n\r\n\t\t\t\t
\r\n \"image-1914\"\r\n <\/div><\/a><\/p>\n

Line 6<\/strong>: Create an Object to attach our brush functions.
\nLine 7<\/strong>: Define a onMouseDown method for the brush object. This method is activated whenever the mouse button is pressed down. aka. User wants to start painting.
\nLine 8<\/strong>: Define a Boolean variable to track when the user is painting.
\nLine 9<\/strong>: Move the brush to the mouse position.
\nLine 10<\/strong>: Draw a 1 pixel line to the right. We do this so that dots can be painted. Without this line the paint will not show up if a user simply clicks.
\nLine 11<\/strong>: End the method definition.<\/p>\n

<\/span><\/a><\/div> \r\n\r\n\t\t\t\t
\r\n \"image-1915\"\r\n <\/div><\/a><\/p>\n

Line 12<\/strong>: Define a onMouseMove method for the brush object. This method is activated whenever the mouse is moving.
\nLine 13<\/strong>: If the mouse button is down then isPainting will be true. Line 14<\/strong>: If true, then we draw a line to the current mouse position. If false, then do nothing.
\nLine 15-16<\/strong>: End the If statement and onMouseMove method.<\/p>\n

<\/span><\/a><\/div> \r\n\r\n\t\t\t\t
\r\n \"image-1916\"\r\n <\/div><\/a><\/p>\n

Line 17<\/strong>: Define a onMouseUp method for the brush object. This method is activated whenever the mouse button is released. aka. User wants to stop painting.
\nLine 18<\/strong>: Set the isPainting variable to false. Now the onMouseMove method stops drawing a line to the Mouse position. When the user presses down on the Mouse the isPainting variable toggles back to true.
\nLine 19<\/strong>: End the onMouseUp method.
\nLine 20<\/strong>: Attach theBrush Object to the Mouse as a Listener. Basically, this lets Flash know to listen to what the Mouse is doing and execute the methods we defined.<\/p>\n

Step 6 : Define the Paint attributes and randomize for effect.<\/h2>\n

Enter the following code:<\/p>\n

<\/span><\/a><\/div> \r\n\r\n\t\t\t\t
\r\n \"image-1917\"\r\n <\/div><\/a><\/p>\n

Line 22<\/strong>: Attach an onEnterFrame function to our painting MovieClip. This will execute every frame or 30 times a second.
\nLine 23<\/strong>: Generate a random number between 2 & 12. This will be the width of our paint line for that frame in time.
\nLine 24<\/strong>: Set the style of our painting line.
\n1st parameter, ranWidth<\/em> : is the width of the line.
\n2nd parameter, 0x0066CC<\/em> : is the RBG color of the line.
\n3rd parameter, 100<\/em> : is the alpha (transparency) of the line.
\nLine 25<\/strong>: End the onEnterFrame function.<\/p>\n

Step 7 : Adding the Clear painting button.<\/h2>\n

Create a button, name the instance ‘clear_btn’ and enter the following code in Frame 1 of the Main Timeline:<\/p>\n

<\/span><\/a><\/div> \r\n\r\n\t\t\t\t
\r\n \"image-1918\"\r\n <\/div><\/a><\/p>\n

Save and test out your simple painting program. From here you can begin to add features, such as more colors, different canvas options, brush sizes, etc.<\/p>\n

 <\/p>\n","protected":false},"excerpt":{"rendered":"

Here is a canvas texture to paint on Step 1 : Document Setup Open Adobe Flash and Modify the Document Properties. Modify > Document Step 2 : Import and Create Background Object Import the supplied canvas.jpg onto the Stage. File > Import > Import to Stage… Convert the image on Stage to a MovieClip with […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[29,39],"class_list":["post-1908","post","type-post","status-publish","format-standard","hentry","category-flash","tag-flash-2","tag-flash-action-script"],"_links":{"self":[{"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/posts\/1908","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/comments?post=1908"}],"version-history":[{"count":9,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/posts\/1908\/revisions"}],"predecessor-version":[{"id":2475,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/posts\/1908\/revisions\/2475"}],"wp:attachment":[{"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/media?parent=1908"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/categories?post=1908"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/tags?post=1908"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}