0

Using text animations

Hello,

I am traying to fade a text with the function "fade".
When i use that function in the simultor I can see in the console the error: "TypeError: instruction.fade is not a function (ToolboxMenuView.js: Line 120)"
It does not work either on tv ( Samsung UE32B7020).

Can anyone help?

Thanks in advance.


I have used as a template example "Toolbox" from the simulator to write this code.
CODE
var ToolboxMenuView = new KONtx.Class({
ClassName: 'ToolboxMenuView',

Extends: KONtx.system.SidebarView,

instruction: 1,

createView: function() {
menuData = [
{
label: "Play",
destinationId: "fade-text"
},
{
label: "Help",
destinationId: "view-Containers"
},
{
label: "Grid Test",
destinationId: "view-GridTest"
},
{
label: "Image Grid",
destinationId: "view-ImageGrid"
},
];
var buttonCount = menuData.length;
var buttonHeight = KONtx.utility.scale(35);
var menuHeight = buttonHeight * buttonCount;
var titleHeight = this.height - menuHeight;



var background = new KONtx.element.Image({
guid: "imagendemierda",
src:"image/fondo.png",
styles:{
width: Theme.viewSpecs.SIDE_BAR.width,
height: KONtx.utility.scale(titleHeight),
vOffset: 0,
// clipRect: "20,20,30,30"
fillMode: 'tile',
tileOrigin: 'topLeft'
}
});
background.appendTo(this);

//var topContainer = new KONtx.control.EmptySpace({
var topContainer = new KONtx.element.Container({
styles: {
height: titleHeight
}
}).appendTo(this);//titleHeight

instruction = new KONtx.element.Text({ //Texto de presentación
label: 'Con este fantástico juego te pondrás a prueba como ¡Agente Practicatic!',
wrap: true,
styles: {
color: '#FFFFFF',
bgColor: '#00FF00',
bgOpacity: 200,
fontSize: KONtx.utility.scale(20),
fontWeight: 'bold',
padding: KONtx.utility.scale(5),
width: this.width,
height: KONtx.utility.scale(100),
vOffset: topContainer.height - KONtx.utility.scale(100)
}
}).appendTo(topContainer);

var self = this;
var offset = titleHeight;
menuData.forEach(function(buttonConfig) {
var destinationId = buttonConfig.destinationId;
new KONtx.control.TextButton({
label: buttonConfig.label,
opacity: 255,
styles: {
height: buttonHeight,
vOffset: offset
},
events: {
onSelect: function(event) {
if ( destinationId == "fade-text" )
{


//--------------------------------------This is what does not work
instruction.fade(250,20,10);



}
else

KONtx.application.loadView(destinationId);
}
}
}).appendTo(self);
offset += buttonHeight;
});
}
})

by
1 Reply
  • QUOTE (danglot_cp2k @ Apr 8 2010, 11:28 PM) <{POST_SNAPBACK}>
    Hello,

    I am traying to fade a text with the function "fade".
    When i use that function in the simultor I can see in the console the error: "TypeError: instruction.fade is not a function (ToolboxMenuView.js: Line 120)"
    It does not work either on tv ( Samsung UE32B7020).

    Can anyone help?

    Thanks in advance.


    I have used as a template example "Toolbox" from the simulator to write this code.
    CODE
    var ToolboxMenuView = new KONtx.Class({
    ClassName: 'ToolboxMenuView',

    Extends: KONtx.system.SidebarView,

    instruction: 1,

    createView: function() {
    menuData = [
    {
    label: "Play",
    destinationId: "fade-text"
    },
    {
    label: "Help",
    destinationId: "view-Containers"
    },
    {
    label: "Grid Test",
    destinationId: "view-GridTest"
    },
    {
    label: "Image Grid",
    destinationId: "view-ImageGrid"
    },
    ];
    var buttonCount = menuData.length;
    var buttonHeight = KONtx.utility.scale(35);
    var menuHeight = buttonHeight * buttonCount;
    var titleHeight = this.height - menuHeight;



    var background = new KONtx.element.Image({
    guid: "imagendemierda",
    src:"image/fondo.png",
    styles:{
    width: Theme.viewSpecs.SIDE_BAR.width,
    height: KONtx.utility.scale(titleHeight),
    vOffset: 0,
    // clipRect: "20,20,30,30"
    fillMode: 'tile',
    tileOrigin: 'topLeft'
    }
    });
    background.appendTo(this);

    //var topContainer = new KONtx.control.EmptySpace({
    var topContainer = new KONtx.element.Container({
    styles: {
    height: titleHeight
    }
    }).appendTo(this);//titleHeight

    instruction = new KONtx.element.Text({ //Texto de presentación
    label: 'Con este fantástico juego te pondrás a prueba como ¡Agente Practicatic!',
    wrap: true,
    styles: {
    color: '#FFFFFF',
    bgColor: '#00FF00',
    bgOpacity: 200,
    fontSize: KONtx.utility.scale(20),
    fontWeight: 'bold',
    padding: KONtx.utility.scale(5),
    width: this.width,
    height: KONtx.utility.scale(100),
    vOffset: topContainer.height - KONtx.utility.scale(100)
    }
    }).appendTo(topContainer);

    var self = this;
    var offset = titleHeight;
    menuData.forEach(function(buttonConfig) {
    var destinationId = buttonConfig.destinationId;
    new KONtx.control.TextButton({
    label: buttonConfig.label,
    opacity: 255,
    styles: {
    height: buttonHeight,
    vOffset: offset
    },
    events: {
    onSelect: function(event) {
    if ( destinationId == "fade-text" )
    {


    //--------------------------------------This is what does not work
    instruction.fade(250,20,10);



    }
    else

    KONtx.application.loadView(destinationId);
    }
    }
    }).appendTo(self);
    offset += buttonHeight;
    });
    }
    })


    try to use this.controls.instructions INSTEAD OF instruction to reference the text element and let me know if it works.
    0

Recent Posts

in Design / Interaction - Yahoo! TV Widgets