Today's Posts Follow Us On Twitter! TFL Members on Twitter  
Forum search: Advanced Search  
Navigation
Marketplace
  Members Login:
Lost password?
  Forum Statistics:
Forum Members: 24,254
Total Threads: 80,792
Total Posts: 566,471
There are 963 users currently browsing (tf).
 
  Our Partners:
 
  TalkFreelance     Design and Development     Programming     Flash and Actionscript :

Flash header/banner

Thread title: Flash header/banner
Closed Thread  
Page 1 of 2 1 2 >
    Thread tools Search this thread Display Modes  
10-21-2007, 05:17 AM
#1
Tracyl is offline Tracyl
Status: I'm new around here
Join date: Oct 2007
Location:
Expertise:
Software:
 
Posts: 13
iTrader: 0 / 0%
 

Tracyl is on a distinguished road

  Old  Flash header/banner

Been playing around with flash and I am wanting to embed the flash movie header at the top of my website. Its just a simple header where the 3 or 4 images fade in and change positions etc. My concern is that when a certain person doesn't have flash enabled on their computer that they will just see a grey box. Is there a code to add or a way of having them see just the images??? I would like this for IE and FF of course.

Thanks

10-21-2007, 07:48 AM
#2
danmoore is offline danmoore
Status: I'm new around here
Join date: Oct 2007
Location: Perth, Western Australia
Expertise:
Software:
 
Posts: 18
iTrader: 0 / 0%
 

danmoore is on a distinguished road

  Old

Hi Tracyl,

Would be a good idea for you to look into swfObject. It's a good way for developers to embed flash but also allowing a method of "No Flash" in restrospect that - if the user doesn't have JavaScript or Flash enabled, will show.

the No Flash is somthing you can change with the drop of a hat, see below for display method.

Another up side to the swfObject embed method (and I understand this may be slightly off topic, but something I find to be quite a useful tool.), is you can pass variables into your flash movie through the javascript in the page.

You'll need to include a JavaScript file inside the <head> of your HTML document - this is the js that processes the appropriate information to embed the flash.

The following location is where you can download yourself a copy of the swfObject Flash. http://blog.deconcept.com/swfobject/#download

The next step is to create a div with the desired ID with which the contents will display your flash movie. (note, this is something you can style, postion etc. accordingly) you can give this an ID of anything you desire, as you'll be defining which ID to replace contents in a short moment. see following for example.
Code:
<div id="flashMovie">
    <!-- ** THIS IS WHERE I ENTER MY NO FLASH CONTENT ** -->
</div>
Once that has been added into your page, you can then jump down to the footer of the site and place the following code just before your </body> tag.
after the Code view i'll explain a little about each item in the following.

Code:
<script type="text/javascript">
   var so = new SWFObject("movie.swf", "mymovie", "400", "200", "8", "#336699");
   so.write("flashMovie");
</script>
you might be wondering "ok looks good, but what do i change to get my movie working properly? - An outline is provided below to explain each part to the JS.

The first line of our code is:
var so = new SWFObject("referance to my flash movie", "id for move it's self (not what we defined earlier)", "Width", "Height", "Flash Version", "Background color of movie");

above I've bolded each item you'll need to change.

the next line (so.write("flashMovie") is where we define the ID we gave our div earlier on in the HTML.

I understand that some/most of the above may already be known by yourself and other, but for the sake of those who do not understand this embed method, I've gone into a little more detail than usual.

send us a PM if you're still have issues and I've give you a hand.

Cheers,
Dan

10-21-2007, 08:29 AM
#3
Bannaz is offline Bannaz
Status: Member
Join date: Aug 2007
Location:
Expertise:
Software:
 
Posts: 115
iTrader: 0 / 0%
 

Bannaz is on a distinguished road

  Old

Damoore has hit the nail on the head.

However, everyone SHOULD have flash! It's a must !!

10-21-2007, 08:44 AM
#4
danmoore is offline danmoore
Status: I'm new around here
Join date: Oct 2007
Location: Perth, Western Australia
Expertise:
Software:
 
Posts: 18
iTrader: 0 / 0%
 

danmoore is on a distinguished road

  Old

as much as i agree balue, a lot Machines aren't being produced with built in flash players. It's generally something they will need to download. If only there was a nicer way to get the user to download.

90% of my flash work is something that will require a no flash image/text. Which in turn restricts the use of information and link to the plugin. and the questions comes up - Do I really want to add that ugly button/make my own link to the plugin on the Adobe site?

10-21-2007, 04:00 PM
#5
Tracyl is offline Tracyl
Status: I'm new around here
Join date: Oct 2007
Location:
Expertise:
Software:
 
Posts: 13
iTrader: 0 / 0%
 

Tracyl is on a distinguished road

  Old  embedding header

Oh my, I thought I was doing it correctly and all needed was a snippet of code for those not flash enabled. I have included my code here from my practice site. Will you please look at it for me. I will learn more about what I am doing from your reply though. So, did I embed the wrong thing?

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>

<link href="shaw.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="container">

<div id="header"><h1>http://www.shawlake.bc.ca</h1>

<object classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="780" height="201">
<param name="movie" value="banner_2.swf">
<param name="quality" value="high">
<embed src="banner_2.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="780" height="201"></embed>
</object>
</div>

<div id="contents">
<p>Lorem ipsum dolor sit <a href="#">Homes</a> <!--this is to show the changes with hover in the CSS page links in main body -->amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
<p>Lorem ipsum dolor sit <a href="#">Homes</a> <!--this is to show the changes with hover in the CSS page links in main body -->amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
</div>
<div id="nav">
<ul>
<li><a href="#">ipsum</a></li>
<li><a href="#">zzril</a></li>
<li><a href="#">veniam</a></li>
</ul>
</div>

<div id="footer">copyright &copy; </div>
</div>
</body>
</html>

10-21-2007, 11:58 PM
#6
Tracyl is offline Tracyl
Status: I'm new around here
Join date: Oct 2007
Location:
Expertise:
Software:
 
Posts: 13
iTrader: 0 / 0%
 

Tracyl is on a distinguished road

  Old  Ok, as usual, I'm lost!

All right, I need more help. Once again I've included my practice page for the flash movie header includeing a bit of the coding that you gave me (in blue) I've tried changing it abit and also downloaded that swfobject provided in the link however, I really don't know what to do with it?

If you can give a bit more time to me that would be nice but I understand it may be too much to explain to this beginner.

I certainly appreciate your help.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!-- saved from url=(0014)about:internet -->
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>

<link href="shaw.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="container">

<div id="header"><h1>http://www.shawlake.bc.ca</h1>

<div id="flashMovie">
<!--Ok this is my no flash content, just the plain header -->
<img src="images/shaw.jpg">
</div>


This is my flash header here
<object classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="780" height="201">
<param name="movie" value="banner_2.swf">
<param name="quality" value="high">
<embed src="banner_2.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="780" height="201"></embed>
</object>
</div>

<div id="contents">
<p>Lorem ipsum dolor sit <a href="#">Homes</a> <!--this is to show the changes with hover in the CSS page links in main body -->amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
<p>Lorem ipsum dolor sit <a href="#">Homes</a> <!--this is to show the changes with hover in the CSS page links in main body -->amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
</div>
<div id="nav">
<ul>
<li><a href="#">ipsum</a></li>
<li><a href="#">zzril</a></li>
<li><a href="#">veniam</a></li>
</ul>
</div>

<div id="footer">copyright &copy; CatFish Web CreaTions </div>
</div>

<!--I don't know what to put to replace the "mymovie" text-->
<script type="text/javascript">
var so = new SWFObject("banner_2.swf", "mymovie", "780", "201", "8", "#336699");
so.write("flashMovie");
</script>


</body>
</html>

10-23-2007, 01:28 PM
#7
danmoore is offline danmoore
Status: I'm new around here
Join date: Oct 2007
Location: Perth, Western Australia
Expertise:
Software:
 
Posts: 18
iTrader: 0 / 0%
 

danmoore is on a distinguished road

  Old

Hi Tracyl,

so far your code is looking spot on, however you are currently missing one very important peice of information

the javascript file that you'll need to include in the header - you can download it from http://blog.deconcept.com/swfobject/#download.

that will need to sit in the head of you document like so.

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!-- saved from url=(0014)about:internet -->
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>

<link href="shaw.css" rel="stylesheet" type="text/css">

<script type="text/javascript" src="/js/swfobject.js"></script>

</head>
other than that, it seems all your elements are matching up ok and the div and so.write ID you've given are matching.

Try dropping in the swf object and let me know how you go.

Sorry for delayed reply, I'm in Aust. and work full time so I don't have much time to jump on here and post.

Cheers,
Dan

10-23-2007, 02:40 PM
#8
Tracyl is offline Tracyl
Status: I'm new around here
Join date: Oct 2007
Location:
Expertise:
Software:
 
Posts: 13
iTrader: 0 / 0%
 

Tracyl is on a distinguished road

  Old

Hi Dan, thanks alot

I had 2 headers though? So I changed it a bit. And this bit of code that you told me to put in. Is it just the div that holds the embed flash?
<div id="flashMovie">
<!-- ** THIS IS WHERE I ENTER MY NO FLASH CONTENT ** -->
</div>

I have this practice site that you could have a look at and view the code if you like. Pay no mind to the ugly site, it s just or practice.

http://lambs.awardspace.com/

PS in IE how do I disable my flash so that I can actually test it?

Thanks for your help Dan

Tracy

10-23-2007, 11:49 PM
#9
danmoore is offline danmoore
Status: I'm new around here
Join date: Oct 2007
Location: Perth, Western Australia
Expertise:
Software:
 
Posts: 18
iTrader: 0 / 0%
 

danmoore is on a distinguished road

  Old

Hi Tracyl,

The page looks good, you might want to remove your <object> tag.
Currently the page is showing your "no flash version" but because you have your <object> flash embed method instead of a JPG for example, it's stilll showing flash.

You currently have an Javascript error on the page as your calling the swfobject javascript in the footer - but because you havn't included the file in your head (like i outlined above - look for the bold tag in my previous code) it's not showing.

so in effect - you need to replace your <object> embed method with a jpg that you want to be shown when the user doesn't have flash. You do also need to download and include the SWFOBJECT javascript file. without that it won't work.

Cheers,
Dan

10-24-2007, 06:53 AM
#10
Tracyl is offline Tracyl
Status: I'm new around here
Join date: Oct 2007
Location:
Expertise:
Software:
 
Posts: 13
iTrader: 0 / 0%
 

Tracyl is on a distinguished road

  Old

Hi Dan,
I made some changes that you suggested and now the flash doesn't work. I have this in the
<head>
<script type="text/javascript" src="swfobject1-5/swfobject.js"></script>
</head>

then this in the banner space (where I want the flash banner)
<div id="flashMovie"><img src="images/shaw.jpg" width="780" height="200" alt=""></div>

and then this just before the </body><script type="text/javascript">
var so = new SWFObject("banner_2.swf", "mymovie", "780", "201", "8", "#336699");
so.write("flashMovie");
</script>
I download that file and uploaded the js with my other files. There was more to that folder that I downloaded than just the js. Is there something I need to do with the other files in it. I don't know I guess I'm not understanding something.
Thanks

Closed Thread  
Page 1 of 2 1 2 >


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes

  Posting Rules  
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump:
 
  Contains New Posts Forum Contains New Posts   Contains No New Posts Forum Contains No New Posts   A Closed Forum Forum is Closed