Creating Optimized Content in Flash - Search Engine Optimization for Flash

by Todd Perkins

Now that you have some experience creating optimized HTML content, take a look at some techniques to make your Flash content more visible to search engines. This chapter discusses search engine optimization (SEO) mainly from the Flash development perspective, focusing on what you need to do for optimization when creating Flash applications.

Search Engine Optimization for Flash book cover

This excerpt is from Search Engine Optimization for Flash. Search Engine Optimization for Flash dispels the myth that Flash-based websites won't show up in a web search by demonstrating exactly what you can do to make your site fully searchable -- no matter how much Flash it contains. You'll learn best practices for using HTML, CSS and JavaScript, as well as SWFObject, for building sites with Flash that will stand tall in search rankings.

buy button

Chapter 3. Creating Optimized Content in Flash

Flash SEO Myths

Although they may be legitimate, most of the reasons people don’t like Flash are based on outdated myths regarding the technology’s SEO capabilities. In this section, we’ll look at some of the most prominent myths that create haters out of otherwise normal human folk.

Myth 1: Flash Content Is Bad for SEO

The first myth is that Flash and SEO don’t mix. In other words, some people believe that to have an SEO site, you must eliminate most, if not all, Flash content. This is simply not true. Flash content, when used effectively, can work great with SEO. Other media elements, such as images, audio, and video (including video in Flash Player), are searchable based on the HTML content that surrounds them.

Myth 2: Flash Content Isn’t Searchable

Another myth about Flash content is that search engines can’t search through it to index the information within SWF files. For a long time, this myth was true. Though static text and links in SWF files could be indexed, this was only because Flash added that information to the HTML containing the SWF upon publishing.

Recently, Adobe announced that the Google and Yahoo! search engines received a special version of Flash Player to use in indexing Flash content. This version enables these search engines to crawl through a Flash movie similar to the way they crawl through HTML. As of this writing, Adobe hasn’t released details about how this version of Flash Player works, but it has stated that search engines can index all URLs, dynamic or otherwise, and all text that appears in text fields that people can read. What do you have to do to have search engines index your Flash content? Nothing. They’re already doing it for all pages being crawled.

Warning

Be careful about placing private data in your Flash applications. Not only can search engines potentially index this data, but also it can be found by people using a SWF decompiler.

Flash SEO Pitfalls and Challenges

Although you can use Flash and still have excellent SEO, and although Flash content is now searchable, there are some things to avoid when creating SEO Flash content. In this section, we’ll look at some pitfalls for those of you who are new to Flash SEO, as well as some of the challenges you’ll face when developing your Flash applications.

Using Too Much Flash

Many Flash enthusiasts want to create sites entirely in Flash, or sites that use a heavy amount of Flash, using their Flash skills to emulate what’s done with HTML. Although it’s possible to create an all-Flash site that’s optimized for search engines, this is usually discouraged, for a few reasons.

First, optimizing a Flash site using just Flash is possible, but it’s difficult to tell how search engines weight different elements. For example, in HTML, you can weight different elements by placing them in heading tags, by making them bold or italic, or by creating links. In Flash, you can place HTML in text fields and use CSS to control how different elements are weighted, but that doesn’t necessarily mean the Flash versions of the elements will be weighted the same as the HTML versions. In other words, the same elements may hold different (likely, less) weight in Flash.

Further, to be sure your Flash content is weighted correctly, you should also have an HTML description. That way, since you know for sure that HTML content is indexed, you can be sure that at least a description of the content can appear in search results. For now, it’s too early in the game to see whether this can count as duplicate content if your Flash content contains the same information.

If you create a site that’s full of content and you wish to have an HTML alternative for those who don’t have Flash, you might find yourself needing to create an all-HTML website in addition to your all-Flash site. Not only can this be incredibly time-consuming, but also, as I mentioned earlier, this could count as duplicate content.

The Link Dilemma

One of the advantages of using HTML over Flash for an entire website is that HTML allows links to any page of a site. If you create an all-Flash site, or if an extremely complex Flash application is necessary to make your site usable, people coming to your site might have to navigate through your entire application to view the content they want. At a minimum, they might have to go through a few pages, or states, of your application that they don’t want to view before viewing the desired content. This isn’t necessarily bad for SEO, but it’s horrible in terms of user experience.

This link dilemma isn’t impossible to fix, but it will take some work and workarounds to create a good user experience. Luckily, the solution isn’t too complex. Using some ActionScript along with other technologies, you can create deep links, links that take users to specific states of your application. You can also create Flash sites that are made up of multiple web pages, so individual states of the application can be linked to and so your users can use their browser’s back and forward buttons.

Note

You’ll learn more about deep linking later in this chapter.

Data Security

Flash, like any other content on the Internet, is prone to hacking. Many tools out there allow others to dig into your Flash applications to find assets you’ve used, and even extract all of your ActionScript code. In your Flash applications, try to avoid using private data unless you absolutely need to. Even then, keep in mind that through search engines or hacking, your data can potentially be exposed.

Note

Comprehensive instructions for making secure Flash applications are beyond the scope of this book. For more details, search the Web for information on how to secure Flash applications.

Creating SEO Flash Content

Now we’ll look at what you can do in Flash to create SEO content. We’ll discuss some methods that have been around for a while, as well as some ways to optimize your applications for indexing.

Flash SEO Original Methods

Flash has had built-in tools for SEO ever since Flash MX 2004 was released. Over the years, these features have received some improvements, but they aren’t complete SEO powerhouses yet. In this section, we’ll talk about each method, and their advantages and disadvantages.

Understanding SWF metadata

SWF files, like HTML, video, and images, can include metadata. You can use this metadata information to give Flash movies titles and descriptions. At this point, search engines, even with the recent advancements of Flash SEO technology, don’t index the metadata information. That’s not to say you should avoid using it altogether. Rather, you might as well add in the metadata information now, and it may work to your advantage in the future. With the advancements in Flash SEO, it’s becoming increasingly likely that this metadata will be used eventually.

The metadata used in SWF files is similar to the metadata used in other Adobe applications, and it contains information about a file that’s embedded into the file itself. This is called XMP metadata. XMP (eXtensible Metadata Platform) metadata can include many different types of information, and even custom information, but what’s relevant to SEO is that it can contain a title and a description.

Note

XMP metadata is currently only available in Flash CS4.

Adding metadata to a SWF file

Adding metadata to a SWF file is extremely simple. One way to open the metadata window is to choose File→File Info. Another way to access the window is through the Publish Settings window, which you can access using the Property Inspector or through the window command File→Publish Settings. In the Publish Settings window, click the Flash tab to set options for publishing Flash content. In the Flash tab, click the File Info button next to the Include XMP Metadata checkbox to open the window used to enter XMP metadata into the SWF file (see Figure 3.1, “Adding XMP metadata to a file”).

Figure 3.1. Adding XMP metadata to a file

Adding XMP metadata to a file

Using the metadata window, you can then add XMP metadata, including title and description information, to your SWF file. Like metadata in HTML, this metadata travels with your SWF file once it’s published, providing information about the file’s contents.

Viewing XMP metadata

Once XMP data is embedded into a file, you can view the metadata in two ways. You can view it in Adobe Bridge, or view it in a text file created by Flash. Either way, you’ll need to turn on the Include XMP Metadata checkbox in Flash’s Publish Settings window, add some XMP metadata, and create a SWF file by selecting Control→Test Movie or by Publishing the File.

It’s easy to view and edit metadata in Adobe Bridge. To view the data in Bridge, open Bridge and browse to the folder where your SWF file with embedded XMP data is located. Once you’re in the proper location, select the SWF file to view its metadata in the Metadata panel (shown at the bottom right of Figure 3.2, “Viewing the SWF file’s XMP metadata in Bridge”). While you’re in Bridge, you can also edit XMP data by clicking the Edit button (the pencil icon) for a field you’d like to edit.

Figure 3.2. Viewing the SWF file’s XMP metadata in Bridge

Viewing the SWF file’s XMP metadata in Bridge

To view metadata as a text file, make sure you select the “Generate size report” checkbox in the Flash tab of the Publish Settings window before you publish your Flash content. After you’ve published your Flash content, you’ll see a plain-text file created in the same folder as your other published content that includes the XMP data. You can view the data (Figure 3.3, “Viewing the file in TextEdit”) by opening the file in any text editor.

Figure 3.3. Viewing the file in TextEdit

Viewing the file in TextEdit

Flash text in HTML

Some of the text you enter in Flash will automatically be placed in your published HTML file, and is searchable. This text is limited to text that has been typed manually into a dynamic text field in Flash, without using ActionScript. Though this is a quick and easy way to get Flash text into your HTML code without doing any extra work, relying on this method isn’t the best idea, for a few reasons.

For one, you have little control over how Flash translates your dynamic text field’s content into HTML. The HTML places the content of your dynamic text field in a <p> tag, giving little structure to the HTML. If you were to hand-write the HTML code, you could organize blocks of text into lists, headings, and so forth.

Next, any links added using the Property Inspector are inserted into the HTML as standard links, using only the href and target attributes. This doesn’t allow you to use important SEO attributes, such as title, in your links.

Finally, the HTML version of your Flash text is placed in a comment, so only spiders can view the text. Because the text is visible only to spiders, those who don’t have Flash Player installed won’t view any alternative content.

Recent Developments on the Flash SEO Front

I mentioned earlier that Adobe announced that Google and Yahoo! will now index Flash movies. This opens the doors to an exciting new frontier in Flash SEO. One of the most important issues with Flash SEO is what content is and isn’t indexed. In this section, we’ll look at what Flash content search engines index, and how to optimize Flash applications for search.

How does it work? At this point, few details have been released to the public. What we do know is that Adobe created a version of Flash Player made to crawl through Flash applications. What we don’t know is, well, everything else.

Understanding what content is searchable

So, what Flash content is searchable? Basically, any text that appears in a text field and any URLs revealed in ActionScript or otherwise are now indexed by search engines. That includes the URLs you want to be indexed, as well as the ones you may not want to be indexed. Essentially, anything in a dynamic text field that a person can see can now be indexed.

Understanding how to make searchable Flash content

To make searchable Flash content, you don’t have to do much, if anything at all. Google and Yahoo! are already indexing the content right now. The content indexed is all Flash content, not just content published for later releases of Flash Player.

Of course, this news is both triumphant and tragic. Triumphant because search engines are doing all the work and you have to do nothing, and tragic because search engines may end up indexing a lot of private data.

Understanding how to make non-searchable Flash content

Now, you may not want all your Flash text to be indexed. If not for privacy reasons, you may want to have more control over which keywords are used, or you may be using letters as graphical elements. In these cases, simply convert any text to vector outlines (Modify→Break Apart) or import that text as a bitmap graphic. That way, you can have a little more control over which content is indexed and which is not.

Optimizing a Flash application for search

If Flash applications can be searched, it’s crucial to understand how the content is indexed relative to how HTML content is indexed. At this point, it’s difficult to say, so the best practice currently is to use HTML in dynamic text fields for SEO in Flash, along with CSS or the TextFormat class. That way, you have maximum control over the structure and style of your text fields while simultaneously optimizing them.

Using HTML text with CSS in ActionScript 3.0

Using HTML text with CSS in ActionScript 3.0 requires a basic to intermediate knowledge of all three languages. In this section, we’ll take a bird’s-eye view of how it works.

First, you’ll need to have some HTML and CSS code to bring into Flash. Table 3.1, “Flash Player 10-supported HTML elements and attributes” lists the HTML elements and attributes that Flash Player 10 supports, as stated in Flash Help.

PROD: The ED/AU provided footnotes for the following two tables, but did not specify where the markers should go. I’ve placed them at the end of the table titles, but you may want to double-check with ED/AU on whether that’s what they want. --Tools

Table 3.1. Flash Player 10-supported HTML elements and attributes[1]

Tag

Description

Anchor tag

The <a> tag creates a hypertext link and supports the following attributes: target: Specifies the name of the target window where you load the page. Options include _self, _blank, _parent, and _top. The _self option specifies the current frame in the current window, _blank specifies a new window, _parent specifies the parent of the current frame, and _top specifies the top-level frame in the current window.

href: Specifies a URL or an ActionScript link event. The URL can be either absolute or relative to the location of the SWF file that’s loading the page. An example of an absolute reference to a URL is http://www.adobe.com; an example of a relative reference is /index.html. Absolute URLs must be prefixed with http://; otherwise, Flash treats them as relative URLs. You can use the link event to cause the link to execute an ActionScript function in a SWF file instead of opening a URL. To specify a link event, use the event scheme instead of the HTTP scheme in your href attribute. An example is href="event:myText" instead of href="http://myURL"; when the user clicks a hypertext link that contains the event scheme, the text field dispatches a TextEvent link with its text property set to myText. You can then create an ActionScript function that executes whenever the TextEvent link is dispatched. You can also define a:link, a:hover, and a:active styles for anchor tags by using stylesheets.

Bold tag

The <b> tag renders text as bold. A bold typeface must be available for the font used.

Break tag

The <br> tag creates a line break in the text field. Set the text field to be a multiline text field to use this tag.

Font tag

The <font> tag specifies a font or list of fonts to display the text. The font tag supports the following attributes:

color: Only hexadecimal color (#FFFFFF) values are supported.

face: Specifies the name of the font to use. You can specify a list of comma-delimited font names, in which case Flash Player selects the first available font. If the specified font isn’t installed on the local computer system or isn’t embedded in the SWF file, Flash Player selects a substitute font.

size: Specifies the size of the font. You can use absolute pixel sizes, such as 16 or 18, or relative point sizes, such as +2 or -4.

Image tag

The <img> tag lets you embed external image files (JPEG, GIF, or PNG), SWF files, and movie clips inside text fields. Text automatically flows around images you embed in text fields. You must set the text field to be multiline to wrap text around an image.

The <img> tag supports the following attributes:

src: Specifies the URL to an image or SWF file, or the linkage identifier for a movie clip symbol in the library. This attribute is required; all other attributes are optional. External files (JPEG, GIF, PNG, and SWF files) do not show until they are downloaded completely.

width: The width of the image, SWF file, or movie clip being inserted, in pixels.

height: The height of the image, SWF file, or movie clip being inserted, in pixels.

align: Specifies the horizontal alignment of the embedded image within the text field. Valid values are left and right. The default value is left.

hspace: Specifies the amount of horizontal space that surrounds the image where no text appears. The default value is 8.

vspace: Specifies the amount of vertical space that surrounds the image where no text appears. The default value is 8.

id: Specifies the name for the movie clip instance (created by Flash Player) that contains the embedded image file, SWF file, or movie clip. This approach is used to control the embedded content with ActionScript.

checkPolicyFile: Specifies that Flash Player checks for a URL policy file on the server associated with the image domain. If a policy file exists, SWF files in the domains listed in the file can access the data of the loaded image, for example, by calling the BitmapData.draw() method with this image as the source parameter. For more information, see Essential ActionScript 3.0 by Colin Moock (O’Reilly).

Flash displays media embedded in a text field at full size. To specify the dimensions of the media you’re embedding, use the <img> tag’s height and width attributes.

In general, an image embedded in a text field appears on the line following the <img> tag. However, when the <img> tag is the first character in the text field, the image appears on the first line of the text field.

Italic tag

The <i> tag displays the tagged text in italic. An italic typeface must be available for the font used.

List item tag

The <li> tag places a bullet in front of the text that it encloses. Because Flash Player doesn’t recognize ordered and unordered list tags (<ol> and <ul>), these tags don’t modify how your list is rendered. All lists are unordered and all list items use bullets.

Paragraph tag

The <p> tag creates a new paragraph. The text field must be set to be a multiline text field to use this tag. The <p> tag supports the following attributes:

align: Specifies alignment of text within the paragraph. Valid values are left, right, justify, and center.

class: Specifies a CSS style class defined by a flash.text.StyleSheet object.

Span tag

The <span> tag is available only for use with CSS text styles. It supports the following attribute:

class: Specifies a CSS style class defined by a flash.text.StyleSheet object.

Text format tag

The <textformat> tag lets you use a subset of the paragraph formatting properties of the TextFormat class within text fields, including line leading, indentation, margins, and tab stops. You can combine <textformat> tags with the built-in HTML tags.

The <textformat> tag has the following attributes:

blockindent: Specifies the block indentation in points; corresponds to TextFormat.blockIndent.

indent: Specifies the indentation from the left margin to the first character in the paragraph; corresponds to TextFormat.indent. Both positive and negative numbers are acceptable.

leading: Specifies the amount of leading (vertical space) between lines; corresponds to TextFormat.leading. Both positive and negative numbers are acceptable.

leftmargin: Specifies the left margin of the paragraph, in points; corresponds to TextFormat.leftMargin.

rightmargin: Specifies the right margin of the paragraph, in points; corresponds to TextFormat.rightMargin.

tabstops: Specifies custom tab stops as an array of non-negative integers; corresponds to TextFormat.tabStops.

Underline tag

The <u> tag underlines the tagged text.


Note

For more details on using HTML in ActionScript 3.0, see the TextField class in the ActionScript 3.0 Language and Components Reference in Flash Help.

You’ll also need to understand what CSS is supported. Table 3.2, “CSS properties supported by Flash Player 10” lists what CSS is supported in Flash Player 10 (again from Flash Help).

Table 3.2. CSS properties supported by Flash Player 10[2]

CSS property

Usage and supported values

color

Only hexadecimal color values are supported. Named colors (such as blue) are not supported. Colors are written in the following format: #FF0000.

display

Supported values are inline, block, and none.

font-family

A comma-separated list of fonts to use, in descending order of desirability. Any font family name can be used. If you specify a generic font name, it is converted to an appropriate device font. The following font conversions are available: mono is converted to _typewriter, sans-serif is converted to _sans, and serif is converted to _serif.

font-size

Only the numeric part of the value is used. Units (px, pt) are not parsed; pixels and points are equivalent.

font-style

Recognized values are normal and italic.

font-weight

Recognized values are normal and bold.

kerning

Recognized values are true and false. Kerning is supported for embedded fonts only. Certain fonts, such as Courier New, don’t support kerning. The kerning property is supported only in SWF files created in Windows, not in SWF files created on the Macintosh. However, these SWF files can be played in non-Windows versions of Flash Player and the kerning still applies.

leading

The amount of space that is uniformly distributed between lines. The value specifies the number of pixels that are added after each line. A negative value condenses the space between lines. Only the numeric part of the value is used. Units (px, pt) are not parsed; pixels and points are equivalent.

letter-spacing

The amount of space that is uniformly distributed between characters. The value specifies the number of pixels that are added after each character. A negative value condenses the space between characters. Only the numeric part of the value is used. Units (px, pt) are not parsed; pixels and points are equivalent.

margin-left

Only the numeric part of the value is used. Units (px, pt) are not parsed; pixels and points are equivalent.

margin-right

Only the numeric part of the value is used. Units (px, pt) are not parsed; pixels and points are equivalent.

text-align

Recognized values are left, center, right, and justify.

text-decoration

Recognized values are none and underline.

text-indent

Only the numeric part of the value is used. Units (px, pt) are not parsed; pixels and points are equivalent.


Note

For details about using CSS in ActionScript 3.0, see the StyleSheet class in the ActionScript 3.0 Language and Components Reference in Flash Help.

The ActionScript to load HTML and CSS into Flash will require you to be somewhat familiar with the language. Basically, you need to use the URLLoader class to load the external HTML and CSS files. Once you’ve loaded both files into Flash, you can parse the styles using an instance of the StyleSheet class, making it usable, by using the parseCSS method. From there, you connect the stylesheet object to a text field by using the text field’s styleSheet property and then have the text field display the styled HTML data by using its htmlText property. That’s it! Your code may look similar to this example:

var htmlReq:URLRequest = new URLRequest("html.txt");
var cssReq:URLRequest = new URLRequest("styles.css");
var loader:URLLoader = new URLLoader();
var sheet:StyleSheet = new StyleSheet();
var htmlData:String = "";

function fileLoaded(event:Event):void
{
    htmlData = loader.data;
    loader.removeEventListener(Event.COMPLETE, fileLoaded);
    loader.load(cssReq);
    loader.addEventListener(Event.COMPLETE, cssLoaded);
}

function cssLoaded(event:Event):void
{
    sheet.parseCSS(loader.data);
    html_txt.styleSheet = sheet;
    html_txt.htmlText = htmlData;
    html_txt.autoSize = TextFieldAutoSize.LEFT;
}

loader.load(htmlReq);
loader.addEventListener(Event.COMPLETE, fileLoaded);

Note

The entire workflow for HTML and CSS with ActionScript 3.0 appears in more detail in the exercises at the end of this chapter.

Solving the Link Dilemma

One basic advantage to using HTML over Flash for large applications or websites is the fact that HTML provides an easy, natural way to link to various states of the application because an application can be made into several linkable pages.

Earlier in this chapter, I mentioned that you can emulate this functionality in Flash to create a better user experience. In this section, we’ll view three (some effective, some less effective) methods for linking in Flash.

Understanding named anchors

If you use frame labels in Flash, you may be familiar with named anchors. Named anchors are a way for you to communicate to your browser’s back button to create a better user experience in your applications. Sadly, named anchor support extends only to Internet Explorer, and is unsupported in other web browsers. Though named anchors have little support, and thus aren’t considered necessary, we’ll still discuss the process of creating anchors in case you should choose to use them.

You can add named anchors to any keyframe in your Flash application via the Property Inspector. Simply select a keyframe, add the name of the anchor to the Label field in the Property Inspector, and choose “anchor” for the frame label type.

Warning

Named anchors should not contain any spaces or special characters.

Creating multipage applications

Perhaps the easiest approach to optimizing a Flash application is simply to create multipage applications. So, instead of navigating the application asynchronously, users will be moved to different pages and will have to wait for the pages to load.

The great thing about this tactic is the easiness of it. Instead of using buttons in your site to trigger complex ActionScript or to navigate to frames or frame labels, you simply use URLs. This gives you a fast and easy method for linking to specific states of your application, and for SEO purposes it gives you an application similar to an HTML-based application.

Sadly, as easy as it is, creating multipage sites isn’t necessarily the best way to optimize a Flash application. That’s because one of the big reasons to use Flash is to easily create applications that run asynchronously—without multiple page loads. Waiting for a page load at every change in an application will make your application more similar to its HTML counterpart, which in some ways defeats the purpose of using Flash.

Note

For practice creating multipage Flash applications, see the exercises at the end of this chapter.

Understanding deep links

Deep links are the best practice for linking in Flash SEO, because they allow you to link to any state of an application and they allow asynchronous navigation. Deep linking works by using pseudo anchors, which work similar to named anchors in HTML. You may or may not be familiar with named anchors, so here’s a quick refresher—named anchors are what you use in HTML to navigate to a specific part of a page, and they don’t require a page reload. The idea of deep linking is the same. The most popular tool for deep linking is SWFAddress, which is JavaScript-based and uses special addresses to communicate to Flash.

Note

We’ll cover how to implement SWFAddress in Chapter 4, Using JavaScript with Flash for SEO.

Exercises

Now that you’re familiar with how to optimize applications in Flash, let’s complete some exercises to practice the different techniques.

Exercise 3-1: Optimizing a Flash Application

In this exercise, you’ll add static text, dynamic text, and metadata to a Flash application to optimize it for search engines.

Note

Because this file was created for Flash Player 7, the code used is ActionScript 2.0.

File: Optimizing.fla

  1. Open Optimizing.fla in the Chapter 3, Creating Optimized Content in Flash folder.

  2. Double click the INFO button at the bottom right of the Stage to enter the mcInfo timeline.

    Note

    This timeline contains two frames. Both show the descriptive text, but one is off the Stage. This is because to auto-embed dynamic text field content into your published HTML file, the content must appear on the first frame.

  1. Inside the mcInfo movie clip, move to frame 2 and note the descriptive text in the dynamic text field. This content will be embedded into your HTML file when you publish it.

  2. Select the first keyframe of the actions layer and open the Actions panel (Window→Actions).

  3. In the Actions panel, note the interactive code:

    stop();
    
    this.onRollOver = function():Void
    {
        gotoAndStop(2);
    }
    
    this.onRollOut = function():Void
    {
        gotoAndStop(1);
    }
    

    This code stops the playback of this movie clip, moves to frame 2 when the movie clip is rolled over, and moves back to frame 1 on rollout.

  4. Return to the main timeline by clicking Scene 1 at the top of your screen.

  5. On the main timeline, select the static text field, Target Time, at the top right of the Stage.

  6. Because this text field is not useful for SEO, convert the text to vector shapes by choosing Modify→Break Apart twice.

    Note

    You need to run Break Apart twice because the first time it converts the letters in the text to individual text blocks. The second time it converts the text blocks into shapes.

  1. Choose File→Info to add XMP metadata to the file.

  2. In the metadata window, add some title and description information (see Figure 3.4, “Entering XMP metadata to the file”), and then click OK when you’re finished to accept the changes you’ve made.

Figure 3.4. Entering XMP metadata to the file

Entering XMP metadata to the file

  1. Choose File→Publish Settings to open the Publish Settings window.

  2. In the Publish Settings window, select the Flash tab and make sure the Include XMP Metadata checkbox is turned on.

  3. Click Publish to publish the HTML and SWF files and then close the Publish Settings window by clicking OK.

  4. Open the HTML file Flash just created for you in a web browser, and then choose View→Page Source to view the source code. In the source code, scroll to the bottom to view the descriptive text from Flash (see Figure 3.5, “Viewing the auto-embedded HTML description in the source code”).

Figure 3.5. Viewing the auto-embedded HTML description in the source code

Viewing the auto-embedded HTML description in the source code

Exercise 2: Optimizing ActionScript-Driven Text in a Flash Application

When you’re optimizing Flash applications, using HTML code can allow you to prioritize content, using links, headings, and other HTML tags. In this exercise, you’ll look at the entire workflow of bringing external HTML into Flash, and how to style the HTML code using CSS.

  1. First things first—you’ll need some HTML code to import. In the exercise files for this book, you’ll find html.txt in the folder for this chapter. Let’s take a look at the HTML code in that file.

    File: html.txt

    <h1><a href="wii-games/xylophone-master.html">Xylophone Master</a></h1>
    <p>Learn to master playing the xylophone and simultaneously boost 
    your memory!Listen to the computer play notes and simply play them back 
    by moving your mouse or Wii remote up and down over the keys.</p>
    
    <h1><a href="wii-games/meteor-blaster.html">Meteor Blaster</a></h1>
    <p>Shoot meteors with powerful laser cannons! Advance through levels 
    based on your score. Watch your energy meter! Those meteors are 
    relentless!</p>
    <h1><a href="wii-games/fun-run.html">Fun Run</a></h1>
    <p>Run a marathon as a giant man, completing up to 26.2 miles in 
    5 seconds! Move the mouse (or WiiMote) up and down to run. 
    Finish fast to get medals!</p>
    
    <h1><a href="wii-games/set-the-clock.html">Set the Clock</a></h1>
    <p>Rotate the mouse or WiiMote clockwise or counterclockwise to 
    set the big clock to display the same time as the little clock. 
    Race your friends to get the best time! Clock on!</p>
    

    Note

    This file is similar to the index page used in Chapter 2, Creating an SEO Website, but without images and DIV tags. For SEO, you can still use links and heading tags to optimize your content. When using HTML for Flash, it’s typically best to stick to text content only, because you have little control over the layout of images.

  2. Open styles.css in the folder for this chapter, and browse its contents.

    File: styles.css

    
    p {
        font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
        font-size: 14px;
        font-weight: normal;
        color: #FFFFFF;
    }
    
    h1 {
        color: #9FFF9F;
        font-size: 20px;
        font-weight: bold;
    }
    
    a {
        color: #9FFF9F;
        text-decoration: none;
    }
    
    a:hover {
        color: #C8FFC9;
        text-decoration: underline;
    }
    

    Though CSS in Flash is limited, you can still style paragraphs, headings, and links.

  3. Now we’ll look at the ActionScript required. The file HTML-CSS.fla contains a simple layout with a dynamic text field that has an instance name of html_txt. The first keyframe of the actions layer in that file contains the following code.

    File: HTML-CSS.fla (first keyframe of the actions layer)

    var htmlReq:URLRequest = new URLRequest("html.txt");
    var cssReq:URLRequest = new URLRequest("styles.css");
    var loader:URLLoader = new URLLoader();
    var sheet:StyleSheet = new StyleSheet();
    var htmlData:String;
    
    function fileLoaded(event:Event):void
    {
        htmlData = loader.data;
        loader.removeEventListener(Event.COMPLETE, fileLoaded);
        loader.load(cssReq);
        loader.addEventListener(Event.COMPLETE, cssLoaded);
    }
    
    function cssLoaded(event:Event):void
    {
        sheet.parseCSS(loader.data);
        html_txt.styleSheet = sheet;
        html_txt.htmlText = htmlData;
        html_txt.autoSize = TextFieldAutoSize.LEFT;
    }
    
    loader.addEventListener(Event.COMPLETE, fileLoaded);
    loader.load(htmlReq);
    

    Let’s do a quick walkthrough of this code. The first five lines (the ones that begin with “var”) define the variables used. The variables represent the URLs to the HTML and CSS files (htmlReq and cssReq), the object that will load the data from the files (loader), the ActionScript version of the stylesheet (called sheet), and the HTML data loaded from the external TXT file:

    var htmlReq:URLRequest = new URLRequest("html.txt");
    var cssReq:URLRequest = new URLRequest("styles.css");
    var loader:URLLoader = new URLLoader();
    var sheet:StyleSheet = new StyleSheet();
    var htmlData:String;
    

    At the bottom of the code is where the application begins its work. The loader object loads the URL for the HTML file (loader.load(htmlReq)), and waits for the file to load (loader.addEventListener(Event.COMPLETE, fileLoaded)), at which point the fileLoaded function will run:

    loader.load(htmlReq);
    loader.addEventListener(Event.COMPLETE, fileLoaded);
    

    The fileLoaded function stores the HTML data within the htmlData variable, disassociates the loader from the fileLoaded function, loads the CSS file, and sets the cssLoaded function to run once the CSS file is loaded:

    function fileLoaded(event:Event):void
    {
        htmlData = loader.data;
        loader.removeEventListener(Event.COMPLETE, fileLoaded);
        loader.load(cssReq);
        loader.addEventListener(Event.COMPLETE, cssLoaded);
    }
    

    The cssLoaded function parses the loaded CSS code, making it usable in ActionScript, connects the text field on the stage (html_txt) to the stylesheet object, sets the text field to display the HTML text, and sets the text field to autosize:

    
    function cssLoaded(event:Event):void
    {
        sheet.parseCSS(loader.data);
        html_txt.styleSheet = sheet;
        html_txt.htmlText = htmlData;
        html_txt.autoSize = TextFieldAutoSize.LEFT;
    }
    
  4. Once you’re done viewing the ActionScript in this file, you can see the file in action by choosing Control→Test Movie (shown in Figure 3.6, “Viewing HTML text styled by CSS in Flash Player”).

Figure 3.6. Viewing HTML text styled by CSS in Flash Player

Viewing HTML text styled by CSS in Flash Player

Note

If you click the HTML links in Flash Player, HTML pages will open. You can use HTML links like this to quickly and easily create a multipage Flash application.

Key Terms Used in This Chapter

Table 3.3, “Key terms used in this chapter” contains the terms that were introduced in this chapter and gives you their definitions.

Table 3.3. Key terms used in this chapter

Term

Definition

Deep links

Links that take a user to a specific state of your Flash application

XMP metadata

eXtensible Metadata Platform, a standards-based form of metadata used to embed information about a file into the file itself


If you enjoyed this excerpt, buy a copy of Search Engine Optimization for Flash. .