embedding flash in html

sorry if this has been asked a lot of times before

Page 1 of 1

13 Replies - 2047 Views - Last Post: 03 November 2009 - 03:31 AM

#1 chicaloca  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 48
  • Joined: 20-May 09

embedding flash in html

Post icon  Posted 27 October 2009 - 05:57 AM

hi everyone

well ive been trying to get my head round the swf2object and its been slowly but surely pickling my head. ive been trying different things myself to try and fix the problem but because I'm inexperienced im confusing myself more and more.

basically I have a banner called banner.swf. at the moment it does not fill the whole area at the top of the screen allocated to the banner and has white blocks around it instead of being transparent.

I have the following code:


<head><script src="/AC_RunActiveContent.js" type="text/javascript"></script></head> <div id="header"> <object width="900" height="100"><param name="movie" value="banner.swf" /><embed src="banner.swf" align="middle" width="900" height="100"> </embed></object> </div>




and in my css


#header {width: 900x;color: black;padding: 10px;border: 1x solid #ccc;height: 100px;margin: 5px 0px 5px 0px;background: #C0D9D9}



When I used the swf2object it produced html code for me but I wasnt sure where to place it into my existing index html page.

sorry if this doesnt make a lot of sense, i'm at work just now but can post a screenshot of what my banner looks like at the moment if that helps

Is This A Good Question/Topic? 0
  • +

Replies To: embedding flash in html

#2 thehat  Icon User is offline

  • awake ? web();
  • member icon

Reputation: 106
  • View blog
  • Posts: 951
  • Joined: 28-February 08

Re: embedding flash in html

Posted 27 October 2009 - 07:18 AM

I would recommend using SWFObject to embed your flash movie. You can get it here: linky.

An example is included in the download to get you started using it. There may seem to be more code than you've previously used, but it supports auto-installing of flash player and is standards compliant.

Another tip for you: naming html elements and flash files 'banner' is not a good idea. Ad blockers will automatically hide your flash, even if it's not an advert.
Was This Post Helpful? 0
  • +
  • -

#3 chicaloca  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 48
  • Joined: 20-May 09

Re: embedding flash in html

Posted 27 October 2009 - 02:51 PM

View Postthehat, on 27 Oct, 2009 - 06:18 AM, said:

I would recommend using SWFObject to embed your flash movie. You can get it here: linky.

An example is included in the download to get you started using it. There may seem to be more code than you've previously used, but it supports auto-installing of flash player and is standards compliant.

Another tip for you: naming html elements and flash files 'banner' is not a good idea. Ad blockers will automatically hide your flash, even if it's not an advert.



ah thanks i didnt know that about the ad blockers. i didnt include the code that was generated when i tried to use the swfobject. (using the generate from the link you gave me) I've tried to use it and the examplefiles and got really confused. if i used the swfobject to generate the html code would i just copy and paste it into my header on my html page? i just cant seem to make the mental leap from using the example files to create a page with embedded flash and having an html page already (my previous html page) and embedding flash in that.

theres probably something really basic im not getting, if someone can let me know if i can just copy and paste the generated code that would be great...if not another prod in the right direction would be great

thanks for your help thehat :)
Was This Post Helpful? 0
  • +
  • -

#4 r3tic  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 25
  • Joined: 22-September 08

Re: embedding flash in html

Posted 27 October 2009 - 04:14 PM

The generated code goes into the body of your page where you want the flash to show.
Was This Post Helpful? 0
  • +
  • -

#5 chicaloca  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 48
  • Joined: 20-May 09

Re: embedding flash in html

Posted 27 October 2009 - 05:21 PM

View Postr3tic, on 27 Oct, 2009 - 03:14 PM, said:

The generated code goes into the body of your page where you want the flash to show.


thanks

sorry just so i'm clear, as its a banner, i would put the code in the head part of my html file? :)
Was This Post Helpful? 0
  • +
  • -

#6 r3tic  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 25
  • Joined: 22-September 08

Re: embedding flash in html

Posted 27 October 2009 - 06:27 PM

You would put the code in the body of the HTML file just after the head and before any other content.
Was This Post Helpful? 0
  • +
  • -

#7 thehat  Icon User is offline

  • awake ? web();
  • member icon

Reputation: 106
  • View blog
  • Posts: 951
  • Joined: 28-February 08

Re: embedding flash in html

Posted 28 October 2009 - 03:06 AM

This is the example code from swfobject:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
	<head>
		<title>SWFObject 2 static publishing example page</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<script type="text/javascript" src="swfobject.js"></script>
		<script type="text/javascript">
		swfobject.registerObject("myId", "9.0.0", "expressInstall.swf");
		</script>
	</head>

	<body>
		<div>	
			<object id="myId" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="300" height="120">
				<param name="movie" value="test.swf" />
				<!--[if !IE]>-->
				<object type="application/x-shockwave-flash" data="test.swf" width="300" height="120">
				<!--<![endif]-->
				<div>
					<h1>Alternative content</h1>

					<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
				</div>
				<!--[if !IE]>-->
				</object>
				<!--<![endif]-->
			</object>
		</div>
	</body>
</html>



If you post what you have I'm sure someone can help you put the two together.
Was This Post Helpful? 0
  • +
  • -

#8 chicaloca  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 48
  • Joined: 20-May 09

Re: embedding flash in html

Posted 28 October 2009 - 01:21 PM

thank you so much for your help guys!

well good news, ive managed to overcome my sheer cluelessness and now have managed to embed my animated banner! but (there always seems to be a but....its not in the right place. ive changed the alignment to middle but not too sure how to have it contained in the blue area on my page, hopefully the attachment will help explain.

hopefully this is the code i need to post:


<link rel="stylesheet" type="text/css" href="css/main.css" />
<link rel="stylesheet" type="text/css" href="css/menubar.css" /><script type="text/javascript" src="swfobject.js"></script>
		<script type="text/javascript">
			swfobject.registerObject("myFlashContent", "9.0.0");
		</script>
</head>

<body>

<div>
			<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" align="middle" width="780" height="120" id="myFlashContent">
				<param name="movie" value="title.swf" />
				<!--[if !IE]>-->
				<object type="application/x-shockwave-flash" data="title.swf" width="780" height="120">
				<!--<![endif]-->
					<a href="http://www.adobe.com/go/getflashplayer">
						<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
					</a>
				<!--[if !IE]>-->
				</object>
				<!--<![endif]-->
			</object>
		</div>



main css:


* { padding: 0; margin: 0; }

body {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 13px;
}
#wrapper { 
 margin: 0 auto;
 width: 922px;
}
#header {
 width: 900x;
 color: black;
 padding: 10px;
 border: 1x solid #ccc;
 height: 100px;
 margin: 5px 0px 5px 0px;
 background: #C0D9D9;
}


 

#content { 
 width: 900px;
 color: #333;
 border: 1px solid #ccc;
 background: #F2F2E6;
 margin: 0px 0px 5px 0px;
 padding: 10px;
 height: 350px;
}
#footer { 
 width: 900px;
 color: #333;
 border: 1px solid #ccc;
 background: #C0D9D9;
 margin: 0px 0px 10px 0px;
 padding: 10px;
}




menubar


body {
	  font-family: "Trebuchet MS", Verdana, sans-serif;
	  font-size: small;
	}
	
	#menubar {
	width:917px;
	  border-top: 2px solid #e6e6e6;
	  border-right: 2px solid #b1b1b1;
	  border-bottom: 2px solid #b1b1b1;
	  border-left: 2px solid #e6e6e6;
	  background-color: #ccc;
	  color: #000;
	  height: 1.4em;
	  line-height: 1.2em;
	}
	
	.menu {
	  width: auto;
	  float: left;
	  padding: 0.1em 3em 0.1em 0.5em;
	  cursor: default;
	}
	
	.menu ul {
	  display: none;
	  position: absolute;
	  background-color: #e6e6e6;
	  color: black;
	  list-style: none;
	  margin: 0.1em 0 0 0;
	  padding: 0;
	}
	
	.menu ul li {
	  display: block;
	  padding: 0.2em;
	}
	
	div.menu:hover ul {
	  display: block;
	  margin: 0;
	  padding: 0;
	}

	div.menu ul li:hover {
	  background-color: #ccf;
	}




hope that explains it all, again itll be a basic thing im missing, but i'm still learning, the more stuff i can learn the easier itll all get....i hope :)

Attached image(s)

  • Attached Image

Was This Post Helpful? 0
  • +
  • -

#9 thehat  Icon User is offline

  • awake ? web();
  • member icon

Reputation: 106
  • View blog
  • Posts: 951
  • Joined: 28-February 08

Re: embedding flash in html

Posted 29 October 2009 - 02:16 AM

So presumably you want the large box with "Glen Moss Nature Reserve" to be placed over the blue box? In the html you've posted, there is a <div> with no id. You should take the contents of that and place it inside the div with the blue background.

If that's not very clear, please post all your html code from the start of the body tag to just before the navigation bar.
Was This Post Helpful? 0
  • +
  • -

#10 chicaloca  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 48
  • Joined: 20-May 09

Re: embedding flash in html

Posted 01 November 2009 - 11:00 AM

View Postthehat, on 29 Oct, 2009 - 01:16 AM, said:

So presumably you want the large box with "Glen Moss Nature Reserve" to be placed over the blue box? In the html you've posted, there is a <div> with no id. You should take the contents of that and place it inside the div with the blue background.

If that's not very clear, please post all your html code from the start of the body tag to just before the navigation bar.


yes thats exactly what im looking for the large box with "glen moss nature reserve" over the blue box. i noticed that my code for the flash embedding wasnt in the head but was in the body. i cut and pasted it into the head but didnt makle any difference. ive changed it back now.

on all of my div ids it says "expanding box problem" (im using dreamwaver cs3 and apparently this is likely to affect IE so theres something else in my coding that isnt right..

"Any content that does not fit in a fixed-width or -height box causes the box to expand to fit the content rather than letting the content overflow.

Affects: Internet Explorer 6.0
Likelihood: Likely"

i think its something to do with my CSS code but not sure what.....


<script type="text/javascript" src="swfobject.js"></script>
		<script type="text/javascript">
			swfobject.registerObject("myFlashContent", "9.0.0");
		</script>
</head>

<body>

<div>
			<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" align="middle" width="780" height="120" id="myFlashContent">
				<param name="movie" value="title.swf" />
				<!--[if !IE]>-->
				<object type="application/x-shockwave-flash" data="title.swf" width="780" height="120">
				<!--<![endif]-->
					<a href="http://www.adobe.com/go/getflashplayer">
						<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
					</a>
				<!--[if !IE]>-->
				</object>
				<!--<![endif]-->
			</object>
		</div>

   <!-- Begin Wrapper -->
   <div id="wrapper">
   
		 <!-- Begin Header -->
		 <div id="header">
		  
		   <script type="text/javascript">
AC_AX_RunContent( 'width','900','height','100','src','banner.swf','movie','banner.swf' ); //end AC code
</script><noscript><object width="900" height="100">
<param name="movie" value="banner.swf" />
			 <embed src="banner.swf" align="middle" width="900" height="100"> </embed>
		   </object></noscript>
		  
		 </div>
 <!-- End Header -->
		 



thats my coding from the head to just before where the navigation bar starts.

hpoe that helps
Was This Post Helpful? 0
  • +
  • -

#11 chicaloca  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 48
  • Joined: 20-May 09

Re: embedding flash in html

Posted 01 November 2009 - 01:06 PM

ok ive had another look at my code since i posted it up earlier and noticed some thin gs id forgotten to delete:


<link rel="stylesheet" type="text/css" href="css/main.css" />
<link rel="stylesheet" type="text/css" href="css/menubar.css" />
<script type="text/javascript" src="swfobject.js"></script>
		<script type="text/javascript">
			swfobject.registerObject("myFlashContent", "9.0.0");
		</script>

<div id="header">
			<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" align="middle" width="780" height="120" id="myFlashContent">
				<param name="movie" value="title.swf" />
				<!--[if !IE]>-->
				<object type="application/x-shockwave-flash" data="title.swf" width="780" height="120">
				<!--<![endif]-->
					<a href="http://www.adobe.com/go/getflashplayer">
						<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
					</a>
				<!--[if !IE]>-->
				</object>
				<!--<![endif]-->
			</object>
		</div>

</head>

<body>


   <!-- Begin Wrapper -->
   <div id="wrapper">
   
	   
		 
		 <!-- Begin Naviagtion -->
  <div id="menubar"> <a name="top"></a>
  <div id="menu1" class="menu"><a href="index.html">Home</a>
		
  
  </div>
  
  <div id="menu2" class="menu">About Glen Moss
		<ul>
		<li><a href="about.html">About the area </a></li>
		<li><a href="gettinghere.html">Getting there</a></li>
		<li><a href="peatbog.html">What is a peatbog?</a></li>
		
		</ul>
  </div>
  <div id="menu3" class="menu">Seasons
  
		<ul>
		<li><a href="spring.html" target="_blank">Spring</a></li>
		<li><a href="summer.html" target="_blank">Summer</a></li>
		<li><a href="autumn.html" target="_blank">Autunm </a></li>
		<li><a href="winter.html" target="_blank">Winter</a></li>
				
		</ul>
  </div>
  
  
  <div id="menu4" class="menu"><a href="links.html">Useful Links</a>
		
  
  </div>
  
  
  <div id="menu5"class="menu"><a href="gallery.html">Gallery</a>
		
  
  </div>
  

  <div id="menu6" class="menu"><a href="contact.html">Contact Us </a>
		
  
  </div>
  
</div>


		 <!-- End Naviagtion -->
		 
		 <!-- Begin Content -->
		 <div id="content">
		 
		



the content follows after the div id="content."

this has made a bit of difference but the flash banner still isnt sitting in the right place as my attachment shows.

think i just need help with how to position the banner on top of the blue area and also how to make the blue area not as wide so it doesnt extend so far from left to right. if i wanted to take the blue colour away where would i change it in my css? ive been through my css code and tried to alter different widths but the blue area doesnt alter in width.

im trying to do this on my own but dont seem quite able to. just thought id post an update with my altered code :)

Attached image(s)

  • Attached Image

Was This Post Helpful? 0
  • +
  • -

#12 thehat  Icon User is offline

  • awake ? web();
  • member icon

Reputation: 106
  • View blog
  • Posts: 951
  • Joined: 28-February 08

Re: embedding flash in html

Posted 02 November 2009 - 02:12 AM

The div that you call header should be inside the wrapper. You should never put content that you want to display in the head section of a page. Give this a try:
<link rel="stylesheet" type="text/css" href="css/main.css" />
<link rel="stylesheet" type="text/css" href="css/menubar.css" />
<script type="text/javascript" src="swfobject.js"></script>
		<script type="text/javascript">
			swfobject.registerObject("myFlashContent", "9.0.0");
		</script>
</head>

<body>


   <!-- Begin Wrapper -->
   <div id="wrapper">
		  <div id="header">
			<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" align="middle" width="780" height="120" id="myFlashContent">
				<param name="movie" value="title.swf" />
				<!--[if !IE]>-->
				<object type="application/x-shockwave-flash" data="title.swf" width="780" height="120">
				<!--<![endif]-->
					<a href="http://www.adobe.com/go/getflashplayer">
						<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
					</a>
				<!--[if !IE]>-->
				</object>
				<!--<![endif]-->
			</object>
		</div>

	  
		
		 <!-- Begin Naviagtion -->
  <div id="menubar"> <a name="top"></a>
  <div id="menu1" class="menu"><a href="index.html">Home</a>
		
  
  </div>
  
  <div id="menu2" class="menu">About Glen Moss
		<ul>
		<li><a href="about.html">About the area </a></li>
		<li><a href="gettinghere.html">Getting there</a></li>
		<li><a href="peatbog.html">What is a peatbog?</a></li>
		
		</ul>
  </div>
  <div id="menu3" class="menu">Seasons
  
		<ul>
		<li><a href="spring.html" target="_blank">Spring</a></li>
		<li><a href="summer.html" target="_blank">Summer</a></li>
		<li><a href="autumn.html" target="_blank">Autunm </a></li>
		<li><a href="winter.html" target="_blank">Winter</a></li>
				
		</ul>
  </div>
  
  
  <div id="menu4" class="menu"><a href="links.html">Useful Links</a>
		
  
  </div>
  
  
  <div id="menu5"class="menu"><a href="gallery.html">Gallery</a>
		
  
  </div>
  

  <div id="menu6" class="menu"><a href="contact.html">Contact Us </a>
		
  
  </div>
  
</div>


		 <!-- End Naviagtion -->
		
		 <!-- Begin Content -->
		 <div id="content">


Was This Post Helpful? 0
  • +
  • -

#13 chicaloca  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 48
  • Joined: 20-May 09

Re: embedding flash in html

Posted 02 November 2009 - 01:31 PM

thank you so much! it all sits a bit better now.

sorry to be a seeminly continual pain but wondered if you could help me with one last thng. i cant make my flash banner stretch as far across the top as id like and it ends up looking like the screenshot

ive now got the following code


<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" align="middle" width="900" height="120" id="myFlashContent">
				<param name="movie" value="title.swf" />
				<!--[if !IE]>-->
				<object type="application/x-shockwave-flash" data="title.swf" width="900" height="120">
				<!--<![endif]-->
					<a href="http://www.adobe.com/go/getflashplayer">
						<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />					</a>
				<!--[if !IE]>-->
				</object>
				<!--<![endif]-->
			</object>
		</div>



and

#wrapper { 
 margin: 0 auto;
 width: 900px;
}
#header {
 width: 900px;
 padding: 10px;
 height: 120px;
  background: #C0D9D9;
}




the properties of my banner in flash are 720 px wide. i thought id be able to code in the html to make it wider? when i try and alter the properties of the document in flash i have the problem of having to try and alter the width of every single element which poses its own problems of ensuring that everything stays aligned. my banner is animated so i seem to have issues with tweens when i try and alter the size of different layers.

would you know if there something in the coding i can change to easily make the banner a different width and all elements looking like they should or am i better to start with a larger document size in flash and start over again with sizes? if not its probably more a flash issue im having now than either html or css

hope that makes sense

thank so you so much for your help so far. at least now i have a banner where i want it which makes all the difference!

Attached image(s)

  • Attached Image

Was This Post Helpful? 0
  • +
  • -

#14 thehat  Icon User is offline

  • awake ? web();
  • member icon

Reputation: 106
  • View blog
  • Posts: 951
  • Joined: 28-February 08

Re: embedding flash in html

Posted 03 November 2009 - 03:31 AM

That's a hard question to answer without knowing how complex your banner is. You'll never keep the same appearance from stretching the banner's width because all your content will distort, so you are going to have to choose between recreating the tweens or starting from scratch.

If you choose to resize your existing banner, make use of the Edit Multiple Frames button. It makes moving tweens around a lot easier.Attached Image
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1