Flowing Sand Creates Image, You've Seen it, here is how it's done. Rating Options

[the_iceman]

Hello To all,

I've had a few people email me inquiring how get an image to 'steam into place'. I knew this site had tutorials .... sooooooooooo Here I am.

Many of us have seen the effect I'm talking about where it looks like blowing sand across the screen and it creates an image.

I decided to create a tiny tutorial on how to easily create such an effect using a 200x150 image. You will need to adjust any settings based on the image dimensions you might want to use.

Here is the final result: Flowing Sand Creates An Image


1> Open Swishmax

2> Set your movie dimensions to the picture you want to show. In this case I'm going to use a 200x150 image and I will choose 40fps (for fairly smooth movement).

3> Import your image into the content.

4> Create a Sprite and place it at top/left Position of 0x0.

5> Name the Sprite "spImage".

6> Drag your Content Image into the spImage Sprite and reposition the image at top/left position 0x0.

7> Create a Rectangle Shape and label it MASK.

8> Position the MASK object under the image so it is on the bottom layer.

9> Position the MASK object at top/left position of -200x0

10 Modify Sprite Options and select both "Use Bottom Object As Mask" & "Stop Playing At End Of Sprite".

11> on TimeLine Select the MASK object in the spIMAGE sprite

12> Right Click on FRAME 1 of the MASK Object and select the MOVE effect.

13> Double Click on the MOVE effect to bring up the properties of it.

14> Change Frame Duration from the Default of 10 Frames to 200 (this will be a 5 Second Effect)

15> Under the MOTION Tab change the "X position" to "MOVE RIGHT BY" and insert the value of 200.

This will move the mask under the image thus revealing the image slowly. Close the MOVE SETTINGS once you have completed this.

16> Create another sprite in the main scene and place it below the spImage Sprite.

17> Rename the sprite to spFlowingSand. Position the sprite at top/left 0x0.

18 Modify Sprite Options for the spFlowingSand sprite and select both "Use Bottom Object As Mask" & "Stop Playing At End Of Sprite".

19> Create a rectangle object inside the spFlowingSand sprite with dimensions 200x150 and place this

rectangle at top/left position of 0x0

20> Rename the Rectangle Object as MASK. This will be the mask for the spFlowingSand Sprite

21> Insert the same Image you used up in step 6 above the MASK in the spFlowingSand sprite

22> Position the new image at top/left anchor and at location 200x0 (this will position the image just right of the visible stage).

23> Go to the TRANSFORM tab for the Image and resize the width from 200 to 20,000. This will stretch the image to the right.

24> On the TimeLine, select your newly stretched image located in your spFlowingSand sprite and on Frame 1 insert the MOVE effect.

25> Double Click on the MOVE effect to bring up the properties of it.

26> Change Frame Duration from the Default of 10 Frames to 200 (this will also be a 5 Second Effect)

27> Under the MOTION Tab change the "X position" to "MOVE LEFT BY" and insert the value of 20000. This will move the stretched object left 20,000 pixels in 5 seconds. Close the Move Settings once this has been completed.

We have to make a slight adjustment to the movie now. With the way we set up the timeline we are revealing the regular sized image at the same time we are moving the stretched image into the scene. In order for this to 'look right' we need to do the following:

28> HIDE the spImage Sprite.

29> On the Outline Panel, ensure the spFlowingSand sprite is still selected and you can see those objects up in the timeline.

30> Move the timeline scrubber to Frame 1 and move it one frame at a time until you see the bottom image completely covering the stage area. Once it has covered the stage area you now know the frame where you should start revealing the top image. Take note of which Frame this is because you will need to trim the spImage sprite's MASK effect to start on the same frame as where this frame covers the stage area. In my example My Flowing Sand image covers the stage area on Frame 2. This is
where I need to start my spImage Sprite's move effect from.

31> Select the spImage Sprite in the Outline Panel

32> Grab the left side of the MOVE effect on the MASK object and 'shrink' it to the frame where it needs to start displaying (the frame we determined up in step 30). We don't want to MOVE the effect a few frames because we will end up with this effect and the spFlowingSand sprite completing at different times. We want them to finish at the same time. So we will be starting this effect a few frames in.

33> Once you adjust the MASK Object's move effect in the spImage sprite, you are now done. Simply run the movie and you will see your image 'flow in' from the right.

That is all there is to it.

Hope that is clear as mud!

Rather than putting in lots of screen-prints I'll attach the .swi. It is so simple to do this effect you will master it easily.



NEW - NEW COPY OF FILE -  FlowingSandImage.swi ( 10.18K ) Number of downloads: 8779

Hope y'all like it.

Jeff

[*D*]

Hi the_iceman and welcome to 13dots.

This is trully a really neat effect, will definately have a play with this tutorial, thankyou for sharing this with us.

[vndesire]

very neat. thanks so much for sharing!

[Zaigham]

Hi Jeff !

Thanks for sharing really cool tutorial. very well explained

best regards,

Zaigham

[RedDragon]

Great tutorial! Will give this a go soon!

[Phyrriz]

Nice tutorial! Like it :}

[walmarko]

Awesome tute iceman! Thanks for sharing

-Mark

[blueshift]

wonderful tutorial iceman!
Thanks for sharing this

[DPC]

Trully Fantasctic transition and absolute fantasctic easy to follow tut thanks a million for sharing this one with all swishers

Mucho thanks Cheers Patrick

This post has been edited by DPC: Nov 12 2005, 05:10 AM

[BlueHall]

nice tutie there, Iceman. Thx for sharing.

Here is my result. A pic of my niece on a slide in the Caymans.

Also, I changed the Saturation of the spFlowingSand image to 0 and lowered the resolution slightly to achieve slight variation

Anyway, Great tut. simple, but shows the power of the mask.