Home » Odeon Blogs » Liviu, Agile Bear »

iPad friendly content with swfobject.js and Macromedia Flash

12 Aug 0

iPad friendly content with swfobject.js and Macromedia Flash

Everybody likes to have animated section on his website and Macromedia Flash offers some of the best sollution for this. One of the most common tools is the image galleria.

How would a Macromedia Flash galleria look on an iPad? It will not.

Let's take this simple example, where the galleria details are sent from the view (using a model) and calling the swfobject.createSWF() api function:

{% extends 'site_base.html' %}

{% block extra_head %}
    <script type="text/javascript" src="{{ MEDIA_URL }}js/swfobject/swfobject.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            var attrs = { data: '{{ galleria.swf_file.url }}', width: '{{ galleria.width }}', height: '{{ galleria.height }}', 'allowScriptAccess': 'always' };
            var params = { wmode: '{{ galleria.wmode }}', menu: '{{ galleria.menu }}', base: '{{ galleria.base }}' };
            var id_slug = '{{ galleria.title_slug }}';
            swfobject.createSWF(attrs, params, id_slug);
        });
    </script>
{% endblock %}

{% block content %}
    <div class="flash_galleria_container">
        <div id='{{ galleria.title_slug }}'>Although this exists you will not see it.</div>
    </div>
{% endblock %}

This way we can create our Flash galleria that is displayed on Flash enabled browsers/devices. Unfortunately this approach does not allow us to specify a default content for non Flash browsers like iPad's or Iphone's one. Checking if a browser supports it means adding an extra JavaScript unnecessary layer.

The solution!

Luckily we can add some default content for non Flash enabled browsers and swfobject allows us to this very easily.

The problem with this example is that is not using the right api call for what we need, swfobject.embedSWF() is the one that we must use because it shows the container's content if Flash is not enabled.

{% extends 'site_base.html' %}        

{% block extra_head %}
    <script type="text/javascript" src="{{ MEDIA_URL }}js/swfobject/swfobject.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            var id_slug = '{{ galleria.title_slug }}';
            var flashObj = swfobject.embedSWF(attrs, params, id_slug );
            swfobject.embedSWF("{{ galleria.swf_file.url }}", "{{ galleria.title_slug }}", "{{ galleria.width }}", "{{ galleria.height }}", "9.0.0", "expressInstall.swf", {}, params, attrs);
        });
    </script>
{% endblock %}

{% block content %}
    <div class="flash_galleria_container">
        <div id='{{ galleria.title_slug }}'>{{ galleria.html_code|safe|default:"This code will be displayed if Flash is not supported." }}</div>
    </div>
{% endblock %}

The result for Flash enabled browsers is the same, but now, you can also customize what the other browsers/devices will see, including iPad and iPhone.

Category: Javascript

Tagged as: flash ipad iphone javascript swfobject

iPad friendly content with swfobject.js and Macromedia Flash