Import a sequence of images?

(lee) #1

So I have read through some other Threads here, I have 40 images that are a PNG sequence ready to be imported into Hype just so it plays a gif animation on Click…

So… do I have to make my own sprite sheet first, then create a mask and then move the sprite sheet into frame for each millisecond and set Keyframes?.. is there a “Toggle Hold” Keyframe?

I saw another way using Javascript but I am not good enough in code to use that yet…

In Animate CC I can literally drag and drop a sequence and it will just put it frame by frame?

I did read other threads! but still just want clarification :slight_smile:

(lee) #2

A bit more information!

One of our competitors is this company below, they only use Hype… I am trying to re create some of their banner ads so I can match their level of skill… I am SO shocked how they are creating this PNG Sequences… No sprite sheet? did they create this manually by Hiding/Showing Opacity!


Sadly, this was not built with only Hype. It involves a lot of other code to control the outcome which is, to say the least, more advanced.

Answering your first post though … and I assume that the guys at GumGum created a timeline and placed the PNG images in specific frames since they are using build 522 :open_mouth:

There will be (quite soon) the ability to insert a sprite sheet into Hype if you create your own. This is a feature for v4. Shh … you didn’t hear that from me.

At the moment, the only way is manually placing the PNG images and animating them. And as you mentioned one can use code also.

Not to say there aren’t other ways but I would think that code is going to be involved to get to a level of those guys at GumGum.

(lee) #4

:open_mouth: thanks so much for the detailed reply, in the mean time I do mind doing it manually as it is something I slightly enjoy… but the fact it is coming into v4 is exciting stuff!

We also have coders at our place now, but I am going to a new job and I am trying to make a good solo impression!

Final question, can you toggle hold keyframes in Hype? Example, if I move something A to B, I want it to instantly appear… rather than travel across. In Animate CC you can just delete the layer off other frames ( just shorten the length of the layer ). The only way I seem to see in Hype is to move 1 keyframe and Change opacity from 0 to 100, is this the best/only option?



This is to the right of the properties window (under timeline window) and the drop down gives you these.


instant is probably what you need.

(lee) #6

Ah !!! Fantastic :slight_smile: right time for manual animating a sprite image :stuck_out_tongue: thanks again


no worries … just an FYI for the forums. If you reply direct to a users post then they get notified. Also, if you want to grab someone’s attention or mention them in regards to a post then us an “@” before their name like @tekkon :wink:

If you use the reply button at the bottom of the post it doesn’t notify anyone. Which is fine if you don’t need a response (soon) :slight_smile:

(lee) #8

ahh… I am too used to Slack!

I am really enjoying hype and the forums so thats for the guidance on this too. I will drop an update on the Animation later as well :smiley:


Just to expand things a bit - if You are looking to do higher level of manipulation with image sequences - i.e. not banner ads - Photoshop just simply kicks it - a stunning image~video editor for short sequences (approx. 1 minute or whatever your patience level is).

Mobile phones~tablets are optimized for .mp4. So extended PNG sequences will do better converted back to video. Where’s the trade-off? I’m not exactly sure but this file (highly manipulated in Photoshop) choked my iPhone 4s as a PNG sequence but played smooth as silk as a video. Obviously the 4s is a dinosaur but it demonstrates the principle.

(lee) #10

When I am working with Dedicated interactive Web pages or anything that doesnt demand instant loading times then I can be very flexible. However currently I am focusing on Banner Adverts, so I am going through GWD and Animate cc and now Hype to see the benefits of each.

The reason I want PNG Sequence is to start using small animations within banner ads to add more motion/interest ( potentially this is a terrible idea as the file size may be too big, but this is why I am experimenting). Here is what I finally created using Hype with a PNG Sequence. The primary selling point of this ad is that it will overlay News article images on the Webpage - Hence the need for transparent background.

My version -

This is copied from a company called GumGum which specifically uses Hype only ( I mentioned this in another post )

So I am basically studying and researching other web banners and finding ways I can incorporate them into my Work flow.

Sorry for the essay!

Also like to add, I am LOVING hype at the moment


Nice adaptation!

My previous post wasn’t for your current need specifically - just to demonstrate other possibilities. :sunglasses::notes:

(lee) #12

Yes I think its super important to use videos over png sequences, especially as you have zero restrictions with videos !

Thanks by the way :slight_smile:

(lee) #13

:O!!! hahaha… best section of the video so far