Global IP Address:

54.224.168.206

Your Local IP Address:

Determining Local IP address....

*If you are behind a firewall (NAT) your global and local IP addresses will differ. Learn More

Archive

Posts Tagged ‘swfobject.js’

Add Flash Header to WordPress Atahualpa Theme (ver 3.5.3)

September 16th, 2010 reset Comments off

Since first publishing ‘Add a Flash Header to WordPress Atahualpa Theme‘, many users have found this to be a great solution to using an Adobe Flash movie (.swf) in the header area of Atahualpa theme on WordPress. This was tested on WordPress version 3.0.1 and the Atahualpa Theme latest release is 3.5.3.

Both the Static Publishing and the Dynamic Publishing method have been updated, so you can choose which best fits your needs. The Static Publishing method uses the industry best practice of nested-object tags with conditional expressions. The Dynamic Publishing method uses swfObject2.2 to insert the flash movie dynamically using javascript. Google has some great information on swfObject and various methods of implementation.

Functionality has also been added to the  %flash[....] parameters specified in the Atahualpa Theme Options in the WordPress Dashboard. You can now supply three (3) additional (and also optional) parameters, flashvars, param values,attribute values.

  • Flashvars allow you to pass information to your flash movie.
  • Param values allow you to specify specific Flash parameters to the browser to change how the Flash object behaves (ie: menu=false, wmode=transparent, allowScriptAccess=always are examples of parameters).
  • Attributes allow you to specify additional HTML attributes for the < object > tag, such as id=ata_flash_header.

The syntax for the %flash[......] header item in Atahualpa Theme Header Options is:

%flash[ swf filename, width, height, flashvars, param, attributes]

swf filename: is required and is the movie filename (.swf). This can be a full URL, but if just filename, file is expected to be in theme’s /images/header folder.
width: is required and is the width (in pixels) of the movie. You can optionally append ‘px’, as in 1220px.
height: is required and is the height (in pixels) of the movie. You can optionally append ‘px’, as in 200px.
flashvars: are optional and is simply a series of assignment statements separated by semi-colon (;). As in site=production;x=5. You header would use variables site & x in it’s actionscript and these variables will be initialized with values stated when the flash movie begins.
param: are optional parameters for Flash Plug-in that control specific Flash behavior such as menu and wmode (window-mode). For example, menu=false;wmode=transparent for param would allow the flash movie to be transparent and show reduced context (right-click) menu.
attributes: are optional attributes that are added to the HTML object tag. Typically this is the ID of the element, as in id=ata_flash_header.

Here is a real example:

%flash[header.swf, 1220px, 200px, site=production, menu=false;wmode=transparent, id=ata_flash_header]

Note: the use of comma (,) to separate the major items and semi-colon (;) separate multiple values within an item. always double-check your syntax, I usually start with the required parameters and then get page rendering correctly and then add items to fine tune behavior.

You can supply ‘null’ in lieu of a optional parameter. For example if you had no flashvars, but needed to specify param & attributes. Do this %flash[header.swf, 1220px, 200px, null, menu=false, id=ata_flash_header].

Make sure you specify your Header image height in the WordPress Dashboard Atahualpa Theme Options and supply a default image to be used as alternate content if Flash is not available in the users browser. Alternate content (the header image) will be displayed as a fall-back. You should test this option by disabling your flash plug-in in your browser.  For some more information, see previous mydeviceIP.com posts that discuss these principles in detail.

Here is Zip file for STATIC Publishing method. Replace the bfa_header_config.php in your Theme’s functions folder. (good idea to rename original or keep back-up). I usually rename the original file to bfa_header_config-ORIG.php.

Here is Zip file for DYNAMIC Publishing method. This method requires swfObject.js in your root WordPress folder. You can get swfObject.js at google code.

If you experience any problems with this latest version of the ‘Add Flash Header to WordPress Atahualpa Theme’, please leave a comment and we will try to investigate it.

Flash Header for WordPress Atahualpa Theme (ver 3.4.9)

September 15th, 2010 reset Comments off

Here is the  Atahualpa Theme version 3.4.9 update.  WordPress.org currently has  this  version posted in Themes section, eventhough latest version is  3.5.3.  You can get the latest Atahualpa theme at the author’s web site (http://wordpress.bytesforall.com/?p=94).

PLEASE read the post (for  the 3.5.3 version) as new syntax and features  are explained.  Those features include ability to specify flashvars, parameters and attributes in the %flash[....]  shortcode used in the Ata Theme  Dashboard Options for setting up your header.  The added parameters are optional, so the old syntax should work but won’t specify any additional information in the  HTML DOM and  flash object.

DOWNLOAD:  Static Publish method (.zip)

DOWNLOAD:  Dynamic Publish method (.zip)

This won’t be a long post, but I wanted to supply updates for using Flash headers in this theme.  I did update both the Static Publishing  method  and  Dynamic Publishing methods, so choose what applies.

If you need more information, see the atahualpa tag for the series of posts which provide detailed explanations. This post even has a sample download source code for the Flash (.fla) and alternate content image if you need to start from scratch.

If you have any comments or questions, please feel free to leave them.

Add a Flash Header to WordPress Atahualpha Theme (ver 3.4.4)

October 7th, 2009 reset 24 comments

update Jan. 29th, 2010 – This Flash header was updated to fix a layering issue with %pages menu drop-down menu items being hidden behind the Flash movie in the header. Basically, the flash parameter ‘wmode’ is now set to transparent which is used when the flash movie is loaded. For now, if you want to change this parameter or add another, you will need to edit the bfa_header_config.php file. In the future, I would like have more flexible Ata Theme Options %flash[...] syntax that would allow options without editing any .php code.

This is a significant update to the 2 previous posts for Adding a Flash Header to WordPress Atahualpha Theme for versions 3.2 & 3.4.1. This update does NOT require editing any .php files and utilizes the Atahualpa (or ‘Ata’ for short) Theme Options thru the WordPress Administrative panel to control the Flash object (.swf movie). Basically, it adds parameters to the %flash option so it is not necessary to modify the .php files. For example, %flash[url, width, height]. See below for more details. Flash is still implemented in either the static publishing method using <object tags> or the dynamic publishing method using swfobject.js. See previous posts or google for more discussion on publishing methods.

The easy way is to use the static publishing code provided, but the dynamic is provided for those interested or those looking for an example.

The Static publishing method.
  • Download the bfa_header_config.php file here (.zip file)
  • Continue with the steps below
The Dynamic publishing method.
  • Download the bfa_header_config.php file here (.zip file)
  • Continue with the steps below

Common steps for both methods

  1. Make a backup copy of the original bfa_header_config.php file. This is easily accomplished by renaming the file to bfa_header_config-ORIG.php. We want to be able to put things back like it was if we screw something up. Things should go smoothly, but always good idea to have a back-up.

  2. Extract bfa_header_config.php from the downloaded zip file above for your prefered publishing method.

  3. Upload bfa_header_config.php to your blog. This file should be uploaded to …/wp-content/themes/atahualpha/functions folder (same location as original file in #1).

  4. Go to your WordPress Administrative panel and go to
    Appearance->Atahualpa Theme Options->Style & edit HEADER AREA. In the Configure Header Area, you can now use %flash[url, width, height] to enable your flash movie.

    The proper syntax for the %flash parameter is: %flash[url, width, height].

    example: %flash[header.swf, 1200px, 200px]

    The url can be just the .swf filename if file is placed in Atahualpha header folder
    (wp-content/themes/atahualpa/images/header). Otherwise the url should be the complete url,
    ie: http://www.yourdomain.com/blog/wp-content/uploads/2009/10/header.swf.
    The width & height are the width and hieight of your flash movie in pixels. The px suffix is optional.

If you are using the dynamic publishing method, which relies on swfobject.js from google, make sure you have uploaded swfobject.js to your web site. If this file is not located in the root of your blog, you will need to alter the path to swfobject.js in the bfa_header_config.php file (line #336).

The %flash[url, width, height] header option is designed to be used as a replacement of the %image option. If you include your logo in your flash movie, then don’t use the %logo option. I sometimes relocate the search box and the feed buttons to the sidebar and don’t use %logo. The %image & %logo options will still display, but it would be in addition to the flash movie. Feel free to experiment. My header options are: %flash[header.swf,1220px,200px] %bar1 %pages %bar2, which results in flash movie at top with page nav-bar between to the horizontal bars.

Also, it very important to test your alternate content by temporarily disabling your flash plugin. To Disable your flash plugin (in IE tools->manage add-ons;firefox tools->add-ons), select the Flash Plugin and Disable it. Then refresh your blog page in your browser and make sure the alternate content is displayed. In the Atahualpha Theme Options->Style & edit Header area, turn ON the Blog title & turn ON the blog tagline. Change any of the other properties of title & tagline to match your blog. Save the changes and refresh your blog page. With flash disabled, you should see your alternate content. This is VERY important, since google and other search engines see the alternate content. And since the Blog title (an <h1> HTML tag), it is important in ranking. The images in the header folder are selected at random to be the alternate content, so make sure you upload one. I usually save a .jpg snapshot of the flash movie and upload that so it has a similar look, but no animiation since it is a .jpg.

If you need a sample flash header to start with, you can download here. I have implemented a few flash headers and I stripped this one down and made a sample for people to use. It is 990px wide by 200px high and has buttons on title and image linked to blog home page. The source files are included (.fla & .as) if you have flash and want to tweak it. Adobe has a 30 day trial for flash if you don’t have it. It is in Flash CS4 using Action Script 3. You need to change the button url link in the button_overlay_as3.as file to match your blog. Alternate content header.jpg included also.

I hope this makes implementing a flash header in the Ata theme easier for those interested, especially those who do not want to edit code. This is the 3rd revision of this hack and since it can be implemented easily without any coding, I think it could be added to the theme distro and allow the most popular WordPress theme to allow flash headers by default.

Good luck with this one! If you have comments or questions, please post them. Thanks for using myDevceIP.com. Feel free to come back if you need to look up an IP address.

UPDATE: The %flash option does require that you have a least one (1) image file (.jpg, .png, etc.) in the Ata Theme’s images/header folder. You will get a ‘foreach’ error from php at top of page if no images are found. You need this image for your alternate content (see above discussion on alternate content). updated 11-30-2009

references: Adding Flash Header to WordPress Atahualpa Theme (ver 3.4.1)
Adding A Flash Header to WordPress Atahualpa Theme

* note that the %flash option uses square brackets [ ] at each end not parenthesis ( ).
and this code has been updated to use the %html[...]% option for a total custom header.
See the Add Custom Header to WordPress Atahualpa Theme post.

Adding Flash Header to WordPress Atahualpa Theme (ver 3.4.1)

August 17th, 2009 reset 36 comments

This article has been updated for Atahualpa Theme, see Adding Flash Header to WordPress Atahualpa Theme (ver 3.4.4)

wordpress2This is an update to the original post to add a flash header to WordPress Atahualpa theme. This post uses Atahualpa Theme Version 3.4.1, the original post used version 3.2. Bytes-for-All has released a version 3.4.2 at wordpress.bytesforall.com that provides a handful a specific fixes. This update should work for either version, but was only tested on ver. 3.4.1.

If you use WordPress and the popular ‘Atahualpa’ Theme and want to use a Flash (.swf) header element, this post may be helpful. To make this modification you will need to modify one of the theme’s header files (bfa_header_config.php). One thing you may find helpful, is to setup a test blog that uses the same theme as your Live blog. This way you can test changes, plugins, etc. instead of editing the Live blog. To see an example of WordPress 2.8 with ‘Atahualpa’ Theme and flash header, see www.SuzieTrainsMaui.com/blog.

Let me say, Flash is great! It provides rich content and is compatible with like 95% of browers used today. There are a few different methods to implement a Flash element (a .swf movie) into web content. One method uses <object> tags which is called Static publishing. The other prominent method uses a javascript library named swfobject.js (available from Google) which is called Dynamic publishing. Static publishing is a little simpler than Dynamic, but you can choose the implementation that best suits your level and needs. Code for both methods are provided.

Here are the main steps with a code discussion below:

  1. Make a backup copy of bfa_header_config.php.
  2. Edit bfa_header_config.php following highlighted code shown HERE. This code shows the Flash Static publishing method. Code changes are highlighted Yellow. See code discussion below for details about edits and the code for Dynamic publishing.
  3. Now we need to tell the ‘Ata’ theme to use your flash header. Login to your WordPress Admin panel and goto Appearance->Atahualpa Theme Options. From the new vertical menu, select Style & edit HEADER AREA. In the Configure Header Area, you can now use %flash as a parameter. Most likely you will replace %image with %flash.

    In most cases you will not want to use %image or %logo if using %flash. However, you will want to ensure good alternate content for those valuable search engine robots and the few visitors that don’t have flash installed. So, on that same HEADER AREA options page, make sure Show Blog Title and Show Blog Tagline are yes and setup appropriately to work with your alternate content image. Also, it is important to have Header Image height option set correctly.

  4. Upload your flash movie (.swf) to your blog. I would recommend placing the file in the ‘Ata’ theme header/images folder, but you can put where you want, just make sure the path is set properly.
  5. View your blog and hopefully you see your new Flash header. You should also test the alternate content by disabling the Flash Add-on for your browser and check your page again. It is a good idea to check multiple browsers to make sure your page is rendered correctly with and without flash.

Code Discussion

The original bfa_header_config.php can be found here for comparison. Note, this example used Atahualpa theme version 3.4.1. Also, if you copy/paste from the .pdf files, carefull not to paste line numbers. HERE is the raw .php in a ZIP file for Flash Static Publishing method.

Line 277: The IF statement was modified to check for %flash in the header items. Technically added OR and test condition for %flash.

Lines 280-302:The $header_image variable needs to be broken up into 3 parts so we can use part of it for alternate flash content. The $header_image variable is replaced by $header_div1, $header_content, $header_div2 and as you can see the last statement sets $header_image to the concatenation of the 3 parts.

Lines 305-319:This is where the flash code is formulated, so ALL this code is added to the .php file. This is where the Static and Dynamic publish methods differ. As you can see, the method shown uses <object> tags which is the Static publishing method. Make sure the path to your uploaded .swf movie is valid (or it won’t work). If you want to use the Dynamic publishing method, substitue this code provide in ZIP file for lines 305-319. Also, make sure you upload swfobject.js and all paths are valid.

Lines 347:Add “%flash” to the list. Notice the comma on the line prior.

Lines 361:Add $header_flash to the list. Notice the comma on the line prior.

You can adjust the code manually if you wish or copy/paste a whole block or the whole file if you wish as the raw .php files are provided above. If you have made any other changes to this file, you may not want to copy/paste the whole file. If you are a php coder, you may wish to make adjustments versus copy/paste so you can understand it, but others may wish to copy/paste a block.

Good Luck with it! Hopefully Bytes-for-All will implement this into the Theme!

This article has been updated for Atahualpa Theme, see Adding Flash Header to WordPress Atahualpa Theme (ver 3.4.4)