Right, so I need to make some animated banners. Which is fine, but I’ve got a hefty size restriction involved (something like 45kb), so I can’t just fire out animated raster gif from tattieshop. I’ll need to go down the vector route.

I’m thinking html5, eh? I could do it in Flash, but one I’ve not got the software in my work comp, just at home, plus I don’t really want to use Flash. I’m guessing html5 animations are the way forward here?

So, what do I need to know? I know html/ccs. Am I best just quickly learning how to code html5 animations, and learning the canvas tag (I don’t need much, just moving objects on screen, and some transitions, most like fades.). Or am I better using some form of dedicated program? I’m thinking code?

So, what’s what with html5 animations? Thoughts?

Just use Flash. Its just the best tool for the job. Its quite intuitive. You can get a free months trial on the Adobe site. Why not give that a go and see how you get on?

I taught myself how to use Flash just by messing about with it for (and swearing a lot!). I’d foolishly told a prospective client ‘yes, of course we could do some Flash work for his website’ So when we got out of the meeting I was told “well… you best got on with learning Flash then smartarse!”

If I can use it, anyone can. I’m an imbecile

😀

Yes, could do. I’ve played about with flash and I’ve a hooky version on my home lappy I could use(shhhh 😆 ), I know the timeline and how to tween, so I could do it. But tbh, I’ve got time to learn the html5 way, gets quiet coming up to christmas in here. So why not learn something new is where I’m coming from here.

I thought you had a picture of Binners really really excited.

Bit dissapointed.

Must read more carefully

haha! 😆

Hmmm. first lesson, the html canvas tag is nonsense, it’s just a container. It’s bloody javascipt you need to do anything.

Flash it is then.

found a wee tool, google web designer looks like it’ll do the job, in lieu of actually having flash at hand here.. (I looks just like a toned down version of flash.)

Flash is over

Increasingly Flash is being sidelined if not actually dropped. A user has to actively enable it in many browsers. I’d question why you need an animated banner in the first place.

So here’s the conumdrum now. I’ve been able to create the animation in google web designer, it’s pretty easy, just works like flash(kinda). I’ve exported the html and it’s working fine.

But…

the uncompressed folder, with index.html + the 5 svgs I’d using for the animation come out at around 500kb also.

The threshold I need to meet is 45kb.

But i get the impression html 5 files are supplied as zip files? zipped up it comes to 33kb.

So is html5 standard, the compressed format or the un-compressed format?

Basically, If I fire over the zips, will they be happy as long as the zips are under 45kb? yes, no?

whitestone – Member
Increasingly Flash is being sidelined if not actually dropped. A user has to actively enable it in many browsers. I’d question why you need an animated banner in the first place.

I don’t need anything, people above me do though. Above my pay grade to question them, i just need to facilitate their requirements!

Fair enough.

Where does the 45Kb restriction come from? Typical web pages these days are significantly bigger than that and 45Kb is way bigger than a typical MTU of 1500 bytes.

Flash is over

Increasingly Flash is being sidelined if not actually dropped. A user has to actively enable it in many browsers. I’d question why you need an animated banner in the first place.

Flash is far from over. Its still by far the best tool for producing vector based animated content. Once you’ve put it together in Flash, you can export it to any format you like. So while Flash PLAYER may be over, the software itself most certainly isn’t. Plenty of stuff still being produced using it. I still use it all the time for producing films for big plasma screens at exhibitions ‘n stuff. Only just got a request for a new Flash animated film yesterday

So there! 😛

Fair enough.

Where does the 45Kb restriction come from? Typical web pages these days are significantly bigger than that and 45Kb is way bigger than a typical MTU of 1500 bytes.

Spec sheet that is supplied by the ad company, I do agree that 45kb is ridiculously small, but hey ho, that’s where I at!

Here’s the specs:

btw, is it even possible to get a 486 x 60px swf under 45kb? that’s my next port of call if my zip theory doesn’t stand up to scrutiny.

Flash is far from over. Its still by far the best tool for producing vector based animated content. Once you’ve put it together in Flash, you can export it to any format you like. So while Flash PLAYER may be over, the software itself most certainly isn’t. Plenty of stuff still being produced using it. I still use it all the time for producing films for big plasma screens at exhibitions ‘n stuff. Only just got a request for a new Flash animated film yesterday

Oooh Great! does it work on mobile devices?

Oooh Great! does it work on mobile devices?

It does if you export as a movie file (h.264 etc). Flash is just a tool, it doesn’t have to be used as a whole ecosystem.

But the interactivity doesn’t work

Oooh Great! does it work on mobile devices?

Yes.

But the interactivity doesn’t work

What interactivity? Why would you have interactivity? To do what?

I make Flash animations. Do they have interactivity? No. They’re animations. You… you know… watch them.

As has been pointed out to you repeatedly Flash is the best tool for producing content. What format its delivered in is neither here nor there really.

is that quite clear now? IS IT?!!!

Animated Binners I thought the thread title read at first glance..

btw, is it even possible to get a 486 x 60px swf under 45kb? that’s my next port of call if my zip theory doesn’t stand up to scrutiny.

Before you get too flummoxed – if the file sizes are problematically small – check its not a typo from the client. More than once I’ve been on tail chasing expeditions trying to meet unreasonable client requests only to find out they’d just made an error in the spec. A typo relating to kilobytes is bad enough. When the error is in kilonewtons it can be a typo that wastes a lorra lorra time and money 🙂

Do they mean kilobit (kb) or kilobyte (kB), there’s a factor of 8 difference between the two. I presume they mean kilobyte. Also don’t forget that the size of the file and size on disk can be different. For example I have a 2.17 kB file but the amount of space it takes up on the disk is 4 kB due to the minimum size of each allocation unit. More details here http://www.fixedbyvonnie.com/2014/08/whats-difference-file-size-size-disk/

Finally the file size doesn’t increase with the dimension of the image. Unless you’re using vector graphics (SVG) that’s not realistic. Seeing as the allowable image formats are gif, jpg and png, none of which are vector formats, I think they’ve got their knickers in a twist.

I’d seek clarification, or just send it across zipped up as it is and see what they say.

I got them to get the full proper spec sheet, seems I’m looking at around 200-500kb depending on the size the banner, so I’ll be able to make that work. Basically, marketing people talking shit, who’d a thunk it! 😆

Gonny make up a full set of the various sizes firstly, make sure I can get within each size restriction (I will do) and send them over make sure they comply firstly, before I start doing the others.

So I’ll be fine now. I knew 45kb was a silly size restriction.

Incidentally, I’ve been looking more into hand coding the banners, doesn’t really seem that difficult. So i’m gonny learn that over the next month or so. means a bit of javascipt voodoo and understanding what parts of the css3 features you’re best avoiding, but worth learning I think.

The html that google web designer spews out is nonsense(i’d imagine flash will be much the same). I’ll use it for these, but I’ll play around and learn it for future ref.

Seems like a lot of work to make a banner ad that will almost certainly get blocked by most people’s ad blockers…

Rachel

Seems like a lot of work to make a banner ad that will almost certainly get blocked by most people’s ad blockers…

Rachel if it’s not served, you don’t get charged, or for some accounts, if it doesn’t get clicked, you don’t get charged.
So you as an advertiser don’t really lose out.
You as a site do lose the chance to charge though.

Flash has been effectively replaced by Adobe’s own Animate CC.

Actionscript was never far off javascript anyway, so anyone used to flash, or other animation packages (after effects, etc) can easily make the jump.

I don’t really know why Binners was so against interactivity. The world of banners is very interactive now. Pop-outs, takeovers, etc.
Most ad servers only restrict the initial load size – after that as long as someone has interacted with the ad you can load music, video, etc.

45kB isn’t unheard of, but I’m glad they’ve upped it for you 🙂

I remember the days of 12kB, credit card ads that had to have small print that took up 5kB of that!

Double

What interactivity? Why would you have interactivity? To do what?
I make Flash animations. Do they have interactivity? No. They’re animations. You… you know… watch them.
As has been pointed out to you repeatedly Flash is the best tool for producing content. What format its delivered in is neither here nor there really.
is that quite clear now? IS IT?!!!

actually, no. I used Flash to create interactive data displays and teaching materials. Is that not content? So, you know, buttons and sliders and drag and drop stuff. Is that not content. What are you so angry about?

Actionscript was never far off javascript anyway, so anyone used to flash, or other animation packages (after effects, etc) can easily make the jump.

A bit, but the scope to easily write scripts for scene elements was really useful especially when you could do it fore different pages of the same element. And drag and drop seems much harder in javascript, especially if you want to restrict where it cam be dropped

You need to use svg + css3 animation. Good luck. 45kb should be fine

g5604 – Member
You need to use svg + css3 animation. Good luck. 45kb should be fine

Final size of the largest banner I got was down to 136kb uncompressed, that was for a 12 second leaderboard at 970x250px. I think it could go smaller as most of the png elements are around 4/8kb, but there’s one image that was 52kb. The html came out at 50kb. But I’d imagine there’s a lot of unnecessary code in there as it’s auto generated.

I’ve sent off a file of the largest one I’ll need to do, so I’ll find out i’m i’m within spec soon enough.

I could see you could get it down smaller, particularly if you are manually writing your html/css/javascript. And used svgs that were manually written instead of generated from illy (I tried svgs from illy, but even simple ones were coming out as 90kb, there’s some amount of guff in them.) I considered SVGZ, but I think it’s only really chrome that can handle them.

I think, for future ref, I’ll learn how to move images about on the page with javascript or css3. That seems like the easiest solution(stuff actually drawing things with javascipt or svg, that’s taking things way too far! 😆 )..