+1
Answered

Coloring book feature

Korneel Bonte 10 years ago updated by Marléne Hökgren 7 years ago 16
Idea is to let children paint freely on a coloring plate so the black lines don't get overcolored.
it would be nice to be able to do this with 2 layers (one for the coloring & one for the lines.
also a paint bucket would let children create beautiful coloring pages quickly.
-> how do I make these two as fast as possible? In as less steps as possible?

Answer

Answer
Will be answered
Hi there,
Currently, the lines created with the Draw behavior cannot be underneath the outlines, but to create a paint bucket tool effect that colors behind the outlines of the drawing, you can use the FillColor behavior. Add a Tap-FillColor action set to a blank graphic element, and set the target of the action set to be the portion of the drawing that should be filled when that area is tapped. You can copy and paste this blank graphic element and change the target element depending on the location of the blank element. I'll put together a quick video on this effect and post it here.


I would love to see an easier way to create coloring pages too.
Created a topic about it 11 months ago.

I haven't tried the new version of the builder, but in the previous version it was tedious work that took way too long to do, for me to be interested in ever creating a coloring book, or even just a single page with anything but very simple shapes.
Hello, Anita. I saw your topic and found it strange nothing had been done in 11 months.
Interactbuilder is meant to be software to be easy to build books who have mainly children as the main target audience. Can someone respond to this please. I guess Anita and me are not the only people who want this. - is this possible or are you working on this? Anybody want to recommend this feature to, please.
You CAN create coloring pages. It just takes a really long time, unless you're sticking to very simple pictures. Have you tried it out? Perhaps it'll work better for your images than for mine? Depends a lot on the images.

I don't think you can do anything like free coloring without overcoloring the lines though, but you can make it paintbucket style (areas filling in with the chosen color).

I hope I'm wrong, and that amazing new tools/solutions have been created to solve this issue. I have not followed every single thread created since the release of the new version, so it's possible :)
Answer
Will be answered
Hi there,
Currently, the lines created with the Draw behavior cannot be underneath the outlines, but to create a paint bucket tool effect that colors behind the outlines of the drawing, you can use the FillColor behavior. Add a Tap-FillColor action set to a blank graphic element, and set the target of the action set to be the portion of the drawing that should be filled when that area is tapped. You can copy and paste this blank graphic element and change the target element depending on the location of the blank element. I'll put together a quick video on this effect and post it here.


Hi Inna,

I'd love to see you do that with a more complex image.
If I send you an outline to use, will you try that?

I assume it still works like with the old duck tutorial?
Hi Anita,
Here's a video where I create separate layers in Photoshop and then add elements on top of an image to make different parts of the image clickable. I sped up the parts where I repeat similar steps. Here are two things that make the process easier:

1. I used blank graphic elements as the areas where the user can tap in order to color certain parts, and when multiple elements are used to color the same portion of the picture, I can simply copy, paste, and resize the element, since its action set is the same.

2. Layering these blank elements makes it easier. In my example, I use a large element for the sky. Instead of breaking it into separate parts that surround the other images, I can layer the other tappable areas in front of the element for coloring the sky.

Paint Bucket.mp3
The import .psd function seems to work well for this. Have you cut the video after the import, or is all elements placed as they should be right away (as it looks like in the video?)

It's still very tedious work with tall the actions, but if the layers are already placed correctly right out of the gate, that takes away a huge chunk of the work :)

As a work-around, while we wait for new features that makes this easier, wouldn't it be possible to choose whether or not the transparent areas should be active or not? If they were'nt active, you could simply have one action for each graphic piece, right?
Yes, with the Photoshop import, all of the elements are placed as they were in the Photoshop file, so you don't have to move any of the elements into place.

Regarding choosing whether transparent areas are active or not, we wouldn't be able to add this feature immediately, but we have the idea under consideration, especially for coloring activities.
As long as you're considering it, I'm a happy camper :)

Great news about the psd import. It's such a pain to adjust all the parts when you upload them to the project the other way. Perhaps I'll take a swing at it after all. Although, I would still love to see the draw underneath feature before going at it, so the kids can choose for themselves, and thus be more up to speed with what other apps are doing.

But thank you for this updated version of the tutorial :D
Hello Inna,

it's actually the draw free underneath lines that interests me the most. Not kust me I guess.
Have you seen when Anita posted this? This would certainly be a great additon to the features of interactbuilder. Can this be 'planned'?
Hi Korneel,
Yes, we're aware of the problem and are looking into finding improvements. The developers are consistently working on fixing bugs and making improvements, so it can sometimes take longer depending on the specific update.
Thanks Inna for your time, thursday i'll be home from the hospital.
For paint Bucket jobs this is great. There is a possibility to just have your Photoshop layers be used for actions/paint Bucket. This would save huge amounts of time.
-> you place 5 objects to be able to color the leaves within the three. - if possible the native photoshop layer could be used ! No extra objects
-> coloring: enable layer locking on top layer (border + lines) so the layer beneath can be colored.
thanks,
Korneel
Hi Korneel,
I wrote to our lead developer so that he's aware of the feature requests.
Thank you for the feedback! :)
Thanks Inna!
Anita & I will be looking at future updates :-)