Member Avatar for GazzaCurran

Hello,

Firstly ill give you a background of what im trying to do and the layout of the banner/header

Right hand side - Navigation Links - I want to add a paint effect dripping down maybe splashing off the nav links, and then dropping onto the bottom and flowing to a point where there is an image ive designed with a paintbrush with a multi-coloured paint smear and brush with paint on it.

Left hand side - Website name, im thinking of a simple effect for the website name, just a loop effect.

Okay so i have the stockpile of the different photoshop images in a whole as the banner will look without the paint and the seperate images.

So anybody know how to get a sort of rainbow colour effect ?

how would i go about drawing the paint, would you guys/girls design this on flash or do the design on photoshop and import it, i have roughly learnt what i need to do on flash, advice on this will help me lots.

Thanks Gazza

  • 2 Contributors
  • 5 Replies
  • 266 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by Member #949455

Dani AI

Generated

sketched a clear idea: multicoloured paint drips/splats around the nav on the right and a simple looping treatment for the site name on the left. started the thread from a Flash perspective, but the advice below updates the workflow and gives practical, modern options that keep your Photoshop assets usable while avoiding legacy-platform pitfalls.

Flash is no longer a practical delivery format for new web banners. Adobe ended Flash Player support and blocked Flash content starting January 12, 2021, so SWF-based banners will fail or be blocked in current browsers; a web-native approach is the safer route. (adobe.com)

Three practical paths (pick the one that fits the art/animation style and team skills):

  • After Effects → Lottie (Bodymovin): create vector-based brush/drip motion in AE, export JSON with Bodymovin/Lottie, and render as SVG/Canvas in the page. Good for small, crisp vector animations and designer-friendly iteration. Example embed (use the latest lottie player): 
lottie.loadAnimation({
  container: document.getElementById('banner'),
  renderer: 'svg',
  loop: true,
  autoplay: true,
  path: 'paint-drips.json'
});

  • SVG + CSS/JS: draw drip paths as SVG shapes, apply an SVG gradient or masked gradient for the rainbow smear, then animate morphs or clip masks with a timeline library. GSAP is a performant choice for tweens and path morphing. (github.com)

  • Canvas / WebGL: for procedurally simulated drips or particle splashes, draw textures to canvas and animate with requestAnimationFrame for smooth timing; this is best when physics or many particles are required. (developer.mozilla.org)

Technical tips: use SVG linearGradient for smooth rainbow fills and masks (keeps vectors crisp), keep complex raster textures as separate PNG layers only where needed, and make the loop seamless by matching the first/last frames or crossfading. Test file size and CPU on mobile; prefer vector/Lottie where possible for smaller payloads. (developer.mozilla.org)

Summary: Given your Photoshop assets, export textured drips as isolated assets if needed, but build the final banner with Lottie, SVG+GSAP, or Canvas so it works reliably across modern browsers and devices.

Recommended Answers

All 5 Replies

Member Avatar for Member #949455

how would i go about drawing the paint, would you guys/girls design this on flash or do the design on photoshop and import it, i have roughly learnt what i need to do on flash, advice on this will help me lots.

Do at least have a image so it would be much easier to understand or actionscript3 code so it would be much easier run the script.

Member Avatar for GazzaCurran

yeahh its

where the paint smeers are im changing them to a dipping maybe

the effect will stop at then end start of the paint from the above image

Member Avatar for Member #949455

where the paint smeers are im changing them to a dipping maybe

You need your flash banner in swf file.

the effect will stop at then end start of the paint from the above image

Each images should have their own layer. Each images should also have at least 3 or 4 keyframes if you one each dipping one at a time.

You need to tween the paint foward meaning downward another words you need to add another keyframe.

Before you decide to do what I mention above. When you export the file is it a gif or swf? Try export it in swf.

I know notice you are using javascript.

Edited by Member #949455 because: grammer
Member Avatar for GazzaCurran

Before you decide to do what I mention above. When you export the file is it a gif or swf? Try export it in swf.

I havent started the banner in flash yet, didnt know if id have to draw out the drips in a multicoloured format on flash or just import all the different layers etc.

Member Avatar for Member #949455

I havent started the banner in flash yet, didnt know if id have to draw out the drips in a multicoloured format on flash or just import all the different layers etc.

Sorry to reply so late.

To make the drip, you might need to slice the images of each drip so it can tween. After when you are done. I would export it as a swf and used javascript (the one you are currently using) to play the swf file

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.