Manipulating images

[OwenAus]

Is there a way to bend, twist, slice images (jpg) imports?

I saw a picture of a horse turned into a flag waving in the breeze, using something called anfyFlash (or amfyFlash).

Is there a way this can be done without, for eg, splitting an image into many vertical slices and then apply a sine wav. That is, is it possible to just load any image, complete, and apply some magic? Without blowing out the file size or overloading memory?

[johnie]

Right now KoolMoves supports only limited Raster graphic transformations such as applying transparancy, Rotating, Flipping, ECT. Appending a frame and flipping it will make youir image spin but I think you want a diffrent effect here?

Complex raster transformations, edits, are handled right now through an external editor. You can set up several editors and choose the one you want to make the edits in. The place that you set up editors is under file> preferences.

[OwenAus]

Hi Johnie.

I had a look at the anfyflash site, they seem to specialise in image (raster) manipulations.

It would be neat if flash allowed some way to manipulate the rendered image, eg, grab a block of memory and move it somewhere. But then it wouldn't be flash, I suppose. :)

Have a good new year!

[johnie]

Flash itself does. Flash was actually bought by Macromedia. Both Future Splash and then later Flash handles both vectors and raster images.

However I'm pretty sure if you would disasemble the files from Anfy Flash what you would find is a series of raster images. Just like a GIF or MNG.

[docree]

About Anfy:
Before seeing "AnfyFlash" I used AnfyTeam's "AnfyJava".
This "AnfyJava" software used extensive maths that would manipulate
each line of pixles in the image to create the effects. They most
likely took their ideas in the software for java and ported them
into their flash software.The effects are nearly the same.
___________________________________________

A Wish for KoolMoves:
I would like to see perspective applied to image fills when an
object is slanted for perspective. That may be a far off feature in KoolMoves.
DocRee

[w.brants]

I visited the anfyflash site and took a closer look at their moving flag example. Thw width of that movie is 200px. What they do is slice it up in 50 slices with a width of 4px and move the slices seperately (calculate the vertical position) to create the moving effect.

The size of the swf file is nof very big because they do slice it dynamicly. I assume they create virtual slices by duplicating the image as a movieclip and masking out different parts. This would also be the most logical approach if you want to recreate the effect I think.

[OwenAus]

Hi guys.

That is interesting stuff, and thanks. :)

I need some software that will slice bitmaps into thin strips, in real time, and dish up the bits to flash. Diced images on toast! Might try to use some of the .net stuff available via c# etc.

Actually, first I think I'll try duplicating an MC with a bitmap and see what it does to the swf file size. And to user memory. And if I can get masking working across all those levels.

Have a prosperous 2003. :)


Addendum: The result - everything is perfect, except ...

The masking should, in theory, work really well with AS to create a tiny swf, smallish image, very good load speed!

Image is loaded into a movie clip.
This is duplicated.
Clips are shifted along a sine wave.
Masking clips are assigned to image clips.
Works great, except ...
... the masking won't work.

lol.

I guess setMask is not yet supported in KM. Putting masked shapes in the clips only seems to mask anything in the clip itself. I don't have a clue what to do to get around this.

hehe - well, it was just a diversion.

Thanks for the ideas, though.

[w.brants]

setMask is supported. I tried for a while and got a working flag example.

I do know some math but didn't know how to get the flag to move on the right side and to be static on te left like a real flag. If someone wants to figure that out and maybe add a moving shadow go ahead.

Here's what I've done so far...

[OwenAus]

Thats it!

Awesome. :)

[w.brants]

Thank's Owen,

Check the improved version. The code had some bugs. Now even a big image plays fluently (at least at my computer)

[w.brants]

Okay, my final attempt.

Shadow included now but speed decreases so large images are history. Just look if it's big enough for you.

[OwenAus]

Genius. :)

lol, I am still struggling to get this to work:


this.createEmptyMovieClip("item",10);
item.loadMovie("sample.jpg");
this.createEmptyMovieClip("mask",11);
mask.beginFill(0x000000);
mask.lineStyle(1,0x000000);
mask.moveTo(0,0);
mask.lineTo(30,0);mask.lineTo(30,30);mask.lineTo(0 ,30);mask.lineTo(0,0);
mask.endFill();
item._x=100;item._y=100;
mask._x=110; mask._y=110;
item.setMask(mask);


All this produces is a black blob in the image, and the entire image remains visible.

However if the mc "item" was pre-created in the movie, and the image preloaded, (all done at "fun" time) then this works:


this.createEmptyMovieClip("mask",11);
mask.beginFill(0x000000);
mask.lineStyle(1,0x000000);
mask.moveTo(0,0);
mask.lineTo(30,0);mask.lineTo(30,30);mask.lineTo(0 ,30);mask.lineTo(0,0);
mask.endFill();
item._x=100;item._y=100;
mask._x=110; mask._y=110;
item.setMask(mask);


(Wonder if it is a timing thing?)

I am confused - a familiar state.

Anyhow, you have this wrapped up! Do you mind if I use your exact code on a site?

[w.brants]

I don't mind if you use the exact code.
If you like it, feel free to use it.

By the way... I have the same problem with loadMovie. That's why I integrated the image in the flash file.

[Bob Hartzell]

this.createEmptyMovieClip("item",10);
item.loadMovie("sample.jpg");

-> I would play with just this part to make sure it is working correctly. Forget the mask part until you get this to work.

[w.brants]

I tried another approach...
This one leaves room to create custom effects

But still I didn't succes to mask an image loaded with loadMovie.
Loading an image works fine. Just the masking doesn't.

On another site http://actionscript-toolbox.com/samplemx_loadjpg.php I found some information about loading a jpg and masking it. Maybe this can help ?

[w.brants]

If you like more complex image deformations try this one.

[bridelh]

Hey W...
This is great stuff!

Regarding the masked loaded jpg, I tried it and had some problems when I did the Image browser demo on my site. I will have to play with it again to see if it will work in KM....

Keep up the excellent coding examples!

Happy Xmas to all...

Hilary

--

[OwenAus]

lol.

I like the twist to the last one!

Hi Bob, the image load works and the image mask works, they just don't seem to hang together.

Splitting the movie into frames, with create/load, a button that you press when you can see the image, and then masking leaves the masked area black.

1(load/display) .. 2(wait for user click) .. 3(mask).

Doesn't matter if image loaded directly, or a swf with imbedded image is loaded.


However, this is all Kool stuff with images. Way to go, W.Brants! (Is there a name/moniker you prefer?)

Merry Christmas, all.

[w.brants]

Owen, It wasn't a real twist only a narrow down. In the example I posted I only used values 0 - 100 foor the yscale. If you want a real twist (image flip upside down and back again) you should also use negative values. Replace some of the wave calculating code with the following or just add it.

for (w=0;w<(4* Math.PI);w+=(2* Math.PI / slices /2)){
s=Math.round(Math.cos(w)*100);
y=Math.round((image._height/2)-(s/100*image._height/2)+12);
ay[wavelength]=y
as[wavelength]=s;
wavelength++;
}


I prefer to be called by my first name (Wilbert) but when I registered to the forum that wasn't available anymore :(

Hilary, while you are playing maybe you could also try to duplicate a loaded jpg with duplicateMovieClip. That also didn't work when I tried it.

And to all of you of course a Merry Christmas.

[Bob Hartzell]

Hi Bob, the image load works and the image mask works, they just don't seem to hang together.

-> My only way to debug these problems is to see a working example made in Flash and to compare it to what Koolmoves is creating. So I would appreciate a working Flash created example.

[w.brants]

Instead of solving the problem I tried to work around it (and did).

On the internet I found some information that was usefull. The setMask only seems to work fine when the jpg is loaded completely. They looked at the _width property to make sure the load is complete so I did the same.

I still don't know how to solve the other problem (duplicating a loaded jpg) so instead of doing that I just load it several times.

The result is a working example.

Can someone tell me if the flash player is intelligent enough to load it one time for real and the other times virtual (cache) and if loading it several times takes up more memory ?
I don't know how things are handled internally.

Wilbert

[w.brants]

Okay, I found out already. Loading the image 50 times means loading it 50 times. Offline is no problem but online this isn't a solution.
I should have tested before I posted my previous post. Sorry.

Could attachMovie be a solution if it would be supported ?

[w.brants]

Here's the working version.
I thought there was nog cache. The problem was that I tried to load 50 times the same image simultaneously in combination with the fact that it wasn't in the cache.
When I first load one image completely and then the other 49 it works fine.

Using the things I learned figuring this out I started working on a more usefull project. It concerns image transitions.
For those who are curious... take a look and tell me what you think of it.
http://www.geboortegrond.nl/koolmoves/transition/

Wilbert

[bridelh]

Brilliant Wilbert!

Any chance of sharing the code (or parts of it) to show everyone how this sort of thing is done?

Hilary

--

[w.brants]

Hi Hilary,

Thank you for your compliment and the xml information.

I most likely will share the code in the begining of january. You see, it's just a one frame empty stage fun file with 300+ lines of actionscript code.

It invloves a lot of calculations and I want to check the code and test it first to make sure it isn't loaded with bugs.

Wilbert

[OwenAus]

Heya Wilbert,

I am catching up on things - modem, board and a slot got fried during a storm on Christmas Eve so I have been netblind for few days - but looking forward to sussing out your latest stuff.

Thanks for the breakthroughs with the image manipulations.

Owen.

[OwenAus]

Heya, Bob.

Hope your year end was good.
My only way to debug these problems is to see a working example made in Flash and to compare it to what Koolmoves is creating. So I would appreciate a working Flash created example.Lol, okay. I need Flash-MX to do that. But for you, anything ... :D

I just bought the MM package thingie with lots of programs, including Flash-MX. Now all I need to do is understand how it works ... very busy/noisy screen. But when I get it going, will send you a fla & swf.

:)

[bridelh]

Hee Hee...
We won't hear from Owen for a while as he tries to figure out how to use MX :)

Lots of fun though...

Hilary

--

[OwenAus]

hehe.

Well, so far I have figured out how to open the thing ...

:)