Viewers: in countries Watching now:
To start our project, let's create a new folder on the desktop called myVideoGallery. Let's open that up and then inside let's create two additional folders, one called images, one called includes. Now, with those in place, let's come back to the exercise files, let's go into Art Templates and let's open up template_items.psd. Now this Photoshop file has some slices already in place. I am going to use my magnification tool here and just zoom up a little bit.
So we have three graphics we are going to export from here. Click on the Slice selection tool here. I can double-click on the first slice. This is going to be the play icon. The one over here in the center is going to be the ie_caption_transparency. Since IE 7 and 8 don't support the RGBA color specification from CSS3, we are going to have an alternate CSS file that's going to bring in this semi-transparent PNG file. So we can get a semi-transparent caption, as we saw in the introduction video, working in IE7 and 8. And then lastly we have this filmstrip graphic over here, this particular tile.
We have made sure to make sure that the masking in the top area here matches the masking at the very bottom. So as this graphic tiles, depending on the height of the overall player, we are going to get a seamless transition between the images tiling up and down and this is going to be called filmstrip_tile. Let's choose OK. At this point, let's choose File > Save for Web & Devices. In the upper left-hand corner here we see the Slice tool. I am going to select the first slice, hold the Shift key, select the other two slices. In the upper right-hand corner let's make sure we have PNG-24 as the Web graphic format and then lastly let's come down and choose File > Save.
Now on the desktop let's go into myVideoGallery/images. We will choose All User Slices down here in the Slices setting, then choose Save. We can see in the background the three different slices up now have been saved out: filmstrip_tile, ie_caption _transparency and play_icon. Let's come back to Photoshop. Let's close our file. So now let's close up our templates. We won't need to be going back into Photoshop for the rest of the course. And now that we have all of our graphics in place, in the next movie we are going to start by creating a brand-new HTML and CSS file and start building a layout based on these particular graphics.
There are currently no FAQs about Create an HTML5 Video Gallery with jQuery and Dreamweaver.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.