Free technical help for digital creators - music, video, art, photography, graphic & web design

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

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.

View in Landscape mode or Swipe to scroll
Document type Cannot be "embedded" Can be "embedded" What can be linked
HTML Audio, video, images, animations, pdf etc Text, code (HTML, CSS, JavaScript etc) CSS, JavaScript, PHP, Images, audio, video, animation, pdf etc
Flash - Text, fonts, ActionScript, images, audio, video etc Text, fonts, code, images, audio, video etc
Director Video Text, fonts, code, images, audio etc Text, fonts, code, images, audio, video etc
Acrobat (pdf) - Text, images, fonts, audio etc -

Media (or assets)

Media files are individual audio visual elements which can be embedded or linked to a "document" 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 can have text, images, and fonts embedded in it
  • a Flash file can have text, images, audio, video, fonts etc 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)
View in Landscape mode or Swipe to scroll
Advantages Disadvatages
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 media makes a document bigger.

Following embedding, sometimes individual media elements cannot be so easily edited.

Web pages

Most media files CANNOT be embedded into web pages and must be linked to them. Web pages can have a very limited number of things in them including ...

  • code (html, CSS, JavaScript, php etc)
  • text

Why the <embed> tag doesn't embed!

In web pages, the <embed> tag allows a piece of media such as a Flash file (.swf) or video clip to be linked to an html document in a way that is often specific to a plug-in replay technology. When the page loads the file will play where it is positioned. This tag should be avoided if at all possible because it is largely deprecated and can produce unpredictable results.

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.

View in Landscape mode or Swipe to scroll
Advantages Disadvatages

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.

  • 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, except by using the new @fontface tag. 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

View in Landscape mode or Swipe to scroll
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.