• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Animation recommendation

Community Beginner ,
Jan 16, 2023 Jan 16, 2023

Copy link to clipboard

Copied

The image below has colored lines with arrows. Any recommenation on how to most efficiently, effectively animate the arrows traleling through the lines?

 

Dvaid

Views

293

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jan 16, 2023 Jan 16, 2023

Copy link to clipboard

Copied

Something like this is not really a good fit for using Captivate's own very limited animation functionality (i.e. motion effects) because you end up having to insert so many different objects and it becomes almost impossible to keep them all moving at exactly the same rate.

 

I have created similar animated flow diagrams in courses about manufacturing processes where I needed to show the movement of liquids and gasses.  But to get sufficient control over the animation I created it in Adobe Animate and then imported it into Captivate as an OAM file.

Process.png

Another option is to create the animation as an animated GIF and bring that into Captivate.  However, in my experience animated GIFs are only good for very simple animations.  For example, I used animated GIFs to replace Captivate's SWF hotspot question animations.

HotSpot_RED_67x67px.gif

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jan 17, 2023 Jan 17, 2023

Copy link to clipboard

Copied

Do you have your manufacturing process liquid and gas flows visible online somewhere? This is exactly what I am trying to do. And/or do you know of lessons for this online? Appreciate any guidance or leads!

 

David

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jan 17, 2023 Jan 17, 2023

Copy link to clipboard

Copied

With Animate

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jan 18, 2023 Jan 18, 2023

Copy link to clipboard

Copied

No. The multi-national oil and gas company that paid me to create those particular training courses would not want me to publish any details of their processing methods on the internet.  I had to sign all sorts of Non-Disclosure Agreements to be allowed access to the information to create those courses.

However, I did place another brief example animation on my website that shows the process of melting down iron ore to make steel.  You can see similar motion arrows in that animation.
https://www.infosemantics.com.au/assets/samples/steelmaking/index.html
This animation was originally created in Adobe Flash and brought into Captivate as an SWF file.  However, since Flash/SWF is now dead and gone, these same animations now need to be HTML5 in order to work in modern Captivate versions.  So, the steelmaking example you see here is actually HTML5, not SWF.
While it is possible to create HTML5 animations in Adobe Animate and bring them into Captivate as OAM (zip) files, you do not normally have any way to control the timeline of the OAM file from within Captivate, which makes it very hard to synchronise audio voiceover with the animations.

Fortunately my son Tristan (WidgetKing) has created a couple of JavaScript plugins that overcome this limitation.  You can learn more about them here:

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jan 18, 2023 Jan 18, 2023

Copy link to clipboard

Copied

I am working on this in Animate. Captivate will not work but I originally though I could.

 

In Animate. A whole file is not needed, but if you could go into more detail on how you animated the 'fluid' dots through the pipe. The example I have been working with is broken down into segments and animated 'fluid' dots in each segment. I have to believe there is an easier way. I assume custom brush would be used.

 

So I am very curious the method you used to animate the dots through the pipes. Are your dots in a single pipe make turns all in one single animation or are the turns and curves in different animation segments masked? My project is dealing with airplane systems (air, oil, electricity, etc).  If you just an example segment in a new movie file. Any help, guidance with moving dots animated through a line, makign turns would be a huge help?

 

David

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jan 18, 2023 Jan 18, 2023

Copy link to clipboard

Copied

Example I was given. How does this compare to how you did it? 

Screenshot 2023-01-18 at 12.10.41 PM.png

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jan 19, 2023 Jan 19, 2023

Copy link to clipboard

Copied

LATEST

The animated arrows are all just instances of a symbol.  The symbol has its own 25 frame timeline of the arrow moving as a classic tween (from left to right in this case) and loops when it hits the end of the 25 frames.

AdobeAnimate_Arrow.png

In the case of the animation above, I wanted the arrow to fade in and out.  So I set up two instances of the basic (non-animated) arrow symbol and tweened them both to get the effect I wanted.  One arrow starts out full strength and fades out as it move to the right.  The other arrow starts out faded and becomes 100% opaque as it moves to the right.  Although this approach might sound counterintuitive, it actually gave me the best result.  You can see both arrows at half strength at this point in the timeline.

AdobeAnimate_Arrow2.png

This all worked fine for me. But your mileage may differ.  In my case all the pipes are joined at right angle bends. No gentle curves.  So basically the arrows just stop at a corner and start again moving in the next direction.  (That's one reason I ended up using the counter-intuitive double arrow animation.  It seemed to look the smoothest.)

 

I found that I had to make sure the animated arrow instances were fairly short to accommodate the pipework.  I was able to shorten or lengthen the animated symbols slightly to make sure they always started and ended at corners.  If I didn't distort the lengths too much, nobody noticed that some were squeezed and some were stretched.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Resources
Help resources