Jump to content


Photo

Morphing - A Discussion And A Couple Of Examples


  • Please log in to reply
49 replies to this topic

#1 David Petley

David Petley

    Advanced Member

  • Admin
  • PipPipPip
  • 7111 posts
  • Gender:Male

Posted 20 October 2010 - 01:36 PM

Hi,
I decided to start this topic because I was contacted last night by a user asking how to use the feature.

The Help file explains what it is, but not really how to use it -

Morphing, also called Shape Tweening, makes one shape appear to change into another shape over time. SWiSH Max can morph the position, size, and color of shapes. Morphing can be applied to any Simple Shapes. Easing can also be applied to Morphing.


You need to become familiar with your sub-selection tool on the Layout panel, as this is how you manipulate your shape at the keyframe.

The simplest way to see how it works is to do it really, so -
Step 1) Draw a shape on the stage.
Step 2) double-click in the shape timeline to add a Move effect
Step 3) On the Effects panel, tick the 'Morphing' checkbox
Step 4) Select the Sub-selection tool (see Subselection Tool in your help files) and drag the vertices of your object to new positions, change the angle, whether the vertices are sharp or smooth.

Play your movie. You should see the shape morph smoothly from your starting object to your object at the move effect key frame.

Here are a few examples I made earlier while playing -
http://www.davidp-in...phMovie018.html
http://www.davidp-in...eAnimation.html
http://www.davidp-in...Movie07_01.html
(that one uses the morphing shape in the clipClone component)

http://www.davidp-in...hExample01.html
I have attached the .swi file for the last one created in the beta. Click on the keyframes at the end of the move effects in the timeline to see how I manipulated the vertices at each point.

davidp

Attached Files


http://blog.swishzone.com/ ...for cool tutorials, samples and new components


#2 browndrake

browndrake

    Advanced Member

  • trusted uploaders
  • PipPipPip
  • 3263 posts
  • Gender:Male
  • Location:usa

Posted 20 October 2010 - 02:35 PM

Nice examples.

Thanks

aaron

#3 Josui Katayama

Josui Katayama

    Advanced Member

  • sdistrib
  • PipPipPip
  • 180 posts

Posted 20 October 2010 - 02:36 PM

Is the Max4's morphing limited to a single shape? I'd like to put two independent shapes on the stage, and achieve morphing between them, as you do in Adobe Flash. Is that possible?

Josui

#4 David Petley

David Petley

    Advanced Member

  • Admin
  • PipPipPip
  • 7111 posts
  • Gender:Male

Posted 20 October 2010 - 02:46 PM

Is the Max4's morphing limited to a single shape? I'd like to put two independent shapes on the stage, and achieve morphing between them, as you do in Adobe Flash. Is that possible?

Josui


It doesn't work in the same way as Flash, Josui, but you could do something similar I guess, by having a locked shape as a template for what you want the original shape to morph into, and then dragging the vertices of your start shape to match the template you have for the end shape, deleting the locked template shape when you had finished.

I have done a little work with adding vertices at my morph keyframe, and that seems to work, so a shape can get more complex. you can also change the way the shape line passes through the vertices (Sharp, Smooth, Cusp, Symmetrical, etc.) Another thing i noticed is that you can change the line width at the morph keyframe and the line width morphs.

davidp

http://blog.swishzone.com/ ...for cool tutorials, samples and new components


#5 browndrake

browndrake

    Advanced Member

  • trusted uploaders
  • PipPipPip
  • 3263 posts
  • Gender:Male
  • Location:usa

Posted 20 October 2010 - 02:47 PM

I'd like to put two independent shapes on the stage, and achieve morphing between them, as you do in Adobe Flash.


That would be very nice!

aaron

Edited by browndrake, 20 October 2010 - 02:48 PM.


#6 Jon Herron

Jon Herron

    Advanced Member

  • Admin
  • PipPipPip
  • 1234 posts
  • Gender:Male

Posted 20 October 2010 - 03:32 PM

Hi,

Here is a screencast that was made for an upcoming blog article. It shows how to morph a circle into a rectangle.

The same procedure could be expanded to morph the circle into any shape by dragging the vertex handles via the sub selection tool

Jon
For News, tips and tutorials checkout the blog at http://blog.swishzone.com
You can also follow us on Twitter: http://twitter.com/SWiSHzoneDOTcom

#7 browndrake

browndrake

    Advanced Member

  • trusted uploaders
  • PipPipPip
  • 3263 posts
  • Gender:Male
  • Location:usa

Posted 20 October 2010 - 03:34 PM

edit..

link working now

Edited by browndrake, 20 October 2010 - 03:35 PM.


#8 Josui Katayama

Josui Katayama

    Advanced Member

  • sdistrib
  • PipPipPip
  • 180 posts

Posted 20 October 2010 - 04:52 PM

A main reason why I asked about morphing between two independent shapes is that with such a feature, you can re-use imported shapes created with an external drawing application, and make them into nice tween animation.

I can think of another example which takes advantage of it. Consider creating morphing between a letter "T" into "I". At the moment, you have to first type the letter "T" and convert it into a shape, and, then, edit the vertices to make it into a letter "I". Well, it's not easy to do that nicely, isn't it? If you could simply type two letters and convert them into shapes for morphing, that is a lot easier to do and produces better result.

Thanks,

Josui

#9 David Petley

David Petley

    Advanced Member

  • Admin
  • PipPipPip
  • 7111 posts
  • Gender:Male

Posted 21 October 2010 - 07:51 AM

I mentioned above that I had played with adding vertices to my shape to make it more complex, and also using a locked 'end shape' as a template for my end object in the morph.

This movie shows (at low alpha) the ultimate end shape of a bunch of morphing circles. I used one of the Shapes components - 'Angel' for my end shape (normally, I would delete that before exporting the movie).

http://www.davidp-in...ple02angel.html

You can see that the harp has a lot more vertices than a circle does. A circle has 4. The harp has around 30. I added vertices at the morph keyframe, dragged them into position, sharpened some of them, smoothed others, made others 'cusp', and then dragged the control points around until I matched the original.

Below is the .swi file for that movie. Working with the sub-selection tool is time consuming, but with patience and perseverance the results can be excellent in terms of morphing.

Attached Files


http://blog.swishzone.com/ ...for cool tutorials, samples and new components


#10 David Petley

David Petley

    Advanced Member

  • Admin
  • PipPipPip
  • 7111 posts
  • Gender:Male

Posted 21 October 2010 - 10:39 AM

here is the movie without the angel component, and slight adjustments to timing.

http://blog.swishzone.com/ ...for cool tutorials, samples and new components


#11 David Petley

David Petley

    Advanced Member

  • Admin
  • PipPipPip
  • 7111 posts
  • Gender:Male

Posted 03 November 2010 - 11:01 AM

here is another example I posted in another topic, in case anyone is tracking this topic for morph examples -

Snowball to Snowman

davidp

http://blog.swishzone.com/ ...for cool tutorials, samples and new components


#12 ruined

ruined

    Advanced Member

  • Members
  • PipPipPip
  • 83 posts
  • Gender:Female

Posted 05 November 2010 - 10:26 PM

is it like a shape motion tween in adobe flash.. i just saw it.

#13 David Petley

David Petley

    Advanced Member

  • Admin
  • PipPipPip
  • 7111 posts
  • Gender:Male

Posted 08 November 2010 - 05:43 PM

is it like a shape motion tween in adobe flash.. i just saw it.


I guess so, although I haven't actually opened Flash in about 8 years, so it is hard to remember or know.

davidp

http://blog.swishzone.com/ ...for cool tutorials, samples and new components


#14 ruined

ruined

    Advanced Member

  • Members
  • PipPipPip
  • 83 posts
  • Gender:Female

Posted 09 November 2010 - 08:23 AM

i wanna know how to work with that morphing :) i want the angel morphing that you made

#15 David Petley

David Petley

    Advanced Member

  • Admin
  • PipPipPip
  • 7111 posts
  • Gender:Male

Posted 09 November 2010 - 08:43 AM

i wanna know how to work with that morphing :) i want the angel morphing that you made


You can download the .swi file for that movie from my post above.

The process I followed is the same as described in the Snowball to Snowman tutorial on the blog - http://blog.swishzone.com/?p=5742

davidp

http://blog.swishzone.com/ ...for cool tutorials, samples and new components





0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users