Maya

Create a picture gallery in HTML5 using Tumult Hype
15 January 2012 Last Updated on 18 January 2012 admin 5 Comments

In this tutorial I will go over how to build a simple interactive image gallery all with HTML5 without even writing one single line of code! Sound too good to be true? Well itʼs not and it is simple to do thanks to Tumult Hype. You can also scroll down to the bottom of thescreen if you wish to just watch the video. You can download the project files for this tutorial below. HTML5 picture gallery project/source files. Click here to view a sample of the finished project. First letʼs open a new project in Hype and make sure our inspector is open to the document inspector. You can get to it by clicking on the blue info icon at the top right hand side of Hype. Once you havethat open make sure you are on the first tab. Should look like this.

The first drop down box says “Default Sizes” select the drop down box. Here is where you would choose your target size. In this case letʼs go ahead and select the iPad Safari Widescreen. This should be big enough for what we are going to do. Go ahead and adjust Hype so you can easily see the timeline and the stage area at the sametime. There are two ways we can do this, we can either create multiple scenes and link each image to that scene or we can use Hypes feature of having multiple timelines in one scene. I personally like the second option, the reason being each time I create a new scene in Hype I have to copy and paste all the elements from one scene to the other, with timelines all the contents stay the same but wewill just animate them in different ways. We are going to create 4 thumbnails and have a larger version of that image scroll in when we click or tap on the thumbnail. Letʼs create a layout first where our thumbnails will be and the main stage area where our images will slide in. To add color background you can easily

insert a box in Hype. Click on the Insert Element button at the top left ofthe tool and select box.

This will create a simple box on our screen as you can see below.

We can change the size and color of this box. First we will create a background color for the thumbnails which will be on the left hand side of the screen. Go ahead and position this on the left hand side of your stage, make sure you resize it so the height fills your entire height of your stage. Yourstage should look something like this now.

The thumbnails will go on top of the blue background. We will need to create another box for the rest of the area so we can have that in a different color. First letʼs change the color of the box we currently have on the stage. With the box selected go back to your inspector and

select on the Element Inspector which is the fourth tab over. Shouldlook something like this.

The first section you see is the color section. Selecting the drop down box allows you to change the color type form a normal color to something like a gradient. For now letʼs just keep this color a solid color but change it to something like a light green. For those designers out there fill free to choose any other color. Now that we have our thumbnail background lets goahead and insert another box and make it fill the rest of the screen. This will be the background for the full size images that scroll in. You should have something like this.

Ok, so letʼs change the color of that background. This time letʼs choose a gradient color. Select from the drop down box Gradient.

Once that is selected you should now see two color choices.

Choose two colors foryour gradient. I would suggest white on the top and light gray on the bottom. This seems to look the best when you add reflections which we will be doing here soon. Now that we have our background in place, Letʼs add a title to the top of the screen that says “Click or tap on one of the thumbnails below to see the image larger”. This will give the user instructions on what to do. You can insert text...