Placing Media

From Documentation
Jump to: navigation, search

Placing Media

Media such as sound and video give a site impact. The tools in NetObjects Fusion make it easy to add a variety of media files to your pages.

Inserting a Flash File

With Flash from Macromedia, you can create rich Internet content and applications. NetObjects Fusion supports Flash (.swf) and Splash (.spl) files.

To insert a Flash file:

  1. In Page view, select the Flash tool from the Plug-Ins toolbox.
  2. Draw a box to indicate the Flash file's location on the page.

The Open dialog appears.

  1. Select a Flash file from your hard disk or LAN, or select a Flash file already in use in the site from the Plug-in Assets tab.

For information about using assets, see Managing Assets.

  1. Click Open.

The Flash placeholder appears on your page, and the Flash Properties panel appears. The name of the selected file appears in the File field on the General tab.

  1. To provide text for the browser to display if it cannot play the Flash file, enter a description in the Alt Tag field. See Adding and Modifying Alt Tags.
  2. To play the latest Flash movies, you sometimes must change the version. You can find complete information at http://www.adobe.com/support/flash.
  3. Click the Enable Live Preview check box to preview the Flash file in Page view. If unchecked, a placeholder will appear in Page view.
  4. Click the HTML button to insert HTML tags and scripts. See Working with HTML Directly.
  5. Click the Controls tab.
  6. To control the display when using anti-aliasing, select a Quality option.
  • AutoLow sets the default to normal quality. The host computer uses high quality if it has the capacity.
  • AutoHigh starts the movie in high quality. The host computer uses low quality if it cannot display the movie in high quality.
  • High anti-aliases the movie on any computer.
  • Low uses a normal quality so the movie displays quickly.
  1. To determine how the movie fits in the image frame, select a Scale option.
  • ShowAll displays the movie within the frame but maintains the image proportions.
  • NoBorder displays the movie so it fills the frame but maintains the ratio of the animation. Some edges of the animation might be trimmed.
  • ExactFit displays the movie exactly within the frame.
  1. To specify the movie's alignment within the frame, select an Alignment option, such as Left, Bottom, or Top Right.
  2. To control the movie's opacity or transparency, select a WMode option.
  • Window plays the movie in its own window on the page. This is the default value for wmode and it works the way the classic Flash Player works.
  • Opaque makes the movie hide everything behind it on the page and moves elements behind Flash movies (e.g., dynamic HTML) to prevent them from showing through.
  • Transparent allows the background of the HTML page, or the DHTML layer underneath the Flash movie or layer, to show through all the transparent portions of the movie. This allows you to overlap the movie with other elements of the HTML page.
  1. To play the movie automatically when the site visitor opens the page, select Auto Start.
  2. To replay the movie when it ends, select Loop.

You can add an action to an object using the Actions tab. See Building Dynamic Pages.

Inserting a Shockwave File

With Shockwave from Adobe, you can create multimedia, graphics, and audio that downloads quickly. NetObjects Fusion supports these Shockwave file formats:

  • Shockwave for Director 4.0 and 5.0 (.dcr)
  • Director(.dir) 5.0 or greater
  • Protected Director (.dxr)

To view these files, site visitors must install the Shockwave plugin appropriate for their browser and platform. These plugins are available from the Adobe website at www.adobe.com.

You cannot directly add a Shockwave audio (.swa) file to a page. You must embed it in a Director movie by passing it as a parameter to the movie, and place the movie on your page. Then in Assets view, add the Shockwave audio file as a file asset. Any Shockwave files you place on a page appear inline on the page itself.

To insert a Shockwave file:

  1. In Page view, select the Shockwave tool from the Plug-Ins toolbox.
  2. Draw a box to indicate the Shockwave Director file's location on the page.

The Open dialog appears.

  1. Select a Shockwave Director file from your hard disk or LAN, or select a Shockwave Director file already in use in the site from the Plug-in Assets tab.

For information about using assets, see Managing Assets.

  1. Click Open.

The Adobe Shockwave placeholder appears on your page, and the Shockwave Director Properties panel appears.

For most file formats, NetObjects Fusion sizes the Shockwave placeholder to fit the stage, which is the space where the animation appears. If automatic sizing does not occur, you must size the object manually. Check that you have the right browser plugin or ActiveX control installed. To obtain the ActiveX control, create a site with NetObjects Fusion that contains a Director movie, then preview the site with Microsoft Internet Explorer. The ActiveX control is automatically downloaded and installed. If you don't have Internet Explorer, you can download the current Adobe Director plugin at http://get.adobe.com/shockwave.

The name of the selected file appears in the File field on the General tab of the Properties panel.

  1. To provide text for the browser to display if it cannot play the Shockwave file, enter a description in the AltTag field. See Adding and Modifying Alt Tags.
  2. Click the HTML button to insert HTML tags and scripts. See Working with HTML Directly.
  3. Click the Controls tab.
  4. Click the options you want, enter the parameter, and click the check mark.

If you've worked with Director files, you should be familiar with these options. For information, see your Shockwave or Director user guide.

You can add an action to an object using the Actions tab. See Building Dynamic Pages.

Inserting an Audio File

You can add audio files to your website for visitors to listen to. To play sounds, a system must have a soundcard and speakers. NetObjects Fusion utilizes native HTML5 audio for files including .ogg, .mp3, .webm, and .wav. Additional formats will fallback to a flash player. NetObjects Fusion represents the audio file with an inline player. When a site visitor clicks the play button on the inline player, the browser plays the sound file.

To insert a sound file:

  1. In Page view, select the Audio tool from the Standard Toolbar.

Audio.png

  1. Click on the page to indicate the location of the sound file.

The Open dialog appears.

  1. Select a sound file from your hard drive, or select a sound file already used in the site from the Audio Assets tab. For information about using assets, see Managing Assets.
  2. Click Open.
  3. The default player skin appears on the page, and the Audio Properties panel appears.

Audio-skin.png

The name of the file you selected appears in the Assets grid along with the location and MIME type. You can use the + button to select a different sound file.

2014-12-31 1305.png

  1. Click the HTML button to insert HTML tags and scripts. See Working with HTML Directly.
  2. You can add an action to an object using the Actions tab. See Building Dynamic Pages.

Inserting a Video File

NetObjects Fusion utilizes WebShims and polyfill for the best support of HTML5 video format across several browsers. You can also specify other formats manually by adding individual MIME types via the Asset Properties palette.

To insert a video file:

  1. In Page view, select the Video tool from the Standard Toolbar.

Video.png

  1. Draw a box to indicate where you want to position the video.

The Open dialog appears.

  1. Select a video file from your hard drive or select a video file already used in the site from the Video Assets tab. For information about using assets, see Managing Assets.
  2. Click Open.

The Video placeholder appears on the page, and the Video Properties panel appears.

Video-properties-tab.jpg

  • Video shows the location of the selected Video file.
  • Size includes standard and custom size options:
  • 560x315
  • 640x360
  • 853x480
  • 1280x720
  • Custom
  • Allow full screen allows or disallows the fullscreen option to be available in the video controls.
  • Auto start indicates if the video automatically plays upon load.
  • Loop indicates whether the video file will loop after initial play.

From the Advanced Settings tab:

Video-advanced-tab.jpg

  • Poster specifies an image to be shown while the video is downloading, or until the user hits the play button.
  • Controls indicates whether the video player controls will display.
  • Preload preloads the video file.

From the Assets Properties tab:

Video-assets-tab.jpg

  • Assets Grid allows for the manual selection of different MIME types.
  • HTML button to insert HTML tags and scripts. See Working with HTML Directly.

You can add an action to an object using the Actions tab. See Building Dynamic Pages.

Embedding YouTube

You can add video directly from YouTube.com using the YouTube component located in the Standard Toolbar. Embedding videos from third party services has many benefits including saving on bandwidth costs.

To embed a YouTube video:

  1. In Page view, select the YouTube tool from the Standard Toolbar.

Youtube.png

  1. Draw a box to indicate where you want to position the video.

From the YouTube Properties pane > Video Properties tab:

Video-properties-youtube.jpg

  • ID is a unique identifier for videos on YouTube.

Example: http://www.YouTube.com/watch?v=XXXXXXXXXXX where XXXXXXXXXXX is the ID.

NetObjects Tip: You should ONLY use the ID for your video, not the entire YouTube link.

Size includes standard and custom size options:

  • 560x315
  • 640x360
  • 853x480
  • 1280x720
  • Custom
  • Allow full screen allows or disallows the fullscreen option to be available in the video embed.
  • Auto start indicates if the video automatically plays upon load.
  • Loop indicates whether the video file will loop after initial play.

From the Advanced Settings tab:

Advanced-settings-youtube.jpg

  • Controls indicates whether the video player controls will display.
  • Auto hide indicates whether the video controls will automatically hide after a video begins playing.
  • Info indicates whether display information like the video title and uploader before the video starts playing.
  • Enhanced privacy means that YouTube won’t store information about visitors on your web page unless they play the video.
  • Modest branding indicates whether a YouTube logo is displayed on your video.

Inserting Vimeo

You can add video directly from Vimeo.com using the Vimeo component located in the Standard Toolbar. Embedding videos from third party services has many benefits including saving on bandwidth costs.

To embed a Vimeo video:

  1. In Page view, select the Vimeo tool from the Standard Toolbar.

Vimeo.png

  1. Draw a box to indicate where you want to position the video.

From the Vimeo Properties pane > Video Properties tab:

Video-properties-vimeo1.jpg

  • ID is a unique identifier for videos on YouTube.

Example: http://www.vimeo.com/XXXXXXX where XXXXXXX is the ID.

NetObjects Tip: You should ONLY use the ID for your video, not the entire Vimeo link.

  • Size includes standard and custom size options:
  • 560x315
  • 640x360
  • 853x480
  • 1280x720
  • Custom
  • Allow full screen allows or disallows the fullscreen option to be available in the video embed.
  • Auto start indicates if the video automatically plays upon load.
  • Loop indicates whether the video file will loop after initial play.

From the Advanced Settings tab:

Advanced-settings-vimeo.jpg

  • Title shows the title on the video.
  • Byline shows the user’s byline on the video.
  • Portrait shows the user’s portrait on the video.
  • Badge enables or disables the badge on the video.
  • Auto pause enables or disables pausing this video when another video is played.
  • Color Specifies the color of the video controls.

NetObjects tip: Do not include the # symbol.

Inserting Other Types of Files

Although NetObjects Fusion supports a wide variety of media files, you might have other formats, such as Adobe Acrobat PDF files, that you want to include in your site. You can place other files, including Adobe Acrobat, VRML, RealSpace FlashPix files, and Headspace Beatnik files, using the Plug-in tool.

When a site visitor clicks the document's icon, the file appears in the visitor's browser or downloads to the visitor's system. When you insert a file using the Plug-In tool, site visitors need the appropriate plugin for their browser and platform to use the file.

To insert a file using the Plug-In tool:

  1. In Page view, select the Plug-In tool from the Plug-Ins toolbox.
  2. Draw a box to indicate where you want to position the file.

The Open dialog appears.

  1. Select a file from your hard disk or LAN, or select a file that was already used in the site from the Plug-in Assets tab.

To display the various file types that NetObjects Fusion supports, use the Files of type drop-down list.

To insert a file that is not explicitly supported by NetObjects Fusion, choose All Files in the Files of type drop-down list, then select the file.

  1. Click Open.

The plug-in placeholder image appears on your page, and the Plug-In Properties panel appears. The name of the file you selected appears in the File field on the General tab.

  1. To provide text for the browser to display if it cannot display the file, enter a description in the AltTag field.
  2. In the Display section, select:
  • Play inline to display the file on the page in your site.
  • Launch from picture to use a picture other than the plug-in icon to represent the plugin. When site visitors click the image, the plugin opens in the window. Click Browse and select an image file.
  1. Click the HTML button to insert HTML tags and scripts. See Working with HTML Directly.
  2. Select the Advanced tab.

The Advanced options appear.

  1. Set the parameters. Because you can add different parameters for different files, see the associated user guide.
  • To edit parameters that appear in the Parameters section, double-click the parameter. Enter the value in the Add Plug-In Parameter dialog.
  • To add a parameter, click the plus (+) button and enter the parameter name and value in the Add Plug-In Parameter dialog.
  • To remove a parameter, select it and click the minus ( ) button.
  • To change the order of the parameters, click the Up or Down arrow buttons. The selected parameter moves up or down in the parameters list.

You can add an action to an object using the Actions tab. See Building Dynamic Pages.

Replacing a Media File

Sites are constantly changing and evolving. As you build your site or after using it for some time, you might want to change a media file that you used in a specific location. You can replace one file with another.

To replace a media file with a new file:

  1. In Page view or Assets view, double-click the media placeholder on your page.

The Open dialog appears.

  1. Select the new file and click Open.