Hello,I have created a vertical decision tree in Visio Pro and exported it to Illustrator and then imported the diagram into Animate. Due to the complexity of the decision tree, I would like to create an "Interactive" decision where the tree begins with a single box and is subsequently drawn depending on the rectangles clicked by the user. My strategy wasconvert all the rectangles and connectors to symbolsassign an instance name to each symbolexcept for the topmost button, make all the other symbols invisibleadd Mouse Click Event Handlers to each button that depending on the button clicked would make the relevant symbols visible or invisible accordingly.Due to the complexity of the diagram and the large number of resulting symbols, using instance names in the Event Handler would quickly become cumbersome. So the two ideas I had in mind:create an array containing the relationship between the symbols, that would indicate the relationship between instance names, and then loop though all the symbols in the event handler and look for a match for the currentTarget to make it visibleLoop through all symbols, and check if symbol is connected to currentTarget AND is lower on the y-axisAlthough, this would seem like a common question, I was not able to find much info on creating "Interactive" diagrams using Animate/Flash. Please let me know your thoughts.Thanks!Joe

Participant

Question

Creating an interactive decision tree

Forum|Forum|7 years ago
June 5, 2018
2 replies
4614 views

Hello,

I have created a vertical decision tree in Visio Pro and exported it to Illustrator and then imported the diagram into Animate. Due to the complexity of the decision tree, I would like to create an "Interactive" decision where the tree begins with a single box and is subsequently drawn depending on the rectangles clicked by the user. My strategy was

convert all the rectangles and connectors to symbols
assign an instance name to each symbol
except for the topmost button, make all the other symbols invisible
add Mouse Click Event Handlers to each button that depending on the button clicked would make the relevant symbols visible or invisible accordingly.

Due to the complexity of the diagram and the large number of resulting symbols, using instance names in the Event Handler would quickly become cumbersome. So the two ideas I had in mind:

create an array containing the relationship between the symbols, that would indicate the relationship between instance names, and then loop though all the symbols in the event handler and look for a match for the currentTarget to make it visible
Loop through all symbols, and check if symbol is connected to currentTarget AND is lower on the y-axis

Although, this would seem like a common question, I was not able to find much info on creating "Interactive" diagrams using Animate/Flash. Please let me know your thoughts.

Thanks!

Joe

This topic has been closed for replies.

C

ClayUUID

Legend

AS3 or Canvas?

josephi21138216Author

Participant

Hello Clay,

Thanks for your note. I have started with AS3, but I could change to canvas if you think it is the better approach.

C

ClayUUID

Legend

If you intend to put this on a public web site, you should be using Canvas.

albertd9194959

Inspiring

Hi josephi211......

Here is a nice articles that outlines handling events on many objects.

Handling Events for Many Elements | KIRUPA

Adding an image of said tree would be helpful.

Regards,

josephi21138216Author

Participant

Hi Albert,

Thank you for the link, it is helpful, but it begs the question on how to determine the "child" objects and its "parent". Also this appears to be in JS while I am trying to do something using AS3. Please see below partial snapshot of the tree. What I am trying to do is instead of

having the full static diagram, i would create an interactive tree, where initially only the "A" box would be visible, but clicking on the "A" box, the "B" and "C" box will appear, and then clicking on the "B" box, the "D" box will appear as well, and so on. Or moving backwards, clicking on the "A" box will make all the other boxes disappear with the exception of "B" and "C".