No code do action artifact HYPE3 Getting Started tutorial

Hype this keyword search on Baidu does not necessarily know what it is, but since I used it, I fell in love with it, like the same year like sketch >>>

Who does it fit?

Use AE, Flash and other animated video tools to do the app animation video (or GIF) demo;

Use Framejs, Origami, form and other tools to write code to generate an interactive dynamic demonstration of the app;

Use Axure, justinmind to build websites or apps to demonstrate, especially in response-style pages;

Want to use HTML5 to achieve a variety of interactive animation, dynamic and even game designers, but suffer from the code;

Even want to do directly for the wireless transmission of interactive pages (such as a variety of cool activity pages);

The benefits of it:

No code required, like AE using the timeline to do interactive animations

PC, mobile phone, pad terminal can be directly accessed (in the form of web), you can export video or GIF

Version 3.0 also features physical and elastic curves for a more powerful animation effect

For Chinese people, it is also very good to natively support Chinese.

There's a lot of myself to find ...

First look at its official website video (because the official online need to flip the wall to see YouTube, so I transferred it to the domestic video site, and added a little Chinese subtitles)

Hype3 Professional Edition Chinese Description: http://v.qq.com

You can take a look at its official website, or go directly to download a trial version.

Hype in the domestic and even foreign resources are still very few, first to an introductory tutorial, mainly I use a few tips, the depth of the tutorial will need some days after release.

　　First, the overall interface

Its interface has a bit of AE flavor, of course, in order to conform to the temperament of the Mac, its overall layout is very close to keynote, plus Chinese reasons, so the overall start is very simple.

　　Second, the top of the menu

The leftmost two buttons, the default layout is not expanded, click to expand, is to let you do the responsive page, very simple. Scene this is the most different from AE, because to do a complete product requires a lot of pages, so this scene switching is very important.

Click Add to quickly add a responsive layout, it must be said that the software is difficult to get started only a star, is the second kill Axure and Justinmind (the latter I do not use, not very understanding)

The second part of the top menu bar is to add elements, of course, Hype3 in their own graphic painting is still very few, only three shapes, and can not be edited on the curve, this is a more troublesome part, and now it does not directly support sketch or PS, only from the other software to export the picture after the manual add in the line. Tips:hype3 supports vector graphics in SVG format, so choosing the export SVG format in sketch will output all graphics as vectors, greatly reducing the overall capacity volume.

add element Edge also has a "symbol", because the translation problem of symbol, in fact, should be understood as a component, here refers to "reusable components", this similar to the Master Master version in Axure, for large animation elements of the management is still very useful.

It also has a "new persistent symbol", which is easy to understand in the pop-up note, and the keynote "background" applied to all scenarios, just as it can be any component.

In the middle of a group of what I will not wordy, the key part came, do well after sure to preview, and this is the product features. It not only supports the direct one-click Preview in the browser, but also supports direct preview on the phone, this is the second kill only on the computer with the mouse simulation of the origami. Of course, you need to install an app on the phone, called Hype Reflect, this app interface is a bit behind, but it is good to use.

　　Three, the canvas area

The default is 600px x 400px size (Naturally it supports Retina screen, so it's automatically twice times the size of retina)

You can modify this size in the scene panel, it presets a very large number of mobile terminal size, including "bigger than the larger" 6 and 6plus (you will be careful to find that it is used to reduce the resolution of one-fold, but do not worry, because the retina screen compatibility is good, otherwise it can not do responsive design)

　　Four, right panel

is the main parameter of the Settings area, the main 8 panels, documents, scenes, measures, elements, typography, operations, physical quantities and identities:

Specific parameters on everyone to try it out, it is easy to get started, I only want to talk about a few features:

1. Documents:

Yellow box section, mainly on the phone preview when you can directly generate Home screen web app, prohibit user zoom, your product looks more like native.

2. Documents

Part of the above has been neglected, mainly the management of the timeline, you can create a new timeline to manage the animation of different components, then this place is to increase the deletion of the place. (Very useful for later complex animations)

There is also the option of loading and unloading the scene, this and axure or flash function very much like (in the Operation panel will also have such a function), click on the Add, the drop-down menu appears to see, in addition to the dynamic effect, the entire logical time line operation here, very convenient.

3. Measurement

It has a rotation, so you can make all kinds of spatial motion.

The transformation origin is actually the location of the center point.

Unless, of course, you select the component, hold down the command key on the keyboard, hover over the component and you can see the center point, and then drag it to change the position (what does the center point do?)

4. Elements

Here is not much to say, a lot of common settings, of course, the color style of the setting is also very cow, such as fuzzy.

5. Typography

The interesting thing is that you can simply download the fonts provided by Google by adding more fonts, of course these are in English, and you have to have a foreign VPN first.

6. Operation

The focus is "drag-and-drop", this is also the mobile phone slide effect of the operation, the specific can be a good try to see.

7. Physical quantity

The most magical feature, you first select a component, and then click the drop-down to see the static and dynamic, if you want an object to move, that is dynamic, if you want an object to slide down on a slope, then you want a dynamic object and a static bevel. Note that the default page is no physical environment, you need to give these components physical characteristics, they will move, density, resistance what I also do not understand, but you are right to change parameters can know the effect, we are most concerned about is the bounce force, that is "return", do not know how to translate, The better you bounce the bigger the number, of course 1 is the most suitable, too big will immediately disappear ...

The following picture of the yellow box, but also the fried days, you can use the mobile phone's gravity sensor to control, after the check, the phone preview is completed!

　　Five, Time axis

Below the screen is the important part of the software, and the same time axis as AE, different, it separates the object and the attribute with the upper and lower two parts, rather than the default is to use the expanded way as AE.

The reason why I do this is because it has so many properties that you can find it by clicking the down-cut on the right side of the property:

Of course it is more troublesome here, after selecting any one, not here to edit, but just like AE inside the same point, but also need to find the right side of the panel specific parameter settings to modify.

Probably because of "so much trouble", so it has a "video" function, I think this very dick!

You just have to select a component, then click on the recording function, select a point in time (even if you do not need, just choose a good time on the line), and then feel free to change the component into the position you want or even color, it automatically generated the animation.

You know the curve, you have the movement, if there is no rate curve, it is simply dead. Hype3 This complete curve library, is too intimate, not only has a lot of appearance (and each has a curve of the demo, see its right side of the small square), you can also customize the editing curve, no!

Well, the introduction of this software is almost here, I think as a designer specifically want to be able to truly independent "lean", do not need to rely on development, can be your design prototype 100% to restore the product, even if only a small dynamic effect.

I am very optimistic about this software, with the sketch can be said Invincible (of course, there are some bugs to be able to improve in subsequent versions), finally, the software is paid, professional version of more than 600 yuan, temporarily did not see the method of cracking (if really want, or find), but as a moral integrity designer , after using the probation period, I think I will pay to continue to use.