It might be easier to use the more general "Bouncer" version of this contraption: https://itch.io/post/8380177
You can open up the properties menu of the contraption on the card where you want to use it and paste a different image into the image box:
I do think most of these things are intended behavior.
But, hmm, yeah I do see what you mean about the palette turning gray in the "Stroke..." menu while transparency mask is active... That's confusing.
I hadn't noticed that because I tend to use the Toolbars.
(Found in the menu bar under Decker > Toolbars)
This is with transparency mask on -- the background transparent white has turned gray but the sidebar palette white (which is now opaque) still looks white.
But yeah, I see what you mean about it being weird when you're working directly from the menu bars at the top.
For the other stuff, the difference between the two black colors isn't relevant very often. For most users, I think just using '1' all the time is fine.
For '0' and '32' however... it generally makes sense to me that you can only draw with opaque white while transparency mask is active because it's also one of the only times when you can see the difference between the two whites. And I tend to think of this use of the word mask not as in "thing you look through" but as in "thing that masks off areas of white" like masking fluid in watercolor painting, but that might just be my own association with it.
Anyway I wonder if the toolbars would be helpful to you for now? It doesn't answer all of the things you mentioned but it does sidestep one issue (and I think they're very useful in general while drawing in Decker).
Well, gosh! I'll try!
Where to begin.... Yeah, if you're drawing directly in Decker you create the image data by drawing with the usual tools on the back of the card and then Copy -> (switch over to widget mode) - > Paste as new Canvas.
(And just in case anyone didn't know... turn on the Toolbars in the Decker menu... only one click to switch between modes and tools. Very handy.)
The best and most flexible place to draw is directly on the card but Canvases ("the image container widget") interact more easily with scripts and modules. And therefore, usually, animation. So, yep, move things into canvases when you're done drawing (or if you're ready to test something before you commit the time to finish your drawing! )
(The thread linked previous is an exception! That one was about making a looping animation while still being able to draw on the card.)
---
Depending on what I'm doing I will sometimes layer canvases on the card... it works just fine for small stuff.
Basically, to do that, you change the visibility of the canvas widgets in a script -- hiding one and showing another in the same moment, and then creating a delay before doing the same thing again for the next image.
But... if you're making something super complicated... well, having several stacks of overlapping canvases can get a little unwieldy?
Especially if you need to edit one single frame of it later. (Ask me how I know... no, actually don't....)
But there are other ways to do it! These days I often use copy[] and paste[] in a script instead. That is to say.... the image information is still all stored in canvases but instead of changing the visibility of lots of things in a big stack of widgets, I just change the image data on one single Canvas.
Soooo, examples:
Changing the visibility of three stacked canvases with .show (and sleep[] for the timing) might look like this:
frame1.show:"solid" sleep[10] frame1.show:"none" frame2.show:"solid" sleep[10] frame2.show:"none" frame3.show:"solid" sleep[10] frame3.show:"none"
While copy[] and paste[]-ing three images onto one canvas in sequence might look like this:
targetcanvas.show:"solid" targetcanvas.paste[frame1.copy[]] sleep[10] targetcanvas.paste[frame2.copy[]] sleep[10] targetcanvas.paste[frame3.copy[]] sleep[10] targetcanvas.show:"none"
Personally, I find the second one easier to write and read but everyone is different and there's more than one way to make a sequence of images play. :)
A bonus visual example of what I mean.... take this animation:
In widget mode it's just one canvas and a button...
And over here (stored somewhere else) a sequence of images canvases that are 'played' on that one canvas when you click that button.
And this way it's still easy to copy the image back out of a canvas, edit it, and then paste it back in if I need to.
---
I tend to think of Zazz as a set of small tools for creating animated flourishes -- everything it does creates a loop but there's a few different kinds of loops.
And all of these things could be done by scripting it yourself! (but having it ready to go in a module makes it much simpler.)
Listing off a couple zazz options that I think are handy for the stuff I like to make:
.flipbook[] is like a normal looping gif where it plays a series of frames over and over on a canvas (also the thing in the previously linked thread is a secondary usage of flipbook -- to test how animations look, even if they're going to be handled by something else when they're done)
.bob[] makes a canvas bob up and down
.march[] makes a canvas move around different waypoints on the card.
And those are all really nice and useful on their own, but you can also mix them together, like this:
The butterfly's wings are a tiny .flipbook[] animation, the small up and down movement is from .bob[] and the back-and-forth is because the butterfly is .march[]-ing between waypoints (hidden widgets) on the two flowers.
Or, here's a case of using zazz.flipbook[] as a small part of a bigger interactive kind of thing:
In this example, a draggable canvas is being used with another module (called 'rect', from the 'draggable' example deck) that helps build certain kinds of interactions when you want your player to be able to drag things around.
When the rect module sees that the draggable canvas is overlapping the hidden 'rect'angle (lol) of the treasure map, it plays a zazz.flipbook[] animation on the canvas as if it's looking for something.... And then the thingy turns yellow if overlapping the 'rect'angle of the "X".
These are very silly little examples, but hopefully this helps explain my perspective on Zazz.
It's a set of tools that are very helpful for certain kinds of looping effects and they generally combine well with other things.
---
So, for Puppeteer... the name is very well chosen.
We're preparing Puppets and Props for a Decker stageplay.
They move around positions on the card however we tell them to.
The main 'downside' is that there's a little more set-up involved here. It's really not bad at all but, for example, each Puppet needs it's own separate storage card (dressing room?) full of all the canvases for each of it's poses and expressions. It takes little longer to get everything put in the right places, but it's very powerful and flexible after that.
And planning a complicated scene with Puppeteer is a bit like going through rehearsals of a stage production. Tweaking the timing and positions and what expressions the actor-puppets should have, and so on.
(Obviously this is more of a 'vibes' explanation than a technical one....)
If zazz was the tool for looping animation, I usually think of Puppeteer as a tool for things that move forward in time. Cut scenes, visual novel conversations, interesting flourishes (sometimes).
This is one of the little examples from backstage in The Riddle:
You can see the little circles (tiny buttons) that are used to mark locations, and the directions for telling the bird puppet where to move around, how fast and when to change pose.
And technically Puppeteer does have some 'looping' traits such as the built-in blink, the mouth movement while talking with Dialogizer (you still have to draw them, but the coding side is handled) and fancy puppets -- which are probably a little too much for this conversation, but there's even more complexity available here for someone comfortable scripting in Lil....
But yeah, generally I would use Puppeteer for "scenes", rather than loops or idle animations.
---
And one more option for making moving pictures: Contraptions.
These are really just basic widgets and Lil scripts pre-assembled together into a new kind of custom widget -- you can make your own but also there's a bunch of options already pre-made for your convenience in the contraption bazaar thread.
This small section of Desker has two small zazz.flipbook[] animations -- the cat's tail and the curtain.
It also has three contraptions -- the eye contraption for the cat's eyes, the pop out contraption for the window opening and closing, and the rotor contraption for the inside of the plasma ball in the top right.
---
Anyway, this was a lot. Sorry if it's confusing!
Basically, we have a lot of little tools available that have slightly different abilities and no one single "correct" workflow.
It's completely fine to just use what makes sense to you for now, and then try new things later when you feel like it.
(And, of course, I'm happy to clarify anything I said here... !)
Since you've been pointed towards zazz already I'll mention that there's a way of setting up zazz.flipbook[] (looping animations from frames) that's helpful for drawing animations directly in Decker. I posted a (somewhat excited) thread about it a while ago when the option came out.
Basically instead of having the animation frames stored in an image container Canvas, they stay on the card where you can continue to draw on them. And you can check how the animation is looking by switching between Drawing mode and Interact mode whenever you want... then go back to animating!
If this is what you're interested in and if there's anything confusing about it I'm happy to clarify. (I'm sure I skipped over things that seemed obvious to me at the time, for example....) I know that a thing that I didn't mention in that thread is using the grid overlay (not the grid widget, the "View" Menu > "Show Grid Overlay" menu option) makes using zazz in this way a lot easier.
"Show Grid Overlay" and "Snap to Grid" helps make the widget guide for your flipbook 'frames' exactly the right size with less fuss. You can change the grid size to match what you're doing with the "Grid and Scale..." option in the same menu.
And if you're not sure what size of 'frames' you're working with, "View" > "Cursor Info" can help. The first two numbers are the cursor's position on the card (not needed for this), the second pair of numbers are the size of a selected + clicked widget or the current selection.
I really enjoy animating little things in Decker so please ask if there's anything you're having trouble figuring out.
