SiteSpinner Pro Tutorials: Embed File or Media in Web Pages

Embed File or Media

You can import things into your web pages and treat them as objects. To distinguish these from those that SiteSpinner itself creates, we refer to them as "Imports" or "Foreign" . For example, if you import an audio, video, or Flash™ file -- these are imports. Also, you can embed other pages or images from inside or outside your project into your page using an i-frame. Again these are "imports", although strictly speaking, pages from your own project are not. On this page we cover the following topics:

Introduction
Publish File
HTML (IFrame) very briefly. Full treatment is in the I-frames tutorial.
Flash™
A Flash™ working example
Video and Sound/Music
Format Type vs Publish Folder

Introduction

The Embed File or Media Editor, sometimes also called the "Foreign Object Editor", is located on the Tools (left) tool-bar. Use the "Format" drop-down list box at the top right of the editor to choose the type of file you want to embed into your page.

Some of the more common Embedded Object Formats:

Publish File

The Publish File option uses the Publisher to upload to your web host, a file that is not embedded anywhere in your project. It is an external file of some kind.

Before using this format, make sure you can't link to your file with a standard file link, which can look after both the link and the file upload for you.

Suppose you have a photo album that you want your visitors to be able to view. This can be made with a third-party tool, one that specializes in photo albums. The album itself might consist of some html pages. SiteSpinner will know about the first page because you can tell it in a standard file link. And it can upload that page automatically.

But SiteSpinner does not read the first html page to know what the other links are. Therefore you have to tell it to upload the other pages -- you can do that by making each extra page an Embedded Object, and SiteSpinner will then look after the upload. Failing that, you have to upload the extra pages yourself via a separate FTP program -- e.g., the one in Windows.

To have SiteSpinner do the upload:

Open the Embed File or Media Editor
Open the Format drop-down list and select Publish File
Browse for the file using the Filepath button
Click OK
Make sure you have Gather set in the Publisher (pages tab)

This creates an object in your workpage that you can position anywhere you want, and make whatever size you want. Small is best! When you publish your page, SiteSpinner will gather up the file together with the rest of the objects that make up your published page.

This feature works only if you use the Gather option when publishing your project.

After the first publish, the file does not need to be uploaded again unless you modify it. That means you can safely delete the Embedded Object from your page and save on upload time.

The default operation is to gather all Publish Files into your root folder. See Publish: Sub Folders for details on how to change this.

In practical terms, because you have to create a separate Embedded Object for each file to be uploaded, you would not use this approach if you have more than about ten extra files to upload. Much better is to use a separate FTP (file transfer) program to do the upload -- there is one built right into Windows.

HTML (IFrame)

I-frames allow you to embed one web page into another. An i-frame is effectively a window to another page. While "Frames" used to be a popular design technique for web sites a while back, i-frames are now a more advanced option.

This is a sufficiently important topic to justify a whole tutorial of its own. See the I-frames tutorial.

Flash™

If you want to display video or play music on your site, Flash is the best choice -- simply because it is a common platform installed on most computers. Without it, you are at the mercy of whatever media players your visitor has installed -- and they may not be ones that do justice to your content!

If you have a Flash file or have created one with a Flash creation program, embed the resulting .SWF like this:

Open the Embed File or Media Editor
Choose Flash from the Format drop-down list -- SiteSpinner will automatically enter the standard Flash file format parameters
Click the Filepath button to find your file
Click OK

You can now position and size your Flash file anywhere on your page.

A Flash™ working example
Below is a simple example of a Flash animation:

Often a Flash animation will consist of several files that you need to have in special folders or perhaps the root folder of your site. This animation consists of three files:

the swf file itself -- fsimpact.swf
a jpg image: fsimpactimage2.jpg
a jpg image: fsimpactimage1.jpg

The overall effect is a fancy fade from one image to another. To run properly, the images must be in the same folder as the your html files -- but some of the animation will still run without them.

To upload the images to your site you need two Publish File format Embedded Objects -- one for each image. Done here (in workpage view, on the left).

To preview, you need to copy the two images into your preview folder, alongside the html files. See Preview: Adding files to the preview folder.

Video and Sound/Music

If you have a video, sound effect, or music file you want to embed into your page, SiteSpinner will try to automatically find the right parameters to handle the file correctly.

In order for visitors to see or hear your file, they will need the appropriate player on their system -- most systems have these players built-in. To add sound or video to your page:

Open the Embed File or Media Editor
Select Video or Sound/Music from the drop-down Format list
Click the Filepath button and browse for your file
There are three boxes along the bottom, starting with Auto Start, that you may wish to change. The Visible Control box has no effect in some browsers such as IE8 (Internet Explorer 8)
Click OK
Position the Embedded Object where you want the visible player to be positioned
Size the player by changing the dimensions of the object box on your workpage

If you want to embed your audio file into your web-page without a visible player, consider the Page Editor > Music function.

Format Type vs Publish Folder

If you display or use any file on your local disk with the Embedded Object Filepath or Page List button, SiteSpinner will upload the file to your web-host automatically when you publish -- provided you use the Gather option in the Publisher.

The location of this file is determined by two factors:

The Embedded Object Format
The Publisher Pages > Sub Folder settings

Following are the relationships between the Embedded Object Format type and the Publisher Pages > Sub Folder:

The publisher pays no attention to file extension. The embedded object "Format" sets the publish placement. Note the "Other File Type" -- this offers an independent file placement to "Publish File".

If you set a folder name blank in the Publisher Sub Folders, that type of file -- if any -- will go to the root folder of your site.

So if you want an Embedded Object to go to a particular folder:

Set the Embedded Object Format
In the Publisher > Pages > Sub Folders set the matching Sub Folder name, or use a blank. Don't overlook the "Use More Categories" checkbox

Embedded Object	Sub Folder
Publish File	External Files
General Plug-in	Plugins, Java Files
HTML (IFrame)	Embedded HTML Files
SVG	Embedded SVG
Java Applet	Plugins, Java Files
Shockwave	Embedded Flash Files
Flash	Embedded Flash Files
Quicktime	Video Files
Realaudio	Sound Files
Video	Video Files
Sound/Music	Sound Files
Other File Type	Other Foreign Objects