Spritely: an example in 4 steps

Submitted by Nicola Rainiero on 2012-06-21 (last updated on 2013-06-12)

After installing spritely in your Drupal site or in another web space, it's time to action and to use its features to create and to insert animations in background or directly in your Internet page. I explain how to produce an animation for contents in Drupal, with a bad final surprise.

Firstly it is necessary to check that spritely is correctly loaded in the Drupal 7.x page (same thing for a generic PHP page). To do this, open your site in a browser and pointing in an area without FLASH or images, click the right button mouse, then select "Show source" in the drop down box (each browser has a typical command, but always source code is the target!).

Reading the code it must be found this:

< script type="text/javascript" src="http://rainnic.altervista.org/misc/jquery.js?v=1.4.4"></script>
[...]
< script type="text/javascript" src="http://rainnic.altervista.org/sites/all/themes/rainnic/js/jquery.spritely-0.6.js?m5ii5v">
</script >

jQuery is always loaded, but if spritely is missing or the library put in a wrong directory, it will be necessary to reinstall the module or like my site check and edit "sub_theme_active.info" file, as explained in the previous article.

Make attention:
  • In order to insert javascript, css and PHP code in Drupal, it must be selected PHP code in Text format tab (in deafult installation this feature is deactivated, then it is sufficient point the browser in "http://my_drupal_site/admin/people/permissions" and check the box called "Use the PHP code text format")
  • Avoid using the same labels adopted in default css style, otherwise they could animate before!

The 4 steps

  1. creation of PNG image with the needed frames;
  2. CSS code to correct positioning and loading the image in the page;
  3. Javascript code to produce the animation effect;
  4. HTML code to insert it in the page.

PNG image

PNG format affords the transparency and above all it is vectorial, so if the image is shaped from beginning in geometric forms it is possible to scale it without loss quality and increasing in size. In this article I use an old animation that I wanted to put in the header of my site, then I dropped the plan, but I have never wasted anything and I recycled it for this guide. Here it is:

image adapted for spritely

I have showed too the single dimensions of frames, because they have been an exact multiple of the final image. In this case I have 4 frames of 100x125 pixels, thus the final image will be 400x125 px.

CSS code

The size is necessary for writing the style sheets. Because in the first selector, called stage_rainnic I will put the positioning and size. I will use the relative positioning (position: relative), therefore the animation will appear in the exact point where I put the HTML code. Otherwise using the absolute positioning, it is necessary to add exact position and z-index attribute, in order to fix the deeply in the page (above or down other objects).

<style type="text/css">
        #stage_rainnic {
            top: 0px;
            left: 0px;
        }
        .stage_rainnic {
            position: relative;
            top: 0px;
            left: 0px;
            width: 400px;
            min-width: 100px;
            height: 200px;
            overflow: hidden;
        }
        #rainnic {
            position: relative;
            top: 0px;
            left: 0px;                     
            
width: 100px;
height: 125px;

            background: transparent url(http://rainnic.altervista.org/sites/default/files/images/logo_spritely.png) 0 0 no-repeat;
        }
</style>

Make attention to the url of course!

Javascript code

Generally a javascript script goes in the head tag and is sufficient to insert:

<script type="text/javascript">

Then jQuery function:

        (function($) {
            $(document).ready(function() {

After spritely code:

                $('#rainnic').delay(0).sprite({fps: 4, no_of_frames: 4}).spRandom({top: 10, left: 20, right: 10, bottom: 20, speed: 1000, pause: 0});

jQuery and spritely have many other effects or their combinations, I suggest to read spritely documentation. After all it closes with:

                         });
        })(jQuery);
</script>

But in Drupal a jQuery effect can be added to a content with a DOM element only in this way:

<?php
drupal_add_js (
    'jQuery effect suitably written' ,'inline');
?>

I have been discovered it recently when I saw that my code was not working properly (reading HOWTO: Add a jQuery effect).

HTML code

Here it is:

<div id="stage_rainnic" class="stage_rainnic">
     <div id="rainnic" class="stage_rainnic"></div>
</div>

I added another div to center it in the content.

Final result

<!-- ######## ANIMATION WITH SPRITELY ######## -->
<style type="text/css">
        #stage_rainnic {
            top: 0px;
            left: 0px;
        }
        .stage_rainnic {
            position: relative;
            top: 0px;
            left: 0px;
            width: 400px;
            min-width: 100px;
            height: 200px;
            overflow: hidden;
        }
        #rainnic {
            position: relative;
            top: 0px;
            left: 0px;                     
            
width: 100px;
height: 125px;

            background: transparent url(http://rainnic.altervista.org/sites/default/files/images/logo_spritely.png) 0 0 no-repeat;
        }
</style>

<script type="text/javascript">
        (function($) {
            $(document).ready(function() {
                $('#rainnic').delay(0).sprite({fps: 4, no_of_frames: 4}).spRandom({top: 10, left: 20, right: 10, bottom: 20, speed: 1000, pause: 0}); 
                         });
        })(jQuery);
</script>

<div align="center">
  <div id="stage_rainnic" class="stage_rainnic">
       <div id="rainnic" class="stage_rainnic"></div>
  </div>
</div>
<!-- ######## ANIMATION WITH SPRITELY ######## -->

As you can see the effect works not very well: the animation jumps 2 frames and after the comment section it is added again the final text of the article... I have found the cause, but I should study the code to fix it. In a conclusive article about spritely, I will explain the error above and another insert mode using the same animation.




Related Content:

Nicola Rainiero

A civil geotechnical engineer with the ambition to facilitate own work with free software for a knowledge and collective sharing. Also, I deal with green energy and in particular shallow geothermal energy. I have always been involved in web design and 3D modelling.

Comments

Ruby Wyng (not verified)

Fri, 07/27/2012 - 05:59

Fantastic Article! Good to find someone who really knows what they are on about and can also produce readable blogging for us visitors. without doubt looking forward to your next article.

Add new comment

The content of this field is kept private and will not be shown publicly.

Plain text

  • No HTML tags allowed.
  • Web page addresses and email addresses turn into links automatically.
  • Lines and paragraphs break automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.