This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Alvaro Lourenço
Posted Dec 22 - Read on Facebook

I'm trying to use classes in Framer Studio, but the behavior seems to be strange... Consider this class:

class BouncingLayer extends Layer

constructor: (@layer) ->
print @layer #<Layer id:7 name:myLayer (97,0) 100x100>
@layer.on Events.MouseDown, @bounce

bounce: ->
print @layer #undefined
print @#<Layer id:7 name:myLayer (97,0) 100x100>

Is that right or I'm missing something?

Thanks!

6 Comments

Jonas Treub

Why would you add another layer in the constructor? BouncingLayer is already a layer by itself. Did you try to achieve this? http://share.framerjs.com/7xx3n55p1u4n/

Alvaro Lourenço

I would just enable a 'bounce' behavior to some layers. But the example is merely educational... it's just a behavior I would like to add to a certain group of layers that were already imported along with the PSD. So that's why I'm passing the layer to it... I couldn't figure out a way to cast the inheritance after the layer is created.

Alvaro Lourenço

Aren't Layer objects the basic manifestation of a graphical element in Framer? Like... ugh, Display Objects / Sprites are to old Flash?

Suresh Selvaraj

How about modifying the prototype for the layer instead? Eg:
layer.constructor.prototype.bounce = function() {
console.log("i can now bounce");
};

You should then be able to call it using:
layer.bounce();
I haven't tried this in framer, but it's standard JS, so there should be a way to work it in?

Alvaro Lourenço

I end up working around this by either creating a controller class (thus not extending Layer) or by importing images from within the class instead of traditional Framer approach.
But your suggestion might work too.. for every Layer instance thou.
Thanks Shuresh!

Suresh Selvaraj

Glad you found a workaround. BTW, in my example, we're actually modifying the prototype of the layer, which means our function gets added to Layer (the framer class). So, the bounce function will be available to all layers - not just this instance
So, this would work too
var layer2 = new Layer()
layer2.bounce()

Read the entire post on Facebook