15.1 Tutorial

This little tutorial shows you how to create your own slide show in ten easy steps. Try to understand every step that is taken here and you will soon be able to create your own scripts.

The following things are required for this tutorial:

1. Background picture called BG.png with two arrows. Rectangle embracing arrow 1 is X: 4, Y: 430, W: 35, H: 19. Rectangle embracing arrow 2 is X: 591, Y: 430, W: 35, H: 19. The area where the pictures are displayed is at coordinates X: 29, Y: 41.
2. 11 pictures named 0.jpg, 1.jpg, 2.jpg ... 10.jpg of size 571x377 pixels
3. Protracker module named MyMusic.mod

Of course I have prepared all these things for this tutorial. They are in your Hollywood directory under Help/Tutorial. Please copy those files to the directory where you will create your script. Then follow these steps:

1. Start up your favorite text editor

2. The background for your slideshow is a picture that you have created with your favorite paint program. In our example, I have already prepared a background.

3. Now we need to tell Hollywood that it shall use the file BG.png as the first background picture. This is done by specifying the preprocessor command @BGPIC together with BG.png. So you have to write the following code now in your script file:

   @BGPIC 1, "BG.png"

   This command tells Hollywood to use BG.png as the initial background picture. The initial background picture must always have the identifier 1. If there is no background picture with the identifier 1, Hollywood will create a blank display.

4. Our slideshow also shall have some background music. This music is a Protracker module with the name MyMusic.mod. So we add the following line to our script:

   @MUSIC 1, "MyMusic.mod"

5. Now we have to define areas in our background picture that shall be accessible as buttons. As you can see, there are two arrows in the background picture. As all buttons need to be defined as a rectangle, we need to find out the coordinates as well as the width and height of each arrow. You can use a paint program like PPaint to find out the coordinates. For our background picture, the left arrow is in a rectangle with the coordinates 4:430 (top left corner) and the width/height of 35/19. So we can add the left arrow now as button 1 to our script by writing the following code in the script file:

   MakeButton(1, #SIMPLEBUTTON, 4, 430, 35, 19, {OnMouseUp = p_Back})

   We can do the same now with the right arrow which is in a rectangle starting at 591:430 with the same dimensions as arrow 1. So we write the following keyword in our script:

   MakeButton(2, #SIMPLEBUTTON, 591, 430, 35, 19, {OnMouseUp = p_Forward})

   Now we have defined two buttons that can be clicked. If button 1 gets clicked Hollywood will call the function p_Back(), and if button 2 gets clicked Hollywood will call the function p_Forward().

6. Now we can start adding a bunch of commands that tell Hollywood what to do. At first, we want that the background music starts to play. As we have declared MyMusic.mod as the music object with number 1, we now call PlayMusic() with argument 1. Add the following line to your script and Hollywood will play your Protracker module:

   PlayMusic(1)

   We also need to define which picture shall be the last one. In our example we will have 11 pictures ranging from 0.jpg to 10.jpg, so the last picture is number 10. Therefore we add the following line to our script:

   lastpic = 10

   We also add the following line because our first pic is 0.jpg:

   pic = 0

7. The next command shall load the next picture and display it. As there is no command which does all this, we need to write a little function. This routine will be called p_NextPic(). You will see in point 10 how to write this routine. Let us pretend that it was already there and therefore we will now say that Hollywood shall execute this routine:

   p_NextPic()

8. Now we add the main loop to our script. The popular format of this loop is the following:

   Repeat WaitEvent Forever

   The command WaitEvent() holds the script execution until an event occurs, e.g. a button is pressed. If an event occurs WaitEvent() will jump to the function that handles this event, e.g. if button 1 is clicked, WaitEvent() will jump to the function p_Back(). When the function has finished its action, it jumps back in our main loop and WaitEvent() gets called again. This is repeated until the user closes the window.

9. Now the structure of our script is complete. What we still need to do now is adding the functions p_Back() which is called by WaitEvent() when button 1 (backward button) was pressed and p_Forward() which is called by WaitEvent() when button 2 (forward button) was pressed. It is important that you define the functions before you reference them. Thus, you need to add the following code before the calls to MakeButton() which you added in step 5. So let's add the functions for the buttons now:

   Function p_Back() If pic =0 pic = lastpic Else pic = pic - 1 EndIf p_NextPic() EndFunction Function p_Forward() If pic = lastpic pic = 0 Else pic = pic + 1 EndIf p_NextPic() EndFunction

   As you can see in the above code, the variable pic contains the actual picture number. If the user clicks the forward button, pic is increased by one, if the backward button is clicked it is decreased by one. The variable is also checked against 0 and lastpic so that it always stays in the range of our pictures.

10. Now the only thing left to do is our function p_NextPic() which shall load and display the picture with the number that is stored in the variable pic. Here is the code. Remember to insert this code before the calls to MakeButton().

    Function p_NextPic() LoadBrush(1, pic .. ".jpg") DisplayBrush(1, 29, 41) EndFunction

    So what does the routine p_NextPic() do? It simply adds the ".jpg" extension to the variable pic and after that it loads the file and displays the brush at coordinates 29:41. So the pictures must be named like this 0.jpg (first pic), 1.jpg (second pic), 2.jpg (third pic) and so on.

    Altogether our script looks now like this:

    @BGPIC 1, "BG.png" @MUSIC 1, "MyMusic.mod" Function p_NextPic() LoadBrush(1, pic .. ".jpg") DisplayBrush(1, 29, 41) EndFunction Function p_Back() If pic =0 pic = lastpic Else pic = pic - 1 EndIf p_NextPic() EndFunction Function p_Forward() If pic = lastpic pic = 0 Else pic = pic + 1 EndIf p_NextPic() EndFunction MakeButton(1, #SIMPLEBUTTON, 4, 430, 35, 19, {OnMouseUp = p_Back}) MakeButton(2, #SIMPLEBUTTON, 591, 430, 35, 19, {OnMouseUp = p_Forward}) PlayMusic(1) lastpic = 10 pic = 0 p_NextPic() Repeat WaitEvent Forever

Now you can save your script and start it through the Hollywood GUI or from the console. Congratulations, you have just created your first Hollywood script! Wasn't that easy? Only 35 lines of code!

Now you can go and extend it if you want. For example, if you want that the picture gets displayed with a transition effect just replace the line

DisplayBrush(1, 29, 41)

with the line

DisplayBrushFX(1, 29, 41, #RANDOMEFFECT)

and your picture will appear with a nice transition effect from Hollywood's wide palette of transition effects.