Tried pivot animation with SVG in Hype

svg

(Lucky) #1

Hey guys,
Wanted to share something i tried yesterday.

http://www.luckyde.com/ipad/turn/turn.html

Wanted to do an animation rig in hype, i had a lot of problems with pngs rescaling and becoming low res so i decided to use SVG.

I did a basic turn with about 60 svg shapes as body parts.

Things I learned

Good

Hype can do animation rigs just as well as flash, centrepoint adjustment is fully possible in hype just like in flash. e.g.

After finding out how to control symbols i found just like in flash or after effects i can keep my timeline clean.

You can save a lot of filesize with SVG, it scales nicely

It performs great considering the amount of items on stage.

Bad

The biggest issue i had and why i couldn’t do the inbetweens was i could stretch SVG’s width only or height only. it could only stretch both at once, and it took me double clicking on the svg so that it shows the effect.

The ease-in-out default tween interfered a lot,i had to fight with it the whole time. I wish i could set the default as linear Cheers @DBear
Or can you have the tweens disabled until i ask for a tween so you can key it out and then tween between?

Items jitter a lot, i notice this a lot with Hype for small objects, they’ll try to snap to positions the more subtle the animation, thats why i use GSAP over top of Hype for precise animation, it doesn’t have this problem, i just with i could do it without it and just with timeline.

The inability to rescale symbols stopped me from using them a lot, which is why i tried the svg route but again sadly that wasn’t perfect.

Having no ability to set shortcut keys slowed me down by a lot, It’s a feature I really wish you guys add at some point.

Minor:
The blue guidelines constantly popped up which was quite distracting and i wish i could turn them off like i can snapping.

Anyway wanted to share it with you guys
Source File:
turn_.zip (115.2 KB)

Started in photoshop

Live traced in illustrator

And pasted the code into hype squares


Pasting SVG code into Hype squares
#2

On Mac

:wink:

D


(Lucky) #3

Nice, cheers

Can you answer any of the other ones? :wink:


(Lucky) #5

Nice! I’m gonna add some shortucts now, but with animation specific shortcuts they require a button for them first which I haven’t found. Things like

Add/Clear keyframe(on selecting a keyframe)
Reverse tween
Add Pause Timeline at location, Resume timeline action
Expand innerHTML
Remove Tween, keep keys(essentially what Instant tween does now, except it visually looks like it’s tweening when it’s not because of the blue bar)

Thanks for that workaround though! Will try to set up a shortcut for create symbol with it


#6

You can drag the innerHTML box larger at the edge and it stays the same size after that.

Is that what you mean?

D


(Lucky) #7

No i mean press F4 to quick expand and close innerhtml box for quick access(e.g for quickly editing svg/div contents)


#8

Hello,
Thanks for this great example. I’m very new to Hype, I want to try to make something similar to the example above but lacking knowledge I’m wondering what you mean by importing your pic into hype “squares”? I downloaded the example but I’m baffled. D’you know anywhere where I can find more information on animation rigging in Hype and how to do it?
Thanks


#9

Ahh. Gotcha. You could obviously change the shortcut alt-cmd-e, that is there at the moment, to F4. :smile:
D


#10

Hi Silverpixel

I think he was referring to rectangle elements. Using the innerHTML of the element. If you click the element a little icon with a pen appears under it. If you click this then a box will appear where you can add your own HTML, CSS, JavaScript.

D


(Lucky) #11

Yeah and when it comes to rigs there is no doc yet on how to do it, but think about it the same way you would do it in flash MX :wink: I’m writing a tutorial right now on a basic character rig, I’ll let you know when that’s done!


(Lucky) #12

Again dude you’re splitting hairs, that shortcut doesnt do anything for me(maybe i overwrote it from all the shortcuts i now added), but again keyframe control is my big one as it will help me animate better and I do love your work around I just wish it was part of the software with more options than currently available is what I’m saying :wink:


(Jonathan Deutsch) #13

Wow, that is a great character animation! Mind if we potentially use it in our gallery?

I’ll try to answer the questions that haven’t yet been addressed:

This is an artifact of how SVGs are represented in the browser when inserted as images. There might be a way around it using a scale factor, which is what we’d do for symbols:

We definitely realize this is a big missing feature :wink:.

Hype uses integral pixel values, which can cause jitter if moving very slowly. This is mainly for browser compatibility and performance reasons, but it has been a while since I re-evaluated the landscape and might take another look. Generally if you use linear timing functions it will reduce the apparent effects.

Thanks for this feedback.

Hype uses per-property keyframes, so there’s really no single keyboard shortcut that could work in this case. I’m curious how using the Record (which will automatically make the right keyframes) won’t work in your case?

Good idea.

I think we’d need to develop some macro system. Can you elaborate on the resume timeline action though? If it is paused the playhead would then not ever hit the resume!

As mentioned this is command-option-e, so you might have it overridden by something else?

Interesting idea.


(Jonathan Deutsch) #14

Oh, right hand not talking to the left; @daniel says you’re already talking about this one!


#15

Hi, Thank you! I would really really appreciate a tutorial on how to do this!

I’m only able to successfully copy/paste SVG code into html of only one hype square, for the head of a character for example, then when I try to paste the SVG code of the torso of a character it doesn’t work, it pastes the right code but the image generated is of the head of the character and not of the torso. I’m not able to paste two or more unique images into two separate hype squares. I know it sounds confusing… Any ideas? some help would be massively appreciated

please see pic below for example of what im talking about. The bottom square should be a different picture but it’s showing the previously pasted code…

Many thanks!


#16

Quick update: this was part of an excellent Flash transition guide tutorial by @luckyde and you can read the whole tutorial on our blog:


(jangeltun) #17

To improve scaling with SVG’s I’ve found it very helpful to add preserveAspectRatio=“none” to the head of the of the SVG file.


(Peter Bright) #18

Just stumbled across this. Thanks for posting Lucky and for the “Flash Transition Guide: Character Animation” tutorial :wink: