Home Projects Flash CS3 How to Create a Coloring Book in Flash CS3 Using ActionScript 3.0





Forgot your password?
Forgot your username?
No Account Yet? Create an account

Like it? Share it!

Add to: JBookmarks Add to: Facebook Add to: Windows Live Add to: Ximmy Add to: Digg Add to: Del.icoi.us Add to: Reddit Add to: Jumptags Add to: Upchuckr Add to: StumbleUpon Add to: Slashdot Add to: Netscape Add to: Yahoo Add to: Blogmarks Add to: Diigo Add to: Technorati Information

How to Create a Coloring Book in Flash CS3 Using ActionScript 3.0 PDF Print E-mail
User Rating: / 17
PoorBest 
Projects - Flash CS3
Written by drooza   
Monday, 29 September 2008 02:03
Article Index
How to Create a Coloring Book in Flash CS3 Using ActionScript 3.0
Setting Up Our Drawing for Coloring
The ActionScript
Let's Color!
All Pages

Searching the web for a good tutorial on how to create a coloring book came up short.  This was a very quick and easy application to write.  First thing's first: we must have an idea of what we're going to be using.  Let's list the basic items of a coloring book.  We need to:

  1. Pick a color.
  2. Have an item to color
  3. Color the item!

Awesome.  Seems simple enough right?!  In case I haven't reiterated it enough, it's always good to have a plan!  Now we can come up with a method of doing these 3 listed things to make our coloring book work.

 Now to pick a color.  I've seen many a coloring book made in flash where the creator makes 10 MovieClips, assigns certain code to each MovieClip, limiting the colors the user can choose.  Why go through all that work?  Listed in the component panel - pallette for some of you - there is a ColorPicker component.  Yessss!!  There's one already made! Step one is already accomplished! Wow that was quick...sort of.

Now that we found a way to pick a color, we have to store that color which the user picked and color the item with that color. 

Wait we don't have any items to color? 

Here lies list item #2.  If you aren't familiar with grouping and distributing to layers you will be after this short explanation.  First we have to draw our picture to draw.  Using any method you'd like, just draw it. As long as the colors are distinguishable then this will be quick and easy, even for the novice user (the drawing).

 image drawn in flash

Awesome.  For the sake of this article I won't go over HOW to draw this, but WHAT TO DO with this drawing. 



Comments
Add New Search
oh!
Timmy (129.174.106.xxx) 2008-10-01 09:41:37

I like your new logo.
Cute hamster there.
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.
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.
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?
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.
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.
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.
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
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...
Thanks
Designer (24.113.246.xxx) 2008-12-08 05:45:44

Thanks for explanation. Designer
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.
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?
confused
Hillary (71.207.142.xxx) 2009-01-03 18:21:30

I'm running adobe flash cs3 and using as3
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.
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.
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
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.
Yea
eobyone (24.24.131.xxx) 2008-12-29 22:34:15

That's what I was looking for!!!
Thanks Ed
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?
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....
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.
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?
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
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.
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
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.
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?
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?
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?
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.
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?
Write comment
Name:
Email:
 
Title:
UBBCode:
[b] [i] [u] [url] [quote] [code] [img] 
 
:angry::0:confused::cheer:B)
:evil::silly::dry::lol::kiss:
:D:pinch::(:shock::X
:side::):P:unsure::woohoo:
:huh::whistle:;):s:!:
:?::idea::arrow:
Please input the anti-spam code that you can read in the image.

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

Last Updated on Thursday, 30 October 2008 13:48
 

Make a Donation!

Advertisement
Banner

HomeProjectsSnippetsContact Me

Copyright © 2008, Drooza.com