Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
There are some things in life that just go together. In the world of web development, Dreamweaver and Flash have been partners for a long time. This lengthy relationship has lead to some pretty impressive integration. Whether it's placing Flash content on the page, going back and forth between Dreamweaver and Flash as you work on your content, or integrating video into your web site, Adobe has made the process seamless. In this chapter, we'll take a look at integrating Flash content on to your page, setting your Flash content properties, exploring Flash and Dreamweaver integration and finally integrating video into our website by using built-in Flash controls.
First, let's take a look at the process of placing Flash content on your page. Integrating Flash into your web site is as simple as having access to the SWF file. So here I have the mission.htm file opened in the 15_01 folder and I'm going to scroll down a little bit and we have an area down here on the bottom where we're going to place a banner ad. So I'm going to place my cursor right after the last paragraph and hit Return. It's going to give me a little bit of empty space there and there are a couple of different ways to insert Flash files into your pages. First, you could go to Insert > Media > SWF.
You could also go to your Insert panel and click on Media Objects and there's also the SWF option. Or you can go to the Assets panel and you can click on the Flash assets. The Assets panel is going to show you all of the different Flash assets in your site. You'll notice that we see our SWF files or S-W-F files and not the FLA files. We could drag and drop these directly on the page but we can also do that from the Files panel. I'm going to switchover to the Files panel. I'm going to go up to the _assets directory and I can see in that file I have a banner_ad.fla and a banner_ad.swf.
Now it's important that you understand the difference between the two. The FLA is the development file. That's the file that the Flash designer or developer is going to be creating your Flash content with and the SWF or SWF file is the file that you're going to be placing on your page. So whether you use one of the methods from the menu or the Insert panel, dragging and dropping from the Assets panel or dragging and dropping from the Files panel, the result is going to be the same. So I'm just going to drag and drop from the Files panel and I'm going to release the mouse. Dreamweaver is going to prompt me for some Object Tag Accessibility Attributes.
This is a good way to make your Flash content a little bit more accessible and I'm just going to type in Banner Ad for the title of that particular movie. I'm going to go ahead and click OK and there is my Flash content on the page. Now if I go ahead and save my file, you'll notice that Dreamweaver is telling me it needs to copy some dependent files over for us in order to make the Flash content run smoothly. So you can see it's going to add a Scripts directory and it's going to place an expressInstall.swf file and a swfobject_modified.js.
I'm going to talk about what those do for us in just a moment. I'm going to ahead and click OK and I'm going to switchover to Code View, so we can talk about those external files a little bit more clearly. So all the code that you see on the page right now was generated by dropping that Flash movie on to our page. So why do we need so much code for something as simple as a Flash movie? Well, unfortunately, Internet Explorer doesn't play nice like some of the other browsers do. So in order make sure that our Flash content is going to be viewable, we have to make sure that we're not triggering the active X barriers that Internet Explorer can put up.
Now I'm going to switch back to Design view, preview that in my browser and there is our Flash banner ad. And we can see in there are a couple of problems with it. It just sort of is looping uncontrollably and sure does look like it's missing some contents. So that's probably something we're going to have to deal with a little later on down the road. Now as I mentioned before, it seems like an incredibly simple procedure. You're just dragging and dropping files on to the page, but between the Active X controllers, Flash Player detection and browser sniffing is going on behind the scenes, it is worth noting,= just how much work Dreamweaver is doing for you.
Make sure,= you pay attention to the external files that are being added to your site. And I'm going to close my browser, go back into Dreamweaver and once again I'm going to highlight the Scripts file that has our external files in it that Dreamweaver copied over for us. And when you upload your site, just make sure you upload those files as well and keep them in exactly the same location. That way, your Flash content is guaranteed to perform as advertised.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.