Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Save more on your purchases! discount-offer-chevron-icon
Savings automatically calculated. No voucher code required.
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Newsletter Hub
Free Learning
Arrow right icon
timer SALE ENDS IN
0 Days
:
00 Hours
:
00 Minutes
:
00 Seconds
WordPress and Flash 10x Cookbook
WordPress and Flash 10x Cookbook

WordPress and Flash 10x Cookbook: Over 50 simple but incredibly effective recipes to take control of dynamic Flash content in Wordpress

eBook
$22.99 $25.99
Paperback
$43.99
Subscription
Free Trial
Renews at $19.99p/m

What do you get with Print?

Product feature icon Instant access to your digital copy whilst your Print order is Shipped
Product feature icon Paperback book shipped to your preferred address
Product feature icon Redeem a companion digital copy on all Print orders
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
OR
Modal Close icon
Payment Processing...
tick Completed

Shipping Address

Billing Address

Shipping Methods
Table of content icon View table of contents Preview book icon Preview Book

WordPress and Flash 10x Cookbook

Chapter 1. Leveraging Flash in WordPress

In order to set up the self-hosted version of WordPress (WP), you need a host that supports PHP (v.4.3+) and MySQL (v. 4.1.2+). If you want to set up multiple WordPress installations (or use other database-driven software), you will probably want a host that offers multiple MySQL databases.

Note

We suggest a Linux-based (Apache) server. Make sure you get enough storage—at least 1GB. Additional utilities that are helpful for WordPress-based sites include PHPMyAdmin (for working with your database) and SimpleScripts (for installing and updating WordPress).

In this chapter, we will cover:

  • Developing a strategy with Flash and WordPress

  • Embedding a .swf: via Kimili plugin

  • Adding Flash detection with SWFObject 2.0 and embedding the .swf

  • Adding Flash detection with Flash-generated JavaScript and embedding the .swf

Developing a strategy to use Flash & WordPress

Identify your user level and a specific application. Develop an SEO strategy. Determine what files need to be configured and modified to achieve your goals.

Getting ready

There are an unlimited number of ways to use WordPress and Flash together. The needs, ideas, and abilities of no two users will be the same. The limits are determined by you—by your skill level and the goals you set.

The first step is to identify your level of familiarity with the Web and Multimedia design software. Be honest in your self-assessment—and don't be discouraged, no matter where you are starting today. Understanding your user level allows you to set reasonable expectations. Take a look at the following figures to understand your user level. With practice and experience, by accessing the many free resources available online and through training tools (such as this manual), you will increase your level of proficiency.

You may be a new blogger, or may have been blogging for years. You may be an admin user supporting a team using WP for business or organizational needs, a theme designer, or a plugin developer. This book is written with you in mind, assuming that you are familiar with WP basics, or are willing to become so.

How to do it...

Flash takes care of your dynamic media needs, and WordPress makes it easy to administrate your site. The way to use them together is with SEO in mind.

In terms of density of information presented to a search engine, Flash is not as effective as XHTML, in spite of recent advances. A Flash animation can have a description tag, however, properly marked up XHTML that uses<h1> and<h2> to emphasize keywords and phrases, as well as including links to and from authoritative sources, will still have more SEO value when compared to a .swf.

Many industries and audiences expect or require Flash animations. Your marketing and SEO strategy should determine how you mix WordPress and Flash. The goal is content that people can read and enjoy that is also understood by engines and robots. For those of us who administer or develop websites, ease of use is also a consideration.

How it works...

In your design, when blocking in space for animations, consider how they are both dynamic and static. An animation does what it does, however lovely it is, and nothing more. Once a user has seen the animation, there is often no reason to pay attention to it again. WordPress offers dynamic content—areas of the page that highlight and excerpt the most recent content from different areas. This encourages users to revisit and explore your site for new content and to pay special attention to dynamic content areas. While an animation measures change in frames per second, WordPress allows your users to measure the changes made since their last visit. In this sense, Web 2.0 represents a true change in technology—transforming the screen itself into an animation that you program—simply by publishing new content.

So, some Flash is almost always fine. But too much Flash is less useful to search engines, relative to XHTML. Additionally, Flash animations generally take more time to update than regular WordPress content.

There's more...

There are other ideas about how to combine Flash and WordPress, which we will touch on in later and more advanced chapters. Our approach should be applicable to the majority of users.

Where to place the .swf?

Flash media can be included anywhere in a WordPress theme: in the header, in a post or a page, in a sidebar, or in the footer. It takes some time to become familiar with your theme files—determining which PHP templates are called when different parts of the screen are clicked. An overview of how WordPress works is useful.

A theme has at least three views, which represent the steps to a given piece of information, moving from home page to a category to a post.

A WordPress home page is traditionally a dynamic display of updates from interior sections (like a dashboard). It can also be a static page. It's often named index.php or home.php.

The category archive view is a dynamic display of the posts in a category. It sounds complicated, but it is logical. When a user clicks on a category, not one piece of information is returned, but many. This template is called category.php.

The archive view is so named because, though this piece of information may be featured in other parts of the site, the user has now arrived at the URL for an individual post. The URL can be used in links or bookmarks to refer back to this specific piece of information. Typically, the format is a long-reading pane.

page.php, sidebar.php, header.php, and footer.php work just like you'd think.

Edit and debug with Firebug

Knowing which PHP templates create pages on your blog is the first step to inserting a Flash animation directly into theme files. The next step is to determine specifically which<div> will contain the animation. Firebug helps us match up the correct<div> tag with the correct PHP template.

Get Firebug here: http://getfirebug.com/

Firebug is an add-on for Mozilla Firefox. This handy tool allows you to see the CSS and XHTML that make up any page by context-clicking (right-click in Windows or Ctrl-click for Mac) and choosing "Inspect Element." The window splits at the bottom. Bring your mouse down to the bottom-left pane. Hovering over a<div> tag causes the screen to be highlighted: blue for<div> width and height, purple for margins, and yellow for padding. Clicking on the blue <div> tag loads the bottom-right pane with entries from the CSS stylesheet that control its appearance. It is helpful to have such a visual representation to understand the structure of a site.

Note

Viewing the source (PC: Ctrl-U/Mac: Cmd-Opt-U) of a WordPress blog can be a confusing experience. Keep in mind that the XHTML output is different than the component PHP. Your templates are not what you see when you "View Source"—rather, you are seeing the result of dynamic PHP calls as XHTML, styled according to CSS. This is what makes WordPress dynamic—there are no webpages. There are only PHP templates waiting to output your website, recreated each time as the most recent content.

Additional utilities

There are additional utilities we will be using throughout this book; a FTP client and a text editor are required for intermediate to advanced applications. Dreamweaver is an excellent tool for coding, if you have it. A fast running stand-alone text editor specific to coding has its own merits. Here are open-source utilities for Mac and for PC:

FTP Client: FileZilla, http://filezilla-project.org/download.php

Text Editor: Windows comes with Notepad and Mac has TextEdit, but these text editors are not set up to code for the Web. A text editor for coding gives you access to many additional tools and options, such as line numbers, keyboard shortcuts, and auto-formatting.

See also

Developing a strategy to use Flash & WordPress


Identify your user level and a specific application. Develop an SEO strategy. Determine what files need to be configured and modified to achieve your goals.

Getting ready

There are an unlimited number of ways to use WordPress and Flash together. The needs, ideas, and abilities of no two users will be the same. The limits are determined by you—by your skill level and the goals you set.

The first step is to identify your level of familiarity with the Web and Multimedia design software. Be honest in your self-assessment—and don't be discouraged, no matter where you are starting today. Understanding your user level allows you to set reasonable expectations. Take a look at the following figures to understand your user level. With practice and experience, by accessing the many free resources available online and through training tools (such as this manual), you will increase your level of proficiency.

You may be a new blogger, or may have been blogging for years. You may be an admin user supporting a team using WP for business or organizational needs, a theme designer, or a plugin developer. This book is written with you in mind, assuming that you are familiar with WP basics, or are willing to become so.

How to do it...

Flash takes care of your dynamic media needs, and WordPress makes it easy to administrate your site. The way to use them together is with SEO in mind.

In terms of density of information presented to a search engine, Flash is not as effective as XHTML, in spite of recent advances. A Flash animation can have a description tag, however, properly marked up XHTML that uses<h1> and<h2> to emphasize keywords and phrases, as well as including links to and from authoritative sources, will still have more SEO value when compared to a .swf.

Many industries and audiences expect or require Flash animations. Your marketing and SEO strategy should determine how you mix WordPress and Flash. The goal is content that people can read and enjoy that is also understood by engines and robots. For those of us who administer or develop websites, ease of use is also a consideration.

How it works...

In your design, when blocking in space for animations, consider how they are both dynamic and static. An animation does what it does, however lovely it is, and nothing more. Once a user has seen the animation, there is often no reason to pay attention to it again. WordPress offers dynamic content—areas of the page that highlight and excerpt the most recent content from different areas. This encourages users to revisit and explore your site for new content and to pay special attention to dynamic content areas. While an animation measures change in frames per second, WordPress allows your users to measure the changes made since their last visit. In this sense, Web 2.0 represents a true change in technology—transforming the screen itself into an animation that you program—simply by publishing new content.

So, some Flash is almost always fine. But too much Flash is less useful to search engines, relative to XHTML. Additionally, Flash animations generally take more time to update than regular WordPress content.

There's more...

There are other ideas about how to combine Flash and WordPress, which we will touch on in later and more advanced chapters. Our approach should be applicable to the majority of users.

Where to place the .swf?

Flash media can be included anywhere in a WordPress theme: in the header, in a post or a page, in a sidebar, or in the footer. It takes some time to become familiar with your theme files—determining which PHP templates are called when different parts of the screen are clicked. An overview of how WordPress works is useful.

A theme has at least three views, which represent the steps to a given piece of information, moving from home page to a category to a post.

A WordPress home page is traditionally a dynamic display of updates from interior sections (like a dashboard). It can also be a static page. It's often named index.php or home.php.

The category archive view is a dynamic display of the posts in a category. It sounds complicated, but it is logical. When a user clicks on a category, not one piece of information is returned, but many. This template is called category.php.

The archive view is so named because, though this piece of information may be featured in other parts of the site, the user has now arrived at the URL for an individual post. The URL can be used in links or bookmarks to refer back to this specific piece of information. Typically, the format is a long-reading pane.

page.php, sidebar.php, header.php, and footer.php work just like you'd think.

Edit and debug with Firebug

Knowing which PHP templates create pages on your blog is the first step to inserting a Flash animation directly into theme files. The next step is to determine specifically which<div> will contain the animation. Firebug helps us match up the correct<div> tag with the correct PHP template.

Get Firebug here: http://getfirebug.com/

Firebug is an add-on for Mozilla Firefox. This handy tool allows you to see the CSS and XHTML that make up any page by context-clicking (right-click in Windows or Ctrl-click for Mac) and choosing "Inspect Element." The window splits at the bottom. Bring your mouse down to the bottom-left pane. Hovering over a<div> tag causes the screen to be highlighted: blue for<div> width and height, purple for margins, and yellow for padding. Clicking on the blue <div> tag loads the bottom-right pane with entries from the CSS stylesheet that control its appearance. It is helpful to have such a visual representation to understand the structure of a site.

Note

Viewing the source (PC: Ctrl-U/Mac: Cmd-Opt-U) of a WordPress blog can be a confusing experience. Keep in mind that the XHTML output is different than the component PHP. Your templates are not what you see when you "View Source"—rather, you are seeing the result of dynamic PHP calls as XHTML, styled according to CSS. This is what makes WordPress dynamic—there are no webpages. There are only PHP templates waiting to output your website, recreated each time as the most recent content.

Additional utilities

There are additional utilities we will be using throughout this book; a FTP client and a text editor are required for intermediate to advanced applications. Dreamweaver is an excellent tool for coding, if you have it. A fast running stand-alone text editor specific to coding has its own merits. Here are open-source utilities for Mac and for PC:

FTP Client: FileZilla, http://filezilla-project.org/download.php

Text Editor: Windows comes with Notepad and Mac has TextEdit, but these text editors are not set up to code for the Web. A text editor for coding gives you access to many additional tools and options, such as line numbers, keyboard shortcuts, and auto-formatting.

See also

Embedding Flash .swf files in WordPress


The most basic and fundamental way of using WordPress and Flash together is to insert an animation. The steps are:

  1. 1. Create an animation in Flash.

  2. 2. Export the animation as a .swf.

  3. 3. Upload the .swf to your server.

  4. 4. Embed the .swf in your site.

WordPress makes it easy to embed a .swf—here, we provide an in-depth review of the Kimli Flash Embed Plugin, (version 2.0.2) based on Swfobject 2.x.

If you do not have an animation to begin with, this section uses a sample Flash animation, found in theChapter 1 folder.

Getting ready

WordPress displays Flash the same as any other web page—through Flash Detection. Flash developers use swfObject 2.x and JavaScript for Flash Detection. Otherwise, non-specialists can use one of a variety of plugins to embed Flash media (SWF or FLV). Kimli Flash Embed is among the best of such plugins.

The easiest way to embed Flash in WordPress is through the plugin "Kimili Flash Embed for Wordpress."

http://kimili.com/plug-ins/kml_flashembed/wp

"Built upon the SWFObject javascript code, it is standards compliant, search engine friendly, highly flexible and full featured, as well as easy to use." Quoted from http://kimili.com/plug-ins/kml_flashembed/#usage (2009).

How to do it...

Installing Kimili Flash Embed (KFE) on your WordPress site is simple.

  1. 1. In your dashboard sidebar, use the downward pointing arrow to expand Plugins and then click on Add New.

  2. 2. In the Search bar, type: flash, as seen in the following screenshot.

  1. 3. Browse down to Kimli Flash Embed, click Install, and then Activate.

  1. 4. Now that the plugin has been uploaded and activated, the final step is to insert a Flash file in the .swf format.

  2. 5. Click on Posts | Edit and then the relevant post title (we will be using the default Hello world! post).

  3. 6. Click on HTML to enter the HTML view.

Note

To add a Flash animation, use the following shortcode, replacing path, y and x parameters with the respective path, height, and width of your swf:

[kml_flashembed movie="/path/to/your/movie.swf" height="y" width="x" /]

  1. 7. The movie parameter is the only one required—height and width are optional. Though it is most efficient to size your .swf during export, the height and width parameters will resize a .swf file. If you do so, be sure to keep the numbers in scale proportion to avoid distortion For reference, look at the following screenshot.

  1. 8. If you're using the Visual Editor to write your posts, look for the red Flash button on the right. Click to launch the KFE Tag Generator, a wizard-like interface that will assist you in creating the necessary KFE tag. Again, the only necessary parameter is the URL to the .swf file you want to display.

That's it! You have now inserted your first Flash animation inside WordPress. It's easy to do through the shortcode or the KFE Tag Generator. Open another tab (PC: Ctrl + T /Mac: Cmd + T) to confirm:

How it works...

Three main sections comprise the KFE Tag Generator: SWFObject Configuration, SWF Definition, and Alternative Content.

Configuration options are covered in more detail in the following section, Adding Flash Detection with SWFObject 2.x. Please see the How to do it... section.

Adding Flash detection with SWFObject 2.x


Detect which version of the Flash Player a viewer has available and supply alternative content in the event that the necessary Player is not available. The alternative content, in this case, will be a link for the viewer to acquire the appropriate Flash Player, if desired. To assist in expressInstall of the Player, the .swf will be registered with SWFObject. This method of setting up Flash Player detection does not require the use of a plugin and gives you easy and direct access to the generated code.

SWFObject 2.x is an open-source application brought to you by Google. To view the open-source license for SWFObject 2.x, please visit http://www.opensource.org/licenses/mit-license.php. For further information on SWFObject and for another download source for the files needed to enable it to work, please visit http://code.google.com/p/swfobject/.

For supplemental information regarding SWFObject 2.x from Adobe, please visit http://www.adobe.com/devnet/flashplayer/articles/swfobject.html for an article entitled Detecting Flash Player versions and embedding .swf files with SWFObject 2.0, created by Bobby Van Der Sluis.

Getting ready

In theChapter 1 folder, make sure that you have access to the following files: swfobject_test.swf, expressInstall.swf, swfobject.js, and detection_generator.htm. They are located inside the Detection with SWFObject folder.

Move the swfobject_test.swf, expressInstall.swf, and swfobject.js files to the root level of your theme folder. Technically, the .swf you are embedding can be located anywhere, as long as you use the absolute URL in your code.

The detection_generator.htm file holds the open-source application that generates the necessary Flash Player detection code for you to put into your PHP template.

Be aware that hand coding your live website is a great way to learn and a fast way to work. You are probably going to make a few mistakes the first time through. It is in your best interest to have all of your information backed up before editing your site. You may want to have a text editing program or a WYSIWYG editor like Dreamweaver to maintain and organize copies of your files at each stage of development.

Another option is to set up WordPress locally so that the program runs on your computer instead of a server. XAMPP is a cross-platform utility that can help set up the Apache web server on your computer. You can download it here: http://www.apachefriends.org.

The benefit of this approach is that you do not have to upload files via FTP or reload pages to see the changes you've made. Also, your work in progress will be private—no one will be able to see your site until you move your completed site from the local install to your server.

How to do it...

  1. 1. Open the detection_generator.htm file. To do this, either double click on the file or drag it onto your web browser icon:

  1. 2. For the SWFObject configuration section, leave the default settings for SWFObject (.js) as swfobject.js and for Publishing method as Static Publishing. Change Detect Flash Version to the version of the Flash Player appropriate for your animation. For example, the default of 9.0.0 is adequate. If you are using the latest and greatest capabilities of Flash CS4, instead change the version to 10.0.0. Check the box for Adobe Express Install and leave the file name as it is. This can be seen in the above screenshot.

  2. 3. For the SWF definition section, change the name of the Flash (.swf) to the name of your .swf file. In this case, change it to: swfobject_test.swf. Dimensions need to be changed to the width and height of your .swf file. Change this to 320 x 240 pixels. Flash content id can stay as the default. This can also be seen in the above screenshot.

  3. 4. For the HTML definition section, do not change anything.

  4. 5. Click the Generate button to generate the necessary Flash detection code in the window at the base of the application. Kimili generates the code and puts it into your WordPress shortcode. The SWFObject 2.x generator gives you direct access to your code. You then have to copy/paste the code to the appropriate location in your chosen template in WordPress. Your code should look like the following:

    <!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></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("myFlashContent", "10.0.0", "expressInstall.swf"); </script> </head> <body> <div> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="320" height="240" id="myFlashContent"> <param name="movie" value="swfobject_test.swf" /> <!--[if !IE]>--> <object type="application/x-shockwave-flash" data="swfobject_test.swf" width="320" height="240"> <!--<![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> </body> </html>
    
  5. 6. Select the <div> tag in the body section of the code. Everything from<div> to</div> gets selected. Copy this (Edit | Copy or Ctrl-C).

  6. 7. In the sidebar of your WordPress Dashboard, click on the arrow to the right of Appearance. Then, click on Editor.

  7. 8. On the right side of the screen, you now have a list of all the templates that are in the root directory of the Theme folder. Click on the title of the desired .php file. This loads it in the Theme Editor.

  8. 9. Paste the code you copied from the code generator (Edit | Paste or Ctrl-V) into the appropriate Template and <div> tag. Refer back to Developing a Strategy: Where to Place a .swf? if needed.

  9. 10. For the head content, select and copy the following:

    <script type="text/javascript" src="swfobject.js"></script> <script type="text/javascript"> swfobject.registerObject("myFlashContent", "10.0.0", "expressInstall.swf"); </script>
    

Back in WordPress, open up header.php by clicking on Appearance | Editor | header.php. Paste the selected text in the head section after the</style> tag and before the</head> tag.

How it works...

The code generator creates the code for you based on the choices you make. It generates the code within the basic structure of an HTML page. The code generated is web standards compliant and supports the incorporation of alternative content.

The JavaScript elements in the<head> section of the .htm generated HTML output accesses the swfobject.js file. This is a library of JavaScript necessary for the Flash Player version detection process to take place. The JavaScript elements also register your .swf file with the library and tell it which version of the Flash Player is needed.

In the body section of the document, a <div> tag is created that holds the object and nested object information/method that delineates which .swf is to be played, the width and height of it, and what alternative content to display if the appropriate Flash player version is not found. Notice that special coding is used to account for the needs of Internet Explorer, for example:<!--[ if !IE]>-->

There's more...

Using relative vs. absolute dimensions

If you want have your .swf dimensions relative (in percentages) instead of absolute (in pixels), you have two choices:

Choice #1:

  1. 1. Go back into the detection_generator.htm file.

  2. 2. Change the Dimensions to 100 x 100 percentage, as seen below.

  1. 3. Click Generate.

  2. 4. Copy/paste your new code as needed.

Choice #2:

In WordPress, change the dimensions in pixels to dimensions in percentages. That section of code should look like this:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="100%" height="100%" id="myFlashContent"> <param name="movie" value="swfobject_test.swf" /> <!--[if !IE]>--> <object type="application/x-shockwave-flash" data="swfobject_test.swf" width="100%" height="100%"> <!--<![endif]-->

Dynamic Publishing instead of Static Publishing

The default setting for the detection_generator.htm file is for Static Publishing. The other choice is Dynamic Publishing. Static Publishing is able to reach a larger audience because of the way it is constructed. There is less dependency on JavaScript. The downside is minimal. As per Adobe's Bobby Van Der Sluis, Static Publishing does not have a solution for click-to-activate mechanisms. However, those are already being phased out of use (Internet Explorer and Opera were the browsers of interest with this). Dynamic Publishing relies more heavily on JavaScript, even for embedding the .swf file, so the audience reached is smaller. A couple of perks are that it generates less code and has no issue with click-to-activate mechanisms.

  1. 1. All you have to do to change the publishing method is open the detection_generator.htm file and change Publishing method to Dynamic Publishing, as seen below, leave the defaults as desired, and click Generate.

  1. 2. Notice there is slightly different and slightly less code:

    <!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></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"> var flashvars = {}; var params = {}; var attributes = {}; swfobject.embedSWF("swfobject_test.swf", "myAlternativeContent", "320", "240", "10.0.0", "expressInstall.swf", flashvars, params, attributes); </script> </head> <body> <div id="myAlternativeContent"> <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> </div> </body> </html>
    <!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></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"> var flashvars = {}; var params = {}; var attributes = {}; swfobject.embedSWF("swfobject_test.swf", "myAlternativeContent", "320", "240", "10.0.0", "expressInstall.swf", flashvars, params, attributes); </script> </head> <body> <div id="myAlternativeContent"> <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> </div> </body> </html>
    
  2. 3. Copy/paste the necessary parts of this code into WordPress.

    • For the head section, copy/paste everything from<script type... to</script>

    • For the body section, copy/paste everything from<div... to</div>

Hitting the "More" Button

More options are available to you in the SWF definition section of the code generator. Click the More button to see them (they will look like the image below):

Choose and change Attributes and Parameters here if you would like the generator to create even more code for you. Many of these options are most useful when the .swf you are embedding is going to be the sole content of the .html page.

If you are doing a test run, you may want to change the quality setting to low to cut down on load time. Just remember to turn it back to the default or high when you are ready for the real deal.

See also

  • Using the Kimili plugin to incorporate a .swf

  • Adding Flash detection with Flash-generated JavaScript

Adding Flash detection with Flash-generated JavaScript


If you want to add Flash player detection to your web page, but do not want to reference an external file, this recipe offers an easy solution. Use the Flash Professional IDE to generate the .html page for you that contains JavaScript to detect a Flash player and will play your .swf. Then, copy/paste the needed code into your template in WordPress.

Getting ready

Make sure you have access to the javascript_test.fla file so that you can open the file and allow Flash to generate additional files in that same location. It is currently located in the Detection with Flash JavaScript folder inside the folder forChapter 1. Change the location of this file as you need.

How to do it...

  1. 1. In Flash, go to File | Open. Navigate to the javascript_test.fla file (or use your own .fla file) and open it.

  2. 2. Go to File | Publish Settings.

  1. 3. Make sure that Flash and HTML are checked, as shown in the previous screenshot.

  2. 4. Click on the Flash tab at the top of the dialog box, as seen below.

  1. 5. In the top section of the dialog box now showing, set the Player to the version you are targeting.

Note

In order for Flash to generate the appropriate code, you must target Flash Player 4 or higher.

  1. 6. Click on the HTML tab at the top of the dialog box, as seen below.

  1. 7. In the top section of the dialog box now showing, set the Template to either Flash Only or Flash HTTPS, check the box for Detect Flash Version, and type in the specific version of Flash to be targeted.

  2. 8. Click Publish at the bottom of the dialog box. A .swf file and .html file have now been created for you. The .html file holds a reference to the .swf as well as the JavaScript necessary for basic Flash Player detection.

  3. 9. The .swf can be moved to the root level of your site as needed.

  4. 10. Copy/paste the Flash detection code into a Template in WordPress.

    • For the head section, copy/paste everything from<script> to</script>

    • For the body section, copy/paste everything from<script> to</noscript>

How it works...

You enter the necessary preferences for your .swf and .html files into the Publish Settings dialog box. When you click Publish, Flash generates the requested files. As long as the .html template you publish is either Flash Only or Flash HTTPS, the .html file will be generated with JavaScript, set up to detect the Flash Player you specified. If the appropriate Flash Player version is not detected, alternative information is displayed so that the viewer has the option to download the targeted and necessary version of the Flash player.

See also

  • Using the Kimili plugin to incorporate a .swf

  • Adding Flash Detection with swfObject 2.x

Left arrow icon Right arrow icon

Key benefits

  • Learn how to make your WordPress blog or website stand out with Flash
  • Embed, encode, and distribute your video content in your Wordpress site or blog
  • Build your own .swf files using various plugins
  • Develop your own Flash audio player using audio and podcasting plugins
  • Filled with many useful and efficient recipes with many screenshots and well explained code to ensure that if you open any recipe in the book you will be able to follow it without going through the previous recipes

Description

WordPress is much more than just a blogging platform now. This flexible CMS is the power behind millions of URLs, including blue-chip companies, small business, and personal websites. Flash is a world-famous multimedia platform. This book will show you the best of the proven and popular strategies and techniques to deliver rich multimedia content, which will let you sail through the world of Flashy Wordpress with ease.This book will take you through clear well-formed and comprehensive recipes, through the most essential and useful Flash multimedia tools for Wordpress available today including plugins for images, audio and video, as well as projects you can do yourself in Flash. It helps you to create a Wordpress website full of Flash content. We show the big picture by providing context, best practices and strategies. Detailed instructions are provided for each section. This book provides you with the shortlist of the most essential Flash tools for creating a dynamic and media-rich website or blog, and shows you how to implement these on your site. The sections on Flash are intended to give you the option to create custom .swf files, giving you an alternative to plugins that already exist. The book will show you how to configure Flash content in your WordPress site/blog for maximum SEO, introduce Flash content to your Wordpress with and without plugins, import image feeds, use lightbox effects, and much more.

Who is this book for?

If you are a Wordpress user interested in creating multimedia-rich websites and blogs using Flash then this book is perfect for you. This book caters for site administrators and web developers, who have experience using Flash aand Wordpress.

What you will learn

  • Embed SWF files with the Kimili plugin
  • Add Flash Detection when you embed a SWF without a plugin
  • Configure WordPress and maximize search engine optimization
  • Use the Flickr plugin and WordPress Multibox plugin for your images
  • Create your own effects, watermarks, image gallery, and slideshow from scratch with Flash
  • Use the NextGen Gallery plugin for image thumbnails, watermarking, and galleries
  • Embed FLV files in WordPress
  • Set up video blogging using WebTV Plugin and the Free WP Tube Theme
  • Encode video files with the Adobe Media Encoder
  • Use the audio plugins WPAudio Player, µAudio, and PodPress
  • Add sound effects to a button and the timeline in Flash
  • Stream sound and create/code your own On/Off music button and an MP3 player
  • Using preset Flash skins
  • Create a Custom Quote Rotator using XML and ActionScript in Flash
  • Use and configure these plugins: WP-Cumulus Plugin, Tagnetic Poetry Plugin, Flexi Quote Rotator Plugin, WP sIFR Plugin, XML Google Maps Plugin, Datafeedr Random Ads Plugin, and WP Flash Feed Scroll Reader Plugin
  • Customize WordPress themes
  • Create animations and buttons in Flash
Estimated delivery fee Deliver to United States

Economy delivery 10 - 13 business days

Free $6.95

Premium delivery 6 - 9 business days

$21.95
(Includes tracking information)

Product Details

Country selected
Publication date, Length, Edition, Language, ISBN-13
Publication date : Apr 19, 2010
Length: 268 pages
Edition : 1st
Language : English
ISBN-13 : 9781847198822
Vendor :
WordPress Foundation
Languages :
Concepts :
Tools :

What do you get with Print?

Product feature icon Instant access to your digital copy whilst your Print order is Shipped
Product feature icon Paperback book shipped to your preferred address
Product feature icon Redeem a companion digital copy on all Print orders
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
OR
Modal Close icon
Payment Processing...
tick Completed

Shipping Address

Billing Address

Shipping Methods
Estimated delivery fee Deliver to United States

Economy delivery 10 - 13 business days

Free $6.95

Premium delivery 6 - 9 business days

$21.95
(Includes tracking information)

Product Details

Publication date : Apr 19, 2010
Length: 268 pages
Edition : 1st
Language : English
ISBN-13 : 9781847198822
Vendor :
WordPress Foundation
Languages :
Concepts :
Tools :

Packt Subscriptions

See our plans and pricing
Modal Close icon
$19.99 billed monthly
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Simple pricing, no contract
$199.99 billed annually
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just $5 each
Feature tick icon Exclusive print discounts
$279.99 billed in 18 months
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just $5 each
Feature tick icon Exclusive print discounts

Frequently bought together


Stars icon
Total $ 131.97
WordPress and Flash 10x Cookbook
$43.99
WordPress 3 Ultimate Security
$54.99
WordPress for Education
$32.99
Total $ 131.97 Stars icon

Table of Contents

8 Chapters
Leveraging Flash in WordPress Chevron down icon Chevron up icon
WordPress: Configuration and Core Plugins Chevron down icon Chevron up icon
Image Galleries and Slideshows—Using Plugins and Flash Chevron down icon Chevron up icon
Video Blogging + Flash Video Encoding, Skinning, and Components Chevron down icon Chevron up icon
Working with Audio—Using Plugins and Flash Chevron down icon Chevron up icon
Flash Applications Chevron down icon Chevron up icon
Flash Themes Chevron down icon Chevron up icon
Flash Animations Chevron down icon Chevron up icon

Customer reviews

Rating distribution
Full star icon Full star icon Full star icon Full star icon Full star icon 5
(1 Ratings)
5 star 100%
4 star 0%
3 star 0%
2 star 0%
1 star 0%
House of R&R Jun 30, 2010
Full star icon Full star icon Full star icon Full star icon Full star icon 5
I am a designer and write some Actionscript but would not consider myself a programmer. Most of my work is in content publishing, and I was very pleased with the non-technical descriptions of very complex technical processes. The section on the new keyframing in Flash 10 cleared up the topic for me, and I have been able to apply some of the settings I read about. If you are a content publisher who uses WordPress and you really like the look of flash content, I would definitely reccomend this book.
Amazon Verified review Amazon
Get free access to Packt library with over 7500+ books and video courses for 7 days!
Start Free Trial

FAQs

What is the digital copy I get with my Print order? Chevron down icon Chevron up icon

When you buy any Print edition of our Books, you can redeem (for free) the eBook edition of the Print Book you’ve purchased. This gives you instant access to your book when you make an order via PDF, EPUB or our online Reader experience.

What is the delivery time and cost of print book? Chevron down icon Chevron up icon

Shipping Details

USA:

'

Economy: Delivery to most addresses in the US within 10-15 business days

Premium: Trackable Delivery to most addresses in the US within 3-8 business days

UK:

Economy: Delivery to most addresses in the U.K. within 7-9 business days.
Shipments are not trackable

Premium: Trackable delivery to most addresses in the U.K. within 3-4 business days!
Add one extra business day for deliveries to Northern Ireland and Scottish Highlands and islands

EU:

Premium: Trackable delivery to most EU destinations within 4-9 business days.

Australia:

Economy: Can deliver to P. O. Boxes and private residences.
Trackable service with delivery to addresses in Australia only.
Delivery time ranges from 7-9 business days for VIC and 8-10 business days for Interstate metro
Delivery time is up to 15 business days for remote areas of WA, NT & QLD.

Premium: Delivery to addresses in Australia only
Trackable delivery to most P. O. Boxes and private residences in Australia within 4-5 days based on the distance to a destination following dispatch.

India:

Premium: Delivery to most Indian addresses within 5-6 business days

Rest of the World:

Premium: Countries in the American continent: Trackable delivery to most countries within 4-7 business days

Asia:

Premium: Delivery to most Asian addresses within 5-9 business days

Disclaimer:
All orders received before 5 PM U.K time would start printing from the next business day. So the estimated delivery times start from the next day as well. Orders received after 5 PM U.K time (in our internal systems) on a business day or anytime on the weekend will begin printing the second to next business day. For example, an order placed at 11 AM today will begin printing tomorrow, whereas an order placed at 9 PM tonight will begin printing the day after tomorrow.


Unfortunately, due to several restrictions, we are unable to ship to the following countries:

  1. Afghanistan
  2. American Samoa
  3. Belarus
  4. Brunei Darussalam
  5. Central African Republic
  6. The Democratic Republic of Congo
  7. Eritrea
  8. Guinea-bissau
  9. Iran
  10. Lebanon
  11. Libiya Arab Jamahriya
  12. Somalia
  13. Sudan
  14. Russian Federation
  15. Syrian Arab Republic
  16. Ukraine
  17. Venezuela
What is custom duty/charge? Chevron down icon Chevron up icon

Customs duty are charges levied on goods when they cross international borders. It is a tax that is imposed on imported goods. These duties are charged by special authorities and bodies created by local governments and are meant to protect local industries, economies, and businesses.

Do I have to pay customs charges for the print book order? Chevron down icon Chevron up icon

The orders shipped to the countries that are listed under EU27 will not bear custom charges. They are paid by Packt as part of the order.

List of EU27 countries: www.gov.uk/eu-eea:

A custom duty or localized taxes may be applicable on the shipment and would be charged by the recipient country outside of the EU27 which should be paid by the customer and these duties are not included in the shipping charges been charged on the order.

How do I know my custom duty charges? Chevron down icon Chevron up icon

The amount of duty payable varies greatly depending on the imported goods, the country of origin and several other factors like the total invoice amount or dimensions like weight, and other such criteria applicable in your country.

For example:

  • If you live in Mexico, and the declared value of your ordered items is over $ 50, for you to receive a package, you will have to pay additional import tax of 19% which will be $ 9.50 to the courier service.
  • Whereas if you live in Turkey, and the declared value of your ordered items is over € 22, for you to receive a package, you will have to pay additional import tax of 18% which will be € 3.96 to the courier service.
How can I cancel my order? Chevron down icon Chevron up icon

Cancellation Policy for Published Printed Books:

You can cancel any order within 1 hour of placing the order. Simply contact customercare@packt.com with your order details or payment transaction id. If your order has already started the shipment process, we will do our best to stop it. However, if it is already on the way to you then when you receive it, you can contact us at customercare@packt.com using the returns and refund process.

Please understand that Packt Publishing cannot provide refunds or cancel any order except for the cases described in our Return Policy (i.e. Packt Publishing agrees to replace your printed book because it arrives damaged or material defect in book), Packt Publishing will not accept returns.

What is your returns and refunds policy? Chevron down icon Chevron up icon

Return Policy:

We want you to be happy with your purchase from Packtpub.com. We will not hassle you with returning print books to us. If the print book you receive from us is incorrect, damaged, doesn't work or is unacceptably late, please contact Customer Relations Team on customercare@packt.com with the order number and issue details as explained below:

  1. If you ordered (eBook, Video or Print Book) incorrectly or accidentally, please contact Customer Relations Team on customercare@packt.com within one hour of placing the order and we will replace/refund you the item cost.
  2. Sadly, if your eBook or Video file is faulty or a fault occurs during the eBook or Video being made available to you, i.e. during download then you should contact Customer Relations Team within 14 days of purchase on customercare@packt.com who will be able to resolve this issue for you.
  3. You will have a choice of replacement or refund of the problem items.(damaged, defective or incorrect)
  4. Once Customer Care Team confirms that you will be refunded, you should receive the refund within 10 to 12 working days.
  5. If you are only requesting a refund of one book from a multiple order, then we will refund you the appropriate single item.
  6. Where the items were shipped under a free shipping offer, there will be no shipping costs to refund.

On the off chance your printed book arrives damaged, with book material defect, contact our Customer Relation Team on customercare@packt.com within 14 days of receipt of the book with appropriate evidence of damage and we will work with you to secure a replacement copy, if necessary. Please note that each printed book you order from us is individually made by Packt's professional book-printing partner which is on a print-on-demand basis.

What tax is charged? Chevron down icon Chevron up icon

Currently, no tax is charged on the purchase of any print book (subject to change based on the laws and regulations). A localized VAT fee is charged only to our European and UK customers on eBooks, Video and subscriptions that they buy. GST is charged to Indian customers for eBooks and video purchases.

What payment methods can I use? Chevron down icon Chevron up icon

You can pay with the following card types:

  1. Visa Debit
  2. Visa Credit
  3. MasterCard
  4. PayPal
What is the delivery time and cost of print books? Chevron down icon Chevron up icon

Shipping Details

USA:

'

Economy: Delivery to most addresses in the US within 10-15 business days

Premium: Trackable Delivery to most addresses in the US within 3-8 business days

UK:

Economy: Delivery to most addresses in the U.K. within 7-9 business days.
Shipments are not trackable

Premium: Trackable delivery to most addresses in the U.K. within 3-4 business days!
Add one extra business day for deliveries to Northern Ireland and Scottish Highlands and islands

EU:

Premium: Trackable delivery to most EU destinations within 4-9 business days.

Australia:

Economy: Can deliver to P. O. Boxes and private residences.
Trackable service with delivery to addresses in Australia only.
Delivery time ranges from 7-9 business days for VIC and 8-10 business days for Interstate metro
Delivery time is up to 15 business days for remote areas of WA, NT & QLD.

Premium: Delivery to addresses in Australia only
Trackable delivery to most P. O. Boxes and private residences in Australia within 4-5 days based on the distance to a destination following dispatch.

India:

Premium: Delivery to most Indian addresses within 5-6 business days

Rest of the World:

Premium: Countries in the American continent: Trackable delivery to most countries within 4-7 business days

Asia:

Premium: Delivery to most Asian addresses within 5-9 business days

Disclaimer:
All orders received before 5 PM U.K time would start printing from the next business day. So the estimated delivery times start from the next day as well. Orders received after 5 PM U.K time (in our internal systems) on a business day or anytime on the weekend will begin printing the second to next business day. For example, an order placed at 11 AM today will begin printing tomorrow, whereas an order placed at 9 PM tonight will begin printing the day after tomorrow.


Unfortunately, due to several restrictions, we are unable to ship to the following countries:

  1. Afghanistan
  2. American Samoa
  3. Belarus
  4. Brunei Darussalam
  5. Central African Republic
  6. The Democratic Republic of Congo
  7. Eritrea
  8. Guinea-bissau
  9. Iran
  10. Lebanon
  11. Libiya Arab Jamahriya
  12. Somalia
  13. Sudan
  14. Russian Federation
  15. Syrian Arab Republic
  16. Ukraine
  17. Venezuela