revUp - Updates and news for the Revolution community
Issue 91 | April 22nd 2010 Contact the Editor | How to Contribute

Revlets with Assets
How do I create a web-based revlet that references assets such as videos?

by Elanor Buchanan

One of the great features of Rev is that you can reference images, sounds and movies from external files and use them in your stacks. But can you do this with a revlet? Well yes, you can and this lesson will show you how.

Using a filename to reference an image

Media_1271433067567

Lets start with a very simple example. In Rev we can use the filename of an image file to display an image in our stack, this is particularly useful if you might want to change the image at a later date, you can just replace the file with no need to make changes to your stack or rebuild your standalone.

First we just need to add an Image Area to our stack, in this case lets call it "logo".

Setting the filename

Media_1271433289858

Now we set the filename of the Image Area, you can do this in script

set the filename of image "logo" to "G:/Documents/Elanor/Lessons/resource referencing/enterprise.gif"

or using the select button in the property inspector (1)

Relative and Absolute Paths

You can use both relative and absolute file paths for desktop applications, relative paths will always be resolved in relation to the current folder. For example

set the filename of image "logo" to "enterprise.gif"

Would also work here, assuming the current folder is G:/Documents/Elanor/Lessons/resource referencing.

Referencing an image using a url

Media_1271433859343

You can also use urls to refernce images. For example I have an image uploaded to my on-rev account and I can display it in my stack using

set the filename of image "logo" to "http://elanorb.on-rev.com/lessons/revLogo.jpg"

Referencing an image in a revlet

Media_1271434625440

You don't need to do anything extra to reference images from a revlet using filenames, there are just two small things to look out for.

1. You must use absolute urls
2. When you build your revlet make sure you select Network under the security settings so your revlet is allowed access to the resources

What about videos?

Media_1271435160107

You can use urls to reference sound and movie files in the same way as images, again revlets work very similarly to desktop applications you just need to ensure your stack has access to them. Lets create a simple stack that allows us to watch movies online using a revlet.

Firstly we will create a new stack, and add a player object called "movie" (1), a drop down menu called "clip choice" (2) and "Stop" and "Play" buttons to control our player(3).

Scripting our interface

Media_1271436272310

Now we need to script our buttons, Stop and Play are simple just

on mouseUp
    stop player "movie"
end mouseUp

and

on mouseUp
    start player "movie"
end mouseUp

Our menu is a little more complicated, but not much. First we add our options, in this example I am using clips of intevies with Charlie Faddis and Malte Brill from revLive.09.

Then we add in some script to the menuPick handler, this will set the filename of the player and put the movie back to the start.

on menuPick pItemName
    ## first we need to remove the spaces from the name of the interviewee
    ## this is because the urls do not have spaces in them
    local tItemName, tMovieURL

    put pItemName into tInterviee
    replace space with empty in tInterviee

    ## Now we build the url
    put "http://elanorb.on-rev.com/lessons/" & tInterviee & ".mp4" into tMovieURL

    ## Set the filename of the player
    set the filename of player "movie" to tMovieURL

    ## Set the movie back to the start
    set the currentTime of player "movie" to 0
end menuPick

Watch our movies in a revlet

Media_1271436572635

If you want to see this working as a revlet you can try it out at

http://elanorb.on-rev.com/lessons/movieplayer.html

About the Author

Elanor Buchanan is Consulting Project Manager for RunRev Ltd.

Main Menu
on revUp today
Spring Round-up
Revlet Assets
Lucky Three
DB Convert in Secs

What's New

Buy revStudio and add the 'Supercharger' pack at the checkoutBuy revEnterprise and add the 'Supercharger' pack at the checkout