New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

Start learning with our library of video tutorials taught by experts. Get started

Creating a Portfolio Web Site Using Flash CS4 Professional
Illustration by

Benefits of using XML


From:

Creating a Portfolio Web Site Using Flash CS4 Professional

with Paul Trani

Video: Benefits of using XML

I'd like to give you an overview of the benefits of using XML, but first off, I would like to talk about what XML is. Well, it stands for eXtensible Markup Language, which just means that it's very flexible and really easy to read and use. In fact, there is many different technologies that can create and understand this XML format. So whether you're using PHP or a database, those different technologies can read and write XML file formats and XML content.
Expand all | Collapse all
  1. 1m 41s
    1. Welcome
      1m 7s
    2. Using the exercise files
      34s
  2. 24m 1s
    1. Understanding web design
      2m 44s
    2. Creating a Flash file
      3m 18s
    3. Importing a design from Photoshop
      7m 45s
    4. Optimizing the design
      10m 14s
  3. 13m 59s
    1. Dynamically loading an image
      3m 37s
    2. Loading random images
      10m 22s
  4. 47m 38s
    1. Creating menu buttons
      8m 18s
    2. Adding functionality to buttons
      8m 56s
    3. Adding navigation
      9m 45s
    4. Creating transitions
      12m 0s
    5. Simplifying code
      8m 39s
  5. 26m 11s
    1. Creating web site sections
      7m 41s
    2. Dynamically loading sections
      11m 7s
    3. Linking to web sites and email addresses
      7m 23s
  6. 29m 18s
    1. Setting up a portfolio
      12m 31s
    2. Adding functionality to thumbnails
      10m 10s
    3. Allowing for unlimited thumbnails
      6m 37s
  7. 41m 17s
    1. Benefits of using XML
      4m 42s
    2. Loading XML content
      4m 34s
    3. Sorting XML content
      7m 32s
    4. Displaying XML content
      7m 35s
    5. Using XML to create thumbnails
      8m 41s
    6. Displaying content with thumbnails
      8m 13s
  8. 25m 59s
    1. Creating and importing video
      9m 47s
    2. Adding a Full Screen button
      4m 15s
    3. Creating custom video controls
      4m 50s
    4. Adding functionality to video thumbnails
      7m 7s
  9. 9m 12s
    1. Adding audio to buttons
      5m 30s
    2. Adding audio to dynamically created buttons
      3m 42s
  10. 21m 19s
    1. Applying professional transitions
      9m 26s
    2. Creating a preloader
      8m 56s
    3. Publishing a web site
      2m 57s
  11. 3m 15s
    1. Reviewing the "corporate" Flash site
      1m 40s
    2. Reviewing the "artistic" Flash site
      1m 35s
  12. 12s
    1. Goodbye
      12s

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
please wait ...
Creating a Portfolio Web Site Using Flash CS4 Professional
4h 4m Intermediate Feb 17, 2010

Viewers: in countries Watching now:

Flash and ActionScript are ideal for creating flexible, easily updatable web sites that are both unique in design and small in file size. In Creating a Portfolio Web Site Using Flash CS4 Professional, Adobe Certified Instructor Paul Trani shows how to exploit Flash to create a web site that showcases work to clients and prospective employers. Find out how to add dynamic navigation, animation, and video to a page, and how to load, sort and display XML that enables portfolio content to be updated without opening Flash. This course is designed to take your existing tweening skills and gotoAndPlay code and walk away with a fully functional Flash site. Exercise files accompany the course.

Topics include:
  • Optimizing and publishing a Flash web site
  • Designing a professional photo or video portfolio
  • Adding button interactivity
  • Adding functionality to portfolio thumbnails
  • Displaying content with XML
  • Adding audio to portfolio presentations
Subjects:
Web Web Design Projects
Software:
Flash Professional
Author:
Paul Trani

Benefits of using XML

I'd like to give you an overview of the benefits of using XML, but first off, I would like to talk about what XML is. Well, it stands for eXtensible Markup Language, which just means that it's very flexible and really easy to read and use. In fact, there is many different technologies that can create and understand this XML format. So whether you're using PHP or a database, those different technologies can read and write XML file formats and XML content.

But what it is is basically structured information that you define, and that's what makes it flexible. I can define what it contains, and what the different tags are. It's usually contained in a text document, as you can see by that icon, but in general, it is tag-based, like HTML. So if you're familiar with HTML, XML should be even easier to understand. But what are the differences? Well, HTML has predefined tags. So you can see in this example, there can be a heading 1 tag in HTML.

That's a predefined tag like for bold, any of that sort of thing, say the title is again, predefined, and what it does is it defines how the data is being displayed. So it has to deal with the visual display of the content. Well, XML is more flexible in that, because the tags aren't predefined. You define your own. So whether I want to have a tag that says and another one that says I can do that. I own have these tags are written, what they say and what the content inside of them say as well.

So it was basically designed to carry this data not necessarily to display the data. So it really does separate the content from the visual aspect of your content. It plays really nice with Flash. So XML content can easily be displayed in Flash. It really does separate that content from the design, and it really allows your content to be external outside of your Flash file. So updating your site is a cinch, because all I need to do is open up that XML file in a simple text editor and edit it.

So, what can XML be used for? Well, you can define the data, so it could contain News updates, maybe Schedules, Personnel Information, or even Portfolio content, but since you define the data you can determine what's in it, and how it's being used. The great thing is it's separate from the Flash file. So I would like to take a look at an XML file right now. In the Exercise Files folder, in the Assets folder, in the design folder, clear down in here in the portfolio folder, here is a portfolio.xml file, because that's what this XML file contains, all the portfolio information.

So I'm just going to open that up in a simple text editor. I'm using TextEdit. You can use whatever you want, Dreamweaver. It's really up to you, but in general, this is the structure of this XML file. It does define it as an XML file, and then I have this tag that contains all of this portfolio information. Again, I've created this tag that says . I start with it, and I finish with it. Within this portfolio tag, exists this other information, and this is just a simple comment.

It's actually an HTML comment, but I've just defined that this is Image 1, which contains the title of this image. It gives a description of the image. It gives the path for the largeImage, and then a path for the thumbnail image for this image, and it works out really well. But I do want to focus on the description, because notice how this does say CDATA and that means character data. So anything that I want to put within these two brackets will not mess up my code, because there are some cases where if I put a real interesting character, whatever that might be, it might tend to say, break the code.

And if it'll ever breaks your code, then wrap it in CDATA, just like that, and close with those two brackets, because what's going on even for this description is I have these quotes. I want to make sure that this line doesn't break anything. So just wrap it in CDATA. But other than that, I've defined the tags, I've defined the content within those tags, and now this is ready to go. So I can close that, and I won't worry about saving it. But all my content is right in here, and it's going to be external from my Flash files.

So if I need to update my portfolio, all I need to do is update that XML, and my website is pretty much automatically updated.

Find answers to the most frequently asked questions about Creating a Portfolio Web Site Using Flash CS4 Professional.


Expand all | Collapse all
please wait ...
Q: While following along with the course, I encountered the following error in Flash CS4: 
1120: Access of undefined property content_mc.
What is causing this error?
A: Flash is looking for something (the content movieclip) with the instance name “content_mc” but it is not finding it. Select the content movieclip on the stage. In the Properties panel give it an instance name of “content_mc”. Make sure there are no spaces before or after. That should resolve the error.
Q: What is the best strategy for integrating 720/60P HD video into a website? Would creating a blank page that opens in full HD resolution be the best way to view the full quality of the HD video file?
A: A video file that large would just be unreasonable for most users to open.  These settings are a good place to start: 600x400is
24-25fps
Audio: 128kbps
Codec: On2VP6
Bitrate level: 1,000kbps
Bitrate Encoding: VBR These are just recommendations, and can be modified to preference. Also keep in mind that in Flash, one of the buttons that can be added is a full screen button, which is part of the skins.
 

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

join now Upgrade now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Creating a Portfolio Web Site Using Flash CS4 Professional.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Are you sure you want to delete this note?

No

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

  • new course releases
  • newsletter
  • general communications
  • special notices

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

  • new course releases
  • newsletter
  • general communications
  • special notices

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.