SiteGrinder Home > Learning Center > SiteGrinder 2 Hints > xmedia

Applies to: Image layers, text layers

Can be used in same name with: -grow, -scroll, -popup

Requires: SiteGrinder 2 Pro

Introduction

The -xmedia hint allows you to easily incorporate eXternal Media files into your Photoshop designs. These files can be local to your machine or can be linked to remotely across the internet.

All you have to do is create a rectangular area in an image layer, give it the xmedia hint, and tell SiteGrinder what media file you want to play there!

The following file types are supported as of SiteGrinder 2 Pro:

• Flash .swf files
• Flash flv, MPEG, QuickTime, and Microsoft Video files
• Animated gif files
• HTML files
• MP3 Audio files
• Static JPEG, gif, and PNG files

Layers with the -xmedia hint act only as placeholders. This means the layer contents indicate the size and position to be used for imported media, but the contents of the layer do not actually appear on the built page.

When the –xmedia hint is used in a document the External Media panel will become visible in the SiteGrinder Pro Window. For each combination of an –xmedia layer and a page there will be an entry in SiteGrinder's External Media Panel where you can select the source media file, output format and other settings.

There is a sample file employing an xmedia layer to import a flash file that you can access from the SiteGrinder report pane.

Tutorial: Using a multimedia file

Whether using Flash, Video, animated GIF, or remote image files, the steps are the same.

1. Identify the dimensions of the media you will be importing
2. Create an image layer in your Photoshop document
3. Select an area that matches your media dimensions with a color. (This is easily done using the marquee tool's Fixed Size style, or by watching the Info panel as you drag out the selection.
4. Fill the selection with a color
5. Pick a name for the layer and add "-xmedia" to the end of the name, ie "Home Movie-xmedia". The name doesn't have to match the file name, but if it does, and the file is in the folder that you optionally choose to be your Media Folder, SiteGrinder will match the layer to the file automatically.
6. Save the document and open SiteGrinder
7. Select the "External Media" panel

At this point you have two choices:

• you can click the folder icon next in the "External Media Folder" area at the top to locate your media folder. Once you do this SiteGrinder will match any xmedia layers to files in the folder you selected that match your xmedia layer names. ie "Simpsons Movie-xmedia" will match "Simpsons Movie.mpg" on the disk.

Or

• alternately you can locate the media for each media layer individually by clicking in the column to the "Type" column to the right of each entry and using the dialog that appears. If you type in a path or URL to a file you will need to click the "Update" button in this dialog.

Now you can build your document. SiteGrinder will copy all required media files that are on your disk (as opposed to remote files on servers) into a media folder inside your build folder.

Matching placeholder layers to files: The External Media Folder

While you are free to browse for media files manually for each -xmedia layer in the External Media panel of SiteGrinder, setting a specific external media folder allows for a convenient shorthand.

Rather than having to individually set a source file for each and every –xmedia layer on each and every page or derived page, users can put all their media willy nilly into a single folder folder, point SiteGrinder to that folder, and SiteGrinder will correctly match media to pages and layers and select output formats for you.

Thus a layer named cool movie-xmedia will be replaced by the file “cool movie.swf” located in the assigned external media folder when SiteGrinder builds the page.

Importing External HTML Files

WARNING: Including HTML from an external document into a SiteGrinder page can be dangerous. If the external douments contain nonstandard or broken HTML then the entire page may not display properly in a browser. Because SiteGrinder is not directly involved in creating these external source files, and because the potential for invalid documents to create havoc in the layout of the page is almost infinite, expect tech support to be limited for this feature.

SiteGrinder Pro can import and process both simple formatted HTML text and also complex HTML documents that contain hyperlinks, that reference external files, that contain javascript, and that use CSS styles.

Because the pixel height of the imported HTML an unknown size, it is extremely useful to combine the -xmedia hint with either the -grow hint or the -scroll hint.

Click here for a detailed discussion of importing html with -xmedia.

Advanced External Media Name Matching

If the file name of the media contains both the name of the page layer comp (minus the -page hint) and the name of the placeholder (minus the -xmedia hint) , more powerful matching is possible.

Example: if the page name is bugs-page, and the -xmedia placeholder layer is named bunny-xmedia, then a file named “BugsBunny.mpeg” (or “Bunny Bugs.mpeg” in the external media folder will automatically get placed into that placeholder when the page is built.

If that file doesn’t exist, then a file named “Bugs.html” (for example) would be chosen.

And if no file exists that contains the page name, then a file named after the placeholder itself (Bunny.swf) would be used.

This is particularly useful when using existing external HTML files. It essentially allows SiteGrinder to use Photoshop files to “skin” a website. Rather than individually using the UI to link up each external source file to a placeholder on a page, you can have SiteGrinder do it.

This feature is specifically made to work in concert with “derived” pages. So if you have a folder of HTML files (or other media) and a Photoshop design or two, you can have a complete site in minutes.