vb.org Archive

vb.org Archive (https://vborg.vbsupport.ru/index.php)
-   vBulletin 3 Articles (https://vborg.vbsupport.ru/forumdisplay.php?f=187)
-   -   Flash Headers, Footers, and Avatars for vBulletin (https://vborg.vbsupport.ru/showthread.php?t=147744)

ShawnV 05-20-2007 10:00 PM

Flash Headers, Footers, and Avatars for vBulletin
 
Flash, Flash for vBulletin, Flash Headers, Flash Footers, and Flash Avatars


# Flash, what is it?

Strictly speaking, flash is an integrated development environment (IDE) while Flash Player is a virtual machine used to run, or parse, the Flash files. But in contemporary colloquial terms "Flash" can refer to the authoring environment, the player, or the application files.

Flash technology has become a popular method for adding animation and interactivity to web pages; several software products, systems, and devices are able to create or display Flash. Flash is commonly used to create animation, advertisements, various web-page components, to integrate video into web pages, and more recently, to develop rich Internet applications.

The Flash files, traditionally called "Flash movies" have a .swf file extension and may be an object of a web page, strictly "played" in a standalone Flash Player, or incorporated into a Projector, a self-executing Flash movie with the .exe extension in Windows. Flash Video files have an .FLV file extension and are utilized from within .swf files.

Most Flash imbued sites set up a splash page to notify the user that the site requires the flash plug-in to view properly and provides a link to the current version. Splash pages also advise of resolutions, content warnings and have bypass links.




# Flash for vBulletin

There are several ways to do flash in any HTML or XHTML document including vBulletin.

The standard, object embed method is to add the code below to your template, setting the param's, width, colors, location and movie name to reflect your .swf file needs.

Code:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
  codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0"
  width="550" height="400" id="Untitled-1" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="mymovie.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<embed src="mymovie.swf" quality="high" bgcolor="#ffffff" width="550"
  height="400" name="mymovie" align="middle" allowScriptAccess="sameDomain"
  type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" />
</object>


The SWFObject method uses a Java file and is more flexible, it HTML or XHTML validates; It works with all browsers and has version detection. It also fixes the click to activate problem with IE browsers and can be set to display alternative content if the user does not have a flash plug in.

Developed by Deconcept and adopted by Adobe and most web designers, I recommend this method of embedding flash for all primary assets; however I will sometimes mix the two methods depending on the requirements of the page, as is demonstrated in this article.

Example pages, source files and the Java script file needed for SWFObject embedding can be found in the link below.

swfobject.zip

Example of SWFObject method in comparison to the Object method listed above.

Code:

<script type="text/javascript" src="http://www.yoursite.com/swfobject.js"></script>       

<div id="header">
<script type="text/javascript">
  var so = new SWFObject("http://www.yoursite.com/forum/flash/movie.swf", " clsid:d27cdb6e-ae6d-11cf-96b8-444553540000", "1000", "274", "8", "#000000");
  so.addParam("quality", "high");
  so.addParam("salign", "t");
  so.write("header");
</script>
</div>




This short bit of Javascript is what passes in the Flash movie parameters ? from the original code, above - so that the FlashObject script can display the Flash movie properly. Here?s the breakdown:

var so = new SWFObject( "movie.swf ", -- the full path to your Flash movie

"clsid:d27cdb6e-ae6d-11cf-96b8-444553540000", -- this matches the ?ID? from your Flash movie parameters, yours could be different, an easy way to find this ID is to set the publish settings in flash to output HTML along with the .swf file and then open the HTML in notepad or any editor.

"1000", -- the width of the Flash movie

"274", -- the height of the Flash movie

"8", -- the minimum version of the Flash Player that is required, you can set this to any version you desire, however I recommend setting it one version behind the current stable release.

"#000000"); -- the background color

fo.addVariable("variable", "varvalue"); -- this is only necessary if you are passing in variables to the Flash movie through the HTML code. You can duplicate this line if you are passing in several variables.


Note: If you are running more then one instance of a flash element on a page as I am: header, footer, bot avatar and so on, you want to name each instance of the <div id="NAME"> and the so.write("NAME"); with a different ID. Ergo: <div id="header"> <div id="footer"> with matching so.write("header"); & so.write("footer"); variants.

More information:

http://blog.deconcept.com/swfobject/


Note: I recommend creating a flash folder in your forum root for either method and using complete paths to the files in the edits, ergo: "http://www.yoursite.com/forum/flash/movie.swf"


# Flash Headers

Adding flash to your vBulletin header,

Goto admincp> styles&templates> style manager> edit template > Find the header template and open.

Depending on your template setup, find this code:
Code:

<!-- logo -->
<a name="top"></a>
<table border="0" width="$stylevar[outertablewidth]" cellpadding="0" cellspacing="0" align="center">
<tr>
    <td align="$stylevar[left]"><a href="$vboptions[forumhome].php$session[sessionurl_q]"><img src="$stylevar[titleimage]" border="0" alt="$vboptions[bbtitle]" /></a></td>
    <td align="$stylevar[right]">
        &nbsp;
    </td>
</tr>
</table>
<!-- /logo -->

Example: header template, change the variables and paths to suit your needs and add / replace with this code below:
Code:

<script type="text/javascript" src="http://www.yoursite.com/swfobject.js"></script>

<div id="header">
<script type="text/javascript">
  var so = new SWFObject("http://www.yoursite.com/forum/flash/movie.swf", "clsid:d27cdb6e-ae6d-11cf-96b8-444553540000", "1000", "274", "8", "#000000");
  so.addParam("quality", "high");
  so.addParam("salign", "t");
  so.write("header");
</script>
</div>



# Flash Footers

Adding flash to your vBulletin footer,

Goto admincp> styles&templates> style manager> edit template > Find the footer template and open.

Depending on your template setup, find this code at the bottom of the template:
Code:

<!--
    // Main vBulletin Javascript Initialization
    vBulletin_init();
//-->

Example: footer template, change the variables and paths to suit your needs and add this code below.
Code:

<script type="text/javascript" src="http://www.yoursite.com/swfobject.js"></script>       

<div id="footer">
<script type="text/javascript">
  var so = new SWFObject("http://www.yoursite.com/forum/flash/movie.swf", "clsid:d27cdb6e-ae6d-11cf-96b8-444553540000", "1000", "382", "8", "#000000");
  so.addParam("quality", "high");
  so.addParam("salign", "b");
  so.write("footer");
</script>
</div>



# Flash Avatars

Adding flash avatars to your vBulletin postbit and postbit legacy templates using the standard Object method.

Goto admincp> styles&templates> style manager> edit template > Find the postbit or postbit lagacy template and open.

Depending on your template setup, find this code:

Code:

<if condition="$show['avatar']"><td class="alt2"><a href="member.php?$session[sessionurl]u=$post[userid]"><img src="$post[avatarurl]" $post[avwidth] $post[avheight] alt="<phrase 1="$post[username]">$vbphrase[xs_avatar]</phrase>" border="0" /></a></td></if>

Example: postbit template, change the variables and paths to suit your needs and add this code above.

Standard Object Embed:
Code:

<if condition="$post['userid']=='58'"><td class="alt2">

<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
 <object type="application/x-shockwave-flash" data="http://www.yoursite.com/forum/flash/movie.swf" width="100" height="100">
            <param name="allowScriptAccess" value="sameDomain" />
            <param name="movie" value="http://www.yoursite.com/forum/flash/movie.swf" />
            <param name="menu" value="false" />
            <param name="quality" value="high" />
                        <param name="wmode" value="transparent">
            <a href="http://www.macromedia.com/go/getflashplayer/"><img src="http://www.macromedia.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Flash Player!" /></a>
        </object></td></if>

Note: Change the IF conditional to the user ID you want to display the flash avatar.



Update: The latest and easiest way to embed Flash is to use the swfobject generator, it is simple to use makes setup a breeze. Also be sure to grab the latest version of swfobject while your there.

http://code.google.com/p/swfobject/downloads/list



# Reference, Tutorial and Training Material can be found here.


http://code.google.com/p/swfobject/wiki/documentation

http://kb.adobe.com/selfservice/view...2701&sliceId=1

http://www.adobe.com/devnet/flash/

http://www.adobe.com/support/flash/

http://www.w3schools.com/default.asp

http://www.flashkit.com/

_V

Princeton 05-22-2007 06:12 PM

Excellent article! :up:

Kungfu 05-27-2007 02:26 PM

i like the way you integrated that. Only thing i hate about flash which i hope they change in the future is the ability to copy things like links from text and text itself.

ShawnV 05-28-2007 02:17 PM

You can pass text "varvalue" into flash, the credits page reads a simple text document, it could just as easily read and display any text or even pull information from a database table.


Ways to set variables in Flash


Communicating with PHP




_V

glorify 05-29-2007 11:06 PM

Unbelievable job man. Really great work.

RDHRazor 06-16-2007 01:01 AM

ShawnV,

What would be the code if you wanted to allow all users to use Flash Avatars? Not upload but remote host?

ShawnV 06-23-2007 01:29 PM

No the code for avatars is for a set user ID in that case (58) and a set location (http://www.yoursite.com/forum/flash/movie.swf") of the .swf file to play, I do not recommend allowing users to "EVER" be able to upload or remote host a flash file on your site, this is very dangerous. If you upload the files yourself to your server and assign them to your admin or mods then there is no risk.

Cheers,

_V

Synergy 06-23-2007 10:51 PM

i was try and It`s work , excellent idea :)

christian8a 07-01-2007 07:59 PM

Thanx. I was looking for this solution since forever :D

And I still have the same issue that the one you have in the video here

http://www.koww.net/portal.php

Is there a solution for that yet?

My site is http://www.myls1.com and you can see the main page theres a flash on a module that still has that activate control box and the gallery.swf

ShawnV 07-04-2007 09:58 PM

Quote:

Originally Posted by christian8a (Post 1280795)
Thanx. I was looking for this solution since forever :D

And I still have the same issue that the one you have in the video here

http://www.koww.net/portal.php

Is there a solution for that yet?

My site is http://www.myls1.com and you can see the main page theres a flash on a module that still has that activate control box and the gallery.swf


You could use the The SWFObject method to fix that, however I chose not to due to the fact that the video player on the portal page is a control device, so they would click on it anyways to advance, pause or stop the video.

_V

mrmatt68 09-02-2007 12:40 PM

Hi,

I am trying to put the same header from my website as the header on the forums and have put in the following code into the header section of vbulletin and uploaded the swfobject.js to the root of webserver and i am getting a black box in the header section. I think i may need to pass some variables to get the menu to work but I truly am lost. Would someone be willing to look at the source from http://clearvuecyclones.com and point me in the right direction?

Thanks,

Matt

<script type="text/javascript" src="http://www.clearvuecyclones.com/swfobject.js"></script>

<div id="header">
<script type="text/javascript">
var so = new SWFObject("http://www.clearvuecyclones.com/Header/Header.swf", "clsid:D27CDB6E-AE6D-11cf-96B8-444553540000", "795", "226", "8", "#000000");
so.addParam("quality", "high");
so.addParam("salign", "t");
so.write("header");
</script>
</div>

<!-- content table -->
$spacer_open

$_phpinclude_output

ShawnV 09-17-2007 02:29 PM

Matt,

It looks fine to me, I do not see the black box and the menu is working fine.

_V

Doctor Death 09-22-2007 03:46 PM

Do you think you might be able to assist me with some good technical advice in getting my SWF header working on my VBulletin site?

I have the flash, have the site up, but I have just a few questions on parameters etc before it is integrated?

Doc
www.ddsog.com

CasperCBT 10-03-2007 03:32 PM

I TRY TO MAKE THIS, BUT ON THE BBCODE
can comeone helkp me ?

baby41 10-06-2007 08:21 AM

What about a code to insert a flash object but as a popup only into the main page????

bigjoe7 10-16-2007 08:08 PM

gents,

do you mind having a look at my forum.

I have used the flash code provided by ShawnV

Here is my forum link > www.trs-clan.co.uk/forum

As you can see the banner is on the piss.

Really dont know what to do to fix it.

any help would be appreciated.

--------------- Added [DATE]1192569169[/DATE] at [TIME]1192569169[/TIME] ---------------

If you select the red teal skin, you will see that the forum is nicely centred, but the banner is off on the left

SLY LS1 10-20-2007 12:24 PM

Quote:

Originally Posted by christian8a (Post 1280795)
Thanx. I was looking for this solution since forever :D

And I still have the same issue that the one you have in the video here

http://www.koww.net/portal.php

Is there a solution for that yet?

My site is http://www.myls1.com and you can see the main page theres a flash on a module that still has that activate control box and the gallery.swf

Luv the header, that is sik.... did you do the flash? im looking for someone to make me a flash header like that if anyone can help..

Cheers

MoviePropCollec 12-22-2007 07:12 AM

That is AMAZING Shawn.

I emailed you.

Please contact me. I need your assistance and can give you a few bucks to help me ;)

MoviePropCollec 12-27-2007 06:21 AM

Does Shawn still come here and respond any longer?

MoviePropCollec 01-15-2008 02:52 AM

I followed the instructions exactly as I see here to put a flash header/logo and it is not working.

I removed <!-- logo -->
<a name="top"></a>
<table border="0" width="$stylevar[outertablewidth]" cellpadding="0" cellspacing="0" align="center">
<tr>
<td align="$stylevar[left]"><a href="$vboptions[forumhome].php$session[sessionurl_q]"><img src="$stylevar[titleimage]" border="0" alt="$vboptions[bbtitle]" /></a></td>
<td align="$stylevar[right]">
&nbsp;
</td>
</tr>
</table>
<!-- /logo -->

and replaced it with

<script type="text/javascript" src="http://www.mysitename.com/swfobject.js"></script>

<div id="header">
<script type="text/javascript">
var so = new SWFObject("http://www.mysitename.com/forum/flash/nameofmovie.swf", "clsid:d27cdb6e-ae6d-11cf-96b8-444553540000", "1000", "274", "8", "#000000");
so.addParam("quality", "high");
so.addParam("salign", "t");
so.write("header");
</script>
</div>

And all it did was remove my header logo picture. What am I doing wrong?

Thanks.

ShawnV 01-19-2008 11:03 PM

Quote:

Originally Posted by MoviePropCollec (Post 1409952)
Does Shawn still come here and respond any longer?

Quote:

Originally Posted by MoviePropCollec (Post 1421673)
I followed the instructions exactly as I see here to put a flash header/logo and it is not working.

I removed <!-- logo -->
<a name="top"></a>
<table border="0" width="$stylevar[outertablewidth]" cellpadding="0" cellspacing="0" align="center">
<tr>
<td align="$stylevar[left]"><a href="$vboptions[forumhome].php$session[sessionurl_q]"><img src="$stylevar[titleimage]" border="0" alt="$vboptions[bbtitle]" /></a></td>
<td align="$stylevar[right]">
&nbsp;
</td>
</tr>
</table>
<!-- /logo -->

and replaced it with

<script type="text/javascript" src="http://www.mysitename.com/swfobject.js"></script>

<div id="header">
<script type="text/javascript">
var so = new SWFObject("http://www.mysitename.com/forum/flash/nameofmovie.swf", "clsid:d27cdb6e-ae6d-11cf-96b8-444553540000", "1000", "274", "8", "#000000");
so.addParam("quality", "high");
so.addParam("salign", "t");
so.write("header");
</script>
</div>

And all it did was remove my header logo picture. What am I doing wrong?

Thanks.

I am back, had some family issues to deal with.

I know this is a dumb question but did you change the path in that script to the correct one for your site, ergo replace the "mysitename.com" parts?


Cheers,

_V

--------------- Added [DATE]1200791212[/DATE] at [TIME]1200791212[/TIME] ---------------

Quote:

Originally Posted by bigjoe7 (Post 1361804)
gents,

do you mind having a look at my forum.

I have used the flash code provided by ShawnV

Here is my forum link > www.trs-clan.co.uk/forum

As you can see the banner is on the piss.

Really dont know what to do to fix it.

any help would be appreciated.

--------------- Added [DATE]1192569169[/DATE] at [TIME]1192569169[/TIME] ---------------

If you select the red teal skin, you will see that the forum is nicely centred, but the banner is off on the left

Big, I looked at the red fixed and it looks fine, was there another one, or did you fix it already?

Cheers,

_V

Tharos 02-18-2008 06:34 PM

it´s very nice
thanks a lot ^^

mark|3 02-20-2008 12:10 AM

hi,

this used to be working for both IE and firebox. Currently i am only able to display the header only in firefox.

Need help pls.

Quote:

<a name="top"></a>


<script type="text/javascript" src="http://www.xxx.com/forums/swfobject.js"></script>

<div id="header" align="center">
<script type="text/javascript">
var so = new SWFObject("http://www.xxx.com/flash/forum.swf", "clsid27CDB6E-AE6D-11cf-96B8-444553540000", "800", "225", "8", "#FFFFFF");
so.addParam("quality", "high");
so.addParam("salign", "t");
so.write("header");
</script>
</div>
<!-- /logo -->
<!-- content table -->
$spacer_open

$_phpinclude_output

$welcomeheaders

rafa3l 02-21-2008 03:32 PM

Hello,

I already did a flash header for my forum before, but now I need share the same header with another pages (PhotoPost with the style integration). Ok, this flash header have a menu and I think need pass some parameter to highlight the current option (VB or PP). What parameter could be?

Thanks in advance

zeus_r6 03-13-2008 04:46 AM

I'm thinking about adding a flash banner on my site...if I am the only one allowed to run HTML on the site as admin and I personally upload the banner, am I still at security risk?

ShawnV 04-10-2008 03:15 AM

Quote:

Originally Posted by zeus_r6 (Post 1463533)
I'm thinking about adding a flash banner on my site...if I am the only one allowed to run HTML on the site as admin and I personally upload the banner, am I still at security risk?

You should be fine.

_V

--------------- Added [DATE]1207801149[/DATE] at [TIME]1207801149[/TIME] ---------------

Quote:

Originally Posted by rafa3l (Post 1448165)
Hello,

I already did a flash header for my forum before, but now I need share the same header with another pages (PhotoPost with the style integration). Ok, this flash header have a menu and I think need pass some parameter to highlight the current option (VB or PP). What parameter could be?

Thanks in advance


Depends on what your doing, also what method are you using?

SWFObject has been updated to 2.0 and has some new features, there are some examples of flashvars, params and object's attributes.

http://code.google.com/p/swfobject/w..._documentation

_V

Sean James 07-01-2008 05:42 AM

Shawn great information mate ;)

Im currrently working on a new template http://www.autoelectric.info/forums/index.php but i need the 'new posts' in the flash navigation to work correctly, ive tried everything and it still points to the search page.

I know its a problem with flash not understanding this 'search.php?$session[sessionurl]do=getnew'

ANy help would be appreciated

Jase2 07-01-2008 12:23 PM

Wow - great article! Thanks for sharing! :)

yotsume 09-26-2008 07:47 AM

I have two questions when it comes to the code here for placing flash as your banner. First, the code worked perfect for me in Firefox. However, IE my flash header banner is pushed off to the right a bit. I have vbadvanced installed. This only happens on the VBA homepage of my site and in IE. How can I adjust this to be aligned corectly on my vba pages in IE?

Second, How can I have my flash header banner linked to my homepage when a members clicks on it?

My site is: www.globalschoolconnect.com

goxy63 10-08-2009 05:01 PM

Can anyone help me with this issue:

I got flash-header on my homepage and it produces my CPU usage up to 90-100%

New to flash and vb so help will be appreciated...

Iam using this code
Code:

<!-- logo -->
<script type="text/javascript" src="http://www.mysite.com/test/testvb/swfobject.js"></script>

<div id="header" align="center">
<script type="text/javascript">
  var so = new SWFObject("http://www.mysite.com/test/testvb/flash/header.swf", "clsid:d27cdb6e-ae6d-11cf-96b8-444553540000", "900", "200", "8", "#445c8a");
  so.addParam("quality", "high");
  so.addParam("salign", "t");
  so.addParam("wmode", "transparent");
  so.write("header");
</script>
</div>
<!-- /logo -->

Header flash is 100KB

ShawnV 02-18-2010 08:31 PM

Hey Goxy63, you should not be getting that high of a load.

Best thing to do is download the swfobject generator, fill in your info and then use the output code, also be sure you are running the latest version of swfobject 2.2

http://code.google.com/p/swfobject/downloads/list

PascalR 04-26-2010 09:12 AM

Great info for a newbie like me Shawn :)

I am getting an error when trying to add a flash anmation to my forum.

It says "SWFObject is undefined" and nothing is loading.

Here is my code:



Code:

<script type="text/javascript" src="http://www.cgfeedback.com/swfobject.js"></script>
<div id="banner">
<script type="text/javascript">
  var so = new SWFObject("http://www.cgfeedback.com/banner_image_scroller.swf", "test", "900", "150", "8", "#000000");
  so.addParam("quality", "high");
  so.addParam("salign", "t");
  so.write("banner");
</script>
</div>

And my forum address:

http://www.cgfeedback.com



cheers

Pascal

goxy63 05-02-2010 08:35 AM

Thanks ShawnV
Fixed that issue

Just to ask you guys, does anyone have idea how could I rotate flash headers, lets say upon every page refresh

Thanks

SEW810 05-04-2010 04:05 AM

Its a very useful article.
I don't know why people got so paranoic with my post: https://vborg.vbsupport.ru/showthread.php?t=235131

Anyway, hope you'll like it.


All times are GMT. The time now is 10:50 PM.

Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2024, vBulletin Solutions Inc.

X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.01634 seconds
  • Memory Usage 1,881KB
  • Queries Executed 10 (?)
More Information
Template Usage:
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (10)bbcode_code_printable
  • (8)bbcode_quote_printable
  • (1)footer
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (6)option
  • (1)post_thanks_navbar_search
  • (1)printthread
  • (34)printthreadbit
  • (1)spacer_close
  • (1)spacer_open 

Phrase Groups Available:
  • global
  • postbit
  • showthread
Included Files:
  • ./printthread.php
  • ./global.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/class_hook.php
  • ./includes/modsystem_functions.php
  • ./includes/class_bbcode_alt.php
  • ./includes/class_bbcode.php
  • ./includes/functions_bigthree.php 

Hooks Called:
  • init_startup
  • init_startup_session_setup_start
  • init_startup_session_setup_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • style_fetch
  • cache_templates
  • global_start
  • parse_templates
  • global_setup_complete
  • printthread_start
  • bbcode_fetch_tags
  • bbcode_create
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • printthread_post
  • printthread_complete