Inserting Flash into HTML with iSpring

If you want to add a Flash animation or commercial banner to your web page, iSpring is the best solution for simplicity and quality, as it allows you to create professional Flash movies in PowerPoint.

iSpring makes web-ready Flash movie creation extremely easy and doesn't require any Flash programming skills. Just create your presentation in PowerPoint and iSpring will convert it to Flash, preserving all the original animations, transition effects, plus inserted audio, video and preexisting Flash files. iSpring will even generate the HTML code for you, ready to insert into your web page.

Dan Thayer

iSpring makes converting PowerPoint to Flash extremely easy! There are enough options to satisfy even the pickiest user. iSpring is a leader in the PowerPoint to Flash market.

Check out iSpring Suite

The following instructions explain how to add Flash animation to an HTML page.

  1. 1

    Convert your PowerPoint presentation to Flash with iSpring. Select your output file type: a single .SWF movie for the whole presentation or separate files for each individual slide.

    Make sure that Create HTML is selected in the Publish -> General window.

    When converting your presentation with All in one Flash file ticked, you get a Flash movie (.SWF file) for the whole presentation with all of the media resources included.

    Add Flash to HTML: Publishing into a single Flash file

    Unmarking Single Flash file, you get separate SWF movies in accordance with the slides in your PowerPoint presentation.

    Add Flash into HTMl:Publishing into a set of Flash files
  2. 2

    When converting in Single Flash file mode, you have three separate files in the output: Flash movie (.SWF file), HTML page and additional .JS file for Internet Explorer.

    iSpring output for the single Flash mode

    Conversion output with Single Flash file mode on:

    • .SWF file - your Flash movie;
    • .HTML file - an HTML page with your Flash movie on it;
    • .JS file - it prevents Internet Explorer from blocking your Flash movie. It has to be in the same folder with your HTML page for proper operating.

    If you unmark Single Flash file, an extra folder containing separate slide movies and linking .xml file will be added to the output files:

    iSpring output for the separate Flash mode

    Conversion output with Single Flash file mode off:

    • data folder - it has your movie content;
    • .SWF file - your Flash movie;
    • .HTML file - an HTML page with Flash movie on it;
    • .JS file - it prevents Internet Explorer from blocking your Flash movie. It has to be in the same folder with your HTML page for proper operating.
    • .XML file - links your data folder content with an SWF file.

    Remember to copy all the output files together with the data folder to your website for proper Flash movie playback on your web page.

  3. 3

    3In order to ensure smooth playback of a Flash movie on your web page, edit its HTML code, pasting the corresponding piece of code generated by iSpring. A web page’s HTML can be viewed right from your browser window by selecting the “View Source” option; the keyboard shortcut CTRL+U works in all current browsers (⌘ Command+U for Mac). You can also open it in a text editor — you should use a simple text editor that doesn't allow font styles, e.g. Notepad. Do NOT use Microsoft Word, OpenOfficeWriter, WordPad, etc.

    Right-click your HTML file and select Open with -> Notepad

    Insert Flash in html code
  4. 4

    In a new window you will see your page’s HTML code. Your movie code is enclosed within the object tag. If your web page is written in HTML, choose the piece of code as shown in the screenshot below. For XHTML pages, choose the code after the comment "Use the following <object> tag to embed the Flash presentation into an XHTML document". Remember that you will need to insert only one piece of code within the object tag. You can find the type of the web document, HTML or XHTML, at the very beginning of the web-page’s source code.

    Flash movie HTML code example:

    Sample of Flash in HTML code
  5. 5

    Now just copy the content of the object tag and paste it into your web-page’s HTML code.

    You can also specify the location and mode of your movie’s attributes and parameters for the object tag and duplicated attributes for the embed tag. (Note: these attributes are not duplicated in XHTML and thus there is no embed tag.)

    • quality ("low/autolow/autohigh/high/medium/best") - designates outline smoothing quality;
    • bgcolor - determines slide background color;
    • align ("right/left/middle") - sets movie alignment within the page;
    • src (movie parameter) - shows the movie source;
    • width, height - designates movie size in pixels;
    • allowFullScreen - allows Full screen mode (for FlashPlayer 9 and later).

    In the script tag, the src attribute shows the path to the .js file. This file must be stored in the same folder with the web page containing your Flash movie.

    Also remember that all the files with your movie have to be stored together with the page in order to assure your movie's flawless playback.

Following these tips will help you to enrich and beautify your web site with Flash animations!