Login
Thumbnail custommodules 4b79a75d205ca41f11fc3e36ab35327b83e6b68a34bcf54028ba95a4e17b75b3
Please sign in for access to all the free videos.
Custom Modules: Part 1
This time we will take a simplified flip card animation and extract out the core pieces to create our own custom class so that we can add it to a module.
8 comments
Picture
Nitin Sampathi Feb 04, 2017
Super helpful! Looking forward to the next video.
Picture
Davo Galavotti Feb 13, 2017
Hey Mike, thanks for this tutorial. I'm having a bit of problem trying to understand the initial setup of this prototype. How did you manage to create a component to import the layer properties from Sketch? Is that on another video?
Picture
Mike Johnson Feb 14, 2017
Hey Davo. The initial setup is simply from importing the sketch file. All the layer positions and creating is done in the import process. From there I created a custom "card" layer and referenced the sketch files layer position, width, height, etc. Does that answer your question? Or are you asking more specifically about the process of importing from Sketch?
Picture
Davo Galavotti Feb 15, 2017
So {Review, RoomDetail, Room_special} = sketch is a way to reference those layers without using the notation sketch.[layer]?
Picture
Mike Johnson Feb 20, 2017
Yes, the sketch variable is just an object. If you want you could use sketch.Review instead, but this is also the same method we use for extracting the usable object for our modules. When we say `{FlipCard} = require "FlipCard"` in part 2 we could also say something like `moduleVariableName = require "FlipCard"` and then `FlipCard = moduleVariableName.FlipCard`
Picture?type=large
Jean-Francois Hector Apr 26, 2017
Hello Mike, thanks for this video. I learnt tons, and really enjoyed it, as usual. There's one thing extra that I'm trying to do with this prototype, but I'm not managing: I would like the perspective through which the card flip is seen to be higher, i.e. I don't want the card to feel like it's coming so close to the viewer, and so high on top and so low at the bottom, when it's flipped. I've tried creating to use layer.perspective (i.e. creating a layer, changing its perspective property, and assigning it as a parent to the Flichard layer). But even with really high perspective numbers (10000000000 and more), the perspective effect is still too strong. I think that this is a downside of putting the flipped card at z: 350, but I don't see a good way around it. Keeping the flipped card at z:0 works (i.e. it allows me to set the perspective that I want), but doing this would require me to set all my background objects at z: -1000 and scale:2, which becomes complicated. Can you think of a better solution?
Picture?type=large
Giles Perry Jun 14, 2017
Hey Mike. Any reason why you write options.x = some default value followed by super(options) versus super(options) first followed by this.x = some default value?
Picture
Mike Johnson Jun 23, 2017
Hey Giles, we need to define the defaults before we call super. Super is the function that will initiate the parent class, in this case Layer since we are extending Layer. While the X and Y may not be important in this case (we can just set x and y after creattion) it's good practice to always have everything set in our options before passing it to super, just in case there is something in the Layer constructor that relies on that value.