Animation to show network flow


(Hugh Hyndman) #1

Hi,

I am an absolute newbie using Hype (just installed it today) with hopes that I could put a simple network flow diagram together for a presentation (I gave up with PowerPoint). I would like to show moving dashed-line (moving to right) to depict data moving through the network.

I’ve tried a few things: 1) created many “dashes” and tried to move each along a path and restart the timeline to make it look like continuous flow. 2) created a JPEG and tried to do something similar (at the end of the timeline, start at the beginning).

In both cases, I couldn’t get the flow to look smooth when the timeline ended. I searched the forum and looked at a lot of samples, but couldn’t see anyone doing what I wanted to do.

Thank you

/H


(Jonathan Deutsch) #2

To provide accurate advice it might be useful if you had some sort of pre-existing example to post?

(also I’ll note that Hype v4 might have a feature that could help with this, feel free to apply for the beta here.)


(Hugh Hyndman) #3

This is wanted to achieve, but have the animation continue to be smooth on repeat.

dataflow.hype.zip (15.4 KB)


#4

Hi Hugh - Welcome to the Forum!

Attached is Hype Project Demo: dataflow JHSv1.hype.zip (24.5 KB)

There are two different approaches used in this Demo:

The “Original” approach with your JPG image for the dotted line and another that I added utilizing one of Hype’s native drawing primitives (rectangle) to replace the JPG; and also a Symbol - more info on these approaches below Fig.1:


Fig.1 “JPG” and “Rectangle & Symbol” screen shot


The “Original” Approach - Adjustments
I made two changes to your original to get a smoother flow…

1) Unchecked the “Position with CSS left/top” in the “Document Inspector”


**2)** Adjusted the "left" property of the JPEG pixel by pixel until it matched the restart flow - trial and error, took about 30 seconds.

Below your “Original” line animation, as mentioned previously, is another using a…


“Rectangle & Symbol” Approach

The rectangle (named “Dotted Rect” in the Demo) has in the “Element Inspector” the side & bottom border properties set to “None”. The top border of the rectangle (which creates the dotted line effect) is set to a blue color; 11 pixels wide; style set to “Dotted”.

By using Hype’s native primitive You can easily draw (and change!) your rectangle’s length (or height if a side border was used instead), border width (dot dimensions) & color - while lowering file size and server load.


If You are not familiar with Hype’s Symbols (Pro version only) you can read more about them in the Documentation here. Symbols are a perfect match for creating repetitive animations - which it sounds like You are designing with your network flow animation.

In the Demo the “Dotted Rect” - which creates the dotted line - is inside a Symbol. This Symbol has its own timeline which runs its dotted line animation - as does Hype’s “Main Timeline” for your “JPG” version.

Also notice in Fig.1 above… the rectangles on each side of the Symbol’s animated dotted line do not need to fill a particular amount of physical space in order to cover the hidden part of the line. The Symbol has its “Content Overflow” set to “Hidden”. By hiding the “Overflow” You are freed from the restriction of having your design dictated by the need to cover the animated lines, which should open up more design options.

By duplicating this Symbol You can quickly replicate the dotted line animation as many times as You like and easily change a property, such as the color of the animated line, just by modifying one of the symbols; and all the other duplicates of that Symbol will automatically change that property as well.


(sa1) #5

hello. Basically you can

  • create a long dashed lines in you vector editor software (assuming it’s straight lines)
  • import it in SVG in hype
  • put it in a group with overflow content visibility set to “hidden” ( the group must have a smaller width than your line)
  • create a looping timeline to move your line the proper amount inside it’s group container (a “dashed unit”)

Here you can find an example of this technic
https://sierraechobravo.com/hype/dessalinisateur/

As Jonathan said, Hype 4 will greatly help you achieving what you’re looking for. You should give the beta a try
see sample demo here
https://sierraechobravo.com/hype/cardiac-cycle/


(Hugh Hyndman) #6

Thanks for the great ideas and a “leg up”.

sa1: I really like that your animations and they are similar to what I want to achieve.

Jim: Thank you for the solutions.