Ability to Scale Symbols

This problem was already reported on day one when Hype 3 came out. Symbols currently are useless and there are no way to scale objects on respobsive layouts. Tumult dev team already admited the mistake and said that they are planing to fix this bug in 3.1 release. It was 5 month and we are still waiting for the fix.

This is a major time problem when I need to use a symbol more than once, with the second duplicate being smaller than the first. Please get to this for the next update!

The workaround scales all animation included in the symbol so it works for me. I use it on responsive layouts to reuse symbol animations. Not elegant in the Hype UI but does the job when displaying the page.

You could also create multiple classes in the head HTML like follows:

    <style>
        .scale75{ 
            -ms-transform: scale(0.75, 0.75); /* IE 9 */
            -webkit-transform: scale(0.75, 0.75); /* Safari */
            transform: scale(0.75, 0.75);
        }
        .scale65{ 
            -ms-transform: scale(0.65, 0.65); /* IE 9 */
            -webkit-transform: scale(0.65, 0.65); /* Safari */
            transform: scale(0.65, 0.65);
        }
        .scale60{ 
            -ms-transform: scale(0.60, 0.60); /* IE 9 */
            -webkit-transform: scale(0.60, 0.60); /* Safari */
            transform: scale(0.60, 0.60);
        }
        <!-- add more styles fixed or increments (if you want to reuse them)-->
    </style>

… and so on. Maybe use 10% increments :smile:

This way you got reusable classes you can assign to any symbol to scale them according to the class name.

4 Likes

Can you show an example file with desktop and mobile.

Thanks,

It’s a matter of copy & paste. I love to help but the final learnig and work should be done by you :smile:

  1. Create a section in your head HTML
  2. Add the classes described above and make the increments or use fixed sizes
  3. assign class to symbol under ID-Information inspector --> Classname

your done°

PS: For convenience I added the <style></style> to the above example

How is this coming along? I can’t believe this is not possible from within Hype. I didn’t know this when I bought Hype, now I have to jump through hoops because I promised this would work to my client.

We are currently beta testing this feature, and it is almost ready to go! We want to get it in your hands as soon as possible.

When did you buy Hype, and why did you assume "this would just work"? Furthermore, why would you tell a client it would work when it is clearly stated here that it is being considered as an addition for a future upgrade back in March of this year?

Just curious!

1 Like

Don’t make it bigger than it is. (scale pun…)

Bought it 2 days ago as a replacement for Flash banner creation.
Transformations are possible on symbols, scaling is a transformation I assumed. Please show me where it’s clearly stated anywhere on the product pages that such a basic thing isn’t possible.
Do you think I should have read thousands of forum threads first?

Anyway, I’m happy someone from Tumult came here to post about the progress on this! Hype has great potential but also some glaring issues and missing features.

1 Like

Well, there is a demo... Tumult Hype — Download

I can kinda understand this, as I upgraded to Hype Pro and I was disappointed by the Physics options. There's humungous potential there, but it doesn't do much right now.

I tried Hype for some professional stuff back in 2011. The software wasn't ready for even a simple project. I didn't blame Hype though. Perhaps I was too busy to get angry. But when version 1.6 rolled around, Hype suddenly became the solution to a lot of problems.

I like Tumult. They're cool people. They work hard. They listen to feedback. They understand the industry. So, it's easy for me to stay patient.

4 Likes

Awesome tip

We originally intended scaling to be a part of 3.0, as it is pretty important for Symbols. In fact, some of the 3.0 betas even shipped with the feature, but we found there were a lot more issues to consider than expected so we pulled it at the last minute so we could ship.

I don’t typically comment on upcoming releases or features, but this will be in 3.5, which is Coming Real Soon Now™. :smile:.

We’re always happy to hear any other feedback or what is considered missing features, it helps us prioritize the work we do!

2 Likes

I agree with others on this thread. This is a real priority feature as far as animation goes. Working on a project now that I’ll have to change because this feature isn’t available. Looking forward to 3.5. Hurry please!

I hope the new symbol scaling/transform features in 3.5 will also include proper transform/scaling of text objects inside of symbols as well. Currently there is no way to scale text outside of changing its point size, but that is always messy.

I tried Adobe Edge Animate’s transform tool and it can transform anything including: parented objects, groups, symbols and symbols nested inside of symbols flawlessly! I hope Hype’s new solution will be as elegant, because I really don’t want to switch to Edge Animate for such a basic feature and have to pay $50/month.

I'm glad to see this comparison, HypePro vs Edge, a nice piece of software, made with millions of dollars spent on development :smile:

I left Edge for Hype months ago because the development in hype is fast and the community is great. Not comparable with the community Adobe-Edge

The develpment in edge is slow. Moreover the output for the web is a bit heavy.

So, be patient and hype will amaze you :slight_smile:

1 Like

Well said, Michelangelo. I tried AE long ago and got frustrated very quickly with the whole experience. I like Hype simply because I have fun using it. The Hype community makes it even more fun and the knowledge sharing here is unlike anything I've ever seen before.

1 Like

One disadvantage of not being able to scale a symbol is not being able to animate the scaling of a symbol. I had to work around my page needs. This will be a strange restriction, though animating anything on a webpage at all is kind of wild-west in the first place. I await this feature along with everyone else.

Thanks for the great tip.

Perhaps I’m stupid as a donkey, but I can not get it to work… I see no scaling at all – even if I assign the class to individual elements inside the symbol. And I am working with a simple ‘slightly more advanced than your average’ image button mouseover which only includes a few fade ups and downs… It seems like Hype (3.0.3) totally ignores the class.

Not anywhere near your problem to solve, but I was just wondering if anybody else here have experienced this or maybe found a workaround?

Update: I managed to get it to work by adding the !important attribute to the CSS, but this renders all instances of the affected symbols in all responsive breakpoints. Then I tried to only use the class on the individual symbol (not the contents), and even if Hype shows me the desired result, Safari do not scale anything. So still no dice. I can see why this could cause problems for the developers…

The tip is ment to fix the problem with classes you use per Breakpoint not across all Breakpoints. But that you seam to have figured out by yourself. Also make sure to assign all three transformations to the class with the same values. Like seen in the example:

.scale75{ 
        -ms-transform: scale(0.75, 0.75); /* IE 9 */
        -webkit-transform: scale(0.75, 0.75); /* Safari */
        transform: scale(0.75, 0.75);
    }

Thank you for your helpful reply!

Yes, I did assign all the transformations, but only applied the style on the symbols within one particular breakpoint. I still got the same result. Using the !important attribute affected all breakpoints somehow. And even if I can see that the class has been assigned at the proper breakpoint on the proper symbol (by inspecting it in the browser), not using the !important attribute does absolutely nothing.

No matter what, I cannot get any stable result, so I might want to put on some patience and hope for version 3.5 to be released any time now…