Instant EaselJS Starter [Instant]


This title is available as an eBook only
Instant EaselJS Starter [Instant]
eBook: $12.99
Formats: PDF, PacktLib, ePub and Mobi formats
$11.04
save 15%!
Print & eBook also available on:
Learn in an Instant - Short, Fast, Focused
Overview
Table of Contents
Author
Support
Sample Chapters
  • Learn something new in an Instant! A short, fast, focused guide delivering immediate results.
  • Learn to create interactive web content with the latest version of EaselJS framework and the HTML5 Canvas element
  • Starts with the basics and you will soon find yourself creating responsive and customized applications
  • Learn how to use EaselJS, TweenJS, and PreloadJS to create user interfaces and interactive animations

Book Details

Language : English
eBook : 54 pages
Release Date : March 2013
ISBN : 1782165185
ISBN 13 : 9781782165187
Author(s) : Fabio Biondi
Topics and Technologies : All Books, Instant, Web Development, Open Source

Table of Contents

Instant EaselJS Starter
  • Instant EaselJS Starter
    • So, what is EaselJS?
    • Installation
      • Step 1 – what do I need?
      • Step 2 – downloading EaselJS
      • Step 3 – creating the project folder
      • Step 4 – importing the EaselJS library
      • And that's it!!
    • Quick start – creating your first canvas application
      • Step 1 – creating the HTML template
      • Step 2 – creating a "Hello World" example
    • Top 8 features you'll want to know about
      • Drawing graphic primitives
        • Chaining
        • Tiny API
        • Shapes and lines
        • Fills
        • Borders
        • Lines and stroke style
      • Displaying the text
        • Multiline text
      • Images and PreloadJS
        • Loading images with JavaScript
        • PreloadJS
      • The display list and the display objects
        • The display list
        • Containers
        • Registration point
      • The MouseEvent class
        • The enableMouseOver and cursor properties
        • The addEventListener method
      • Animation with TweenJS and the Ticker class
        • TweenJS
        • TweenJS and the registration point
        • TweenJS and containers
      • Spritesheets and bitmap animations
        • Create a spritesheet in Adobe Flash and Zoë
      • Create cross-platform web applications for desktop and mobile devices
        • Performance and cache
        • Resize and fullscreen responsive layouts
        • Smaller screens
        • Enabling the Touch events
        • Mobile orientation
        • Scaling, disabling the zoom in/out pinch, and double tapping on mobile devices
        • Fullscreen iOS web applications
        • Fullscreen iOS status bar style
        • Remove paddings and margins around your HTML page using CSS
    • People and places you should get to know
      • Official sites
      • Articles and tutorials
      • Community
      • Blogs
      • Twitter

Fabio Biondi

Fabio Biondi is a freelancer, living in the north-east of Italy. Since 2003, he deals almost exclusively with the Adobe Flash Platform technologies.

He is an Adobe Certified Instructor (ACI) in Flex, AIR, Flash Professional, Flash Catalyst, and FlashLite (ACE) and he has devoted all his time and resources to the development of custom interactive user interfaces for web, mobile, and touch displays for many international brands.

Since 2011 he has been focusing almost entirely on the development of cross-platform web applications in HTML5, JavaScript, CSS3, AngularJS, and HTML5 canvas through the use of the CreateJS suite.

Fabio runs a blog (www.fabiobiondi.com/blog) and a YouTube channel (http://www.youtube. com/user/BiondiFabio) where he provides tutorials, snippets, and many prototypes related to HTML5, AIR, Flash, Arduino, Kinect, and collaborative applications.

Sorry, we don't have any reviews for this title yet.

Code Downloads

Download the code and support files for this book.


Submit Errata

Please let us know if you have found any errors not listed on this list by completing our errata submission form. Our editors will check them and add them to this list. Thank you.


Errata

- 6 submitted: last submission 15 Jul 2013

Errata type: Others | Page number: 28 | Errata date: 25 March 2013

This line
The best way to accomplish this task is by adding a listener of the Tick event and moving the stage.update() call inside the event handler function:
Should be
The best way to accomplish this task is by adding a listener of the tick event and moving the stage.update() call inside the event handler function:

Errata type: code | Page number: 28 | Errata date: 25 March 2013

This code snippet

function init() {
// …previous code
createjs.Ticker.addListener(this);
createjs.Ticker.setFPS(45);
}


Should be

function init() {
  // …previous code
  createjs.Ticker.addEventListener("tick", tick);
  createjs.Ticker.setFPS(45);
}

Errata type: code | Page number: 13 | Errata date: 28 March 2013

This line

graphic.beginStroke(("#000000").setStrokeStyle(3).beginFill("#ff0000").drawCircle(100,100,30);

Should be

graphic.beginStroke("#000000").setStrokeStyle(3).beginFill("#ff0000").drawCircle(100,100,30);

Errata type: code | Page number: 13 | Errata date: 28 March 2013

This line

graphic.s(("#000000").ss(3).f("#ff0000").dc(100,100,30);

Should be

graphic.s("#000000").ss(3).f("#ff0000").dc(100,100,30);

Errata type: others | Page number: 36 | Errata date: 28 March 2013

This line

You should use this technique only when the content of the cached object doesn't change frequently. The disadvantage is, the quality of the shapes and text can greatly decrease. Check EaselJS documentation for more information.

Should be

You should use this technique only when the content of the cached object doesn't change frequently. The disadvantage is, sometimes the quality of the shapes and text could greatly decrease. Check EaselJS documentation for more information.

Errata type: code | Page number: 39 | Errata date: 28 March 2013

This line

if (createjs.Touch.isSupported()) {
createjs.Touch.enable(stage) }

Should be

createjs.Touch.enable(stage)

Sorry, there are currently no downloads available for this title.

Frequently bought together

Instant EaselJS Starter [Instant] +    ASP.NET MVC 2 Cookbook =
50% Off
the second eBook
Price for both: £21.15

Buy both these recommended eBooks together and get 50% off the cheapest eBook.

What you will learn from this book

  • Download and install EaselJS and the CreateJS tools
  • Draw graphic primitives
  • Display dynamic text
  • Load images with JavaScript and PreloadJS
  • Work with Display Objects and the display list
  • Create the Container class
  • Learn the concept of a registration point
  • Handle mouse and touch events
  • Create animations with TweenJS and the Ticker class
  • Generate and use spritesheets with Zoë and EaselJS
  • Build cross-platform games and applications for desktop and mobile devices

In Detail

EaselJS, created by Grant Skinner, greatly simplifies application and game development in HTML5 Canvas and allows for the creation of an amazing user experience with a look, feel, and behaviour similar to native iOS and Android applications.

Instant EaselJS Starter is a starter guide that provides you with all the information you need to quickly create HTML5 canvas web applications. You will also learn how to use the other CreateJS tools like PreloadJS, TweenJS, Zoë and the CreateJS Toolkit to create fancy user experiences.

This book provides an introduction of the most important and useful features of EaselJS which is a part of the CreateJS suite, a JavaScript library for building rich and interactive Web Content. It will take you through a number of clear and practical tasks that will help you to create your first responsive HTML5 Canvas applications.

Approach

Get to grips with a new technology, understand what it is and what it can do for you, and then get to work with the most important features and tasks.A short and precise guide to get you started with EaselJS , helping you to create some cool applications and games.

Who this book is for

EaselJS greatly simplifies application development in HTML5 Canvas using a syntax and an architecture very similar to the ActionScript 3.0 language. As a result, Flash / Flex developers will immediately feel at home but it’s very easy to learn even if you've never opened Flash in your life. The book targets Web designers, animators, Digital content producers, and Flash and Flex developers.

It’s assumed that you will have some experience in HTML and pure JavaScript.

Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software