Tutorial: Multipicture and Blocks

I am writing a mini-tutorial about using the multipicture element and blocks because I needed one, and I thought that some of you might need one too.



Let’s start with a new ensemble.



Let’s add a multi picture element to our new block.


Let’s turn on the frame so we can see where it is.

Note that the default size is pretty small, 32 * 32 pixels.


Lets add a simple picture, here a 32 * 32 pixel BMP I made in Photoshop called pattern.BMP.

The multipicture element can read only two file types, BMP and TGA.

TGA files can have transparency and can be created by Photoshop.

However, we will not use them in this tutorial.


When you import a file, the Image Properties dialog opens. This dialog an also be opened from the View tab of the Multi Picture display. It will be very useful later.


Success! We now have a picture in our block! Of course, we could just have added a picture using the picture element and nothing is animated, so we still have a way to go…



Let’s try resizing. We have duplicated the multipicture element and we will make the new block 64 * 64 instead of 32 * 32. Size the Horizontal and Vertical Resizability settings are on, this leads to a tiled image. Interesting.




Let’s move to Photoshop and work on animation. The multipicture element does NOT open more than one picture! What it does it takes slices of your image and displays them on the screen, one slice at a time. We will make an image in Photoshop of the numbers 1-10. Let’s make it 320 * 32 pixels and save it as a BMP. When doing this, there are a couple of useful options in Photoshop, especially setting the grid and showing the grid. Here I want the grid to be 32 pixels wide with 4 subdivisions.



For this file, I used 24 as the font size and set antialiasing to sharp (very important, note that the screen shot is at 400% magnification, it looks much nicer at real size than without anti-aliasing). it is 320 pixels wide and 32 pixels high.


Note that it is easy to change the colors of all the text layers or background later or make any other changes you want in Photoshop and reimport the file if you want to…


I have reached the limit of images/post - tutorial continued in next post...

 

Let's go back to Reaktor and import the animation. (We will need to continue this in the next post, since I have reached the limit of pictures/post)

Here are the settings you see when you are importing the animation.





An here are the import results - NOT what we want!





Note, these are the correct settings - you want animation set to horizontal and frame width and height both 32, since that is the size of the numbers in the BMP I made.





For the rest of this tutorial, we will only be using one of the inputs of the multipicture element and none of the outputs. We will be using the select input and here is the tool tip for it.

0 - .99.. is the first picture,

1 - 1.99.. is the second picture, etc.

All we need to do is input the desired number here and we will see the desired animation frame.




Lets try adding a knob to the panel, and setting the output of the knob to the desired amount…

No! This does not work! I do not know why, but it looks ugly on a block anyway!




Let’s do it the right way and add a real knob, and one set up for modulation.

We will connect the input and modulation output (here backwards, OOPS) and output, and multiply it by 10 since the default range for block knobs are 0-1.




And don’t forget to connect the input and outputs of the knob in the process or modulation will not happen!




We will add a LFO to test the block… note knob still worked incorrectly here…




Finished (I corrected the mistake here)!

When you turn the knob or set up modulation, here with a LFO, the animation advances.

This was a brief tutorial, and I did not address any of the other features of the multipicture block. If you have any comments or questions, feel free to post here, and let me know if you like this little tutorial.

 

Multi Picture works just fine with .PNG format, including transparency.
It also works correctly with a standard knob attached to the sel input.

 

Thank you very much for the feedback, colB, I did not test .png and that is good to know.

I only had problems with the standard knob adjusting the sel input when I was building a block, and I do not know why that was.

 

Ken, during adjust a knob you can change the grid snap to off in Seittings on top. Grid is 4by4 pixel - grid off is 1by1 pixel. Hope it helps.

 

Thank you very much Paule, that definitely helps position things where you really want them to go.

 

It's in the manual. You have read the manual?

I'd guess you didn't update the range of the knob to match the range required by the sel input for the number of frames in your graphic.

 

I could not find much about the multi picture in the Reaktor 6 manual, but after you suggested reading the manual, I downloaded the Reaktor 5.5 Module Reference from the NI website, and it does contain a lot of useful information.

One thing in particular was that "If the Multi Picture Module is not connected to an active signal flow, then you are unable to switch the displayed pictures via the Set (select) input port. In such a case, you can activate the Module with the always active checkmark."

When I tried that, the issue I had with the knob not controlling the animation resolved.

So thank you very much, colB!

 

When I'm using anything GUI related, normally the first thing I do is tick that checkbox if its not already ticked. I think its only really useful to have it unchecked in some very unusual (for me) circumstances.

 

Thank you colB, for the very good advice.

Now for my next adventure - I wanted to have a GUI element that would act as a switch when the user clicked it, but have graphics that changed from the off state to the on state. I investigated the multi display area, mouse area, separators, flip-flops, switches counters etc, until I finally realized that the solution is the humble button!!!

The button can have an image attached, just like the multi display and the images can switch between the on off state!

I am showing how I did it to hopefully spare someone else my agony again (and please no RTFM comments )

Here is the simple Photoshop image, 32*16 pixels



Here are the properties of the button when I imported the image



And here are the final results, on and off.





I apologize to those who find this ridiculously simple, but I hope someone will find this helpful...