1. IMPORTANT:
    We launched a new online community and this space is now closed. This community will be available as a read-only resources until further notice.
    JOIN US HERE

Tutorial: Multipicture and Blocks

Discussion in 'REAKTOR' started by Ken88, Nov 25, 2018.

  1. Ken88

    Ken88 NI Product Owner

    Messages:
    194
    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.

    1 New Ensemble.jpg

    Let’s start with a new ensemble.

    2 New Multipicture.jpg

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

    3 Multipicture element.jpg
    Let’s turn on the frame so we can see where it is.

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

    4 Adding Patten.jpg
    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.

    5 BMP Import.jpg
    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.

    6 Sucess.jpg
    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…

    7 Resize.jpg

    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.

    PS Show Grid.jpg PS Grid Options.jpg


    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.

    PS Test Entry.jpg

    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...
     
    • Informative Informative x 1
  2. Ken88

    Ken88 NI Product Owner

    Messages:
    194
    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.


    9 Import Results.jpg


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


    10 Correct Animation Import Settings.jpg


    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.


    11 Tool Tip Index.jpg


    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.

    12 Adding Knob.jpg


    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!

    13 Adding a real knob.jpg


    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.

    14 Connect in Process.jpg


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

    15 LFO.jpg


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

    16 Finished.jpg


    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.
     
    • Informative Informative x 1
  3. colB

    colB NI Product Owner

    Messages:
    3,969
    Multi Picture works just fine with .PNG format, including transparency.
    It also works correctly with a standard knob attached to the sel input.
     
  4. Ken88

    Ken88 NI Product Owner

    Messages:
    194
    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.
     
  5. Paule

    Paule NI Product Owner

    Messages:
    7,555
    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.
     
  6. Ken88

    Ken88 NI Product Owner

    Messages:
    194
    Thank you very much Paule, that definitely helps position things where you really want them to go.
     
    • Like Like x 1
  7. colB

    colB NI Product Owner

    Messages:
    3,969
    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.
     
  8. Ken88

    Ken88 NI Product Owner

    Messages:
    194
    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!
     
  9. colB

    colB NI Product Owner

    Messages:
    3,969
    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.
     
  10. Ken88

    Ken88 NI Product Owner

    Messages:
    194
    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

    On Off.jpg

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

    Button properties.jpg

    And here are the final results, on and off.

    On.jpg

    Off.jpg

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

    colB NI Product Owner

    Messages:
    3,969
    ;)
    rtfm.PNG
     
    • Like Like x 1
    • Funny Funny x 1