Setting Up Our Drawing for Coloring

First lets convert our drawing into a MovieClip (Modify -> Convert to Symbol).  Name this MovieClip: "Colorable" and add linkage for exporting for actionscript.  Then let's extract the different colorable areas.  Each area will be grouped (ctrl+g). Now that the grouping has been taken care of, the outline can then be extracted and converted to its own MovieClip.  Name this new MovieClip OutLines and set linkage for exporting for actionscript.  Now delete this from the Colorable MovieClip.  Prior to converting these symbols to MovieClips: Be careful not to position these MovieClips differently as their (0, 0) coordinates may differ when adding to the stage.

After following these directions, you should now be staring at something like this:

Distribute these groupings to each layer.  Now is the time to space each colorable item is on their own frame.  If any 2 or more keyframes are on the same frame, those groupings that are on the same frame will change together. 

For example, the left image shows the keyframes have different number of blank frames on their layer.  Those with the same number of blank frames on their layer will be the colored together.  In this case, the hamsters body is on the 3 bottom layers.

Comments

Add New Search

<< Begin < Prev 1 2 Next > End >> << Begin < Prev 1 2 Next > End >>

oh! Timmy (129.174.106.xxx) 2008-10-01 09:41:37 I like your new logo. Cute hamster there. Reply | Quote 0   0

Nice Tutorial! Tutorials Room (41.235.124.xxx) 2008-10-11 10:02:17 Good Tutorial! It was chosen for the home page of http://www.tutorialsroom.comPlease submit all of your future quality tutorials in there. Reply | Quote 0   0

Title known (69.88.74.xxx) 2008-10-29 07:55:41 This tutorial is extremely vague. There is no mention of why you need the other files in the ZIP file. Also, there is no mention where to place the Actionscript. Reply | Quote 0   0

RE: Title drooza (SAdministrator) 2008-10-30 07:10:09 Sorry for the vagueness, but the ActionScript is placed in an external file: ColoringBook.as This class is then defined as the Document Class. [Click on the stage -> Properties Panel] Are there any other specific questions you have? Reply | Quote 0   0

stagehog81 (72.159.2.xxx) 2008-11-07 01:37:58 You mentioned at the first step people who create a limited color pallatte instead of using the pallatte that is provided in flash. The reason for the limited color pallatte is because of wanting to make it simple to use for young kids who are most likely going to be the target audience for those coloring books. Other than the first step I have found this tutorial to be very informative. Thanks for putting this information here. Reply | Quote 0   0

Anonymous (89.240.102.xxx) 2008-12-01 08:49:58 lol wer do u learn this? i am 14 and i want to learn about flash i am a newbie on macromidia, but i am good at making webs. Reply | Quote 0   0

online tutorial sites drooza (SAdministrator) 2008-12-01 09:54:16 I actually learned from online tutorial sites such as this. Especially Kirupa and Feronato's site. Reply | Quote 0   0

color book Designer (24.113.246.xxx) 2008-12-08 02:58:35 Hello, Your tutorial is very helpful. I have a question: You are importing: import flash.geom.ColorTransform Where is geom? I looked at all your assets but could not find it. Thanks. Designer Reply | Quote 0   1

flash.geom drooza (SAdministrator) 2008-12-08 04:53:10 http://help.adobe.com/en_US/AS3LCR/Flash_10.0/f... flash.geom is a package included with flash. I use the ColorTransform class in the function colorColorable. http://help.adobe.com/en_US/AS3LCR/Flash_10.0/f... Reply | Quote 0   1

Thanks Designer (24.113.246.xxx) 2008-12-08 05:45:44 Thanks for explanation. Designer Reply | Quote 0   0

Confused Hillary (71.207.142.xxx) 2008-12-28 14:44:50 I have done everything that you said to do and I still can not get it working, either I need a stop or something because my movie clip when on the stage keeps running through, or if its not on the stage the as file doesn't call it there. I downloaded the zip file and even when I run it it doesn't do anything maybe I'm missing something some where but I don't know what it is. Reply | Quote 0   0

Hope to unconfuse (is that a word?) drooza (SAdministrator) 2008-12-29 19:37:09 Sometimes even with the stop on a frame won't execute when there are compiler errors. Check all panels when you test the movie for any compiler errors. There could also be a conflict of flash versions. What flash version are you running? Reply | Quote 1   0

confused Hillary (71.207.142.xxx) 2009-01-03 18:21:30 I'm running adobe flash cs3 and using as3 Reply | Quote 0   0

Where is the image in the fla file eobyon (24.24.131.xxx) 2008-12-29 16:41:22 When I open the file in flash all I get is a blank screen no layers no image just the class file attached? Why are the layers missing and the image gone, but when I test the movie it works file. Go figure. Reply | Quote 1   0

Missing image. drooza (SAdministrator) 2008-12-29 19:33:55 Check the library. There should be a MovieClip object that is added to the stage in the ActionScript. Click frame 1 and go to the actions for it. If you still can't find it, let me know. Reply | Quote 0   0

Sorry still lost eobyone (24.24.131.xxx) 2008-12-29 19:48:32 When I open the fla layer 12 is the only layer and a white scene 1 shows with nothing in it. The library has Colorable Outlines ColorButton ComponentAsset s Folders in the Assets ColorPicker The actionscript is available to open in the class and when I open it the script imports a lot. But can you see the image and edit anythng on the fla file or is everything imported? Sorry just learning Flash and it is still very Greek to me. Thanks Ed Reply | Quote 0   0

OOPS drooza (SAdministrator) 2008-12-29 21:17:09 Oh yea! In this case the AS is external (check document class in the properties panel of the stage - click the stage, then check the properties panel) There is a class name in that box. Colorable is the actual MovieClip that gets its color changed, double click that in the library and it should be spaced out (on separate frames) according to what colors changed. Reply | Quote 0   0

Yea eobyone (24.24.131.xxx) 2008-12-29 22:34:15 That's what I was looking for!!! Thanks Ed Reply | Quote 0   0

Adding other components Ben (75.171.241.xxx) 2009-01-06 13:32:17 If I want to add other components like a combo box or true full screen mode the external class will not allow any other code to be used - any idea how I can get around this? Reply | Quote 0   0

drooza (SAdministrator) 2009-01-06 17:07:07 Comboboxes can be added, just make sure to use the proper import statement and add it the combobox to the library. In order to make it fullscreen you can change the publish settings on the html tab? I'd give this a read http://www.adobe.com/devnet/flashplayer/article.... Reply | Quote 0   0

Positionin the two clips. Flasher (173.32.18.xxx) 2009-01-07 04:19:07 I am importing my drawings from Illustrator and then spacing them and creating the oulines according to your tutorial. When I run the movie, the colorable movie is running off center (top left with the rest of the image clipped off screen). How do I align them? I am not putting anything on stage just creating the movie and components in library and letting it run. Reply | Quote 0   0

Save image for use in coloring book Shad (70.89.188.xxx) 2009-01-16 06:23:03 drooza: Nice job! I want to know these: 1. What are the steps to save images to use in the coloring book? Need to present many images and let users choose what to color. 2. How to dynamically call images into the application. Will the image load into a movieclip or how? Reply | Quote 0   0

add another Image TuanDuy (203.162.3.xxx) 2009-03-03 15:10:22 supposed that i have a combobox and 4 other images in the library how can i choose the images from the combobox to color them? please show me to do that in detail thanks Reply | Quote 1   0

problems with interactive colouring page jen jen (78.16.163.xxx) 2009-04-13 10:10:49 Hi, im having problems with this tutorial, I have made my own picture and have made my own laters myself, but thats as far as i got. it took me ages to do this..and now i dont know where to go from there. please help im a student and need it for my childrens threatre project for my interactive cd. Reply | Quote 0   0

Dave (82.30.109.xxx) 2009-05-16 02:54:20 very nice tutorial! it works on its own file however i tried putting the colouring game into another flash file. The scene works individually but when the whole file is run, it brings up 1046 errors for event e.g. function jackJillButtonHandler(e: Event){ i think it is conflicting with the as file? any help would be appreciated Reply | Quote 0   0

errors jenne (78.16.104.xxx) 2009-05-16 03:35:27 hi dave, I just gave up on the colouring page and used a button functions when rolled over or clicked coloured in. it seemed to work ok. Reply | Quote 0   0

Dave (82.30.109.xxx) 2009-05-16 03:42:10 how do you mean, you didnt use the colouring as to go with the file? Reply | Quote 0   0

Color palette Ben (130.13.182.xxx) 2009-05-16 12:40:17 Hello, If I did want to have a color palette where there were several color swatches instead of the color picker, how would I code that? Reply | Quote 0   0

get a paintbrush fuctionality Vinay (124.30.122.xxx) 2009-05-24 22:59:57 I need a coloring book that doesn't "fill" the color but allows the user to "paint-in" the color with a paint brush... stroke by stroke. Any suggestions? Reply | Quote 0   0

drooza (SAdministrator) 2009-05-25 02:54:59 adding a colored shape to the display list as the mouse moves and the button is pressed should be a good starting point. Reply | Quote 0   0

Cutom Palette tea (206.83.81.xxx) 2009-08-04 07:17:57 I'm trying to add a custom palette to my movie. I can use colorPicker.selectedColor = 0xFFF000; to set that based on button clicks, but my code seems to conflict with ColoringBook.as, giving me compiling errors. Any ideas? Reply | Quote 0   1

Write comment
Name:
Email:	do not notifynotify
Title:
UBBCode:	-color-aquablackbluefuchsiagraygreenlimemaroonnavyolivepurpleredsilvertealwhiteyellow -size-tinysmallmediumlargehuge
Please input the anti-spam code that you can read in the image.

Powered by !JoomlaComment 3.26

3.26 Copyright (C) 2008 Compojoom.com / Copyright (C) 2007 Alain Georgette / Copyright (C) 2006 Frantisek Hliva. All rights reserved."