Create a touchpad-joystick using texturepacker2

Question

I am adding a touchpad control to my game, using TexturePacker for loading images into the image-atlas. I have followed this tutorial to add the joystick. Everything is the same apart from the loading assets part. This is how I am adding the control:

//in create
ta = new TextureAtlas(Gdx.files.internal("image-atlases/pages-info.atlas"));

        camera = new OrthographicCamera();
        camera.setToOrtho(false, 800, 480);

        batch = new SpriteBatch();

        blockSpeed = 5;

        InitTouchPad();

        //create a stage and add touchpad
        stage = new Stage(800, 480,true, batch);
        stage.addActor(touchpad);
        Gdx.input.setInputProcessor(stage);

        //create block sprite
        blockTextureRegion = ta.findRegion("block");

        blockSprite = new Sprite(blockTextureRegion);
        //set position to the left bottom of screen
        blockSprite.setPosition(800-blockSprite.getWidth()/2, 480-blockSprite.getHeight()/2);

//end create

private void InitTouchPad(){
        //adding touchpad controls
        //create a touchpad skin
        touchpadSkin = new Skin();
        //set background image
        touchBackgroundRegion = ta.findRegion("touchBackground");
        touchpadSkin.add("touchBackground", touchBackgroundRegion.getTexture());
        //set knob image
        touchKnobRegion = ta.findRegion("touchKnob");
        touchpadSkin.add("touchKnob", touchKnobRegion.getTexture());
        touchpadStyle = new TouchpadStyle();
        //create drawable's from touchpad skin
        //touchBackground = touchpadSkin.getDrawable("touchKnob");
        //touchKnob = touchpadSkin.getDrawable("touchBackground");
        //apply the drawables to the touchpad style
        touchpadStyle.background = touchpadSkin.getDrawable("touchBackground");
        touchpadStyle.knob = touchpadSkin.getDrawable("touchKnob");
        //create new touchpad with the created style
        touchpad = new Touchpad(10, touchpadStyle);
        //setbound(x,y,width,height)
        touchpad.setBounds(0, 480 - 150, 150, 150);

    }

@Override
    public void render() {
        // TODO Auto-generated method stub
        Gdx.gl.glClearColor(0, 0, 0.2f, 1);
        Gdx.gl.glClear(GL10.GL_COLOR_BUFFER_BIT);

        camera.update();

        //add touchpad controls
        blockSprite.setX(blockSprite.getX() + touchpad.getKnobPercentX()*blockSpeed);
        blockSprite.setY(blockSprite.getY() + touchpad.getKnobPercentY()*blockSpeed);

        batch.begin();
        blockSprite.draw(batch);
        batch.end();

        stage.act(Gdx.graphics.getDeltaTime());
        stage.draw();

    }

And for the output, all my assets are preloaded on the screen, the touchpad is nowhere looking like a joystick control. The images are jumbled over each other the movement of the sprite is in opposite direction..