How do I add a particle effect?

#1

Hello all again !

I am back to using Hype on the daily so I should be active more now, I hope you are all well !

How can I add this background particle effect to my Hype Banners!

I think using Create.js? I remember doing something similar in Animate CC but I could never work it out… Is this easy to put into Tumult hyper and export for animated banners?..

if I cant work it out I am going to have to create these manually with shape layers which will take a long time…

However if I can get these working in Animated Banners this would be a huge upgrade!

Thanks in Advance :slight_smile:

Free Hype Templates 🏗
#2

Those look like you could do it with circles, with some blurring applied, and slightly reduced opacity – and just animated normally (perhaps with motion paths?). You could even apply Physics to them, and set the scene physics gravity to 0 and have them float up to the top (based on the tilt of the device). Though this would require the ‘full’ JavaScript runtime so consider the file size limits of your ad network.

For 10 objects? Probably will take longer to find a suitable JS Particle library and figure out its documentation :slight_smile:

1 Like
#3

Yeah you are right…

If I manually create this as a Hype Tumult file and save the as symbols I could just change the colour for each and start randomising the gravity and speed and re use it over and over!

If anyone knows a quicker way please let me know :slight_smile:

#4

I use SVG and JavaScript for particles. Example…

If you’re looking for a quick solution, perhaps it’s the reverse of this…

Creating multiples of same element and randomizing
#5

So do you manually keyframe the particles?..

How do I add the Javascrcipt / css to the Hype? I can never find the Code editor…

I have to be careful as these web banners have huge restrictions… ( 150 kbs sometimes ) so I am so curious how this company did it :frowning: I need to find a Banner master lol…

#6

No, I use JavaScript and SVG. There are animation effects that can be added to SVG itself.

Heh, I thought you’d just view the source of the example project and figure it out. I was just about to head out the door, so I can’t really explain in detail right now. :man_shrugging:t2:

I can tell you that the effect is very light weight. It’s only 30 lines of code to get that circle effect in the Circles with Grandma game. I tried using particle.js but it was kinda heavy, and not quite what I wanted, so I wrote a simpler particle system. I think a tutorial or section in the new Hype book is probably needed. But right now, I gotta go.

#7

Sorry, I dont even mean to come off rude and lazy. Code is really not my strong point as I focus on design and Animation!

Particle.js is exactly what I used before and it was way too heavy for banners, thanks for reminding me!

I will check the source code on your game, and see if I can work it out from there. Also, great game!

#8

HI @tekkon
I’ve just tried out Physics for floating bubbles/ particles FX with simple settings (see screenshot)

Scene Physics Gravity Force set to 0.10
and movements Angle set to zero degrees

I applied to each of the Circles slightly different Air drag values (range of 0.1 – 0.3)

26

And yes, using Physics

but one can use CDN to get around size limitations of Google Ad Manager etc.,
e.g. https://secure-ds.serving-sys.com/BurstingcachedScripts/libraries/hype/ …

1 Like
#9

oooo yea this is working pretty well… thanks a lot for giving me a break down…

Can we keyframe Angle in physics?..

Also does Physics work in all browsers?

Also… you can only set the Angle per Scene!.. so everything floats the same way… if this works in banners. I think it is time for me to start reading the Hyper Book…

#10

Individual symbols, which are like ‘scenes within scenes’ – can have their own Physics worlds with unique gravity + gravity angles. The ‘mastering physics’ document at the bottom here is an overview of the Physics universe: https://tumult.com/hype/tutorials/#training

#11

man…

Coming back to the UK from Japan and finding this “150 KB limit size”… Hype physics alone are 94kbs!..

this is all going to be a difficult process…

#12

Yeah, that’s my job. :smile:

You don’t need Physics.

So, let that be your solution. You don’t need anything fancy. You could use brute force to create your particles manually. Sure, it’s tedious, but you’ve already spent hours trying to solve this problem. Creating particles dynamically might be overkill for what you’re trying to accomplish.

And with Hype’s motion paths, you can create a nice effect…

29%20PM

Once you have the one particle, it’s easy to duplicate it and create more particles.

fishy

The final HTML export was less than 70K. (If you’re not supporting IE 6-9, you can dramatically reduce the size of the export. Also, the restorable file is for backups, not for banner ad networks.) That should leave you plenty of room for some graphics and some more particles.

5 Likes
#13

@tekkon I would recommend to try CDN for ‘outsourcing’ those Hype runtime files.
You simply inject a CDN-link to the Head HTML of your Hype file instead of sending the heavy-weight runtime file to the Ad Server within the creative package.

#14

Highly (un)likely?

#15

@Photics

I don’t even know why I am looking for other ways around other than manually as I love doing stuff like this anyway…

Also once this is saved I can just start flipping / changing colours sand speed and re use the assets…

Thanks so for all the help guys!

This is someting I would have to talk to our Delivery Agency about, we create the creatives and they deliver… ( damn my designer background, I wish I knew more about dsp and ssp and all that stuff that goes over my head ).

I always just get told this (150kbs only)… which I dont understand because I find banners from big companies online all the time hitting 300kbs load time…

Products
Company
Social
Hype Support
Whisk Support
Store

Copyright © 2010-2020 Tumult Inc. All rights reserved.
Handcrafted in San Francisco.