Skip to main content
D
dpz_online
Known Participant
November 2, 2010
Question

CP5 - W7 - TIPS - Motion paths

  • November 2, 2010
  • 5 replies
  • 3755 views

I want to give back a little to this community, I got a lot of answers on my questions. And I am greatfull for the help.

I wanted to animate an image to come up from the bottom, but could not find the right animation path. So...

Follow this guide to learn how.

You can do your own motion paths!

  1. Import an image
  2. Go to Effects
  3. press the f(x) symbol at the bottom right corner of the effect
  4. go to browse
  5. motion paths
  6. right-click on LeftToRight.xml and choose copy
  7. paste it in again and you will have something like LeftToRight-copy.xml
  8. right-click on LeftToRight-copy.xml and chose to edit, preferebly in notepad

The code you will see

<Motion duration="60" xmlns="fl.motion.*" xmlns:geom="flash.geom.*" xmlns:filters="flash.filters.*">
<source>
  <Source frameRate="30" x="51.7" y="75.2" scaleX="1" scaleY="1" rotation="0" elementType="movie clip" instanceName="abc" symbolName="Symbol 1">
   <dimensions>
    <geom:Rectangle left="-97" top="-50" width="97" height="50"/>
   </dimensions>
   <transformationPoint>
    <geom:Point x="0.5025773195876289" y="0.505"/>
   </transformationPoint>
  </Source>
</source>

<effect_config  effect_type="motion_path">
</effect_config>

<Keyframe index="0" tweenSnap="true" tweenSync="true">
  <tweens>
   <SimpleEase ease="0"/>
  </tweens>
</Keyframe>

<Keyframe index="59" tweenSnap="true" tweenSync="true" x="400." y="0">
  <tweens>
   <SimpleEase ease="0"/>
  </tweens>
</Keyframe>
</Motion>

The code you easy can undestand

In the begining it says duration="60"

<Motion duration="60" xmlns="fl.motion.*" xmlns:geom="flash.geom.*" xmlns:filters="flash.filters.*">

More below in the code you see:

<Keyframe index="0" tweenSnap="true" tweenSync="true">
  <tweens>
   <SimpleEase ease="0"/>
  </tweens>
</Keyframe>

<Keyframe index="59" tweenSnap="true" tweenSync="true" x="400." y="0">
  <tweens>
   <SimpleEase ease="0"/>
  </tweens>
</Keyframe>

0 to 59 is 60 steps

You can by altering these values choose how long an object should move.

Examples:

  1. Left to right: tweenSync="true" x="400." y="0"
  2. Right to left: tweenSync="true" x="-400." y="0"
  3. Top to bottom: tweenSync="true" x="0." y="400"
  4. Bottom to top: tweenSync="true" x="0." y="-400"
  5. Mov to left lowe corner : tweenSync="true" x="400." y="400"

Continue with task

  1. Change the settings in your file LeftToRight-copy.xml and choose to save and close.
  2. Rename LeftToRight-copy.xml to for instanse TopToBottom.xml
  3. choose that path and animate your image
  4. Preview in browser (F12)

Thats it you can do it!

// Daniel

This topic has been closed for replies.

5 replies

FerroSulaco
FerroSulaco
Known Participant
November 14, 2014

I've done this before, but when I try to do it now I cannot see the motion icon on the object.  Is there a setting or something that I have turned off?

D
delaor
Participant
August 30, 2011

Thank you so much for this post!  This is exactly what I needed.

A
Anonymous
August 16, 2011

Just wanted to write and say Thank You for this post thread. I had been wondering if there was a way to create custom motion paths (without being an ace xml or flash programmer!) and have just found this thread!!!

Thank you for the information. That little light blue symbol is hard to spot, and i've seen nothing in documentation about it. Wouldn't have known it was there if it wasn't for this post!!!

many thanks, off to read Lilybiri's blog about it now too.

Loraine

C
chuckejpiano
Participating Frequently
February 11, 2011

This is very helpful - but does anyone have experience modifying Custom Motion Paths already part of Advanced Actions?

I'm using a custom motion path in part of a sequence of events in an advanced action - and changing the customized xml source does not seem to change the behavior of the custom motion path -which needs to be tweaked just a little to match up as I'd like.

I'm wondering if the custom motion path specified in an advanced action is somehow saved/compiled somewhere else during the creation of the advanced action - and does not reflect subsequent updates to the custom path source xml?

dannyhouk
dannyhouk
Inspiring
November 18, 2010

DPZ,

That is awesome, I was kinda curious about exporting/importing effect XMLs. Thanks for the tutorial.

I too wrestled with getting objects to animate the way I wanted. However, I found a different way to achieve what I think is the same thing, and it was all from the interface rather than the XMLs. There is shockingly spare information online and in help about the Cp5 effects, so I'll share this too in case it's helpful...

First, from the Effects tab I did Add Effect (fx symbol) > Motion Path > LeftToRight. In my example below I added it to a text caption.

Second, if you look closely at the object amongst the resize handles, you'll see a very small teal box in the lower-right corner. Click on it and you'll see a red arrow appear on top of your object (see below).

That red arrow represents the start and end points of your motion path. So lastly, you can click on either the red "begin point" square and place it where you want, or click on the green "end point" arrow and place it where you want. Dragging the animation duration in the effects timeline will set how long it takes to complete the motion.

So far in my experience, this works with any effect that is motion-based. I used it quite a bit on the Entrance and Exit set of effects.

    Lilybiri
    Lilybiri
    Legend
    November 19, 2010

    Hello,

    I blogged about motion paths some time ago and about reusing customized effects, perhaps this can be a supplement to the great postings in this thread:

    editing motion paths and ....

    Lilybiri

      dannyhouk
      dannyhouk
      Inspiring
      November 19, 2010

      Lilybiri, awesome tutorial! As I commented, that would've been handy weeks ago when I was searching for Captivate 5 effect tutorials. Didn't realize there was an effect with zig-zag motion paths. Have you found a motion path animation in Captivate that is rounded/curved? Maybe in a Cap 6 iteration.

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices