Go Back   vb.org Archive > vBulletin Article Depository > Read An Article > vBulletin 3 Articles

Reply
 
Thread Tools
Flash Headers, Footers, and Avatars for vBulletin
ShawnV's Avatar
ShawnV
Join Date: Mar 2005
Posts: 270

 

Show Printable Version Email this Page Subscription
ShawnV ShawnV is offline 05-20-2007, 10:00 PM

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
Reply With Quote
  #2  
Old 05-22-2007, 06:12 PM
Princeton's Avatar
Princeton Princeton is offline
 
Join Date: Nov 2001
Location: Vineland, NJ
Posts: 6,693
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Excellent article! :up:
Reply With Quote
  #3  
Old 05-27-2007, 02:26 PM
Kungfu Kungfu is offline
 
Join Date: Dec 2005
Posts: 242
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

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.
Reply With Quote
  #4  
Old 05-28-2007, 02:17 PM
ShawnV's Avatar
ShawnV ShawnV is offline
 
Join Date: Mar 2005
Posts: 270
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

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
Reply With Quote
  #5  
Old 05-29-2007, 11:06 PM
glorify's Avatar
glorify glorify is offline
 
Join Date: Aug 2004
Posts: 376
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Unbelievable job man. Really great work.
Reply With Quote
  #6  
Old 06-16-2007, 01:01 AM
RDHRazor RDHRazor is offline
 
Join Date: Jun 2007
Location: Ohio
Posts: 7
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

ShawnV,

What would be the code if you wanted to allow all users to use Flash Avatars? Not upload but remote host?
Reply With Quote
  #7  
Old 06-23-2007, 01:29 PM
ShawnV's Avatar
ShawnV ShawnV is offline
 
Join Date: Mar 2005
Posts: 270
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

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
Reply With Quote
  #8  
Old 06-23-2007, 10:51 PM
Synergy's Avatar
Synergy Synergy is offline
 
Join Date: Oct 2005
Location: Izmir/Turkey
Posts: 15
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

i was try and It`s work , excellent idea
Reply With Quote
  #9  
Old 07-01-2007, 07:59 PM
christian8a's Avatar
christian8a christian8a is offline
 
Join Date: May 2007
Location: Washington State
Posts: 412
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Thanx. I was looking for this solution since forever

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
Reply With Quote
  #10  
Old 07-04-2007, 09:58 PM
ShawnV's Avatar
ShawnV ShawnV is offline
 
Join Date: Mar 2005
Posts: 270
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Quote:
Originally Posted by christian8a View Post
Thanx. I was looking for this solution since forever

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
Reply With Quote
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 06:13 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.06672 seconds
  • Memory Usage 2,311KB
  • Queries Executed 23 (?)
More Information
Template Usage:
  • (1)SHOWTHREAD
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (1)ad_showthread_beforeqr
  • (8)bbcode_code
  • (1)bbcode_quote
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)modsystem_article
  • (1)navbar
  • (4)navbar_link
  • (120)option
  • (1)pagenav
  • (1)pagenav_curpage
  • (2)pagenav_pagelink
  • (10)post_thanks_box
  • (10)post_thanks_button
  • (1)post_thanks_javascript
  • (1)post_thanks_navbar_search
  • (10)post_thanks_postbit_info
  • (9)postbit
  • (10)postbit_onlinestatus
  • (10)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available:
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files:
  • ./showthread.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/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_post_thanks.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
  • showthread_start
  • showthread_getinfo
  • forumjump
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • post_thanks_function_post_thanks_off_start
  • post_thanks_function_post_thanks_off_end
  • post_thanks_function_fetch_thanks_start
  • post_thanks_function_fetch_thanks_end
  • post_thanks_function_thanked_already_start
  • post_thanks_function_thanked_already_end
  • fetch_musername
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • post_thanks_function_can_thank_this_post_start
  • pagenav_page
  • pagenav_complete
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • showthread_complete