Presenting student videos in iTunes coverflow November 18, 2008
Posted by Steve Boneham in : HowTo, projects, video , trackback
A key aim of our virtual open day project was to present video profiles of students in an engaging and informal way. I’d seen a couple of sites using an iTunes-esque coverflow to do this, but assumed this would need some pretty intense Flash coding. Turns out that it does, but luckily someone else has already done it and shared it with the world, so all you need is a text editor and about 5 minutes.
First, a little background. The virtual open day project aims to exploit web technologies to recreate the experience of an on-campus open day to support recruitment in Politics. One of the most important things prospective students do on a real open day is to talk to current students to find out what it’s really like to study here. So that’s what we needed to capture on video.
It was a pleasant surprise how keen students were be recorded (even taking into account a small financial inducement) and how media savvy they were. Being in front of a camera didn’t faze them in the slightest - more than can be said for some of the staff!
Once we’d captured and edited the videos, I wanted to find an engaging way to present them. This is marketing after all. In terms of user experience, there’s really only one choice of target player these days - the Adobe Flash player. This is almost ubiquitous, can be embedded directly in web pages and is quick to load and playback media. So, I published the videos as FLVs in Camtasia Studio and then looked for a way to deliver them.
Inspiration came via an article in Dot.net magazine on recreating the coverflow effect used in iTunes. This article led me (by way of Google) to an alternative open source coverflow template freely distributed under an MIT licence. This is an Adobe Flash application that reads data from an XML file and displays it in the coverflow format.
It’s very simple to get this working in its ‘vanilla’ state and not too much more effort to tinker with it to tailor the appearance and functionality to your site - like this…
View the open day videos in coverflow
For users who don’t like the coverflow, or can’t use it, we also offer access to the videos through a page of static image. For me, this just shows that there’s no comparison when it comes to which approach is more engaging and visually attractive. So, if you’re looking for a different way to deliver content, I’d recommend giving this a try and let me know how you get on.
Full Posts
Twitter
Delicious
Slideshare
JISC Netskills
LinkedIn
Comments»
Glad you like the code.
I’m working on a new one that when you click on the image it flips the image enlarges it and plays a video on the other side.
Also check out the HD Video Player with Coverflow Menu:
http://www.weberdesignlabs.com/blog/?p=28
All you need is a text editor and 5 minutes to do this???
Sounds Great! However, I’ve been staring at one I downloaded from weberdesignlabs, and I’m not surewhere to start!
Please help! Need it soon!
I’m happy to help you if I can, but will need more details about what you’ve tried and the problems you’re having. You might also want to check out the discussions on the developer’s blog for problems others have had and their solutions:
http://www.weberdesignlabs.com/blog/?p=11
Here’s the link from the site where I got the source files: http://www.wberdesignlabs.com/blog/?p=11
I’m using Dreamweaver8…so I downloaded the folder under the word “Recommended”..basically the 2nd DW folder.I’m not sure where 2start.I viewed the flash files/looked @the action script, the jpgs & the html file..I’m not sure where to start. Am I basically cusomizing the action script & bringing in my own jpgs//not sure where to begin.Please help
If you extract all the files from the zip archive you downloaded from weberdesignlabs, you should see a fully functional demo when you open the web page ‘iTunesAlbumnArt.html’ in a browser.
To change this demo to use your own images, all you need to do is edit the XML file ‘albumninfo.xml’. You can do this in any text editor such as notepad.
Change the contents with each of the tags <artLocation> albumn1.jpg </artLocation>to point to your images. Also change the other tags to change the text displayed with the images. Then reopen the HTML page and you should see your changes.
You can do more to customise the appearance within the Flash (.fla) file, but given that you don’t have much time left for your project, maybe leave this for next time. Hope that helped and you get it done in time!
The Dec 21 instructions are clear but in my sample (community 8.) it shows the bar and plays automatically…where are those controls set?…I would like to click the image and not display the h-bar (and change the background color).
Hi Randy,
These changes need to be made in the Adobe Flash file (iTunesAlbumnArt.FLA).
To change the background colour, change the colour of the Stage. To get rid of the scrollbar, delete the movieclip (scrollBar). Changing the reflection colour to match means changing some ActionScript variables (line 35 & 49). Not sure about the autoplay issue.
Very clear, thank you, but it ‘auto-plays’ through all the images… no clicking needed. And when you say “reflection colour” is that also opacity (the Psych school example is perfect…and I would even like to reduce the size of the mirror portion to make it fit into a tighter vertical space). Lastly, do you accept donations? I will be using this for a commercial site and fair is fair.
I just used a white reflection colour on a white background, but I think you can control the opacity with the ActionScript var ‘reflectionAlpha’. There are other variables that control the size of the images and the reflection.
In v8, it looks like you should be able to turn off the autoplay in the Actionscript (line 58) by setting: var autoNextP:Number = 0;
I can’t claim to be an expert on this, so you might also want to check out the blog of the person who is - Stephen Weber of Weber Design Labs (http://www.weberdesignlabs.com/blog/?p=11). This is where I picked up enough knowledge to make it do what I wanted.
As to donations to me - that’s not neccessary, thanks! I’m just passing on the good work that Stephen did. I would be interested in seeing how it looks when it’s finished though.
I have questions regarding this itunes album art - One, I have searched extensively on forums and been unable to find how to make the AutoNextP work…I have changed the “0″ to “1″ to turn it on, but nothing ever happens. Two, I would like for the album covers to continue rotating through and never stop…just to keep looping, is that possible? Any help would be appreciated. Thanks - love the application!
@karen - autoplay is the default behaviour in the version ‘Flash Coverflow Community Edition - Flash8 (16588)’ available to download from the weber design labs site. More recent versions of Flash can open and edit this if you need to change other aspects of it.
When this version reaches the last item in the album, it loops backwards.
Hope that’s of some help - good luck with it!