CP5 - W7 - TIPS - Motion paths

Question

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!
Import an image
Go to Effects
press the f(x) symbol at the bottom right corner of the effect
go to browse
motion paths
right-click on LeftToRight.xml and choose copy
paste it in again and you will have something like LeftToRight-copy.xml
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:
Left to right: tweenSync="true" x="400." y="0"
Right to left: tweenSync="true" x="-400." y="0"
Top to bottom: tweenSync="true" x="0." y="400"
Bottom to top: tweenSync="true" x="0." y="-400"
Mov to left lowe corner : tweenSync="true" x="400." y="400"
Continue with task
Change the settings in your file LeftToRight-copy.xml and choose to save and close.
Rename LeftToRight-copy.xml to for instanse TopToBottom.xml
choose that path and animate your image
Preview in browser (F12)
Thats it you can do it!
// Daniel

Answer 1

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.