Create a picture gallery in HTML5 using Tumult Hype
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 the screen if you wish to just watch the video.
You can download the project files for this tutorial below.
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 have that 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 same time. 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 we will 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 of the 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.
Your stage 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. Should look 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 go ahead 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 for your 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 by clicking in the same area you clicked to get the box. Click on Insert Elements > Text. Copy in that text and move it to the top of the screen.
At this point we are ready to insert some images. The same way we inserted boxes and text is how we will insert images. Insert Elements > Image. Bring in the four rose images found in the images folder of your practice files. They should be named rose1.jpg, rose2.jpg, rose3.jpg and rose4.jpg.
The images will be large to begin with but don’t worry at this point. We will make them smaller in a second. For now let’s resize each image so it will fit within our gray gradient box. This is where the images will scroll into to show the larger image. You can resize your photo by selecting the image hold down shift and grab one of the corners. Dragging this will either increase or decrease the image and as long as you hold down shift then it will keep it proportional.
Some of the images will already fit within the gray gradient box area. Make sure you don’t take up the whole area, we will be adding on a reflection as well.
Now let’s move all those images off the stage to the right hand side of the screen. Layer them off the stage so you can easily select them later when we start animating. You can see that in this screen shot. Keep in mind they look faded a little because they are off the stage. We want them to scroll in from off the stage.
Now we need to create the thumbnails. Select all four of those images. With them all selected copy and then paste new versions of those images. This will not make your file size much larger since it is using the same image reference.
Move these images onto the stage. We will need to resize these so they fit within the green area so start resizing them one by one. Hype will help guide you so the images are all the same width. Your stage should now look like the image below.
Now let’s add some style to our thumbnails and images that will slide into the middle. You can add style like border, shadows and reflections right in the element inspector.
Let’s add a white border 3px width to give the photo look on the thumbnails and 5px for the larger images. Your stage should now look like the image below.
We won’t spend the time here to explain but you can also add drop shadow and selection to your images. I would only add reflection to the larger images off screen. You do that in the same Element Inspector.
Now let’s start animating adding some functionality! In order to do this we will need to add multiple timelines. We will need a timeline for each rose including one for the main timeline which will do nothing at first. It is the first one that we see. You add more timelines by selecting on the Scene Inspector which is the second tab in the inspector. Add 4 new scenes and name them rose 1, rose2, rose3 and rose4. This way we can keep track of which scene is which. Your Scene Inspector should now look like this.
We can switch between our scenes on the timeline. In your timeline you can see which timeline you are on by looking at the top of the timeline. Right now it should say Main Timeline. You can change that by selecting the title and selecting which timeline you want to edit. Let’s select rose1 to edit what will happen when we come to this timeline.
With rose1 selecting, we will need to animate rose1 onto the stage. You can do this by clicking on the record button at the top of your timeline (right hand side). Move your playhead to 1 second.
Now move the large image on the gray area where you want it to animate to. Note, one thing we need to keep in mind is we want all the images to automatically scroll back to their position meaning if you are on rose2 and you select rose1 then you want rose2 to scroll off the stage you will need to add a keyframe at the 1 second mark on all other large images. Select each of those images and select the keyframe button which is right next to the record button. Note: You will probably want to unselect the record button before you add the keyframe for everything else.
Your timeline should now look like this. You will also need to insert a keyframe for the images at the beginning. I know this sounds weird but this is how hype knows where to go to.
This will make sure all other roses not being animated in this timeline will animate back to the current location which is off stage. Now we will need to do this for all fours roses. So navigate to each timeline and animate out that image for the timelines and make sure the keyframe is added for all other large images.
At this point we are almost done. We have set up so each image will animate in. The only issue at this point is if you were to hit preview nothing would happen. We need to add actions to each thumbnail. The beauty about timelines is it does not matter which timeline you are on, if you add actions to a button or image it will be the same across all time lines.
Select the first thumbnail and go back to your inspector window. This time we will select the mouse inspector which is the second to last tab.
With our object selected we can now add mouse actions to this object. Keep in mind we are targeting the iPad so even though it says mouse it will apply to touch as well. For touch it is standard to add actions to mouse up. So go to the last section for mouse up and select on the drop down box. Select Play Timeline.
Then under the timeline select rose1. Do the same thing for the rest of the thumbnails. rose2 will go to timeline rose2.
Save your project files and click on the preview icon. When you select each thumbnail you should see it scroll in and when another thumbnail is selected the old one will scroll out and the new one will then scroll in. You should have something looking like this.
You can download the project files including my project file you can open up in Hype and see how everything was placed together here. HTML5 does have some great potential and as always I am impressed by what it Hype can already do. I will also be creating a recording for those that prefer to watch the video which will be here shortly.
Watch the video below of how to create a interactive HTML5 picture gallery: