Page 1 of 1

How to make a slideshow using Designer 3.0

Posted: Sun Feb 13, 2011 5:35 pm
by Ferrule Media
Designer Tutorial 1
How to make a slideshow using Designer 3.0:

The plan is to make a small slideshow, and I will show how this is very easy using the Designer 3.0.

Image
Image

Designer-project sourcecode and files.
http://www.ferrule-media.no/tutorial/sl ... source.zip

To get myself started I have made two small pictures I will use as background-art for the menu. As for the slideshow artwork itself I have chosen a few drawings I made in Photogenics when I was active in the demoscene almost 10 years ago.

Step one
1) Make a new project
2) Add a page, select background 1. I rename the page "main menu" to make the page layout more visable (this is not very important on a small project like this, but
once a project reaches a few hundred pages you will be glad to have good names to help you ease the navigation).
3) Add another page, use background 2. I rename page the page to "Artwork Background One".

Page 1, Main Menu:

The slideshow-project is just a tutorial so it will only consist of three pictures. I want the user to be able to select what picture to show, and at the same time review a small preview of the picture in the small square.

1) Add three text-objects (white text), each with the name of a picture. The pictures in this slideshow are 1) Mystical Garden, 2) JapaneseAngel 1, 3)JapaneseAngel2.
I center them on the screen and place them above the small square.
2) I make the textobjects 80% transparent
3) I add three brushes, (artwork 1, 2 and 3), resize them to 320*240, and place them inside the small square at the bottom. Afterwards I hide the three brushes.

Now I will make the page to come alive by using action-objects. The text-objects..
1) Select on mouse over
2) Select action-object "change object option", select the first text-object and set the transparency to 50%
3) Select the action-object "show object", select the artwork matching the textobject.
4) Select "on mouse out"
5) Select the action-object "change object option ", select the first text-object and set the transparency to 80%
6) Select the action-object "hide object", select the artwork matching the textobject
7) Repeat the above with the other 2 text objects as well.

When the user moves the mouse pointer above the text objects they will light up and show a small preview of the artwork in the small square.

Now, let us move to the "Artwork background 1" page.
I add two small arrows (outlined), (left and right), make them 95 % transparent, and place them under the large Square.
1) On the arrows : Select on mouse over
2) Select action-object "change object option ", select the first arrow and set the transparency to 80% 3) Select "on mouse out"
4) Select the action-object "change object option ", select the first arrow again and set the transparency to 95%
5) Repeat this for the second arrow as well

In the lower left corner I add a small rectangle with rounded corners, 95 % transparent. In the centre I place a small text-object with the word "Menu". Make the "Menu" text object 80% transparent.

1) On the small rectangle: Select on mouse over
2) Select action-object "change object option ", select the text-object "Menu" and set the transparency to 50 %.
3) Select action-object "change object option ", select the rectangle-object and set the transparency to 85 %.
4) Select "on mouse out"
5) Select the action-object "change object option", select the first text-object "Menu"and set the transparency to 80%
6) Select the action-object "change object option", select the rectangle-object and set the transparency to 95%
7) Select "On mouse click"
8) Select the action-object "change page", select go to page 1, Main Menu".

The main function of the Artwork Background 1" page is finished, so I duplicate it two more times. I rename the new pages so that my project now has got following four pages:

1) Main Menu
2) Artwork background 1
3) Artwork background 2
4) Artwork background 3

The Artwork background pages now need to be linked together so that the user may navigate between the pages using the arrows.

On Artwork background1:
Left arrow : on Mouse click, change page, select page "Artwork background 3"
Right arrow : on Mouse click, change page, select page "Artwork background 2"

On Artwork background 2:
Left arrow: on Mouse click, change page, select Artwork background 1
Right arrow: on Mouse click, change page, select Artwork background 3

On Artwork background 3:
Left arrow: on Mouse click, change page, select Artwork background 2
Right arrow: on Mouse click, change page, select page Artwork background 1.

Now we have to place the actual slideshow pictures inside the large squares in the "Artwork background" pages.

Artwork background 1:
1) Place "Mystical Garden" inside the large square.
2) Add a text object with the name of the picture just above the square

Artwork background 2:
1) Place "Japanese Angel inside" the large square.
2) Add a text object with the name of the picture just above the square

Artwork background 3:
1) Place "Japanese Angel 2" inside the large square.
2) Add a text object with the name of the picture just above the square

Now I go back to the "Main Menu". The text objects needs to be linked to the pages showing the artwork. On the "Mystical garden" object, select "On mouse click", Change page, go to Page 2 -Artwork background 1. Likewise the Japanese Angel should be linked to "Artwork background 2" and Japanese Angel 2 should be linked to "Artwork background 3".

All objects in the artwork should also be set as "background" so they may appear at the same time as the background art.

By this the slideshow is finished and ready to be compiled. There are a lot of nice options you may activate before you compile. One example is the very advanced scaling engine. Try out some different options for yourselves.

Now remember that I have kept it very simple. With more time we could have added some music, information about the pictures, more artwork and so on. Still, it shows how it is easy to make a slideshow in matter of minutes. Feel free to recreate the slideshow using my artwork.

Here is the result:
http://www.ferrule-media.no/tutorial/SlideshowOS4.exe
http://www.ferrule-media.no/tutorial/Sl ... orphOS.exe
http://www.ferrule-media.no/tutorial/SlideshowWIN.exe

Best regards

Torgeir Vee
Ferrule Media

Re: How to make a slideshow using Designer 3.0

Posted: Mon Feb 14, 2011 7:15 pm
by tolkien
Great! Although I have no Designer I think we need tutorials to can grow...

Thanks!

Re: How to make a slideshow using Designer 3.0

Posted: Mon Feb 14, 2011 11:24 pm
by 1Mouse
Agreed

More tutorials for beginners.