Linking & embedding media files & code elements by Mark Cable & Matt Ottewill

Documents, media/content and code elements

It is important to understand the distinction between a document file and the media/content/asset and code elements that are either embedded in it or linked to it.

Documents

"Documents" can be thought of as being the "containers" in which media or asset files appear. Documents control layout, styling of text, positioning of images, playback of video etc. Typical documents include ...

  • HTML pages (with linked cascading style sheet, image, video, audio, Shockwave etc files).
  • Director movies (with linked video and long audio files).
  • QuarkXpress files (with linked images).
  • Final Cut Pro project files (with linked video, still image and audio files).

Media

"Media" (or content or asset) files are individual audio visual elements such as ...

  • Images.
  • Audio files.
  • Video files (QuickTime, AVI, MPEG etc).
  • Fonts
  • Flash movies.
  • Shockwave movies.
  • Cascading Style Sheets.
  • etc

Code elements

HTML, Director, Flash and Visual Basic etc "documents" and files will/can have code elements in embedded in them. Web pages (HTML) can have the following ...

  • HTML tags
  • CSS
  • JavaScript
  • PHP
  • etc

Linking and embedding

Media files can be linked to a document file or embedded in it.

What is embedding?

Embedding means “integrating” a media file (such as…image, font, sound etc.) into a document. The document becomes a single element with everything contained in it, for example, an Acrobat PDF document with text, images, and fonts embedded in it.

Media files you may want to EMBED include ...

  • Text
  • Fonts
  • Images
  • Small audio files (under 100Kb?)
  • GIF animations
  • Flash animations (in Director)

Embedding advantages…

  • Following embedding, media cannot normally be edited thus improving copyright security infringement issues.
  • Embedding means no media will fail to appear/playback.
  • Embedding often helps make a document X-platform compatible (Mac & PC)
  • Embedding a font means that text will always appear styled as you wanted it and no font substitution will occur

Embedding disadvantages …

  • Embedding media makes a document bigger.
  • Following embedding, sometimes individual media elements cannot be so easily edited.

The <embed> tag

In web pages, the <embed> tag allows a piece of media such as a Flash file (.swf) or video clip to be placed onto a web page (HTML). When the page loads the file will play where it is positioned. This tag should be avoided if at all possible because it can produce unpredicatble results.

IMPORTANT!!! The <embed> tag does NOT embed the file!!! It is still only linked!

What is linking?

In multimedia, the word linking is used to describe 2 processes ...

1 Linking pages or screens together

... also known as hyperlinks. This is the way that you navigate from web page to another. Click here for more advice.

2 Linking media files

... to a page/screen layout document, such as images to an html web page.

Linking media files

Linking makes all the media files (video, images, sound, fonts etc.) separate from the document.  The document “controls” layout, styling of text, playback of audio and video files etc.

e.g. In HTML (Web) page documents, images, fonts, sound, video, Flash, Shockwave etc. are always linked, never embedded.

Media and other elements that you will need to LINK include ...

  • Images (for web sites)
  • Large audio files (over 100Kb?)
  • GIF animations
  • Flash files (for web sites)
  • Shockwave Director files (for web sites)
  • Video files
  • Cascading Style Sheets (for web sites)
  • File downloads (such as PDFs, Word docs, free software, templates etc)

Linked media folders

With linking, all media files should be placed into separate organised folders (usually called “media”), stored on the same level as the document file, before being linked to the document. Click here for more.

Advantages of linking ...

  • Media can be shared between multiple documents ( such as a logo which must appear on every page of a website)
  • A document can load and unload media elements as and when it needs them thus improving load times and managing limited RAM in an older computer.
  • Media can be updated separately.
  • Multiple people can work on a document and its media files simultaneously.

Disadvantages of linking…

  • Unless media is carefully organised, the links between documents and media can be lost or "broken".

Fonts

Fonts CANNOT be embedded OR linked to HTML web pages. This means that you must style your site only with fonts which you can reasonably expect will be installed on an end-users system. Stick to ... Arial, Courier, Verdana and Times.

Fonts CAN be embedded in Shockwave (Director), Flash and PDF files.

Linking & embedding examples

Program Document / file format Embedded media/elements Linked media
Dreamweaver HTML Text, HTML tags, CSS, JavaScript, PHP and other code elements Images, fonts, audio, video, Flash, Shockwave, QuickTime, AVIs etc
Adobe PDF PDF Images, fonts, audio, video, QuickTime, AVIs etc NONE
DTP (Quark etc) Native Text Fonts, images
Director Movie (.dir) Text, fonts, audio, images, animation Video, text, fonts, audio, images, animation etc
Video (Final Cut, Premiere) Native NONE Video, images, audio
Flash .swf Text, fonts, audio, images, animation, video Text, fonts, audio, images, animation, video

Planet Of Tunes

This web site has the following linked and embed media files ...

Embedded >> Text, CSS, some JavaScript and PHP.
Linked >> Fonts, CSS, images, Shockwave, Flash, video, file downloads (such as word docs and PDFs).

Given Name

Given Name is an enhanced music CDROM which includes Director created interactive presentations for the PC and Mac. Click here for more.

The Director presentations have the following linked and embedded files ...

Embedded >> Fonts, text, images, audio.
Linked >> Video.

 

Related downloads

None at present

Free music MP3s

Free MP3 tracks

Related ads