Tutorial: Understanding the HTML exported by Max

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading ... Loading ...

The purpose of this tutorial is to help users understand the content in the HTML page produced by SWiSH Max4, miniMax4 and earlier versions. This content is created when the user selects ‘Export as SWF + HTML‘. The tutorial is aimed at the beginners/novice user and explains what the code means and how to edit it to your specific requirements. Each tag used in the exported HTML file will be briefly explained.

This tutorial does not describe in detail how to get your page ranked by search engines. Search engines are a complex topic, a topic that is constantly evolving. Only on-going research and investigation will help you to understand ‘how’ search engines rank sites/pages. That said, the content in the HTML tags can help make your exported site more search engine friendly.

Why use the HTML page at all?

There are two reasons. The first is that it allows you to control the size of your movie. The code includes the dimensions of the player and ensures all content is viewed as intended.

The second, and more important reason, is that SWF movies are not search engine friendly. Many search engines cannot enter your movie and read text objects or follow links. They can read text in HTML pages, and they can follow links in and out of HTML pages. Containing your SWF movie in an HTML page that also includes text and links allows your site to be indexed by search engines and read by screen readers.

Note that Google is one search engine that does search Flash content. This article explains some of the background.

How to view and edit the HTML parameters:

There are 3 ways to do this:

1. Export Settings dialog (Max2 and later)

Probably the easiest way is to use the Export Settings dialog to modify the important html tags. The dialog is enabled using Main Menu | Tools | Preferences | Export option and then setting the Show export settings when exporting checkbox.

If enabled, the dialog is displayed after the Save button is pressed.

This dialog allows you to alter the major tags associated with your movie. The dialog is explained in detail in the Max4 help file. The online version of the manual can be found here.

Note: If the width and height fields are left blank, the values will be filled in according to the defined dimensions of the exported movie. In general, leave the width and height fields blank.

The dialog also allows selection of different html templates. In general, the default template is sufficient, but in some cases an alternate template may be desired. For example, this blog article demonstrates a template that can be used to pass URL query strings to the .swf movie.

2. View / Edit in default HTML editor after export.

View and edit the HTML source code in your default HTML editor by choosing ‘Yes’ in the dialog that appears immediately after you Export to SWF + HTML from SWiSHmax.

If the dialog does not appear then you can alter the default export behavior using Main Menu | Tools | Preferences | Export .

Then adjust the When exporting option to be Prompt to edit HTML.

This tool opens the page using the currently defined default HTML editor. Unfortunately, the default editor may not be ideal for the purpose. Microsoft Frontpage and Word both set themselves up to be the default HTML editor if they are installed. As both applications insert additional HTML code into the page you are editing they should not be used. See the option below as an alternative.

3. Manually edit the exported html file.

After Export, you can browse to the HTML file in it’s saved location, R-Click on the file and select ‘Open with’, and then locate and select Notepad (or a similar flat text editor). This is the preferred method if the Export settings dialog is unable to provide the needed flexibility.

What you will see:

If using methods 2 or 3 you should see html output similar to the text shown below:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html40/loose.dtd">
<html>
 <head>
 <title>my new title</title>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <meta name="author" content="jon">
 <meta name="generator" content="SWiSH Max4 (2010.11.02) www.swishzone.com">
 <meta name="description" content="my description">
 <meta name="keywords" content="as, exported, file, hello, hopefully, html, in, is, keywords, movie, show, test, text, this, up, will">
 <!-- text used in the movie -->
 <!-- as, exported, file, hello, hopefully, html, in, is, keywords, movie, show, -->
<!-- test, text, this, up, will -->
 <!-- Created by SWiSH Max4 - The Ultimate Flash Creation Tools - www.swishzone.com -->

<style type="text/css">
/*<![CDATA[*/
html, body
{
 margin: 0;
 padding: 0;
 height: 100%;
}
object
{
 vertical-align: top;
}
/*]]>*/
</style>
 </head>
 <body bgcolor="#FFFFFF">
 <center>
 <object
 classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
 codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,42,0"
 id="testmovie"
 width="560" height="410"
 >
 <param name="movie" value="testmovie.swf">
 <param name="bgcolor" value="#FFFFFF">
 <param name="quality" value="high">
 <param name="seamlesstabbing" value="false">
 <param name="allowscriptaccess" value="samedomain">
 <embed
 type="application/x-shockwave-flash"
 pluginspage="http://www.adobe.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"
 name="testmovie"
 width="560" height="410"
 src="testmovie.swf"
 bgcolor="#FFFFFF"
 quality="high"
 seamlesstabbing="false"
 allowscriptaccess="samedomain"
 >
 <noembed>
 </noembed>
 </embed>
 </object>
 </center>
 </body>
</html>

This .zip file contains the Max4 source file that was exported to create the html code above. Note that the movie contains the static text: “Hello this is some test text in the movie. Hopefully it will show up as keywords in the exported html file.” All text found within the movie is included in the exported html file as meta keywords and comments. This allows the text within the movie to be automatically found by search engines.

The very first thing on the page is -

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN” “http://www.w3.org/TR/html40/loose.dtd”>

This is a ‘document type declaration’ which tells the browser which version of HTML is being used, what language the HTML code is in (not what language is displayed), and the URL of the definitions that need to be used by the browser. It is found at the very beginning of an HTML document, even before the <HTML></HTML> element

There are detailed explanations of DOCTYPE already in existence, so I won’t go into details here, it is enough to say that the DOCTYPE is a key component of all valid HTML documents.
Here are a couple of links for further reading, but a google search with ‘DOCTYPE explained’ will find many good references.
http://www.alistapart.com/stories/doctype/
http://www.oreillynet.com/pub/a/javascript/synd/2001/08/28/doctype.html

DOCTYPE appears even before the opening <html> tag and is needed in every valid HTML document.

<html>

This is the opening tag of a pair <html></html> (it is good practice to close every tag, so I will presume from this point that you realize that every tag mentioned will have a matching closing tag), and indicates that everything in between needs to be rendered according to HTML protocols. HTML means HyperText Markup Language.

<head>

This is where it starts getting interesting. Information within the <head></head> tag is not displayed in your HTML page when viewed in a browser, but is used by both the browser and the search engines, so some changes here will help to make your page more friendly and useable.

<title>

This value is filled according to the value entered into the Export Settings dialog. The choice of title is important. All major Search engine crawlers will use the text in your title tag as the text they use for the title of your page in the search engine result listings. It is also the text that shows in the top bar of a viewer’s browser, and will be the text seen in a user’s ‘favorites’ list if the page is added to the browser favorites.

Try and base your title around the top 2 or 3 phrases that you would like the page to be associated with. A good suggestion is to think of newspaper headlines when creating titles. This will help increase the impact of your title.

<meta>

The default HTML output from SWiSHmax uses only a few of the available meta tags, which are also used by browsers and search engines, but not displayed on your page in the browser. You can find a full list of possible meta tags here – http://www.webmarketingnow.com/tips/meta-tags-uncovered.html.

I will only cover those produced by Max in the default HTML. Most of the other <meta> tags listed in the above link are no longer recommended for use. Tags that are not recommended are generally ignored by search engines. Google ignores all meta tags apart from Meta Google. The Meta Google tags are generally not worth including as they are optional and are generally used to restrict the way Google accesses your page.

<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>

As a meta tag, this causes browsers to load the appropriate character set before displaying the page.

<meta name=”author” content=”jonh”>

This content is obtained from the Export Settings dialog.

<meta name=”generator” content=”SWiSH Max4 (2010.11.02) www.swishzone.com”>

Developers would typically insert the name and home URL, or version number, of the application used to create the page, but the tag is optional and you can remove it, as it is unnecessary. It has no impact on browsers or search engines. Max will insert its name and version number. This may assist with debugging.

<meta name=”description” content=”my description”>

This content is obtained from the Export Settings dialog.

This tag is particularly important if your HTML page has little text, or is part of a frameset. Search engines supporting this tag will use the contents of this tag as the description below your page title in search engine results. It should be a short and simple language description of what is on the page, and about 20 – 25 words or less in length.

As an example, for this particular page I could use something like this – <meta name=”description” content=”HTML tags explained. A tag by tag analysis of the default HTML exported by SWiSHmax, a SWF authoring application”> which describes the page fairly accurately in 19 words.

<meta name=”keywords” content=”…”>

This a comma separated list of key words. It is automatically filled in by max with any static text that is contained in your movie. Max4 will also enter any text that is entered into the parameters section of any contained component.

This used to be a very important tag for search engines, but is no longer as important as most search engines have stopped using it. Historically the tag was much abused, often loaded with irrelevant but well-searched words in an attempt to gain a better rank in search results.

Some search engines may mark a page down if the words appear out of context. As the automatically generated list contains all words within the movie, the list could be improved by removing words that are not relevant to the description of the site. Specifically words like a, and, or, if, in, is, new, the etc. should be removed from this list.

Comments – <!–

Text between this – <!– and this –> are not displayed or acted upon in HTML code. They are comments added for developer clarification, and, more importantly, in this case, for search engines that ignore the keywords meta content. For that reason, it should be edited in the same fashion recommended for the <meta name=”keywords” content=”"> tag.

<!– text used in the movie –>
<!– as, exported, file, hello, hopefully, html, in, is, keywords, movie, show, –>
<!– test, text, this, up, will –>
<!– Created by SWiSH Max4 – The Ultimate Flash Creation Tools – www.swishzone.com –>

<style>

The <style> tag section was added to fix a problem with full screen movies in IE8 browsers. Prior to this modification, sits that displayed full screen would be displayed small and positioned at the top / center of the screen. This forum article describes the modification in detail.

We have reached the end of the <head> content, so the next tag we see is </head>, the forward slash shows it is a closing tag.

Now we move on to the <body> tag. Content within the tags between between <body> and </body> is displayed in the browser. The tags here specify how it is to be displayed. Each set of tags is ‘nested’ within the previous tag (the exception is the parameter tags for the Flash Player object). Here is a schematic which shows the hierarchy without the content.

<body>
<center>
<object>
<param>
<embed>
<noembed>
</noembed>
</embed>
</object>
</center>
</body>

<body bgcolor=”#FFFFFF”>

The bgcolor=” “ part of the tag is how you specify the color of the page. In your default HTML, this information is taken from the color of your movie, but you can enter the hex value of any color you choose. The Color is expressed in the RRGGBB hexadecimal format. In the example above, FFFFFF is white. This blog article contains more information on the color representation.

<center>

All content between <center> and </center> is centered on the page in the browser window. If the tag was not present, your content would display at the top left of the browser window.

<object> & <embed>

These are the primary way to embed a Flash Player in your HTML page.

The <object> and <embed> tags do the same thing for different web browsers. The <object> tag is used by Internet Explorer on Windows (and any other browser that uses the Flash ActiveX control), and the <embed> tag is used by Netscape and other mozilla based browsers on both Windows and MAC OS to embed an iteration of the Flash Player plugin.

To be sure of viewability in most browsers, both tags need to be used, and should be nested as per our example HTML code above. Browsers with the activeX control will not see, or ignore, the <embed> tag contents, and Flash plugin enabled browsers will ignore the <object> tag, reading only the <embed> tag.

<object>
<embed>
</embed>
</object>

You will notice a bunch of parameters within the <object> tags, but outside of the <embed> tags. The same information is then repeated in a different form inside of the <embed> tags. Some of these are required, while others are optional.

Here is a refresher look at the OBJECT/ EMBED code produced from SWiSH Max.

<object
 classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
 codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,42,0"
 id="testmovie"
 width="560" height="410"
 >
 <param name="movie" value="testmovie.swf">
 <param name="bgcolor" value="#FFFFFF">
 <param name="quality" value="high">
 <param name="seamlesstabbing" value="false">
 <param name="allowscriptaccess" value="samedomain">
 <embed
 type="application/x-shockwave-flash"
 pluginspage="http://www.adobe.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"
 name="testmovie"
 width="560" height="410"
 src="testmovie.swf"
 bgcolor="#FFFFFF"
 quality="high"
 seamlesstabbing="false"
 allowscriptaccess="samedomain"
 >
 <noembed>
 </noembed>
 </embed>
 </object>

Required attributes / Parameters :

NOTE : OBJECT method uses parameters, EMBED method details the attributes…same thing for different tags

CLASSID : this specifies the required ActiveX control for browsers that use the ActiveX method

CODEBASE : this is the location of the ActiveX control so the browser can download automatically if the viewer does not already have it installed.

WIDTH : specifies the width of your SWF movie. SWiSH Max by default uses a specific pixel size (but you can also enter % of browser window to be used).

HEIGHT : specifies the height of your movie.

SRC : Specifies the URL location of the SWF file to be loaded.
NOTE: This attribute is specific to browsers using the EMBED method, so is placed between the <embed> tags.

PLUGINSPAGE : Specifies the location of the Flash Player plug-in.
NOTE: Again this relates only to browsers that use the EMBED method, so it is also placed between the <embed> tags.

MOVIE : Specifies the URL location of the movie to be loaded.
NOTE: This attribute relates only to the OBJECT method, so should be within the <object> tags, but outside of the <embed> tags.

Optional attributes / Parameters :

ID : Is used to identify the SWF movie so that it can be referenced using a scripting language like javascript.
NOTE: This attribute relates only to the OBJECT method, so should be within the <object> tags, but outside of the <embed> tags.

NAME : Is used to identify the SWF movie so that it can be referenced using a scripting language like javascript.
NOTE: This attribute relates only to the EMBED method, so should be within the <embed> tags.

QUALITY : Using quality=”high” favors appearance over performance and always applies anti-aliasing. Options are – low, high, autolow, autohigh & best.

SWLIVECONNECT : This attribute specifies whether the browser should start Java when loading this iteration of the Flash Player. If you use javascript and SWF on the same page, this must be specified as ‘true’.

ALLOWSCRIPTACCESS : Controls the ability of the SWF file to perform outbound scripting.

<noembed>

This tag is a method of offering an alternative for those browsers (using the EMBED method) which do not support the object embedded (so basically Mozilla type browsers without the Flash Plug-in and no method of getting it). A search on the uses of the <noembed> tag will find some interesting applications but is beyond the scope of this article. Image alternatives (the same size as your SWF movie) can be used in this tag.

Concluding…

And that is it, we have reached the end. There is a lot of information to digest, but, as I indicated above, you can make the default HTML pages from SWiSH Max a bit more user and search engine friendly by paying attention to the title, meta and comment information in the head of the HTML document. If you want to discover more about any particular tag, attribute or parameter, do a web search to find out lots more about HTML code stuff.

Thanks

This article was based on an article originally written by David Petley for Max (v1). Still relevant, it has been updated for Max4. Thanks David for the original article and idea.

Tags: ,

10 Responses to “Tutorial: Understanding the HTML exported by Max”

  1. [...] This post was mentioned on Twitter by QRahevar, MRahevar and ARahevar, Drahevar. Drahevar said: SWiSHzone.com Official Blog » Blog Archive » Tutorial …: The default HTML output from SWiSHmax uses only a few … http://awe.sm/5GdHF [...]

  2. Joe says:

    Thanks for the help. I understand basic html tags. What is the difference between HTML 4 HTML 5 etc and how does that play into exporting code? Does it matter.

    • jonh says:

      Hi,

      HTML5 is the latest revision of the HTML specification. Browsers that support HTML5 should continue to support HTML4 so existing sites should continue to work.

      HTML5 does add some new interesting features such as direct support for video, audio and 2D drawing (canvas). Unfortunately it appears that different browser vendors will choose to support only specific video and audio codecs.

      This means that if you choose to use the video or audio tags, you will need to supply your video in multiple formats so that it will work in the different browsers.

      Jon

  3. Frederick says:

    Very helpful and easy to follow. Thanks for considering the beginner/novice users. One question though. The document type declaration:

    seems to eliminate the need for the tag section in that 4.01 resolves this issues with IE8. Is there any other reason this tag should be used?

    • hughb says:

      Sorry your question seems to be missing bits – probably because HTML was stripped from your comment before I see it here. Can you please ask the question on our support form (https://my.swishzone.com/support.asp?redir=no) and include the HTML or repeat the question and break the tags.

      • Frederick says:

        Yes it seems as though the tags were striped. Let try again:

        The document type declaration:
        DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN” “http://www.w3.org/TR/html40/loose.dtd

        seems to eliminate the need for the Style tag section in the HTML. Version 4.01 resolves this issues with full screen movies in IE8. Is there any other reason this Style tag should be used?

  4. tophtml says:

    What is the different between html 4 and html 5 ?? what is the affect for old web pages??

  5. Mihai says:

    Hi,
    Please help about export a swish file to a GIF….When i’m doing that the resolution of the file in gif is very bad…..
    I want to know how can i Improve the resolution(..or colors…i only have 256colors)
    Thanks

  6. Miquel Bahr says:

    Wow that was odd. I just wrote an extremely long comment but after I clicked submit my comment didn’t show up. Grrrr… well I’m not writing all that over again. Regardless, just wanted to say wonderful blog!


Switch to our mobile site