Hi Nick.
Thanks for sharing the document. Nice use of symbols.
I’m still looking though for a better approach to inserting the individual
frames. This is a very weak point in Hype.
The need to stretch each object on the timeline, fade it in and then fade
it out again, is very laborious and clumsy.
As much as I hate flash, itsability to simply place an object on a "frame"
is infinitely more efficient.
Even video editing tools like Premiere which use absolute time lines and
not frames, allow the batch insertion of a sequence of static images with a
set time span for each.
To my mind, this is currently one of the weakest parts of an otherwise
excellent tool. It limits its use for real frame by frame animation.
Iv’e tried converting animation elements to animated gifs and importing
them. This approach works, however gifs are by nature ever looping elements
which don’t have any start and stop control (correct me if I’m wrong), and
this makes interactive control of the elements very difficult. If there
would be a simple way of placing an animated gif on stage and having it
remain static until activated, then this would be a fairly good work around
until Hype adds a better solution.
Any ideas would be great.
Thanks.
Moshe
One technique that speeds up the frame animation process is copying and pasting keyframes. Let’s say you have a huge set of images (or several groups of elements) that you want to fade between. Fade one of the groups out, then copy and paste that animation to each of the other elements or images. This action can then be repeated and the animation adjusted to speed things up:
(While this is Hype 2, the same workflow applies).
FYI this set of images was exported as frames from a GIF in Photoshop.
Hi - I’m new - trying out your product for 14 days. Searching for a tool to grow with.
This is an extremely clumsy way to animate a bunch of frames.
Is there not another way?
In edge animate you can use sprite sheets. I understand this is possible with HYPE.
I am guessing you want me to put the sheet into a group or something.
Have you seen how Edge animate does it? ( masking ). Why is this not possible in Hype?
Also, if image masks are not possible, one way might be to make an actual mask using alpha channels.
Does HYPE support alpha channels?
Thanks for your replies and look forward to getting to know your product.
Yup! In elements, you can adjust the opacity of one of the colors in a gradient, and you can use standard images like PNGs and GIFs with transparency.
Hi Daniel,
I’m looking for this how-to (Importing image sequence), and I still don’t understand because it looks for me so much instinctiv and logical,
Why not simply,
by draging some selected images (xx_1.png + xx_2.png + xx_2.png + etc…) from outside (OSx/finder…):
And dropping them:
-
In the SCENE, thus we have severals “symbols” created as on your vid
This is good point for users who need opacity fade in/ou transition from a symbol to another as eg, btw more flexibility given that we have 1image for 1"object" in timeline -
In an OBJECT in timeline
So we have the images sequence automatically compiltated by frame: 1image by frame
xx_1.png frame 1
xx_2.png frame 2
xx_3.png frame 3
etc.
(all put on X0/Y0 by default - here too some click for less)
This is good point for productivity (what you finally do on your vid in “1 secund”), for user who intend kind of universal (all browser as mobile) short video sequence with no players “contrarities”.
From my pov, this’ll be more and more used in ext gen webdesign (+sprites)…
Would be great, time earned, more design possibilities, leverage in creation, and so coherent and spontaneous in term of HCI/Wysywig… from my pov off course. (In fact the sequce image importing as I present here is a lack I feel for a while so many times)…
Maybe other solution in term of codingif possible with hype “core”, hav a look with Motion, by dragin’n drop, a tiny popup ask you how you want to import the images: sequence (image by frame) or somethin else (dont remember)…
Edit:
… in scene or left timeline frame outside any symbol/object
Vs
in a symb/obj
btw 
Edit:
It seems to be a bug on exporting .html “render” once you put an x25 images sequence as symbol as as long list in left frame (as done in the vid upper).
In fact, once the sequence exists (at frame 50 for me), the animation doesn’t start properly in html, first frames aren’t properly ridden, as if it jump directly at frame 30.
By deleting all ways with images sequences, html animation starts properly…
This is a big deal for me, as I can have the background art load from the page and have the hype content on a layer. This makes it possible to have a variety of animated elements over a background, either as a single Hype animation with Hype controlling the relative positions or as a set of individual animations that can easily be rearranged on the fly in the web design app for tweaking responsive layouts.
That’s not the best solution. It will cause the hype file too big. Just one simple layer can do this. See how I made.
Frame Animate.hype.zip (383.3 KB)
Find a more quick way to do this. The idea from reel JS, but I don’t know how to disable the rotation function. If anyone know about it, please let me know.
Here is the sampleFrame_Animation_V2.hype.zip (217.3 KB)
My 2 cents, here's how i animate sprite sheets in hype. I use greensock in hype to do that part
So i make the massive sprite sheet, disable constrain proportions. Make the image width the width of the first frame
Then I do
var imageWidth = "THE WIDTH OF YOUR FRAME HERE", frameCount= "The amount of images"; TweenLite.to(myElement, 1 ,{ backgroundPosition: -imageWidth*frameCount+"px", ease:SteppedEase.config(frameCount)});
Not the perfect way, but it is the fastest IMO
Here's an example for
http://smg-creative.s3.amazonaws.com/HeadlineStopMotion/2/index.html
(CLICK ON THE PLUS BUTTON)
I animated it in flash then did the conversion as mentioned above
spritesheet.zip (589.3 KB)
Hype doesn’t do layers. All the objects are in the same layer. The layers are handled in the web design app, not in Hype. When there are multiple Hype “blocks” with identical backgrounds I give the Hype items a transparent background and create inline objects in the web app to serve as backgrounds for the Hype items. As they all reference the same background art, it saves loading time (otherwise, every Hype object would have to load another copy of the same art), then I drop in the Hype objects on a floating layer, aligned with the backgrounds.
By using the inline approach, I can have all the h and p tags and important keywords right in the text displayed in the alternating inline divs (rather than as non-display text in the html) which is the way that Google prefers things.