Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
thunderbeast

HTML5 Banner Preview Tools / Library

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

Hi, I'm looking to find an elegant and simple way to preview html5 banners for clients. The situation is that we have Project Managers running multiple projects each with different developers, and they need a common way to show the client work-in-progress, ideally with our company brand. Instead, so far I've seen HTML files either hand coded our output to HTML using Swiffy, which each produce a full html file. 

 

I am looking for something simple that a PM can get from a developer and either drop-in or upload to a tool like Wordpress, so they can easily create a preview page with multiple banners (or links to banners) in a consistent manner.

 

Anyone out there have experience in this area? Having PMs hand code HTML pages, or using more advanced features of WP is....less than ideal.

 

Appreciate the insight!

Share this post


Link to post
Share on other sites

Typically the developers would set up preview links on a staging site; I've never known that to be something a PM would set up.

Share this post


Link to post
Share on other sites

A CMS for banners is a much needed tool.  And yes, something simple that a PM can set up: campaign, banner name, set up a password, upload a .zip and get a url or shoot a mail to the client.

  • Like 1

Share this post


Link to post
Share on other sites

I actually have such a system but it is not ready for the public yet, however if your interested in being a part of it or testing PM me.

  • Like 3

Share this post


Link to post
Share on other sites

I actually have such a system but it is not ready for the public yet, however if your interested in being a part of it or testing PM me.

Hey, could you elaborate on this?  You have something that's set up to upload zips and it automatically add them to a preview site?  That sounds pretty awesome!

 

I always just set up a page where you can click the title of each ad and then it displays in an iFrame; I reuse the same "template" but I have to update it manually.  I'm curious what others have been doing.

Share this post


Link to post
Share on other sites

I was going to write a Wordpress plugin to do this, but we ended up using the system within Bannertime for this, so it didn't matter.

 

I wouldn't mind teaming up with some people to work on it if its needed?

Share this post


Link to post
Share on other sites

Hi Brad, do you have any release for your Bannerwave preview as yet?

 

Pete.

Share this post


Link to post
Share on other sites

I don't have a release yet, but if you private message me I can give you a preview.

  • Like 1

Share this post


Link to post
Share on other sites

I'm currently developing that tool. Easy uploading HTML5-banners, and share with your clients.

But also: previewing on websites and easy feedback annotation.

Please send me a DM to get notified when it's ready, or sign up at www.adpiler.com

Plan is to launch within 2 months from now.

 

If you have any feedback: happy to hear!

  • Like 2

Share this post


Link to post
Share on other sites

Looks pretty cool, jorrit. Question: does it work for ads that are NOT using GSAP? Do you provide scrubbing capabilities while previewing? (I imagine that'd be impossible if the ads aren't build on GSAP). 

Share this post


Link to post
Share on other sites

Looks pretty cool, jorrit. Question: does it work for ads that are NOT using GSAP? Do you provide scrubbing capabilities while previewing? (I imagine that'd be impossible if the ads aren't build on GSAP). 

Thanks.

I'm not sure what you exactly mean with 'scrubbing capabilities', but Adpiler will work for all image- and HTML5-banners (using GSAP and not using GSAP).

Share this post


Link to post
Share on other sites

Yep, by "scrubbing capabilities" I just meant having a scrubber that you can drag back and forth to control the animation (like a virtual playhead). It's pretty simple to set up as long as the animation is using GSAP. Can't do it for CSS animations or pretty much any other library (at least not that I know of). 

Share this post


Link to post
Share on other sites

Well, mo.js has a player/scrubber now...

See the Pen RRRgLq by sol0mka (@sol0mka) on CodePen

 

 

Talking about Scrubbing capabilities:

 

I found this gem: https://www.npmjs.com/package/anim-panel

 

I particularly like the settable in/out points: 

See the Pen rLQxaY by cmalven (@cmalven) on CodePen

 

It literally took me 10 minutes to figure out how the in and out worked. Would've helped if they were draggable instead of setting them based on the playhead.

 

Here's another scrubber...

https://github.com/floscr/Gsap-Timeline-UI

 

And this fork...

https://github.com/bfred-it/Gsap-Timeline-UI

 

Demo

See the Pen 4941e9f3580d7b338fd7f1b20274585d by osublake (@osublake) on CodePen

  • Like 3

Share this post


Link to post
Share on other sites

Ooooooooh, that mo.js one is pretty!

 

I see what you mean by draggable in and out points, they would be much more intuitive for motion designers coming from a AFX background too.

 

This might be a good side project to work on!

Share this post


Link to post
Share on other sites

I built one a long time ago for Angular. Most of the code inside the playback.service.js file could work without Angular. You'd just have to change a couple of variables. The keyboard layout is setup for use with the number keypad.

http://plnkr.co/edit/bG20DKs9GKGai29TsEEm?p=preview

 

For a scrubber, I would use Draggable instead of nouislider. Here's one of the first things I ever made with Draggable, a min/max slider. There's a couple of things I would probably do differently today, but it still works great!

See the Pen ifomn?editors=0010 by osublake (@osublake) on CodePen

  • Like 3

Share this post


Link to post
Share on other sites

Hi all,

 

Happy to share with you that Adpiler has officially launched.

 

Easy create banner preview pages and gather feedback from your clients. No email hassle anymore ;)

Would be great to see you on the platform.

Share this post


Link to post
Share on other sites

Hi! Jorrit,

 

Really nice idea and service overall but please sorry (IMHO) $39 a month and just for previewing 10 sets is EXTREMELY costly.

I think you should reconsider your pricing.

 

Cheers

  • Like 2

Share this post


Link to post
Share on other sites

I'm using Adpiler for about 2 months now, and I can tell you it's great to use so far. Before I was sending all the files per email, but this is way easier.

Share this post


Link to post
Share on other sites

AdsMaker is a innovative campaign, feedback and approval tool with integrated HTML5 ClickTag Checker. AdsMaker enables the user to administer and manage all sorts of campaigns, whether it’s an HTML5 Banner, a cross-media TV & radio spot or Social Media Ads, have them approved or commented by the customer, and then efficiently forwarded to the desired Media Agency or AdServer ?.

  1. -          Drag & drop uploader with integrated HTML5-Banner "ClickTag-Checker".

  2. -          Campaign Archives; sorted by month / year.

  3. -          Mobile MockUps for Responsive view & Social Media Ads.
  4.         Smart One-Click Preview for your Ads

More informations: www.ads-maker.de

Share this post


Link to post
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

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. 


  • Recently Browsing   0 members

    No registered users viewing this page.

×