I’ve used Hype exclusively for banner ads, so this is new territory for me. What I want to do is create a page that will shuffle through a few photos while 12-15 stars twinkle around the perimeter (for a long time), seemingly randomly.
I felt like the smart approach was to have a single star as symbol and scatter them throughout. But I want them to twinkle at different times, with only some of them visible upon page load.
What would be ideal is to slide some of the symbols’ timeline to start before 00:00, but that’s impossible. My workaround to that is to have 2 star symbols, 1 that starts at 100% opacity and 1 that starts at 0% opacity, and stagger their start times.
This is a pretty good solution, but is there a better way to construct the desired effect in Hype? File attached: holiday page.zip (16.6 KB)
So, a similar question was mentioned on the forums before. That's when I made the "Fishy" template.
Creating the particles manually makes it harder (perhaps impossible) to randomize — without coding. That's why I usually use JavaScript to create particles. You can see an example of this in "Circles with Grandma".
Basically, JavaScript is used to create and animated circles with SVG. They move randomly.
At the start of the scene, you could just move the timeline of the Symbol with JavaScript. That would essentially create the same effect.
The first post in this thread might be the information you're looking for. Just use the... symbolInstance.goToTimeInTimelineNamed(timeInSeconds, timelineName) ...Hype API instead.
to play a symbolstimeline of a randomsymbol at a randomtime in a range.
put it on sceneload. set your targetSymbolName, targetTimelineName, minTime , maxTime ...
//settings
var targetSymbolName = 'yyy';
var targetTimelineName = 'test';
var minTime = 100;//milliseconds to wait
var maxTime = 750;//milliseconds to wait
//end settings
var symbolInstances = hypeDocument.getSymbolInstancesByName(targetSymbolName);
var timeout = randomNumber(minTime, maxTime);
initSymbolTimeline(timeout);
function initSymbolTimeline(awaitInMIlliseconds){
setTimeout(function(){
var symbol = getFreshSymbolTimeline();
symbol.startTimelineNamed(targetTimelineName, hypeDocument.kDirectionForward, false)
timeout = randomNumber(minTime, maxTime);
initSymbolTimeline(timeout);
}
, timeout);
}
function randomNumber(min, max) {
return Math.random() * (max - min) + min;
}
function getFreshSymbolTimeline(){
var isPlaying = true;
var symbolInstance;
while(isPlaying){
symbolInstance = symbolInstances[Math.floor(Math.random() * symbolInstances.length)];
isPlaying = symbolInstance.isPlayingTimelineNamed(targetTimelineName);
}
return symbolInstance;
}
Only thing with the code example is it seems to use a high cpu, it may be the frequency of the timeout.
I am thinking little simpler and less overhead, may be to just randomise the symbol selection ( in @CheeseDeluxe case he has two sets , so I just did two functions to run side by side on sceneload)
And at the end of the timeline in the symbols change the keyframe action to call the relevant function to run again.
