O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Instant KineticJS Starter

Book Description

Create Flash-like mobile supported applications using KineticJS!

  • Learn something new in an Instant! A short, fast, focused guide delivering immediate results.
  • Create your own HTML5 graphical editor
  • Animate and manipulate elements on the Canvas
  • Provide mobile device support to your applications

In Detail

Adobe Flash has been around for a number of years., but iOS was released without support for Flash on mobile devices. Flash is very expensive as a hardware resource and as an alternative HTML5 Canvas took its place. It is not very easy to develop with pure HTML5 Canvas, so KineticJS is really helpful to create applications much faster.

"Instant KineticJS Starter" is a quick start for HTML5 interactive application development. With this book in hand you can create Flash-like applications with KinectJS and 10 times faster at that. You can run your applications on Android and iOS devices without performance problems.

"Instant KineticJS Starter" takes you through the KineticJS functions available, and explains how to use of the most important among them. It will take you through a number of clear, practical steps that will help you to take advantage of the new HTML5 Canvas library, quickly and painlessly.

You will also learn how to build your own graphical editor using KineticJS. You will take a look at the basics of the library and will explore some functions in detail. You will learn how to create custom figures, change the colors, borders, and other styling options. You will also take a look at picture processing; resizing, scaling, and rotating. We will apply Instagram-like filters to the images, as well as learning how to apply an animation effect. If you want to take advantage of the new HTML5 Canvas features with KineticJS, then this is the book for you.

You will learn everything you need to know to build HTML5 Canvas applications with KineticJS, as well as how to configure them to support mobile devices.

Table of Contents

  1. Instant KineticJS Starter
    1. Instant KineticJS Starter
    2. Credits
    3. Foreword
    4. About the Author
    5. About the Reviewers
    6. www.packtpub.com
      1. Support files, eBooks, discount offers, and more
        1. Instant Updates on New Packt Books
    7. www.packtlib.packtpub.com
      1. Why Subscribe?
      2. Free Access for Packt Publishing account holders
    8. 1. Instant KineticJS Starter
      1. So, what is KineticJS?
      2. Installation
        1. Step 1 – downloading KineticJS
        2. Step 2 – configuration
        3. And that's it!!
      3. Quick start – creating your first image editor
        1. Step 1 – organizing your stage, layers, groups, and shapes
        2. Step 2 – adding custom and ready-to-use shapes, images, and text to a layer
        3. Step 3 – dragging-and-dropping items with configurable constraints and bounds
        4. Step 4 – resizing, scaling, and rotating items
        5. Step 5 – cloning and removing items
        6. Step 6 – applying a filter to a selected image
        7. Step 7 – animating selected shapes
        8. Step 8 – cache nodes to improve performance
        9. Step 9 – optimizing for use on mobile devices (iOS, Android)
        10. Step 10 – saving a stage as an image
      4. Top features you need to know about
        1. Layering support
        2. Standard and custom shapes
          1. Wedge
          2. Polygon
          3. Line
          4. Image
          5. Sprite
          6. Text
          7. SVG path
          8. Spline
          9. Blob
          10. Custom shape
        3. Styling
          1. Fill
          2. Stroke
          3. Opacity
          4. Shadow
          5. Line join
          6. Hide and show
        4. Selector support
        5. Event-driven architecture, drag-and-drop
          1. Bind events, multi-events, remove events
          2. Events listening
          3. Image hit region
          4. Simulate events
          5. Drag events
          6. Drag a shape and stage
          7. Drag bounds
          8. Event delegation
        6. Filtering
        7. Animation
        8. Serialization/deserialization, saving a stage as an image
      5. People and places you should get to know
        1. Official sites
        2. Articles and tutorials
        3. Community
        4. Twitter