This is probably either very simple or very complex; but I’m primarily a music software guy and so have lesser expertise in visual matters!
I’ve made a simple animation where images of an interior environment with not-quite-matching background colours slide across the screen. I’d like to blur the left & right sides of each image so that they blur into one another and look like a single pan around the environment.
I’ve tried simple masking and looked at groups, but not managed to make anything that begins to look like what I’m aiming for.
Is this do-able? Or should I be looking at another way of doing this (perhaps video editing, as at the moment it looks like I’ll be embedding the finished item as a video rather than an animation (in RapidWeaver))
I am not sure I understand the precise idea of your description, but here is one approach...
A few things to note about the video demo just below that is at variance with your request:
The entirety of the transition images get blurred, not just the edges.
It is occurring faster than You are probably envisioning.
The example is actually a complete scene change.
However, the same principles would apply to your request - just adapt to your own variation.
I would create the initial effect in a video editor - then maybe You are done - as You are going to embed it anyway.
BUT do consider the practice and experience You would gain by also experimenting in Hype - which might bear fruit at some future time. The process would be to export the frames from your video editor as PNG or JPEG files and then selectively use "keyframe" images (You won't need that many) needed for the effect - along with the judicious use of fade-in, fade-out in the Hype timeline itself.
The video effect:
Breaking down the key changes to the frames:
The image does a simultaneous lateral movement & blurring. The blurring ramps up during the transition. Do note that the blurring is directional - lateral to match the movement.
The next scene moving in with an identical (or near identical) blur setting and movement. The blurring effect is at a maximum.
Just about there - the blurring is significantly lessening as the new scene slides into place.
Hype can apply gaussian-style blurs, but has no built-in way to do motion blurs as this is not a CSS filter effect. Sometimes in a quick pinch regular blurs will work (especially if you crop off the top-bottom for a horizontal move), but in general you’d need to do the image processing outside of Hype as @JimScott has recommended.
Thanks for that Jim,
I’ll have a think and a play with that. Though it isn’t quite the look I want. I basically want to imitate a single panoramic shot. Unfortunately the shots that I have to work with all have somewhat different versions of blue at their edges. The photos were taken inside a large inflatable colour maze - eyemusic.org.uk has the original Flash based animation, if you’re interested. It’s old and clunky and I’m trying to make an improved version, but it might actually be better to get a photographer in and make a completely new, panoramic shot. Unfortunately, that large structure only goes up a couple of times a year, so I’m looking for a temporary solution as I rebuild the site.
So I basically want to have what I’m imagining is the equivalent of an audio crossfade between the separate images as they slide across the screen - by which I mean that only the _edges of the images are crossfaded, rather than the whole image fading - so that it looks like a single panned shot. So it’s more of a static effect that slightly merges each right hand edge into the next left hand edge, which is why i thought of blurring. As I’m typing this (and trying to make a sensible desription), I’m realising that this is an audio/video editing way of describing it, which may not make so much sense in an html animation environment!
