Cutting out buttons from a background image in FSDL

Update 13 March, 2017: FSDL has been modified with the release of Frogans Player for developers alpha (v1.4.1), in particular with modifications to the values of the “visible” attribute in the <layer> element. The contents of this post and the downloadable resources have been updated accordingly.

Update 30 Nov, 2015: The “align” attribute has changed for the latest version of Frogans Player for developers alpha (v0.2.1). The contents of this post and the downloadable resources have been updated accordingly. Click here for more info.

Intro

There are tools and tricks in FSDL for getting the most out of the fewest imported image files. In this post, we’re going to look at the “selection” and “bounds” attributes in the <resimage> element. Together, they allow you to create resources from different parts of a same image.

A little background

FSDL allows you to import image files to use in your Frogans slides. You can use them as backgrounds and button images. You can combine them in layers to make original compositions.

At the same time, you don’t want to over-use imported image files. For one thing, each new image file adds to the overall volume of data that is downloaded by each end user – and FSDL sets limits on this volume for each slide.

Additionally, for each individual image file imported, Frogans Player must make an HTTP request over the network. And each HTTP request takes a certain amount of time (depending on the quality of the network connection, among other things), during which the user has to wait.

Fortunately, you can import multiple graphics from a single image and then place the portions of image that you need for composing your slide, using the “selection” and “bounds” attributes in the <resimage> element .

Putting it to work

Let’s put this idea to work by taking a single image that already has elements that can be used for buttons, like Rembrant’s “The Syndics of the Clothmaker’s Guild’ (or “The Staalmeesters”). There are 6 people depicted in the painting. Each one of their faces can be used as a button (perhaps linking to slides containing their biographies, shoe sizes, etc.).

staalmeesters


Importing a file

In an FSDL document we create a <file> element for locating the image file:

<file fileid='bkg_f' nature='static' name='/staalmeesters.jpg' />

Let’s use this as a backgound image in front of which we’ll place our buttons. So, we’ll create a resource (note that the value “bkg_f” of “fileid,” above, is the same as that for “fileref,” below):

<resimage resid='bkg_r' fileref='bkg_f' size='640,433' />

And then present this resource as a layer (note that the value “bkg_r” of “resid,” above, is the same as that for “resref,” below).

<layer resref='bkg_r' layerid='bkg_l' leapout='all' pos='0,0' align='left-top' combine='add' opacity='100' />

No that the file has been imported once, it (or parts of it) can be used over and over again without having to import it again.

Using the “selection” and “bounds” attributes

To create a button from the face of one the people in in the image, we’ll create a new resource from the same image, but in which the image is “cropped” around that face.

The first thing we need to do is determine the xy coordinates of the crop. This can be done by opening the image in Photoshop or GIMP, drawing a rectangle of the region to crop.

selection

In the screenshot of the Photoshop info window, above, we see that the selection is 65 pixels wide and 67 pixels tall. So, that’s going to be the size of our new cropped image resource.

20 x 148 in the screenshot, above, indicate the position of the mouse in the upper left-hand corner of the selection. We’ll need these coordinates for cropping the image in the right place.

Now, let’s put these numbers to use in a new image resource:

<resimage resid='face01_r' fileref='bkg_f' size='65,67' selection='extract' bounds='20,148,85,215' />

Note that “fileref” is still “bkg_f,” just like when we created the background image.

We’ve added two new attributes, “selection” and “bounds.”

  • The value of “selection” is “extract,” meaning that only a part of the image will be used.

  • The value of “bounds” represents the xy coordinates left (20), top (148), right (85) and bottom (215) edges of the image. The right edge coordinate is the sum of the x position and the width (20+65=85) and bottom coordinate is the sum of the y position and the height (148+67=215).

Now, if we create a layer, placing this new resource at the 20,148 xy coordinates, it will be perfectly aligned with the image below, so you won’t see that it is there.

<layer resref='face01_r' layerid='face01_u_l' leapout='all' pos='20,148' align='left-top' combine='add' />

Create a “relief” to show the button

To make it pop out from the background, we’ll add a special effect: “relief.” It’s kind of an inner shadow. First we define a subtle effect in a <setrelief> element

<setrelief reliefid='frame_rel'>
    <relief rpos='0,0' color='#ffffff' blur='2' opacity='50'/>
</setrelief >

 

Then, we insert “reliefref=’frame_rel'” into the <layer> element:

 

<layer resref='face01_r' layerid='face01_u_l' leapout='all' pos='20,148' align='left-top' combine='add' reliefref='frame_rel' />

…and we can see our new button image in all of its glory:

framing

Make a button

This layer can now be put into a button (see Button Basics for the how-to).

Here’s the contents of the button element where the rollover image (“visible=’focus'”) uses a “shadow” instead of a “relief” to make the rollover really pop out:

<button buttonid='b02' goto='slide' fileref='this_f' >
    <layer resref='face02_r' layerid='face02_u_l' leapout='all' pos='168,126' align='left-top' combine='add' reliefref='frame_rel' visible='selected' />
    <layer resref='face02_r' layerid='face02_o_l' leapout='all' pos='168,126' align='left-top' combine='add' shadowref='frame_shad' visible='not-selected' />
</button>

Here’s a screenshot with buttons made for all of the heads in the picture using this technique. The first button shows the rollover, where you can see the effect of replacing a subtle “relief” with a stronger “shadow.”

rollover

Using similar techniques, you can put all kinds of different button images in one imported file and place them as you like.

Click here for an archive of this slide. To view it in the Frogans Player for Developers alpha, place the unzipped folder “extract” in the “test” folder in folder containing Frogans Player. Then open a Frogans site using the address “test*extract”.

Be the first to comment

Leave a Reply

Your email address will not be published.


*