Cool animation. Just quickly tried both in Chrome (Mac) Version 22.0.1229.94. The Flash version is smooth and seems to animate perfectly, but the text got fudged.
Whereas the pure HTML 5 version appeared perfect.
Took both up to Speed: 75, and they continued running smoothly. Hope that helps!
Probably an easy fix, but just noticed the "P" in the PREV button in the HTML 5 looks a little weird. Overlapped trigger maybe? Anyway, great job - looks and works fantastic!
Try clicking the same button multiple times on the HTML5 version. The faster button keeps slowing things up after the initial click while the slower button does the opposite.
On both versions I'm seeing the same thing Gerry mentioned re if you keep clicking on faster it gets slower and on slower it gets faster. None of the text was messed up for me. FF 15.0.1
This is a great effect! I did notice a few problems that will only happen when people do silly things:
1. When I slowed down too much it started to rotate backwards (beginning with speed -1).
2. When it rotates backwards for ~45 seconds or so, the continents begin to drift and overlap - see the first image below.
3. When it rotates really fast, some of the lines become black "islands" (the bulk starts with speed +12 and breaks off as an island around speed +20) - see the second image below.
These all happen with both links. It shouldn't be a major issue since (I would hope) few people will do this. I'm a technical writer, though, and tend to test things to extremes.
Looks like I have a bit of tweaking to do but for the most part it's working pretty well.
The odd thing is that both the Flash and the HTML5 versions of Storyline are loading the same animation files. So it should function the same either way but it sounds like there is a lot of discrepancies between the two.
Your demo was looking great. Thanks for sharing the code. I just need a help. I want to show a popup box on hover by getting the value of JSON geojson.feature.id for that particular country. I am awaiting for your reply.
I am swamped in a few projects right now.. I believe what you need to do is edit the Globe library and add a hover event. You will also need to add a json to each country... or compile one dynamically.
Do you plan on pulling the JSON data from an external source?
How did you obtain the Earth.png file? I was able to view the source code and get the JS but can figure out how to get the PNG. I know its in the ZIP, this is just for future reference. Thanks.
16 Replies
Hey James,
Cool animation. Just quickly tried both in Chrome (Mac) Version 22.0.1229.94. The Flash version is smooth and seems to animate perfectly, but the text got fudged.
Whereas the pure HTML 5 version appeared perfect.
Took both up to Speed: 75, and they continued running smoothly. Hope that helps!
Thanks Peter! It looks like the iFrame must be a bit too big in the first screen shot.
Probably an easy fix, but just noticed the "P" in the PREV button in the HTML 5 looks a little weird. Overlapped trigger maybe? Anyway, great job - looks and works fantastic!
A couple of folks asked how I made this; blog post & files: https://elearningenhanced.com/blog/2012/10/11/how-i-made-html5-world-turn-storyline
Try clicking the same button multiple times on the HTML5 version. The faster button keeps slowing things up after the initial click while the slower button does the opposite.
At least that's what I'm seeing with FF15.
Very cool, James!
On both versions I'm seeing the same thing Gerry mentioned re if you keep clicking on faster it gets slower and on slower it gets faster. None of the text was messed up for me. FF 15.0.1
What number does the speed indicate?
I couldn't view either one. I'm using IE8 and get an error message about needing to update the browser.
As I repeatedly click Slower, after it gets to 0, it begins to go faster and shows -1, -2, -3 etc.
Somewhere along the way "Faster" gets confused.
So right now, I've clicked on slower several times and it says -5.
I click Faster several times and the speeds show -4, -3, etc. but the speed is slowing down. Oh, and it's turning counter-clockwise
When I get to 0, it begins spinning clockwise, the numbers increment up, and it DOES go faster
Html 5 version played perfectly for me on an ipad, very cool, great job!
This is a great effect! I did notice a few problems that will only happen when people do silly things:
1. When I slowed down too much it started to rotate backwards (beginning with speed -1).
2. When it rotates backwards for ~45 seconds or so, the continents begin to drift and overlap - see the first image below.
3. When it rotates really fast, some of the lines become black "islands" (the bulk starts with speed +12 and breaks off as an island around speed +20) - see the second image below.
These all happen with both links. It shouldn't be a major issue since (I would hope) few people will do this. I'm a technical writer, though, and tend to test things to extremes.
Using Chrome. http://frameentered.com/demos/globe/story_html5.html animation became see-through. Could see continents in front and back of globe rotating. Whereas http://frameentered.com/demos/globe/story.html the blue was "solid" and i could only see the continents passing by in front of me.
Great animation.
Thanks for the feedback everyone.
Looks like I have a bit of tweaking to do but for the most part it's working pretty well.
The odd thing is that both the Flash and the HTML5 versions of Storyline are loading the same animation files. So it should function the same either way but it sounds like there is a lot of discrepancies between the two.
Thanks again
James
Hello James,
Your demo was looking great. Thanks for sharing the code. I just need a help. I want to show a popup box on hover by getting the value of JSON geojson.feature.id for that particular country. I am awaiting for your reply.
Thanks in advance..
Warm Regards,
Gokul..
Hi Gokul,
I am swamped in a few projects right now.. I believe what you need to do is edit the Globe library and add a hover event. You will also need to add a json to each country... or compile one dynamically.
Do you plan on pulling the JSON data from an external source?
James,
How did you obtain the Earth.png file? I was able to view the source code and get the JS but can figure out how to get the PNG. I know its in the ZIP, this is just for future reference. Thanks.
This discussion is closed. You can start a new discussion or contact Articulate Support.