Sign In | Subscribe
Start learning today, and be successful in your academic & professional career. Start Today!
Loading video...
This is a quick preview of the lesson. For full access, please Log In or Sign up.
For more information, please see full course syllabus of Adobe Dreamweaver CS6
  • Discussion

  • Study Guides

  • Download Lecture Slides

  • Table of Contents

  • Transcription

  • Related Books

Bookmark and Share

Start Learning Now

Our free lessons will get you started (Adobe Flash® required).
Get immediate access to our entire library.

Sign up for Educator.com

Membership Overview

  • Unlimited access to our entire library of courses.
  • Search and jump to exactly what you want to learn.
  • *Ask questions and get answers from the community and our teachers!
  • Practice questions with step-by-step solutions.
  • Download lesson files for programming and software training practice.
  • Track your course viewing progress.
  • Download lecture slides for taking notes.
  • Learn at your own pace... anytime, anywhere!

Inserting Flash Video

  • Flash video is a movie format that uses Flash to play the video
  • This video format was extremely popular, and made inserting video onto a web page an easy process since almost every computer had the Flash plugin installed
  • A plugin is an extra program within the browser that can extend the capabilities of the browser
  • The browser does not do math, so the Flash plug in performed the math to create the movie images within the browser
  • It is similar to the various browser extensions we added earlier in the course
  • Flash uses vector graphics which produced very small file sizes which rescaled easily
  • prior to the introduction of Flash, we had to produce different movie formats for different browsers and operating systems
  • We will make the Fiji link in our destinations.html page a link to a new page with flash video of a bull shark eating called sharks.flv located in the flash folder of the course files
  • Create a new web page & name it movie-test.html
  • Add the following text to the page:
  • The Sharks of Fiji as a heading 1
  • A bull shark in Fiji! as a heading 2
  • Drag sharks.flv onto the web page from the Movies area of the Assets panel
  • Choose a skin from the list of 9 skins, the higher the number, the more control the user has
  • Save the page & show the skins that are added by Dreamweaver
  • There are additional files called FLVPlayer_Progressive.swf & another swf for the skin you have chosen
  • added to your site files by Dreamweaver, keep these files where Dreamweaver placed them in your site
  • These must be uploaded to your server in order for the Flash file to work correctly
  • Preview in the browser and you should see the movie and its controls provided you have the Flash plugin installed

Inserting Flash Video

Lecture Slides are screen-captured images of important points in the lecture. Students can download and print out these lecture slide images to do practice problems as well as take notes while watching the lecture.

  • Intro 0:00
  • Add Flash Video using Insert Menu 1:51
    • Insert FLV
    • Browse File Location
    • Setting Controls Skin
    • Set Auto Rewind
  • Preview in Browser 7:29
  • Add a Title 8:22
  • FLV File Flash Player Error Message 8:44
  • Summary 9:04

Transcription: Inserting Flash Video

We're now going to take a look at inserting a Flash video into a web page, which is a little bit different than the Flash native format that is published on a web page.0000

A standard Flash file is an SWF format, representing a .swf file; we are going to be working with something that is known as a Flash video.0014

And a Flash video is available within our folder on our website called Flash.0026

You can see, here is the .swf file with the SWF format; here is the Flash video.0033

And what I have done is just hit Ctrl or Command, N to create a new page; and that is the page you are looking at.0040

I'm going to do a save on this, and I am going to save this as Sharks...and it became uppercase; and after watching this video, you may understand why...but I'll keep it all lowercase to make sure we do the standard that our website has already.0049

I'm going to name this the Sharks of Fiji; and what we will do is highlight this page within our Fiji file.0073

This will become a Header 1; and then I am going to insert the movie down here: "A Bull Shark in Fiji."0084

And what we are going to do is put our video right below that; so I have a Header 1, and I have a paragraph, and right below that--that is where my Flash video is going to go.0099

And what I am going to do is use the Insert menu to add this Flash video.0111

Now, Flash video is a bit different from a Flash file in quite a few different ways.0117

When I go to insert this, I am going to get a rather large dialog box; so, in my Assets panel, I have this particular area, or this category, called SWF.0123

There is another category for movies; and this is where your FLV files will end up--so you can see I have a couple of them.0137

The Shark.flv is the one that I'll be putting onto this page.0147

So, I'll insert it here; I'm going to go up to the Insert menu...so I can do it from here and go down to Media and say FLV, or I can use the Insert bar, and right next to the Images is the Media area.0153

I'll click the down area and choose FLV; either direction you go, it all ends up in the same dialog box.0171

Now, this is kind of an interesting dialog box: I always let Dreamweaver set up the video type for me, but what I do here is browse out to where that file is located.0181

So, I'm going to browse out; I have it within the Flash folder simply because the Movies folder contains other types of video files.0194

I'll open up Flash, and there is my Sharks.flv file; I'll click OK.0205

This next piece is kind of the interesting piece; what we have here are nine built-in skins, and what the skin does is provide the controls for the videos.0212

And basically, it shows you a picture of them.0226

This is what Clear Skin 1 looks like; if I go down to Clear Skin 3, you will see you have a lot more controls.0229

So, basically, the number 1 represents the minimum amount of control; the number 3 for each of these skins represents the maximum number of controls that the user has when they are watching the video.0238

So, I tend to always stick with 3: as a user, I want more control of the final video on the page to start and stop and move it and do the volume, so that is what I provide for my users.0252

I'll leave that up to you.0267

Now, each one of these looks a little bit different, also; so if I choose Clear Skin 3, this is what it looks like.0270

If I choose Corona Skin 3, you can see it looks a little bit different; and down at the bottom, I have Halo Skin 3.0279

Now, what is really different about these skins is not just how they look, but let me show you something else.0289

I am going to go down here; I don't know the width and height of my video, so I'm going to let Dreamweaver figure that out for me; so I'll click Detect Size.0298

And Dreamweaver went out and figured that out for me.0310

But notice, when I am in Halo Skin, my total here of the file size is quite a bit larger than the width and height of the movie: that tells me that the skin is not located on top of the movie.0314

These controls need extra space underneath the movie; so the amount of space to allow for this particular video is much larger than the actual movie size.0331

So, keep that in mind when you are choosing a skin; and this is the Halo Skin.0343

Now, if I go up to Corona Skin, let's see what happens.0348

Notice, total with skin is the exact same size as the movie; and if I go up here to Clear Skin, it's the same.0352

So, the only skin out of these that allows you to have the controls underneath the movie is the Halo Skin, the very bottom one.0362

Think of the controls being under the movie, and the skin is the very bottom one.0371

That will help you remember that that is the one with the separate controls.0377

So, what I am going to do is click Halo Skin; I'll choose that one; and I'm going to say Auto Rewind.0382

When the user plays it, I want it to automatically go back to the beginning.0391

I'm not going to have it Autoplay, because I am providing them some controls to do that.0396

So, I'll go ahead and click OK.0402

One other little tip--and this will help remind you to see the video, preview the page, in a browser--this cannot be viewed within Dreamweaver; you have to go out to the browser.0405

I'll click OK; there is my Flash video; you can see, my text is next door to that instead of above it: so I'll put my cursor in front and hit Enter or Return, and here is my video.0417

And you can see it's a pretty good-sized video; let's put it in the browser and take a look.0434

I can't see it here; even if I click on it, there is no Play button down here; this is a browser-only feature.0440

I'll take it out to Firefox, and let's take a look at the video.0449

There it is: now, I added controls to this, so notice how the controls are sitting underneath the movie itself.0456

And this little scrubber here allows me to move and view this video as I like; I also have the volume control here.0465

Some of the other skins don't allow that.0477

This is a bull shark eating with a Fijian tribe feeding the sharks; and this Fijian tribe believes that sharks are a sacred creature, and they are blessed because no tribal member has ever been hurt by a shark.0481

That is a video of that.0500

Let's add a title to the movie or the page; and we'll go up here; let me just say "The Sharks of Fiji."0503

And I'll go up here and say "The Sharks of Fiji," and there is our page.0516

You could see it played just fine.0522

Now, I can click this eyeball; and this is what it would look like to somebody who didn't have the Flash player installed; and I could certainly modify this text and give them a little more information.0524

It is fully editable.0537

I'll click on that eyeball again to open it up, and there is my movie.0539

That is how you can insert a Flash video, using Dreamweaver, onto a page.0544

There is one other side note I want to mention: when we do that, what Dreamweaver did (I'll move this out just a little bit): Dreamweaver added the skin as a Flash file within your files, and also added this file here.0552

Without these two files being located on your Web server, your Flash video will not play correctly.0571

And I would strongly suggest you also keep these two in the root folder of your website; you can have trouble getting these Flash videos to play if it's not directly located inside your root folder.0580

So, don't move these into a subfolder; I am going to leave them here--I am not going to move them up here into the Flash folder with my movie.0596

I'll keep those separate, right within this area.0608

That is inserting a Flash video onto a web page using Dreamweaver.0613