Jump to content
Search Community

Dynamic Sprite sheets with Sizmek

ohem test

By ohem
in Banner Animation

Moderator Tag
 Share
Go to solution Solved by OSUblake,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

ohem test

ohem

Posted
Posted
Does anybody here have experience with this?  

 

I had an idea about using dynamic sprite sheets (so different animated icons could be swapped out dynamically), and I was referencing this great example of using Greensock to animate spritesheets:

See the Pen MYdwRP by MAW (@MAW) on CodePen


 

Everything works great if the sprite sheet is in the body of the html, but when I tried to make the it dynamic, the animation doesn’t work. 

 

I reached out to my contact at Sizmek who said “The dynamic sprite sheet can be used but it looks like it must be brought in and “started” each time for it to work the way it is currently coded using Greensock.  Can you code it so it brings in/reloads the Greensock components each time?”

 

So I was wondering if anybody had suggestions as to the best way to achieve this?

 

Zip is attached with a rough example.  I’m not actually using any of these assets in a real project; I just wanted to test out the Sizmek dynamic functionality with a sprite sheet to see if it would work.

Sizmek_dynamicTest.zip

  • Like 1
Link to comment
Share on other sites
ohem test

ohem

Posted
  • Author
Posted

My Sizmek contact got back to me with a "quick and dirty" working example (attached here) with a timer that delays the animation.  My only concern is that this solution could cause problems for people with slower internet connections.  

 

Any suggestions from GSAP experts on refining things would be appreciated as always!  

 

(My background is in design/animation, not code, so I'm still learning.)   :)

Sizmek_dynamicTest_sz.zip

Link to comment
Share on other sites
ohem test

ohem

Posted
  • Author
Posted

Thank you Blake, but I need something that works with Sizmek's API for dynamic banners, so I don't think I can quite use that code.

 

The image has to be appended the way it was in my example files (zipped up in my posts above), so that it can be dynamically updated through the Sizmek website/platform.

 

I do have a working example of the animation zipped up above, but I think the timeout may not be the cleanest way to handle things, so I would love to find a way to update your loader to work with my example.  

 

Any further suggestions are much appreciated!  (I would post my files on Codepen but the Sizmek stuff doesn't seem to work on there.)

 

Thanks again.

Link to comment
Share on other sites
Dipscom test

Dipscom

Posted
Posted

Do you have any particular reason to be loading jQuery at all? 

 

I, personally, only use vanilla JavaScript for this sort of thing. And would imagine if you simply load the image up and wait for the onload event to fired, you will achieve what you're after.

 

If JQuery has a way to detect (I imagine it does) the loading of the images, you just need to listen for it before calling the animation function. Otherwise, the code bellow is in addition to what you have set up. 

 

Mind you, I would move all of this JS to the end of the page, before the </body> and after the other two <script> tags. I have not tested it as I have no personal access to Sizmek's platform but it really should work. You only need Sizmek's API to grab the reference of the file. The loading of it, you can do yourself.

// Create an object to handle the loading of the images
var ImageLoader = function(dbug) {
  "use strict";
  if(dbug) console.log("[IMAGE_LOADER] Init");
  // Total count of images to load
  var count = 0;


  this.loadImage = function(parent, names) {
    // Grab the html tag based on the string provided
    var container = document.getElementById(parent);
    // Loop thru the array provided
    for( var i = 0, ttl = names.length; i < ttl; i++ ) {
      // And append the image created into the html tag given
      container.appendChild(createImage(names[i], extension));
    }
  };


  function createImage(name, extension) {
    if(dbug) console.log("[IMAGE_LOADER] Image " + name);
    // Add one to the count of images loading
    count++;
    // Create the element tag
    var image = document.createElement("img");
    image.src = name + extension;
    image.id = name;
    image.onload = countReady;
    return image;
  }


  function countReady() {
    // Once loaded
    // Subtract one from the count of images loading
    count--;
    // When the count reaches zero
    if( count === 0 ) {
      // All images have loaded
      // Create the event to dispatch the news
      var event = document.createEvent('Event');
      event.initEvent("IMAGES_LOADED", true, false);
      window.dispatchEvent(event);
    }
  }
};
function handleSVData(data) {  supportImg = adkit.getSVData("supportKey");
            venue = adkit.getSVData("venueKey");
            dayOf = adkit.getSVData("dayOfKey");
            ctaDay = adkit.getSVData("ctaDayKey");
            logoImg = adkit.getSVData("logoKey");


            placeScript = adkit.getSVData("placeScriptKey");


  // Instatiate the image loader
  var ldr = new ImageLoader(true); // The true is just for the sake of you seeing the traces, delete it when not needed


  // Listen for the loading completion
  window.addEventListener("IMAGES_LOADED", imagesLoaded);


  // Load your images
  ldr.loadImage("ad", [supportImg, logoKey]); // Give your main <div> an id name of "ad" so it can be found by the getElementById
}


function imagesLoaded() {
  console.log("All images loaded");
  playAnimation();
}
  • Like 2
Link to comment
Share on other sites
ohem test

ohem

Posted
  • Author
Posted

 

Do you have any particular reason to be loading jQuery at all? 

 

I, personally, only use vanilla JavaScript for this sort of thing. And would imagine if you simply load the image up and wait for the onload event to fired, you will achieve what you're after.

 

If JQuery has a way to detect (I imagine it does) the loading of the images, you just need to listen for it before calling the animation function. Otherwise, the code bellow is in addition to what you have set up. 

 

Mind you, I would move all of this JS to the end of the page, before the </body> and after the other two <script> tags. I have not tested it as I have no personal access to Sizmek's platform but it really should work. You only need Sizmek's API to grab the reference of the file. The loading of it, you can do yourself.

// Create an object to handle the loading of the images
var ImageLoader = function(dbug) {
  "use strict";
  if(dbug) console.log("[IMAGE_LOADER] Init");
  // Total count of images to load
  var count = 0;


  this.loadImage = function(parent, names) {
    // Grab the html tag based on the string provided
    var container = document.getElementById(parent);
    // Loop thru the array provided
    for( var i = 0, ttl = names.length; i < ttl; i++ ) {
      // And append the image created into the html tag given
      container.appendChild(createImage(names[i], extension));
    }
  };


  function createImage(name, extension) {
    if(dbug) console.log("[IMAGE_LOADER] Image " + name);
    // Add one to the count of images loading
    count++;
    // Create the element tag
    var image = document.createElement("img");
    image.src = name + extension;
    image.id = name;
    image.onload = countReady;
    return image;
  }


  function countReady() {
    // Once loaded
    // Subtract one from the count of images loading
    count--;
    // When the count reaches zero
    if( count === 0 ) {
      // All images have loaded
      // Create the event to dispatch the news
      var event = document.createEvent('Event');
      event.initEvent("IMAGES_LOADED", true, false);
      window.dispatchEvent(event);
    }
  }
};
function handleSVData(data) {  supportImg = adkit.getSVData("supportKey");
            venue = adkit.getSVData("venueKey");
            dayOf = adkit.getSVData("dayOfKey");
            ctaDay = adkit.getSVData("ctaDayKey");
            logoImg = adkit.getSVData("logoKey");


            placeScript = adkit.getSVData("placeScriptKey");


  // Instatiate the image loader
  var ldr = new ImageLoader(true); // The true is just for the sake of you seeing the traces, delete it when not needed


  // Listen for the loading completion
  window.addEventListener("IMAGES_LOADED", imagesLoaded);


  // Load your images
  ldr.loadImage("ad", [supportImg, logoKey]); // Give your main <div> an id name of "ad" so it can be found by the getElementById
}


function imagesLoaded() {
  console.log("All images loaded");
  playAnimation();
}

 

JQuery was there by default in all of the Sizmek dynamic templates so I just assumed I needed it.  

 

If I was doing it your way, how would I append the other dynamic text without it?

 

Sorry if that's an obvious question; my background is in design/animation & I've only been working with JavaScript a short time.  I really appreciate the suggestions.

Link to comment
Share on other sites
Jonathan test

Jonathan

Posted
Posted

When waiting for images.. it is usually best  to make sure the DOM is ready along with the window. I always add my window load event inside my DOM loaded event so i guarantee that my code will run when the DOM is ready and all external assets have been loaded.

 

Some browsers have issues with the window event firing before the DOM is ready. Or the DOM being ready before the window is loaded. That is why a lot of people use the jQuery load event .. $(window).on("load") .. due to it resolving cross browser issues with window.load event being fired inconsistently. And the jQuery load event fixes this inconsistency. But you can get around that mumbo jumbo with the code snippet below.

 

Because even if the window is loaded before the DOM is ready it will fire immediately after the DOM is ready with the below code. Or if the DOM is ready before the window, the window will fire as expected due to the server waiting, long loading of assets, and server connectivity issues to the client.

 

So what i do is make sure the DOM is ready and the window is loaded before doing anything. I use the below:

 

The native vanilla JavaScript way:

// wait until DOM is ready
document.addEventListener("DOMContentLoaded", function(event) {

  // wait until window, stylesheets, images, links, and other media assets are loaded
  window.onload = function() {

      // add code here

  };

});

Or the jQuery way:

// wait until DOM is ready
$(document).ready(function(event) {

  // wait until window, stylesheets, images, links, and other media assets are loaded
  $(window).on("load", function() {

      // add code here

  });

});

This will make sure your code runs consistently, accounting for any server hoopla to the client.

 

:)

  • Like 2
Link to comment
Share on other sites
ohem test

ohem

Posted
  • Author
Posted

When waiting for images.. it is usually best  to make sure the DOM is ready along with the window. I always add my window load event inside my DOM loaded event so i guarantee that my code will run when the DOM is ready and all external assets have been loaded.

 

Some browsers have issues with the window event firing before the DOM is ready. Or the DOM being ready before the window is loaded. That is why a lot of people use the jQuery load event .. $(window).on("load") .. due to it resolving cross browser issues with window.load event being fired inconsistently. And the jQuery load event fixes this inconsistency. But you can get around that mumbo jumbo with the code snippet below.

 

Because even if the window is loaded before the DOM is ready it will fire immediately after the DOM is ready with the below code. Or if the DOM is ready before the window, the window will fire as expected due to the server waiting, long loading of assets, and server connectivity issues to the client.

 

So what i do is make sure the DOM is ready and the window is loaded before doing anything. I use the below:

 

The native vanilla JavaScript way:

// wait until DOM is ready
document.addEventListener("DOMContentLoaded", function(event) {

  // wait until window, stylesheets, images, links, and other media assets are loaded
  window.onload = function() {

      // add code here

  };

});

Or the jQuery way:

// wait until DOM is ready
$(document).ready(function(event) {

  // wait until window, stylesheets, images, links, and other media assets are loaded
  $(window).on("load", function() {

      // add code here

  });

});

This will make sure your code runs consistently, accounting for any server hoopla to the client.

 

:)

 

 

That makes a lot of sense, and I've done something similar in other banners.  But for some reason this does not seem to work with the dynamic image loading.

 

 

It's not letting me attach any more files, but when I try to add 


// wait until DOM is ready
document.addEventListener("DOMContentLoaded", function(event) {

  // wait until window, stylesheets, images, links, and other media assets are loaded
  window.onload = function() {

      playAnimation();

  };

});


function playAnimation(){
		var M2 = TweenMax.to('#character',1,{repeat:-1,x:-2250,ease:SteppedEase.config(15)});
}

to my original file, the animation still doesn't play.  Blake's example is working so I can happily stick with that, but if you have any insight as to what I could/should change with the window onload I am always happy to learn more.

Link to comment
Share on other sites
Jonathan test

Jonathan

Posted
Posted

The above will work when the page first loads like Blakes comment above mine.

 

Check out this StackOverflow article on some useful functions for realtime auto-detecting of images. You can try and pass the image url to a onload event handler and check if it is loaded, then do some stuff with the loaded image if no error.

 

http://stackoverflow.com/questions/1977871/check-if-an-image-is-loaded-no-errors-in-javascript

 

:)

  • Like 1
Link to comment
Share on other sites
Dipscom test

Dipscom

Posted
Posted

Ah! Something I can comment on with certain degree of confidence.

 

Rich ads will always wait until the page has loaded before firing their events. I am not 100% sure about the adkit.js behaviour, I generally do not use templates and am used to working with the EBLoader.js

 

There should be no need to wait for DOM and window if you are already waiting for the .onready() from adkit.js. If I were to build this ad in the Sizmek platform, I would add an event listener for the PAGE_LOAD that is fired by the EBLoader object.

Link to comment
Share on other sites
Jonathan test

Jonathan

Posted
Posted

Even when the Ad platform script runs on the main html page. It inserts the iframe with your files from the src attribute. The DOM ready and window is firing within the iframe. So when the iframe is loaded your code will run within the iframe. So either way your making sure the DOM and window of the iframe is loaded before running your animation :)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...