Animated Bokeh effect

[rezun8]

hey guys for once I need to ask a question of my peers. I need to create a animated bokeh effect for some banners. I'm hitting a wall finding anything related to scripting this in Adobe Animate, I know I could manually go in a create, move this but I don't think that will be a best solution based on most probably size and time constraints.

Has/does anyone have a tutorial or fla they might want to share?

Most grateful for the assistance !

Cheers

R

[RandomlyFish]

By bokeh effect, you mean light points that look like flat shapes? What type of animation do you want to create? For example do you want to make an animation where you see lights clearly and then it transitions to bokeh, or maybe in reverse?

[rezun8]

good questions, Ideally the animation will be slight movement so if the banner is a 300x250 the circles might move25-50px over a 5-8 second time frame.

Something like this is ideally sought, only with slight animation: https://www.tutpad.com/tutorials/how-to-create-a-bokeh-effect-background-in-adobe-illustrator

[RandomlyFish]

To create those soft light spots, you could use circles with radial gradient. So you would open the color panel and change it from Solid Color to Radial Gradient, and once you have done that, you should see a preview next to the paint bucket. To change the colors, you can click on one of the arrows at the bottom and then change color of it, you can also make the color transparent by changing the alpha, next to the "A". you can also drag the arrows to change the area where the color starts, and add an arrows by clicking anywhere below the colored strip.

Once you have created a gradient that you want to use, you can use the circle tool to draw a circle, and if you hold down shift + alt while dragging, it will create a uniformed circle. If the circle got outlines, you can just use click on the outlines with the black arrow and then delete them. If you want to change the color of a circle you already created, you can click anywhere on the colored area to highlight it and then change the color in the color panel.

Then you can convert different circles to symbols so that you can reuse them in multiple places, by selecting one of them and pressing F8. With cycles converted to symbols, if you edit one of them, it will update all other copies of that symbol.

For the animation you can create symbols that hold multiple of the circles, so you could have the smallest circles in one symbol, bigger circles in another, and the bigger circles inside another.

Then you can animate each of those symbols on different layers, to move at different speeds to give a bit of a parallax effect.

[ClayUUID]

https://codepen.io/tag/bokeh/

[rezun8]

Claycherrycrow5

@RandomlyFish I had thought about the exact process you outlined, my only concern becomes time involved as we have tight turnarounds for dozens of banners with this effect in them. Ideally was hopin there was a script available but this way will also allow for better customization to each layout as it may effect copy involved in the ad.

Thanks to both of you!

[ClayUUID]

This will now be the thread where someone explained to a seasoned developer how to draw circles.

[RandomlyFish · Accepted solution]

This code would randomly place circles inside a container, and then animate the container moving:

var circles = 20;
var time = 5;
var movementX = 50;
var movementY = 0;
// Can be replaced by something along the lines of stage.stageWidth and stage.stageHeight
var width = 300 + Math.abs(movementX);
var height = 250 + Math.abs(movementY);
var sizeMin = 20;
var sizeMax = 40;
var container = new createjs.MovieClip(null, 0, false, {});
stage.addChild(container);
container.x = -movementX;
container.y = -movementY;
for (var i = 0; i < circles; i += 1) {
     var circle = container.addChild(new lib.Bokeh());
     circle.x = Math.random() * width;
     circle.y = Math.random() * height;
     var size = sizeMin + Math.random() * (sizeMax - sizeMin);
     circle.width = size;
     circle.height = size;
}
// Animate the container to move to the right over time
createjs.Tween.get(container, {override:true}).to({x:movementX, y:movementY}, 1000 * time, createjs.Ease.quadOut);

All you need to do is create a symbol with the linkage "Bokeh". You can set the linkage in the library panel, if you double click below where it says linkage. I wanted to include code for changing the color, but I don't know how to do that in JavaScript for HTML5 Canvas.

You can add that code to a class with a constructor function to make it very easy to reuse the code for multiple projects. If you want to know how to do that, just let me know.

[rezun8]

oh wow! thats awwesome Fish! I will give it a try today and let you know how it goes. I really appreciate you helping out with this.