DREAMWEAVER 6 Inserting Media Objects Media Object Types Plug-In Linking to media objects

Similar documents
understand how image maps can enhance a design and make a site more interactive know how to create an image map easily with Dreamweaver

Adobe Dreamweaver CC 14 Tutorial

ADOBE DREAMWEAVER CS3 TUTORIAL

Using Impatica for Power Point

Introduction to dobe Acrobat XI Pro

Premiere Pro CC Workflow Setting up your project

Introduction to Final Cut Pro 7 - Editing Basics

Comparisons and Contrasts Between imovie 2 and Movie Maker 2

Using Adobe Dreamweaver CS4 (10.0)

Chapter 14: Links. Types of Links. 1 Chapter 14: Links

Lynda.com > InDesign CS5 Tutorials Interactive Documents & Presentations

Using Multimedia with Microsoft PowerPoint 2003: A guide to inserting Video into your presentations

Dreamweaver and Fireworks MX Integration Brian Hogan

How to Add a Transparent Flash FLV movie to your Web Page Tutorial by R. Berdan Oct

SiteBuilder 2.1 Manual

Advanced Layer Popup Manual DMXzone Advanced Layer Popup Manual

How to create buttons and navigation bars

USING WINDOWS MOVIE MAKER TO CREATE THE MOMENT BEHIND THE PHOTO STORY PART 1

WIX: Building a Website with a Template. Choosing a Template First you will need to choose a template from the Create section of the Wix website.

Creative Cloud for Web Design

Transferring Video Clips to Digital Video Using Pinnacle 15

SURPASS HOSTING SERVICE GETTING STARTED AND OPERATIONS GUIDE

Unit 21 - Creating a Button in Macromedia Flash

Welcome to Corel VideoStudio Pro X5

Creating Web Pages with Microsoft FrontPage

Using WINK to create custom animated tutorials

Please select one of the topics below.

a basic guide to video conversion using SUPER

ADOBE CONNECT 8 USER GUIDE. Colorado Department of Labor & Employment

Working with Video in PowerPoint 2010

How to build text and objects in the Titler

Figure 3.5: Exporting SWF Files

Building a Personal Website (Adapted from the Building a Town Website Student Guide 2003 Macromedia, Inc.)

Using the UCF Toolkit

Copyright Kinoma Inc. All rights reserved.

EventCentre : Getting Started with the Universal Communications. Universal Communications Format Toolkit Overview. How UCF Works

Revision history: New comments added to: m)! Universal Driver

Using FileMaker Pro with Microsoft Office

Macromedia Dreamweaver Tutorial

Hands-on Guide. FileMaker Pro. Using FileMaker Pro with Microsoft Office

Using Windows Movie Maker to Create Movies

Microsoft FrontPage 2003

JW Player Quick Start Guide

GUIDE. Give PowerPoint a Voice: Developing. Narrated Presentations on a Windows PC. Donna Carnduff. dcarnduf@utk.edu.

Creating a Digital Movie with Pinnacle Studio (v. 10) Overview Using Pinnacle Studio... 3

Creating Hyperlinks & Buttons InDesign CS6

Intro to Web Development

Microsoft Office PowerPoint 2013

SoftChalk. Level 1. University Information Technology Services. Training, SoftChalk Level Outreach, 1 Learning Technologies and Video Production

Leading Adobe Connect meetings

Creating mobile layout designs in Adobe Muse

Adobe Flash Catalyst CS5.5

Customizing forms and writing QuickBooks Letters

Creating a Web Site with Publisher 2010

Learning Management System (LMS) Quick Tips. Contents LMS REFERENCE GUIDE

Acrobat X Pro Accessible Forms and Interactive Documents

Distributing forms and compiling forms data

Appspace 5.X Reference Guide (Digital Signage) Updated on February 9, 2015

You can view, download or upload files through the WEB interface or FTP link depending on Type of access you have been granted.

Printing Patterns to PDF. by Lisa Shanley, Ph.D.

CourseBuilder Extension ADOBE elearning SUITE 6

Responsive Web Design for Teachers. Exercise: Building a Responsive Page with the Fluid Grid Layout Feature

Getting Started Using AudibleManager. AudibleManager 5.0

AFTER EFFECTS FOR FLASH FLASH FOR AFTER EFFECTS

Document Management Quick Reference Guide

Adobe Creative Suite: Introduction for Web Design

Tutorial. Introduction to Windows Movie Maker 2.1. A Hands-on Workshop. from the Academic Technology Center. Distributed Learning Services, CIT

Adobe Captivate Tips for Success

ebookstorage.org Download 1001 Free Ebook

OpenIMS 4.2. Document Management Server. User manual

Windows Movie Maker Digital Video Editing (PC) Note: If you are using a Mac then refer to the instructions on the class website

How to install and use the File Sharing Outlook Plugin

PDF Web Form. Projects 1

USER GUIDE Version 2.0

Piktochart 101 Create your first infographic in 15 minutes

Windows Live Movie Maker Tutorial

Using Crystal Reports with VFP

Exporting to DVD with EDIUS

ITP 101 Project 3 - Dreamweaver

If you know exactly how you want your business forms to look and don t mind

TUTORIAL 4 Building a Navigation Bar with Fireworks

How to create pop-up menus

Contents. Launching FrontPage Working with the FrontPage Interface... 3 View Options... 4 The Folders List... 5 The Page View Frame...

After Effects CS4. Getting Started. Getting Started. Essential Training Introduction

BRIDGE BROADCASTING. The use of voice broadcasts for bridge teaching and mentoring has become very popular.

Generate Android App

Introduction to ProForm Rapid elearning Studio. What is ProForm? The ProForm Course Authoring Tool allows you to quickly create

6. If you want to enter specific formats, click the Format Tab to auto format the information that is entered into the field.

So you want to create an a Friend action

Working with Windows Movie Maker

Google Drive Create, Share and Edit Documents Online

Internet Explorer Settings for Optum CareTracker

Sharing a Screen, Documents or Whiteboard in Cisco Unified MeetingPlace

2. Set the camcorder to video mode by rotating the disc on the back to select.

About XML in InDesign

Transcription:

DREAMWEAVER 6 Inserting Media Objects About media objects Media Object Types: Flash movies Quicktime movies Audio/video files Java applets Anything requiring a Plug-in. Plug-In: special browser extensions that allow the user to view non-html/image content (basically anything html can t read on its own) They must be installed by each user. The most common plugins are already installed in most browsers: Quicktime, Flash, Adobe Reader Linking to media objects An easy way to present audio and video on your website. You don t want to be bothered with creating a whole page layout to the file. Just create a link to that file. You want to provide access to it. Type these words in your new document. Highlight the.mp3 phrase. Have the file you want to link to (audio) in a folder in your site. And point to it from your Link dialog box.

You can link to just about any kind of content you want this way (pdf, flash, any type of file you want). Your file will play back right in the center of a new browser window If people have quicktime pro installed they can actually save this file to their harddrive. Do the same thing to a Movie file. Highlight the text you want to turn into a link, point to it from the link dialog box to your file, and there s the video file in a separate browser page. As long as your users have the right plugin, they ll be able to view your content. You may want to include a link to the actual plugin so they can get it if they don t already have it.

With this method, the movie uses the QuickTime browser plugin. The user cannot resize the movie, and if the user clicks the Back button in the browser, they'll lose the playback window. Embedding audio and video files If you want to embed a quicktime movie so that it doesn t go to an other page, you go to the Media Insert button and select the generic Plugin object. You ll be asked to locate the media object that it ll use. It won t be able to detect the dimensions of your clip. You really need to know the dimensions of your movie. Select movie and the Properties inspector comes up, so you can distinguish the dimensions

of your movie. If you want your controller bar to appear in your movie, you have to be really good and add 16 pixels to your Horizontal dimensions. Instead of 312 x 200 you want to make it 312 x 216. Setting parameters If you don t want the Quicktime movie clips to play right away, or want to control other aspects of the clip, you can specify parameters. If you have access to the exercise files, open up http://www.apple.com/quicktime/tutorials/embed.html By setting AUTOPLAY to false, the user doesn t play until the user clicks the Play button. KIOSKMODE is the parameters for not letting users download your movie. If you want it to be TRUE, then it won t be downloadable. Select Media clip, and click on Parameters button in Properties Inspector Each parameter has a name in a value. e.g.: Autoplay False If you preview in the browser, the Quicktime movie won t play unless you specify it to do so. Bear in mind that EACH Plug-in has its own parameters. You can just do a google search for various parameters. Creating a click-to-play movie Some REALLY HELPFUL parameters. In a movie, the first frame of the movie will automatically play it s not necessarily representative. If you want a representative frame (or Click to Play frame) You ll need an image that is sized to match your movie s dimensions. If you have quicktime pro, you open it up and save it as a.mov file. It ll be a single frame movie. (exactly how to do this below) Complete instructions for Embedding Video Into the Page For a more cohesive user experience, you'll want to embed the video directly into the web page rather than linking to an external file. You ll need to embed your poster frame into the web page as an ActiveX object and link the object to the movie file. Here's how to do that from within Dreamweaver. Here you ll have to do the pre-requisite -- creating a "poster frame," which is a one-frame QuickTime movie (unfortunately, you can't use a standard, untreated JPEG image as your poster frame). Creating a Poster Frame

Because we don't want the video to load automatically when the page loads, we need to tell the QuickTime plugin to display a static image first -- a "poster frame." Only when the poster frame is clicked by the user should the video be downloaded from the server and displayed in place of the static image. So we have two tasks before us: 1) Creating a poster frame 2) Embedding the poster frame and linking it to embedded video. In order to create a poster frame, you need to first grab an image, then turn that image into a one-frame QuickTime movie. Here's how: 1. Double-click the finished movie file to launch it in QuickTime Pro. Note: You must register the QuickTime player to turn it into QuickTime Pro. The free version does not include the Export options we need to create a poster frame. 2. Scrub to the frame you want to use and pull down File Export. For the type, choose "Export Movie to Picture." Save the picture to your desktop (not to your site's project folder). 3. In QuickTime, pull down File Import and navigate to the image you just exported. You should now be looking at a one-frame movie. 4. Pull down File Export again and select "Movie to QuickTime Movie." Export your one-frame movie to your project folder - the same folder where the movie file lives). Give it an intuitive filename. For example if your movie is called sadplanet.mov, call the still image sadplanet_still.mov. These instructions assume that you want your poster frame to come from the movie itself. This, of course, is not a requirement. You can use any still image you like -- eg. one you create in Photoshop. If you use an image from another source, make sure it's saved at the same dimensions as your movie (e.g. 320x240) and skip steps 1 and 2 above.

1. Click in the section of your Dreamweaver document where you want the video to appear. 2. Pull down Insert Media ActiveX. A small placeholder widget will appear in your document. 3. In the widget's Properties panel, specify a width of 320 and a height of 256. Be sure the width is equal to the actual width of your movie, while the height is 16 pixels higher than the height of your movie -- the 16px is the height of the QuickTime playback controller. 4. Select the checkbox labeled "Embed" 5. Type the name of your poster frame file into the "Src" field (or click on the folder icon and navigate to the file). 6. Click the Parameters button. Click in the Parameter column and type "href." Click in the Value column and type the name of your movie file. Click the "+" sign to add another parameter called "autoplay" and give it a value of "true." Click "+" one more time and add a parameter called "target" with a value of "myself." You should be looking at a Properties panel and Parameters panel that look something like the image below. 7. Click OK to set the parameters.

Note that neither the movie nor the poster frame file will display in DreamWeaver. Save your document and open it in a web browser to check your work. If all has gone as planned, you should see your poster frame as the document loads. Clicking the poster frame should cause the video to load in its place. It's a good idea to put a text cue under the poster frame, saying something like "Click image to begin playback." You will likely notice one remaining issue: You've embedded a one-frame movie, but the user needs to click on the image portion of it to begin playback. And yet there's a playback controller staring the user in the face. Most users will be tempted to click that controller, but will end up viewing only your one-frame poster movie if they do so. To make this problem go away, add one more parameter to the list above: controller = false You'll still get a controller on the destination video, but the "confusing" controller on the one-frame video will go away. Embedding Audio Only Embedding audio without video is, predictably, a bit simpler. 1. Click in the section of your Dreamweaver document where you want the audio controller to appear. 2. Pull down Insert Media ActiveX. A small placeholder widget will appear in your document. 3. In the widget's Properties panel, specify a width of 200 and a height of 16. The QuickTime playback controller is designed to be displayed at 16px high -- the 200 dimension can be anything you like, but we find that 200 works well for this purpose. 4. Select the checkbox labeled "Embed" 5. Type the name of your audio file into the "Src" field (or click on the folder icon and navigate to the file).

6. If you don't want your audio to play automatically when the page is loaded, click the Parameters button. Click in the Parameter column and type "autoplay". Click in the Value column and type "false". You should be looking at a Parameters panel that looks something like the image below. Click OK to set the parameter. Inserting Flash content Media Insert button/flash: it won t play the flash right away, but you can preview it in the Property Inspector. You can resize in DW by holding down shift key and resizing the box. Inserting Flash Video Recently (2005) Macromedia introduced a new video/audio format called Flash Video. Catching on quickly. Over 95% of people have Flash plugin. DW supports the embedding of FV right in your webpage.

Dialogue box: 2 types of downloads: Progressive Download, Streaming. You can choose the appearance of controller (clear skin, appear on movie; corona, halo is below movie). If you choose Detect size, it ll automatically detect the size of your movie. Autoplay, rewind as soon as done, or prompt users to download Flash player. Flash Video Encoder comes with the Macromedia Suite, and that s how you can create your Flash Video content. You can just take the.mov file, convert to a.flv file, and then put it directly into your movie. As you add videos, you ll get some extra files generated in your root folder, including those for when you were just experimenting with the skin types. You can create a new folder in File and drag them into a separate folder and then delete those.swf files that you won t use.