Category Archives: AJAX y Jquery en Web2Py

Flashembed demo 4 / 6 : Placing HTML on top of a Flash object

Posted on by
Reply

Placing HTML on top of a Flash object

It is possible to place HTML elements in front of the Flash movies to
prevent the Flash from showing through. This is achieved by setting the wmode property to opaque. Then the Flash object can accept placement and positioning like any other element including the the z-index CSS property. Here is an example:

This layer is on top of the Flash object

This feature does not work on Linux and in early versions of Opera, but browser support is still quite good.

JavaScript setup

This is our JavaScript setup: 

<code class="javascript DlHighlight"><span class="comment comment-line"><span class="before">//</span> wmode parameter does the trick</span>
<span class="operand">flashembed</span><span class="paren">(</span><span class="string"><span class="before">"</span>flash<span class="after">"</span></span><span class="comma">,</span> <span class="paren">{</span><span class="operand hashkey">src</span><span class="hasharrow">:</span> <span class="string"><span class="before">"</span>/swf/flash10.swf<span class="after">"</span></span><span class="comma">,</span> <span class="operand hashkey">wmode</span><span class="hasharrow">:</span> <span class="string"><span class="before">'</span>opaque<span class="after">'</span></span><span class="paren">}</span><span class="paren">)</span>;</code>

You can find a standalone version of this example here.

0

0
 

Flashembed demo 3 / 6 : Loading Flash on mouse click

Posted on by
Reply

Loading Flash on mouse click

Many times it’s good practice to defer loading of the Flash object
until the user clicks on the Flash container. This makes the page load
faster, especially if the Flash component is large. Here we have an
example:

The setup

This is our HTML/JavaScript setup. You can find a standalone version here which includes the CSS settings for the container. 

<code class="html DlHighlight"><span class="comment"><span class="before"><!--</span> our flash container with some initial HTML inside it <span class="after">--></span></span>
<span class="paren xml-tagangle"><</span><span class="keyword xml-tag xml-tag-open">div</span> <span class="builtin xml-attribute">id</span><span class="undefined"></span><span class="operator">=</span><span class="string"><span class="before">"</span>flash<span class="after">"</span></span><span class="paren xml-tagangle">></span>
	<span class="paren xml-tagangle"><</span><span class="keyword xml-tag xml-tag-open">h2</span><span class="paren xml-tagangle">></span>Click here to play movie<span class="paren xml-tagangle"></</span><span class="keyword xml-tag xml-tag-close">h2</span><span class="paren xml-tagangle">></span>
<span class="paren xml-tagangle"></</span><span class="keyword xml-tag xml-tag-close">div</span><span class="paren xml-tagangle">></span>

<span class="paren xml-tagangle"><</span><span class="keyword xml-tag xml-tag-open">script</span><span class="paren xml-tagangle">></span><span class="xml-inline-script">
<span class="comment comment-line"><span class="before">//</span> get flash container and assign click handler for it</span>
<span class="operand builtin">document</span>.<span class="operand">getElementById</span><span class="paren">(</span><span class="string"><span class="before">"</span>flash<span class="after">"</span></span><span class="paren">)</span>.<span class="operand defun">onclick</span> <span class="operator">=</span> <span class="operand keyword">function</span><span class="paren">(</span><span class="paren">)</span> <span class="paren">{</span>

	<span class="comment comment-line"><span class="before">//</span> when being clicked -> load flash inside "this".</span>
	<span class="operand">flashembed</span><span class="paren">(</span><span class="operand keyword">this</span><span class="comma">,</span> <span class="string"><span class="before">"</span>/swf/flash10.swf<span class="after">"</span></span><span class="paren">)</span>;
<span class="paren">}</span>
</span><span class="paren xml-tagangle"></</span><span class="keyword xml-tag xml-tag-close">script</span><span class="paren xml-tagangle">></span></code>

Same with jQuery

The above example uses traditional event binding using the onClick
event listener. Some users don’t like this because it allows you to
bind only one event listener for the element. For this reason, we have a
jQuery example of this same scenario:

We have set a background image for the container and the H2 title has been replaced with a play button. 

<code class="javascript DlHighlight"><span class="comment comment-line"><span class="before">//</span> use the jQuery alternative for flashembed.domReady</span><br />$<span class="paren">(</span><span class="operand keyword">function</span><span class="paren">(</span><span class="paren">)</span> <span class="paren">{</span><br /><br />	<span class="comment comment-line"><span class="before">//</span> bind an onClick event for this second Flash container</span><br />	$<span class="paren">(</span><span class="string"><span class="before">"</span>#flash2<span class="after">"</span></span><span class="paren">)</span>.<span class="operand">click</span><span class="paren">(</span><span class="operand keyword">function</span><span class="paren">(</span><span class="paren">)</span> <span class="paren">{</span><br /><br />		<span class="comment comment-line"><span class="before">//</span> same as in previous example</span><br />		$<span class="paren">(</span><span class="operand keyword">this</span><span class="paren">)</span>.<span class="operand">flashembed</span><span class="paren">(</span><span class="string"><span class="before">"</span>/swf/flash10.swf<span class="after">"</span></span><span class="paren">)</span>;<br />	<span class="paren">}</span><span class="paren">)</span>;<br /><span class="paren">}</span><span class="paren">)</span>;</code>

You can find a standalone version of this jQuery example here.

0

0
 

Flashembed demo 1 / 6 : Basics of Flash embedding

Posted on by
Reply

Basics of Flash embedding





1. Minimal Flash embedding setup

Here you have a simple Flash object. Below the object you can see how it is placed on the page:

HTML setup

First you need to include the Flashembed script on your page: 

<code class="html DlHighlight"><span class="paren xml-tagangle"><</span><span class="keyword xml-tag xml-tag-open">script</span> <span class="builtin xml-attribute">type</span><span class="undefined"></span><span class="operator">=</span><span class="string"><span class="before">"</span>text/javascript<span class="after">"</span></span> <span class="builtin xml-attribute">src</span><span class="undefined"></span><span class="operator">=</span><span class="string"><span class="before">"</span>toolbox.flashembed.min.js<span class="after">"</span></span><span class="paren xml-tagangle">></span><span class="paren xml-tagangle"></</span><span class="keyword xml-tag xml-tag-close">script</span><span class="paren xml-tagangle">></span></code>

It is recommended that you use the minified (.min) version to reduce the download size. You can get the script here. Second, you have to have a HTML container for the object; we are using a DIV element in our example. We use an id attribute to reference this container later in the embedding. 

<code class="html DlHighlight"><span class="paren xml-tagangle"><</span><span class="keyword xml-tag xml-tag-open">div</span> <span class="builtin xml-attribute">id</span><span class="undefined"></span><span class="operator">=</span><span class="string"><span class="before">"</span>clock<span class="after">"</span></span><span class="paren xml-tagangle">></span><span class="paren xml-tagangle"></</span><span class="keyword xml-tag xml-tag-close">div</span><span class="paren xml-tagangle">></span></code>

JavaScript setup

Next, we place a Flash object inside the container. This happens with this simple flashembed call: 

<code class="javascript DlHighlight"><span class="operand">flashembed</span><span class="paren">(</span><span class="string"><span class="before">"</span>clock<span class="after">"</span></span><span class="comma">,</span> <span class="string"><span class="before">"</span>/swf/clock.swf<span class="after">"</span></span><span class="paren">)</span>;</code>

The call must be placed after the DIV element or you must place it inside the $(document).ready() block with jQuery. That is really all you need.

CSS code

By default, the Flash object is placed inside the player container so that its width and height properties are set to 100%. This means that you can control the dimensions of the Flash object by setting the dimensions of the container. In this minimal setup we have following CSS settings: 

<code class="css DlHighlight"><span class="css-id"><span class="before">#</span>clock</span> <span class="paren css-block-open">{</span><br />	<span class="builtin css-declaration-kw">width<span class="after">:</span></span> <span class="css-length">250<span class="after">px</span></span>;<br />	<span class="builtin css-declaration-kw">height<span class="after">:</span></span> <span class="css-length">250<span class="after">px</span></span>;<br /><span class="paren css-block-close">}</span></code>

Show this demo as a standalone page.

2. Configuring Flash objects

Here we have another Flash object and this time we pass parameters (or configuration) to it. Here is our flashembed call: 

<code class="javascript DlHighlight"><span class="operand">flashembed</span><span class="paren">(</span><span class="string"><span class="before">"</span>info<span class="after">"</span></span><span class="comma">,</span> <span class="string"><span class="before">"</span>/swf/flashvars.swf<span class="after">"</span></span><span class="comma">,</span> <span class="paren">{</span><br /><br />	<span class="comment comment-line"><span class="before">//</span> these properties are given for the Flash object</span><br />	<span class="operand hashkey">name1</span><span class="hasharrow">:</span> <span class="string"><span class="before">'</span>configuration value #1<span class="after">'</span></span><span class="comma">,</span><br />	<span class="operand hashkey">name2</span><span class="hasharrow">:</span> <span class="string"><span class="before">'</span>configuration value #2<span class="after">'</span></span><span class="comma">,</span><br />	<span class="operand hashkey">name3</span><span class="hasharrow">:</span> <span class="string"><span class="before">'</span>Hello World! I am changing<span class="after">'</span></span><span class="error">,<br />}</span><span class="paren">)</span>;</code>

Here is the result. The passed parameters are seen:

Show this demo as a standalone page

3. Configuring Flash with JSON

Flashembed has the unique feature of configuring your Flash objects with JSON. This gives you the ability to supply complex configurations directly upon embedding. JSON is a JavaScript-based syntax and is much more flexible and simpler than XML which has historically been used in Flash configuration.

Flowplayer is one example of a Flash application that accepts JSON-based configurations. Here is our flashembed call: 

<code class="javascript DlHighlight"><span class="operand">flashembed</span><span class="paren">(</span><span class="string"><span class="before">"</span>player<span class="after">"</span></span><span class="comma">,</span> <span class="string"><span class="before">"</span>/swf/flowplayer-3.2.7.swf<span class="after">"</span></span><span class="comma">,</span> <span class="paren">{</span><br /><br />	<span class="comment comment-line"><span class="before">//</span> "config" parameter is a complex JSON object, not just a simple value</span><br />	<span class="operand hashkey">config</span><span class="hasharrow">:</span> <span class="paren">{</span><br />		<span class="operand hashkey">clip</span><span class="hasharrow">:</span>  <span class="paren">{</span><br />			<span class="operand hashkey">autoPlay</span><span class="hasharrow">:</span> <span class="operand keyword">false</span><span class="comma">,</span><br />			<span class="operand hashkey">autoBuffering</span><span class="hasharrow">:</span> <span class="operand keyword">true</span><span class="comma">,</span><br />			<span class="operand hashkey">url</span><span class="hasharrow">:</span> <span class="string"><span class="before">'</span>http://e1h13.simplecdn.net/flowplayer/flowplayer.flv<span class="after">'</span></span><br />		<span class="paren">}</span><br />	<span class="paren">}</span><br /><span class="paren">}</span><span class="paren">)</span>;</code>

And here is the result:

If you are developing a Flash object and want to configure it with JSON, you can find JSON parsers for Flash from as3corelib.

Show the above demo as a standalone page.

0

0