How do I make this Water Splash Effect

[PixelVector]

Hello,

Does anyone have advice with how to go about creating a splash effect like this in Moho Pro 13.5? do you have any tips/tricks or tutorials you can point me to?



Sorry if it's a dumb question, just looking for some advice.

Thank you!

[synthsin75]

This is what a Frame By Frame layer is ideal for. Plenty of drop/splash FBF tutorials out there.

[SimplSam]

You can also import Gifs like that into Moho to use directly (as I did below), or use as a model for your own recreations.

p.s. That water splash is quite detailed. I would probably suggest you start with a simple example if you are creating frame-by-frame.



also .. just seen this, which is not a tutorial - but gives you some clues how to do similar in Moho.

[synthsin75]

Hey Sam, how did you use to make the black transparent in that gif?

[SimplSam]

I had to backtrack and recreate it as I could not remember the steps.

To simply remove the BG color goto: https://ezgif.com/effects, [Upload] and select [Replace color with transparency] "black" and [Apply].

However I had to perform additional steps to make it look better:

0) See original artwork at: https://www.deviantart.com/pinkmyst/art ... -416409831 (I think this is the original)

Note: I changed the order of Transparency & Resize below - looks better (but still not perfect).

Remove Background
1) - [Replace color with transparency] "black" and [Apply] (as above)

-- At this point it should have been OK to use, but Moho didn't seem to like the Stacking/Frame Disposal (method 3: 'Restore to previous') and painted every frame over the previous (like method 1: 'Do not dispose'). So one more step seemed to correct that (either Optimize (Lossy or Coalesce) or Resize as below) - resulting in a Gif with Frame Disposal (method 2: 'Restore to background'). And there is some fringing

-- The resize below is optional but smoothed out the dithering/patterning on this Gif, reduces the fringe border and fixes disposal method (now: 2 'Restore to background')
Resize
2) - [Resize image] to 800x600 (from 1920x1080) using "ImageMagick + coalesce (undo optimizations)"



You can also use [Effects] to replace background color with 'blue' (instead of Transparency) and use differing Fuzz levels to defringe.



Disposal Method notes:
Indicates the way in which the graphic is to be treated after being displayed:
#0 - No disposal specified. The decoder is not required to take any action.
#1 - Do not dispose. The graphic is to be left in place.
#2 - Restore to background color. The area used by the graphic must be restored to the background color.
#3 - Restore to previous. The decoder is required to restore the area overwritten by the graphic with what was there prior to rendering the graphic.
https://www.w3.org/Graphics/GIF/spec-gif89a.txt

Gif Analyzer:
https://onlinegiftools.com/analyze-gif

[Franky1966]

Hi PixelVector. This video explains it well altough it's a watermelon in stead of water:

[slowtiger]

Changing a GIF colour to transparent in Moho:
- import GIF
- choose the wand from "special" tools
- click on the colour

[SimplSam]

The magic wand does work, but only on static single-frame Gifs. Prior to 13.5 we could only load Gifs statically - since AS/MH only loaded the first frame of an animated Gif.

[Greenlaw]

That's really cool!

Years ago, I did something similar for Boss Baby: Back In Business and I used Moho's FBF tools for it. My splash animation wasn't nearly as detailed or as pretty as this one but it was the same general idea.

When I animated mine, I first studied real splash footage that I grabbed from YouTube (plenty there, including slo-mo footage,) picked out the key moments in the footage, and then drew my interpretation of the splash. After drawing the elements (mainly using Blob Brush and some Freehand,) I used the Magnet tool to move some of it around for the in-betweens. FYI, it helps to break down the splash elements into FBF layers...this makes editing the bits and pieces a lot easier.

Whoever created the above probably did something along those lines in their animation program.

BTW, I dropped this GIF into DJV to study it frame by frame. It really is nice work but I found it interesting that the layers are animated at different frame rates: the main splash, droplets, and ripples are animated on ones, and the back-jet is animated on twos.

In the past, I've also created 2D splashes in 3D programs, using cel-shading to make the element look like 2D. The result is not as expressive as a carefully crafted hand-drawn animation, but it's a great option to have when there is a complex camera move and you're in a hurry to meet a deadline (and you know how to use a 3D program.)

[hayasidist]

That's really cool!

BTW, I dropped this GIF into DJV to study it frame by frame. It really is nice work but I found it interesting that the layers are animated at different frame rates: the main splash, droplets, and ripples are animated on ones, and the back-jet is animated on twos.

did much the same with PS - and ... the splashes before and after the back-jet look to be identical - the later ones are flipped horizontally and scaled down..

so, to agree wholeheartedly with Greenlaw, even more reason to do various elements separately then amalgamate them.

Using particles / threshold for the splashes also springs to mind - the bg in the attached was done with particles. The split of the 10 into ten 1s was an fbf insert. Purpose is to show how threshold can be used to create "blobs" - not, as such, as a water splash demo and how fbf can be incorporated in-line.

the actual moving stuff around was done by my 8 yo son for a school assignment.

[SimplSam]

@Hayasidist - That video is not viewable (off YouTube). Says "Playback on other websites has been disabled by the video owner"

Interesting stuff about the differing frames rates and mirroring. I just saw that guy @pinkmyst also posted a WIP a few days before the one above:

[synthsin75]

Yeah, Sam, I went the ezgif route too. Just wanted to see if there were any other/better options...and for anyone else wondering.

[hayasidist]

@Hayasidist - That video is not viewable (off YouTube). Says "Playback on other websites has been disabled by the video owner"

oops -- fixed! sorry. (it showed up ok for me because I was signed in on the forum!)

[synthsin75]

Rough version of how I'd do a splash in Moho:

https://dl.dropboxusercontent.com/s/alt ... .moho?dl=0

[chucky]

Hi if you check the library
Tell me if this isn't there, I've got some splashes I made there, you can use out of the box or study.
MOHO\V13.5\Moho Pro\Library\Effects\CK Particles\weather\CK Rain Splash

Also I suggest the FBF tutorial with the watermelon.

Oh ,And Wes's above this... yeah that a great one to examine and study.