video.Maru
by polyGeek polyGeek logo



 

Rollover effects for linkBTNs

December 9th, 2007 . by polyGeek

If you would like to create simple rollOver effects for the linkBTNs then just do this:

  • Inside the linkBTN create a MovieClip and give it an instance name of over.

The over MovieClip will play when the user rolls the mouse over the linkBTN. And it will play backwards when the user rolls the mouse off of the linkBTN. This works for linkBTNs that are placed on the stage or created at runtime via XML.

Here’s an example ( download source )

You’ll need the latest version of video.Maru for this to work.


Get the duration of all your videos in an XML list

October 26th, 2007 . by polyGeek

A video.Maru user came to me with the following question:

How can I display the duration of a video in the linkBTN when using XML to describe a list of videos to play?

There are two ways to do this: One, you could just add a duration tag to the XML along with all the other children of each video node. Then use the video.Maru API to give you the XML and then manually run through each node and apply the value to the appropriate linkBTN.

Note: you can add any tag you wish to the XML: rating, color, viewedCount, whatever. But video.Maru doesn’t know what to do with that data. It doesn’t even look at it. So you’ll have to do that on your own with the API.

I’ve added a few calls to the video.Maru API to help with looping through the linkBTNs.

function getLinkButtonArray():Array
This will return a list of all the linkBTNs that were created from the XML. You’ll need to call this function from inside videoMaruCreationComplete. With this you will have a way to loop through this array and say something like:

In the above function I already have an array of the durations of all the videos - durationsArray. The linkArray contains a reference to each linkBTN. And inside each linkBTN I’ve added a TextField named duration. Here I’m just giving it a text value.

You’ll also notice that I’m using another new API call: videoMaru.formatTime.

function formatTime( s:String ):String
This takes a string that is the number of seconds in the video. If a video has a duration MetaData then it’s in seconds. But you don’t want to tell your users that a video is 175 seconds long. You’d rather tell them that it’s 2:55. That’s what this function does. It returns a string that is properly formated to display your video duration.

Let video.Maru do it for you

Now, if for some reason you can’t add the duration tag to your XML yourself you could have video.Maru do all this for you. With a little help from the API. To get the metaData from a FLV file you need to play it. No way around that. But you don’t have to play the whole thing. Just a tiny bit and you’ll have the metaData that you need.

So what you do is play each video in turn. As soon as the video returns the metaData, via the API, you play the next video, rinse and repeat until done. At each step you store the duration value from the metaData. Then when you’re done you can apply the data you have to each linkBTN as shown in the first case.

Here’s the code that will do that for you:

The downside to all that is the videos flash across the videoWindow as you loop through each video. There are two solutions that I can think of: one, place an image over the videoWindow and then remove it when you are finished looping through all the videos. Note: you will need to place the videoWindow inside a holder clip so that it doesn’t end up on top of your image at runtime.

The second solution is to have two entirely separate versions of video.Maru running. One for your users to see and the other, off stage, for getting the duration data. When you finish looping through all the videos you simply set video.Maru to playing a non-existent video, such as “”. Then you apply the steps from above. It’s all a matter of targeting the correct MovieClips. I’ll leave that as an exercise for the reader. :-)

You’ll need the latest version of the video.Maru SWC to access these new API calls.

Enjoy.


XML Extended

June 24th, 2007 . by polyGeek
polyGeek TV If you liked the first video tutorial on XML with video.Maru then you’re gonna love this one.

Note: this takes off where the previous page/tutorial - XML Basics - left off.

If you would like to spruce up your linkIcon with a little icon or thumbnail of the video then you can add a MovieClip to your linkBTN with an instance name of linkIcon. To describe the image/swf to load into that linkIcon go over to your XML and add an attribute to the video node in question like this: iconsrc=”folder/path.png”

That image/swf will then get loaded into the corresponding linkBTN. The size element that gets loaded will default to it’s native size. If you would like to resize it then add the attributes: iconWidth/iconHeight to the node in question.

You’ll notice that the loaded element is always centered inside the linkIcon MovieClip.

Titles and descriptions

video.Maru makes it very easy to display the title of the video and also a description of the currently playing video. Simply create a TextField with an instance name of videoTitle and then add a corresponding attribute to the <video> node in the XML of videoTitle=”someString”.

The description works just the same except the value in the XML for that TextField is the value of the corresponding <video> node. Below is an example of how that works.

Notice that the second node value uses CDATA. That’s a special way of embedding HTML code inside of XML. You can use any of the standard HTML tags that the Flash TextFields support.

This is just an overview of some of the XML support in video.Maru. Check out the complete XML documentation page for all the details.