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

Getting Started with CreateJS

Book Description

Design and develop astounding animated web applications using CreateJS

In Detail

CreateJS is a popular, well supported JavaScript library used for web advertising, education, gaming, and cartooning.The CreateJS suite consists of different libraries that are designed to work independently or together to create rich interactive content on open web technologies on an HTML5 canvas. In CreateJS, the EaselJS API provides solutions for working with rich graphics and interactivity and integrates well with its tweening library; TweenJS.

Starting with the basics of CreateJS, you will learn how to create your first working web application. You will gain practical experience of utilizing features like drag-and-drop, caching, filtering, and painting, to build visually impressive web applications.

Filled with practical examples and extensive descriptions, this book starts by helping you with installing and configuring the CreateJS suite in different environments. You will then discover the EaselJS API and implement the basic objects and methods. You will progress to create animations in CreateJS using TweenJS and will learn to optimize the performance of animations for better rendering in different browsers.

You will also learn to use the Vector masks to create multiple layers on the canvas.Finally, you will gain the expertise to develop your own web applications, rich with stunning visual renditions and a hands-on experience of working with CreateJS.

This is a definitive guide for anyone who is planning to use the prolific CreateJS suite to develop compelling web applications.

What You Will Learn

  • Install and configure CreateJS
  • Implement the drag-and-drop interactions
  • Utilize HTML5 to develop complex animations with EaselJS and TweenJS
  • Improve animation rendering with caching techniques
  • Enhance pictures and shapes using filters like hue
  • Build a UI using CreateJS

Table of Contents

  1. Getting Started with CreateJS
    1. Table of Contents
    2. Getting Started with CreateJS
    3. Credits
    4. About the Author
    5. About the Reviewers
    6. www.PacktPub.com
      1. Support files, eBooks, discount offers, and more
        1. Why Subscribe?
        2. Free Access for Packt account holders
    7. Preface
      1. What this book covers
      2. What you need for this book
      3. Who this book is for
      4. Conventions
      5. Reader feedback
      6. Customer support
        1. Downloading the example code
        2. Downloading the color images of this book
        3. Errata
        4. Piracy
        5. Questions
    8. 1. Installing CreateJS
      1. Understanding CreateJS and subsets
        1. Downloading CreateJS
        2. GitHub
        3. Understanding the Content Delivery Network
        4. Setting up the libraries
          1. The production environment
            1. Using CDN
          2. The development environment
      2. Building the source code
      3. Summary
    9. 2. Commencing with CreateJS
      1. Exploring CreateJS
      2. Working with events
      3. Summary
    10. 3. Working with Drag-and-drop Interactions
      1. The scenario
      2. Understanding the on function
      3. Creating a drag-and-drop interaction
        1. The complete example
      4. Summary
    11. 4. Performing Animation and Transforming Function
      1. Creating animations with CreateJS
      2. Understanding TweenJS
        1. What is tweening?
      3. Understanding API and methods of TweenJS
      4. Creating a simple animation
        1. Scenario
      5. Transforming shapes
        1. An example of Transforming function
      6. Understanding Sprite Sheet
        1. Developing animations using Sprite Sheet
      7. Summary
    12. 5. Utilizing Caching in EaselJS
      1. Exploring the caching feature of EaselJS
      2. Understanding the cache method
        1. Example of using cache
      3. Using cache in complex shapes and animations
      4. Caching Bitmap
      5. Summary
    13. 6. Using Filters in EaselJS
      1. Understanding the Filter class
      2. Using the AlphaMapFilter class
      3. Using the AlphaMaskFilter class
      4. Implementing the BlurFilter class
      5. Utilizing the ColorFilter class
      6. Using the ColorMatrixFilter class
      7. Summary
    14. 7. Developing a Painting Application
      1. Preparing the stage
      2. Understanding the init function
      3. Implementing the handleMouseDown function
      4. Using the handleMouseMove function
      5. Utilizing the handleMouseUp function
      6. Downloading the source code
      7. Summary
    15. 8. Utilizing Vector Masks
      1. Learning about vector masks
      2. Using a vector mask with Bitmap images
      3. Playing with vector masks
      4. Summary
    16. 9. Developing Your First CreateJS Application
      1. Understanding your application structure
      2. Developing the index.html file
      3. Implementing the app.js file
      4. Preview of the final application
      5. Summary
    17. Index