First off I have to say kudos for an amazing program that by far exceeds Edge in so many ways. I am currently redoing an Org chart project that was made in Edge and found out that it took me half the time it took making it in Edge.
Like I said above I am making an Org Chart project and I have all our team members displayed with animations in the main timeline. Everything works great on the main timeline showing the team members. Next I want to be able to hover over a team member and have it show a popup bio for that team member. I tried doing this and found out once you create a new timeline that all the main timeline library asset layers follow you to the new timeline. I then had use jscript to show/hide those resources on initial load of that timeline. I want to see if this seems to be the correct way of going about making what I need happen.
I would have to make 20+ timelines with multiple show/hide codes on initial load and these seems like so much work compared to an easier method. Am I not seeing an easy way of doing this? I figured I could click the show/hide element option and it would only do that per timeline… That is not the case.
Any help would be great and I appreciate any input as I am wanting to go about this project the smart way.
I’d probably just change the innerHTML of the elements, so I could load a picture / biography dynamically. Depending on which button is pressed, the proper content is displayed.
Preloading is an issue, as it’s a lot of images to load at once. Yet, if the artwork is not preloaded, then the project could flicker as images are loaded in.
Are you saying name all of the button elements the same for example and then call that one button background when needed? Wouldn’t that show all of them at once? The example org chart is right here: http://www.federatedmedia.com/orgchart/Org%20Chart.html
What I am trying to do is just hover over a name and have a popup bio show. Not sure the best route to do that as far as the least amount of congestion in the timeline.
You can use the Element Inspector. (⌘4) and choose which elements you want to be hidden by ticking the checkbox
You can also do this in the timeline as an action for future reference
I have also given an example based on your request. It's a flow chart where when you mouseover any of the element in the flow chart a popup will appear with information relating to the ID of the element in the flowchart.
for example:
ID = wayne then when mouseover'd the innerHTML of the popup elements will populate based on that ID. Picture, Meta data, Text ... and when another element with a different ID is mouseover'd it will change based on that ID.
Thanks for the reply DBear! I tried doing this but once I hid it from one of my timelines it also hides it from the main timeline. That would answer my problem if I could just show and hide the element per timeline.
Put a property action at the beginning of the timeline and choose display. Then when you choose hidden in the Inspector it will hide it on that timeline only
On the Main Timeline make sure visible is chosen. You only need hidden chosen when on that property action
Note: I used a symbol but you could just as easily group the items together. Using a symbol mean I can duplicate it anywhere in the site and still use it.
@DBear I tried adding in your function and using the hover over on the name “Paul Altman” and I am having issues, can you take a look? Any help would be appreciated, kind of in a time crunch on my end and if I could just get a sample of one working I can replicate. BTW thanks for all your help!
Hi Wayne, It’s more difficult when you share the exported document. Can you share the Hype document. (before export) It’s difficult to see what you’re doing. I can see that you’ve added 2 functions and lots of style.display = … but nothing that resembles my function
If you can share your document I’ll be able to knock something up quite quickly.
This is simply copying the symbol into your scene, creating the timeline popup and copying the timeline actions from Dbears popup timeline for the symbol, selecting the new symbol in yours and pasting the timeline actions.
Then add the function.
And mirror what Dbear has done in the mouse over and mouse out actions for the element.
Lastly give the element an id matching one of the functions Switch values.
or @MarkHunte can do it for me and yes lucky the restore file was there. Be sure to replace the image and info in the function and you should be good to go.
@MarkHunte and @DBear You two are awesome people! I actually was using Hype 3 to do most of the work until you sent me back the project which I could not save or export until I got the Pro Version. I easily bought the Pro version and then used the method you gave me to make it work the way I wanted it to. Everything is working great and I appreciate both of your quickness and expertise!
and yes lucky the restore file was there. Be sure to replace the image and info in the function and you should be good to go.