Dreamweaver Templates including animated Cinemagraphs.
Each or our new Dreamweaver Cinemagraph templates feature a unique type of image or image slider, called a ( obvious name here ) Cinemagraph. A cinemagraph is basically an animated image. What’s so unique about this type of animation is just part of the image, is animated. The benefit of using a Cinemagraph is that the person viewing the animation immediately has their attention drawn to the moving part of the image.
If you create a cinemagraph for your brand, or for a product shot you can direct the attention of your visitors. You can direct their attention to a part of the image that is important. A part that can add some emphasis to your message.
Or you can use a cinemagraph because it is unique and it’s a growing trend. We already see this with TV commercials, and it’s making it’s way to internet marketing.
Working with Cinemagraphs in your Dreamweaver Templates and HTML webpPages.
There are many options for including or adding a cinemagraph into your web page. Cinemagraph come in several file formats, such as MP4, Animated GIF and Animated PNG, and even animated JPEG. For our Dreamweaver templates we embed the cinemagraph using the MP4 option. This allows us to upload the MP4 video file to YouTube, then use the YouTube Video Loader API to load the video into the page. This is about as efficient as you can get when loading any type of large media file into a web page.
You can also create and export your cinemagraph as an animaged GIF or Animated PNG.
The upside is you don’t need to load the image from an external source such as YouTube. And you can easily host the cinemagraph file on your own server.
The downside is the file size for animated GIFS and PNGS can be HUGE. Compared to an MP4 file, and when I say HUGE I can export an 11 meg mp4 that streams from YouTube in seconds. Compared to a 174 meg animated GIF file loaded from my own server.
However, depending on the image size ( dimensions and file size ) exporting to an animated PNG is possible. You can even optimize animated PNG’s now using an online service called TinyPNG.
TinyPNG is a great service and we’re even using it as the backbone for optimizing images for our Pegasaas Accelerator WordPress Plugin.
How do we create cinemagraphs?
I use two programs for creating Cinemagraphs.
Each of these programs offers different options for creating cinemagraphs, and you can easily intergrate them into your Dreamweaver template. Flickgraph Pro works by first importing a video file into the program. Freezing a frame or section of the video then outlining which part of the video you want to animate. Then selecting which part you want to be static. This gives the illusion that you have a static image with a partial animation. Or a video with a partly frozen or static piece.
There are quite a few programs and apps on the market that can do this already, and you can even do this using Adobe Photoshop.
The other piece of software we use is Plotograph which is unique in that you import a regular JPG image into the program. Using the very intuitive tools included you cand mask the areas of the image you want to remain static. Then apply some ‘direction’ arrows to the areas you want to animate. The arrows determine the direction of the animation. The wonderful thing about this program being able to animate a static image is one of choice. You can find a lot more high quality images that you can find high quality video, at least from my experience, and based on licensing.