Replacing a jpg banner with a flash/swf one

I'm working with the Acquia Slate theme (http://drupal.org/project/themes?text=acquia%20slate). Changing the front-page image is a simple style.css one line change, but trying to change that to be a flash animation is a bit deeper than I've gone so far.

I've got swf tools installed, so getting flash animations into content, and blocks is not that difficult. But replacing that front-page image is requiring more effort.

Is this along the right directions? http://drupal.org/node/181591
I've not modified any template.php files in drupal yet - I've been mostly coming up to speed on other aspects of drupal, and learning javascript & jquery...

To answer your direct questions:

• The existing jpeg banner is specified as a background image in style.css, like this:
  • background: transparent url('images/cropped/lh_header3.jpg') no-repeat left top;
• The page-front.tpl.php section that appears to be handling this portion of the page looks like this:
  
  
        <div id="preface-wrapper" class="clearfix">
        <?php if ($preface_sidebar): ?>
          <div id="preface-sidebar">
            <?php print $preface_sidebar; ?>
          </div>
        <?php endif; ?>
        <?php if ($mission): ?>
          <div id="mission">
            <?php print $mission; ?>
          </div>
        <?php endif; ?>
      </div><!-- /preface-wrapper -->
  
  and here's the css for that "preface-wrapper" that handles the front-page image:
  
  #preface-wrapper {
  background: transparent url('images/cropped/lh_header3.jpg') no-repeat left top;
  height: 355px;
  margin: -33px 0 20px;
  overflow: hidden;
  position: relative;
  width: 960px;
  -moz-border-radius: 0 0 10px 10px;
  -webkit-border-bottom-right-radius: 10px;
  -webkit-border-bottom-left-radius: 10px;
}

Any help you can offer will be significantly appreciated.
-Blake