STEP-BY-STEP Tutorial on creating ANIMOTO video clips and embedding them into Smugmug Galleries
Some of you may have seen some really impressive video clips created using ANIMOTO which makes great dynamic presentations from your selection of photos set to music. After testing it out by creating a short 2 minute video, I was instantly hooked and saw that it was a great way to showcase my photos to prospective clients in a really engaging way. It took quite a bit of fiddling around to get all the settings right but I have now managed to embed these video galleries into my Smugmug website (thanks to the genius of John (jfriend) on Dgrin!). Here's an example of one of the videos I made (see end of post for more):
Anyway, I thought I'd document it here in a Step–By–Step tutorial in case others want to do something similar, and also for my own reference as there was a lot of information taken from different sources to get it all working. Hopefully this'll make it less painless for others too:) Even if you're not a Smugmug user and your photos are stored in Flickr, Facebook, Photobucket, or Picasa (well, even anywhere on your hard drive for that matter), Steps 1–10 still gives a detailed rundown on how to create your videos on ANIMOTO.
[By the way, once you've created your ANIMOTO video, please share your link with us in the comments below!]
Previous slideshows I had created with iPhoto or Aperture using the tired old Ken Burns effect just became really repetitive after a while, although what ANIMOTO has done with their music videos really add the "wow" factor to your photos. And having quite a lot of experience in video editing with Final Cut Pro myself, I can tell you that it would take a highly qualified editor quite some time to reproduce video clips of this calibre. The great thing is that ANIMOTO have now automated the process to help you look like a pro:) In their own words:
"Animoto is a web application that, with the click of a button, produces videos using images and music that a user selects. Using their patent-pending Artificial Intelligence developed to think like an actual editor & director, the resulting video has the emotional impact of a movie trailer and the visual energy of a music video. No two videos are ever the same"
The founders of ANIMOTO are TV and Film producers and after you watch the results, it's obvious that these creative guys have done a fantastic job at developing a way to analyze the photos that you feed it and setting it timed to the music. The added bonus for Smugmug users is that they've made it especially easy to import photos directly from all your Smugmug galleries (and they also include import options for Flickr, Facebook, Photobucket, and Picasa).
With the "Basic Account", you can make 30 second clips for free, but it was hard for me to not be hooked after I created my first video, so I signed up pretty much straight away for a "Business account":) Alternatively, there are also "Pay Per Video" and "All Access Pass" Accounts for Personal use, but they are more limited in their features. As many Smugmug Pros would probably be using this to help promote their Photography business, the USD$99 / 3 month plan is definitely worth checking out. There's a more expensive plan at USD$249 / year, but I paid for the 3 month plan try it out and so far, I'd say it's definitely worth the investment. You can always just pay USD$3 to create one full length video to test it out, but if you like what you see after creating a free 30 second clip, you may as well put that $3 towards the account fee:)
The benefits of having the Business Plan is that you're able to create an unlimited number of DVD-quality downloads which you can also on-sell to your individual clients (apparently, some photographers have sold their videos to clients for upwards of $300, whilst others have been using them as 'thank you" gifts for clients). I haven't done this personally myself but I could see how it would be a potential source of revenue especially for Wedding and Portrait photographers. Once you've created your video clip, you can basically use it in your blog, your website, youtube, or however else you want to showcase and promote your business.
You also have access to their growing library of commercially-licensed music covering 8 genres – the founders, having worked with MTV before, are obviously well connected to the music industry which may explain their surprisingly good selection of songs. Otherwise, you're free to upload your own mp3 (as long as you've got rights to the music of course). There are some other nice features such as "Call-action-button" and less ANIMOTO branding, but I'll get to that later.
Ok, so basically, what this Step-by-step tutorial will do is show you how to create an ANIMOTO, convert, upload and embed it into your Smugmug website like this on my Looking Glass Photography site.
One of the reasons why I wanted to set it up this way was to allow visitors to watch the short video and quickly preview the kind of photos they're likely to expect when viewing the gallery. The other reason was that it was just very cool:) I must say that it has added more life to my website which felt quite static before. Also, the stats for my galleries have experienced huge spikes since embedding the videos.
**GOTCHA**
Before you begin:
The commericial-licensed music library for the free "Basic" account is not necessarily the same as the music library for the Business account, so don't make the mistake that I did of creating a video using a Free account as a test and becoming too attached to the music as it may not be available with a Business account. The best way to check for music with paid accounts is to listen through the featured music in the "Music Lounge" by clicking on the headphones icon on the top left corner.
STEP 1: SETTING UP A BUSINESS ANIMOTO ACCOUNT
Once you've played around with the free "Basic" account and you decide to sign up for a "Business" account, it's a relatively simple process. The rest of this tutorial assumes that you have signed up for a "Business" Account.
STEP 2: CREATING YOUR ANIMOTO VIDEO
The interface is very user-friendly and they make things very simple for you. To create a new video, simply click "create video" on the top left corner. You'll then be presented with this screen:
The directions on the right are self explanatory. For my purposes, I made a full-length video which basically means anything longer than 30 seconds. If you want to showcase anything more than 12-15 images, then a full-length video is the way to go.
STEP 3: GETTING YOUR IMAGES INTO ANIMOTO
After selecting a full-length video, you will be asked where your images are located. You can either upload these from your own computer or select from their range of stock photos, although the best thing is that you can import them all directly from your Smugmug galleries:) Simply click "retrieve from another site"...
STEP 4: SELECTING YOUR SOURCE
Smugmug of course:) But as you can see, it's just as easy to upload photos from your Flickr, Facebook, Picasa and Photobucket accounts.
And viola! Your Smugmug galleries are all listed for you to select from:) To retrieve photos from a particular album, all you have to do is mouse over the 'retrieve' circle and a tick will appear. Then just click on it to allow ANIMOTO to retrieve your gallery photos. (This can take a few minutes depending on the size of your gallery.)
***GOTCHA***
See the GOTCHA in STEP 8 on watermarking before you proceed.
After your photos have been downloaded from the gallery you've selected, you can Add more photos from other galleries. The only thing is that this can sometimes be cumbersome as it downloads ALL the photos from the next gallery you select even if you only want one photo from it. Then, deleting photos you don't want becomes much more tedious as there is no "shift-select" option to quickly select multiple photos in a sequence to delete and you'll have to go through them one by one with "apple-select" instead. Hopefully, this feature will be added in future.
STEP 5: ARRANGING YOUR PHOTOS
Once all the photos are downloaded into your window, your next task is to then re-arrange them in the order that you'd like them to be played in the video. Simply click and drag your photos to where you want them to go. It's also simple to delete or rotate photos with the menu below. A really nice feature that I use often is the "Spotlight" which basically assigns more attention to a particular photo, so it's especially good to use this for your 'money shots'. Try not to use it on too many images or else it becomes less effective.
As you can see on the right panel, the info box shows you how many photos being used in this video as well as the estimated length of the video. One other nice thing you can do is to add your own text which you can place anywhere in the sequence. It just shows up as another little square box that you can drag around as if it were one of the photos. The text is also rendered very nicely, looks really slick and professional, and if you want, is a great way to add any extra information or marketing details within the video clip.
Now click 'continue' and the next step is to select your music.
***GOTCHA***
Sometimes if you're logged in to Smugmug whilst logging in from ANIMOTO, it doesn't see all of your galleries. Simply log out of Smugmug from your browser and try accessing your galleries in ANIMOTO again.
STEP 6: SELECTING YOUR MUSIC
You'll be asked to select music from ANIMOTO library, or from your own computer. Once again, especially when used for Business purposes, you will obviously only be able to use music that you have the rights to. As you can see below, there are 8 genres that you can choose from – the ones that aren't visible in the pic are: Latin, Jazz, Classical, Country, and Children's. You can browse through their whole collection of music and preview the tracks as well as get more information about the track and the artist.
I especially like this as it's a way for new and upcoming artists to promote their music as well as for me to discover new music. So go ahead and select your track. Don't worry if you're unsure of how the video will look with the music...the great thing is that if you don't like it, you can just select another song afterwards and let it create a whole new video:)
STEP 7: CUSTOMIZING YOUR VIDEO
Here, you can select the speed of your video as well as add a "Call to action" button which will appear at the end of the video. When this "Call to action" button is clicked by the viewer, it will basically take them to whatever URL you enter as the button link, so you might want to take them to a specific gallery, your bookings page, buy now page, or to another website – basically, it becomes a great marketing tool for you to do whatever you like with it. To see how I have used it, simply watch the video at the top of this post until it ends. Then, you will see 3 icons pop up. Mouse over the Home icon on the left and you will see that it says "Go To Gallery". When you click on this, it takes you to my gallery of photos that were featured in the video. Simple:)
***GOTCHA***
The "Call to action" button only works when you're using ANIMOTO embed code. If you download the video and then upload it again onto youtube or any other website for instance, the "Call to action" button will not work.
Finally, you can select the image which will be the Video Cover for your clip.
Click 'continue' and then enter information which will be shown at the end of video credits. If you don't want these credits, simply tick the box at the bottom to turn them off. I personally quite like them and they also show the name of the track that was played as well as the artist, so you'll be helping them to promote their music as well:)
STEP 8: PRODUCING YOUR VIDEO
After you click on Create Video, the next step is to simply wait, which is the exciting part:)
The message warns you that it may take up to several hours for the rendering to finish, but it depends on how many videos are being rendered at the same time. Personally, I have made many full length videos already and I've found the time taken to render to be on average about 15-20 minutes or so, but once again, this may vary. In any case, you will get an email to notify you when it's done.
Once the video is complete, you can watch it through. It may be perfect, or you may want to make decisions on any changes you want, such as re-arranging the order of photos, adding or deleting photos, changing the spotlighted photos, the music, the text, or your info details etc.
***GOTCHA***
As you can see from the image above, I forgot to remove the watermark from my images, and slideshows with watermarks look ugly so you'll want to remove them before you add these photos to your clip. The simple way is to go to the gallery settings and DELETE all the watermarks from the images prior to uploading, and then applying the watermarks back on once you've finished creating your video clip. Remember that it takes some while for watermarking deletion or addition to take effect, so just check they're all done before you retrieve the images. It will save you a lot of time re-rendering if you just miss one photo. :)
A nice feature is the One-Click Remix where ANIMOTO will put the photos and music through its algorithm again and come up with a completely different video clip. Often there may be a transition that doesn't look quite right or that could be improved and this is probably the easiest way to fix it without changing much else at all. Bear in mind that it will have to go through the rendering process again so you will have to wait for the next version of the clip to finish rendering. Otherwise, if you do an Editing Remix, you're free to change the music, images, and video settings as well. Before they remix the video, versions of the old one will be kept so that you can always go back and compare the different versions to see which you like best.
As you can see from the other icons on the bottom bar, you can email the video, easily post or embed it online to a whole host of blogs or social networking sites, download the video in an mp4 format playable on Quicktime, export it to Youtube, upgrade to DVD quality (USD$20+S&H for a physical DVD, but FREE to Business Account holders for a ready-to-play high-res mp4 file, or a ready-to-burn to DVD ISO file), as well as an option to watch it on your iPhone on fullscreen – great if you want to easily showcase your work to others when you're out and about. I have to say, the quality and smoothness of the video on the iPhone is very impressive!
And a fullscreen view...
[Note: To embed your video, simply click on the embed "pin" icon and it will give you the html code to paste into your blog or website.]
STEP 9: DOWNLOADING YOUR VIDEO
What I usually do is to download the video in DVD quality as an mp4 and then upload it to Smugmug. The great thing about Smugmug is that if you upload a large high res file, for those on slow internet connections, they can still choose to view it at the smaller size. Select the DVD icon and the $0 option. It's $0 because you're a Business Account holder which means you have unlimited downloads of the files available to you.
Then download the .mp4 and .iso files. The .iso file is used for burning a DVD but we only need the mp4 file here for the website.
STEP 10: CONVERTING MP4 VIDEO INTO MOV
I learnt the hard way that if you upload MP4 videos from ANIMOTO to Smugmug, you will get really bad audio glitches as the audio is not compatible with Smugmug. So thanks to Tristan at Smugmug support, I was directed to using MPEG STREAMCLIP which does the conversion and fixes the sound issue. Follow the instructions from the Smugmug Wiki.
Smugmug says in the Wiki that you should use the Simple or Ye Olde Faithful uploaders, but personally, I have found the Ye Olde Faithful to be much more reliable method of uploading your videos. (With MPEG STREAMCLIP, you can also change the size of the video that you want to encode. Bear in mind that if you decide to scale your images larger, the quality will depend on the size of your uploaded images.)
STEP 11: UPLOADING MOV CLIP INTO YOUR SMUGMUG GALLERY
Now that you've convert
ed your mp4 into a mov clip, you're ready to upload it to your Smugmug site. Almost.
There are a few things you must make sure you do beforehand which will ensure you don't waste hours of your time having to re-upload your videos. Currently, there is a bug in Smugmug that if your gallery is set to automatically watermark images, it will actually watermark your video and this is NOT reversible. Your only option is to re-upload the whole video again after you change the gallery settings.
So, in the gallery that you plan on uploading your video clip to, make sure that you:
a) TURN OFF WATERMARKING (It won't affect any images you currently have in the gallery which are already watermarked)
b) SET EXTERNAL LINKS TO "YES"
Now you can use the Olde Faithful uploader and upload your video clip to your Smugmug gallery.
Once the video is uploaded, make sure that the "hide photo" option is left un-ticked.
STEP 12: SELECTING YOUR VIDEO PREVIEW IMAGE
Once you've uploaded the mov file into your gallery, you should set a Video Preview Image for it, or else it will take an image from within the video itself, and as the images are rarely full sized or stationary during the video clip, it doesn't make a great preview image.
Click on the video in your gallery. Then go to Tools>More>Replace Video Preview Image (see below)
You will then be asked to choose a file from your hard drive but the image MUST match the dimensions of the video exactly (and it will tell you what this is), and in my case, it was 1280x720.
As you can see, the video is now uploaded into my Looking Glass Photography's Surfing gallery.
You may be happy to direct your clients directly to the video link and let them play it directly from the gallery, which is the best option if you want it to be viewed in the high res version that you created and uploaded.
However, I also wanted to embed these videos towards the top of my galleries as a 'preview' which I mentioned at the start of this tutorial and as you can see from the link here.
STEP 13: EMBEDDING YOUR ANIMOTO VIDEO CLIP IN YOUR SMUGMUG GALLERY PAGES
This part was tricky and I got some help from family_guy and hyachts on Dgrin initially which worked if I only wanted to embed one video at the top of my gallery list, but I actually wanted to have the option of placing them literally wherever I wanted in either the Gallery lists or the Sub Gallery lists etc. John (jfriend) had written some awesome code previously which would help me do exactly that.
Before you go further, you need to click on the video clip in your gallery, click on Share>Get A Link>Video Embed>Web
and copy the html shown there which you will then need to embed into John (jfriend)'s code. In the example below, simply replace the html code for my video with yours. Bear in mind that the code below is to embed 2 videos into two separate galleries.
Below are John (jfriend)'s very clear instructions and his code has been kindly made available to be copy and pasted from this post on Dgrin. Thanks John!
Here's what you do to get them in your categories/sub-categories where you want them.
Add the code below to your Bottom Javascript in you site-wide-customization. It should just work for the two videos you've posted so far. The way it's done here, the video is on the left side of the screen. If you want it formatted differently, we can add a little CSS to do that. Just let me know.
If you want to add another video, you just have to do two things. First, make a new variable myVideo3 (just like myVideo1 and myVideo2) that has the exact HTML for the video with a single quote before and after it and a semicolon at the end. Then, down in the script where I've marked in red, you add one more entry to the table that points to myVideo3. It can be either just a category name like "Travel" or a category.subcategory like "Travel.Cambodia". You just copy the format of the previous entries when adding a new one to the table. The only trick to adding an item is to make sure there is a comma between each line, but no comma after the last one in the table.
Add the code below to your Bottom Javascript in you site-wide-customization. It should just work for the two videos you've posted so far. The way it's done here, the video is on the left side of the screen. If you want it formatted differently, we can add a little CSS to do that. Just let me know.
If you want to add another video, you just have to do two things. First, make a new variable myVideo3 (just like myVideo1 and myVideo2) that has the exact HTML for the video with a single quote before and after it and a semicolon at the end. Then, down in the script where I've marked in red, you add one more entry to the table that points to myVideo3. It can be either just a category name like "Travel" or a category.subcategory like "Travel.Cambodia". You just copy the format of the previous entries when adding a new one to the table. The only trick to adding an item is to make sure there is a comma between each line, but no comma after the last one in the table.
***GOTCHA***
As you can see from the example above, I had videos embedded into my "Travel" gallery and my "Cambodia" sub-gallery. This works fine but if your gallery name has commas in it such as "Central Coast, New South Wales, Australia", you will need to remove the commas in the code but leave a single space between each word so that it becomes "Central Coast New South Wales Australia". Also, if you need to reposition your video on the page, you will need the help of a CSS customization guru as I have no expertise in this area:)
The other great thing about having a Business Account is that you're still free to make personal videos for your own use and it's a great to be able to send your friends and family a snazzy video of your photos rather than just pointing them to your Smugmug gallery:) Being able to upload them to your Facebook account is also a great way to share them with your friends and contacts. Lastly, ANIMOTO have an affiliate program that provides you with badges to embed on your website or blog.
I know this tutorial has been very long, but I hope it's been helpful as I had spent nearly a couple of weeks figuring all this out (with the generous help of others) and getting everything working in the end, so hopefully it will save a lot of time for those who want to do something similar for their site. Have fun making your own video clips!
Finally, here are some other examples of videos I've created with ANIMOTO:
Nelson
Posted by Nelson Lau
