Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
In Dreamweaver CS5 Essential Training, Adobe Certified Instructor James Williamson explores the tools and techniques of Dreamweaver CS5, Adobe's web design and development software. This course covers both the ins and outs of Dreamweaver, as well as recommended best practices for crafting new web sites and files, the fundamentals of HTML and CSS, and how to ensure clean and accessible code. The course also includes how to use tools in Dreamweaver to create and style web pages, manage multiple sites, and add user interactivity with widgets and scripting. Exercise files are included with the course.
Dreamweaver and Flash share one of the closest integration workflows among Creative software. Once the Flash SWF file has been inserted into your web page, Dreamweaver creates a link to the original FLA file. If you need to edit a file, just use the Properties Inspector to open the original Flash file. While editing in Flash, you'll see an Editing From Dreamweaver icon. Clicking on that will save the file, republish your movie and return to Dreamweaver with the updated SWF file. Let's take a look at that round-trip editing workflow.
So we have our mission.htm file open from the 15_03 folder, and I'm going to go ahead and click on the Flash file, if I don't already have that installed. Now I want to point out something about the exercise files in your Flash movies. When you place a SWF file on the page, Dreamweaver should automatically link to the FLA file that created it, as long as it can find it. So we do have the option of being able to use the Point to File icon or the Browse icon to assign an FLA file after the fact. In the course of copying Exercise Files, it's very common for Dreamweaver to get confused about which file it belongs to.
So at the beginning of this exercise, one of the things that I'd really recommend doing is going over to your Files panel, opening up this Assets folder,where the banner_ad.fla file is and just use the Point to File icon to point to it and reestablish that link and make sure that you're editing the proper FLA file. It's also not a bad idea in your own Dreamweaver projects to occasionally check that and make sure that moving files around or editing files hasn't corrupted that link or caused Dreamweaver to look elsewhere for that file.
You want to make sure that you're using the most current version of it. Okay, so with this selected, I've mentioned before and I'm just going to play it here to just show you what I'm talking about. Our banner ad is animating but it really doesn't have that oomph that we wanted. It just keeps looping and there's nothing about our summer specials, our 20% off that we were supposed to see here. So obviously the Flash designer probably handed this over to us a little early in the design and development process. Maybe they didn't get a change to finish it. So what we're going to do is we're going to use the round-trip editing between Dreamweaver and Flash to go ahead and make those changes.
So I'm just going to stop that. And with that selected, all I have to do is go right over here to Properties Inspector and click Edit. Okay, so here we are in Flash and you'll notice that we have in the upper left-hand corner a little Editing From Dreamweaver icon. Now I probably should have mentioned this earlier but I know that some of you guys viewing this title might not have Flash installed. If you want to experiment with this workflow, just go ahead to Adobe's web site and download a free 30-day trial of Flash CS5. Then install it and you can come back and complete this exercise.
Okay, one of the things we're going to do first off is to stop our movie from playing. And we're just going to do some really basic scripting work. I knew a ton of people right now are going "scripting, not a chance." Well, it's really not that hard, trust me. So, what I'd like you to do is this little panel right down here is called the Timeline, and the Timeline is really where we control all of our animations and in terms of scripting, it's where we also store all of our scripts. So you can see the playhead, which is this little red line right here that you can pick up and move around.
You can see the playhead is just sitting right there on Frame 180. Go ahead and click on this keyframe. It's this little rectangle with an A above the circle right there, you just want to click on that one time to select it. When it's selected, it'll be highlighted. And that is the only frame you want to have selected. And you'll notice that this is our Actions layer, so this is where we store all of our ActionScripting and ActionScript is the programming language in Flash. So we need to stop our movie. What I'm about to do next is open up my Actions panel. Now on the PC, I can hit F9, but on the Mac I can also hold down the Option key and hit F9.
It'll open that panel up. If that doesn't work for you, you can always go up to Window and choose Actions. So my Actions panel is now open and what I'm going to do is just click on the first line of code right here. This is our code pane, and I'm going to type in the word stop. I'm then going to open the parenthesis, close the parenthesis and type in a semicolon. I told you it is simple. So the Flash programming really isn't that hard. I'm going to close the Actions panel and there's something else that kind of is bugging me.
This Summer Savings 20% Off should be showing up in our movie, but it's not. Well, if I look over at our timeline, I can see a layer here called text. If I toggle the visibility of that on and off, I can see that's the text that I'm looking for. Well, when I look at my layer types, I can see that this text layer is what we call a guide layer. And guide layers are layers where you place content that you don't only intend to publish. So maybe it's a layer where you're placing an image that you're using as a type of a template or maybe you're putting something on there temporary with maybe the intention of using it later on.
That's probably what happened here and the designer probably just forgot to go in and turned this back on. So what you're going to do is go over to your Timeline, right-click the text layer and you can see there is a little checkmark beside Guide. Click that and you can see that that icon changes and it's no longer a guide layer. Now you might have been wondering well we've made all these changes, do we have to save the movie? No, we don't. That's part of the beauty of this round- trip editing between Dreamweaver and Flash. Now that we're finished making our changes, all that we have to do is go right up here to the upper left- hand corner and click Done.
That's going to save the file for us. It's going to publish the SWF file movie out again and make sure that we have the most recent version of that inside of Dreamweaver. So now in Dreamweaver if I click the Play button, now as the animation goes through, it's going to place through one time, I see the text and there's our stop action right there. So the banner ad is now doing exactly what we need it to do. Now if you're a Flash designer or developer and you need to update your files frequently, this integrated workflow is going to save you a ton of time.
Switching back and forth between Flash and Dreamweaver becomes an orderly process and one that creates a seamless blending between the two environments.
Find answers to the most frequently asked questions about Dreamweaver CS5 Essential Training.
Here are the FAQs that matched your search "":
Sorry, there are no matches for your search ""—to search again, type in another word or phrase and click search.
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.