Member Avatar for mattyd

** I am not sure if this is the correct area for this post-- please move to correct forum if necessary-- thanks.

I am redeveloping the website for the company I work for. It is going along quite well but I have a question in regards to Flash; I have never worked with Flash in any way before. I simply wished to add a simple Flash element to the already-made, JPEG header; I did this via a software program which produced a .swf file when saved. This seemed to work fine (I opened the file in IE7 to view it-- it worked.)

I would like to learn and understand how to use this now in the site. I added it into the css sheet in place of the original JPEG header-- I had the feeling it would not un and it didn't.

css code snippet with .swf file

#VISUAL{ width: 750px; text-align: right; margin-left: auto; margin-right: auto;  height: 122px;  background-color: #1F7A2A;  background-image: url([B]redSquares.swf[/B]);  background-repeat: no-repeat;}

Any help or push in the right direction would be very much appreciated. I really want to understand this issue as well as fix this problem.

Kind Regards,
Matty D

  • 5 Contributors
  • 8 Replies
  • 197 Views
  • 2 Years Discussion Span
  • Latest Post Latest Post by Ankitpb

Dani AI

Generated

Short answer: a SWF is not an image and cannot be used with background-image:url(...). The CSS background layer only draws image resources; browsers will ignore or fail to render plugin content referenced as a background, which is why background-image: url(redSquares.swf) did nothing. was correct — you must embed the SWF so the browser invokes the Flash runtime or plugin. (w3.org)

Embed example (place in the header HTML, not in CSS). Use the element below, set width/height to your header size (750x122), and provide fallback content for non-Flash browsers:

<object type="application/x-shockwave-flash" data="redSquares.swf" width="750" height="122">
  <param name="movie" value="redSquares.swf" />
  <param name="quality" value="high" />
  <param name="wmode" value="opaque" />
  <param name="allowScriptAccess" value="sameDomain" />
  <!-- fallback for users without Flash -->
  <img src="header.jpg" width="750" height="122" alt="Company header" />
</object>

Authoring tools (Flash/Animate) will publish similar HTML automatically — copying the generated HTML is a quick, reliable start. Always host the .swf on your server with the correct path and test across browsers. ()

If you need HTML elements over the movie (menus, buttons), set wmode to opaque or transparent so the SWF becomes windowless; be aware wmode can introduce rendering and input quirks in some browsers (test IE/legacy). ()

Important modern note: Flash Player reached end-of-life on December 31, 2020 and major browsers no longer run the plugin — do not rely on SWF for new, public-facing sites. For archived SWFs you can try the open-source emulator Ruffle (good compatibility for many older SWFs), or port the animation to HTML5/CSS/Canvas, export a video, or re-create it as a Lottie animation for lightweight, responsive vector motion. (adobe.com)

Notes tied to thread: ’s suggestion to use the Flash publish output is practical; (and others rebuilding a header) will find the object markup above a safe, cross-browser starting point — but for longevity, prefer an HTML5-based animation.

Recommended Answers

All 8 Replies

Member Avatar for MattEvans

I won't claim to know exactly why it won't work, and I don't know how you could make it work in that way.

However; a flash .swf file is not an image file. To put a flash object on a page, you have to have to 'embed' it on a page. Using an actual 'embed' tag work in most cases sometimes, but the apparent 'correct' way is to use 'object' tags.

The best way is to use embed tags inside object elements, because 'object' does some compatibiity delegation. (so if object fails, embed should work)

Linking a flash file from an image tag (equivelent to putting it as a background image in CSS) will not work; in the same way as linking an html file to an 'image' tag's src won't work. The browser expects the response to looking for that source image to return an image type result, if it doesn't find one, it treats it as it would if nothing was at that location. (Note: If the flash file identified itself as an image type, it wouldn't be processed as a flash movie,)

If you know how to embed flash movies on a page, and just want objects to appear on top of it (as if it was a background), you might have some sucess with absolutely positioned elements 'on top' of the movie. That's quite a detailed subject in itself, but as a snippet:

<html>
<body style="margin:0;padding:0">
<embed src="your_flash.swf" type="application/x-shockwave-flash"/>
<div style="color:white;position:absolute;left:0;top:0;">
This should be on top of your Flash movie.. Perhaps.
</div>
</body>
</html>

If you don't have macromedia flash mx (flash mx produces HTML embed/object code automatically, which is certainly useful when you see how big it can end up), then check this resource:

http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=tn_4150

commented: help with Flash\\ ;) +3
Member Avatar for mattyd

I won't claim to know exactly why it won't work, and I don't know how you could make it work in that way.

However; a flash .swf file is not an image file. To put a flash object on a page, you have to have to 'embed' it on a page. Using an actual 'embed' tag work in most cases sometimes, but the apparent 'correct' way is to use 'object' tags.

The best way is to use embed tags inside object elements, because 'object' does some compatibiity delegation. (so if object fails, embed should work)

Linking a flash file from an image tag (equivelent to putting it as a background image in CSS) will not work; in the same way as linking an html file to an 'image' tag's src won't work. The browser expects the response to looking for that source image to return an image type result, if it doesn't find one, it treats it as it would if nothing was at that location. (Note: If the flash file identified itself as an image type, it wouldn't be processed as a flash movie,)

If you know how to embed flash movies on a page, and just want objects to appear on top of it (as if it was a background), you might have some sucess with absolutely positioned elements 'on top' of the movie. That's quite a detailed subject in itself, but as a snippet:

<html>
<body style="margin:0;padding:0">
<embed src="your_flash.swf" type="application/x-shockwave-flash"/>
<div style="color:white;position:absolute;left:0;top:0;">
This should be on top of your Flash movie.. Perhaps.
</div>
</body>
</html>

If you don't have macromedia flash mx (flash mx produces HTML embed/object code automatically, which is certainly useful when you see how big it can end up), then check this resource:

http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=tn_4150

Matt:

Hi. Thank-you for your reply.

I got it to work a bit ago. :cheesy: I used something similar to what you posted; With a few formatting tweaks for the page HTML, it worked great :!::eek: Very exciting. I love figuring things out, researching, hacking around a bit, and getting a working result ;)

Thanks again for your help.

Kind Regards,
Matty D

Member Avatar for Member #46692

do you have a link to your company's website. I would like to see what you did with the flash.

Member Avatar for mattyd

do you have a link to your company's website. I would like to see what you did with the flash.

I am building it off-line. I will be sure to post a link for you when it goes live. Thanks for the interest. ;)

Matty

Member Avatar for Member #46692

I am building it off-line. I will be sure to post a link for you when it goes live. Thanks for the interest. ;)

Matty

What type of company is it?

Member Avatar for mattyd

Software (independent game studio)

Member Avatar for bigtarr

Matt:

Hi. Thank-you for your reply.

I got it to work a bit ago. :cheesy: I used something similar to what you posted; With a few formatting tweaks for the page HTML, it worked great :!::eek: Very exciting. I love figuring things out, researching, hacking around a bit, and getting a working result ;)

Thanks again for your help.

Kind Regards,
Matty D

matt,
can you share with me how you got the .swy file to work. I am doing a website for one of my college classes and I keep trying to get my .swf to work but it's been a no go.

thx.
Brandon

Member Avatar for Ankitpb

just u use Flash software and develop ur document and published web paged by press F12. U will get the code from the source code of that page copy the code and past it to HTML page, this is the simple way to input .swf file in HTML.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.