Canvas, créer des animations dynamiques en HTML5

Objectifs

Dessiner, animer, créer des graphiques et des images

Créer des bannières interactives et des jeux

Créer des animations 3D

Participants

Développeurs de contenus Web riches, toutes les personnes souhaitant découvrir ou opérer une migration vers HTML 5.

Pré-requis

Bonnes connaissances du HTML et des technologies du Web. Connaissance du langage de programmation JavaScript.

Moyens pédagogiques

1 poste par participant - 1 Vidéo projecteur - Support de cours fourni à chaque participant – Formation présentielle

Durée

2 jours

Les sessions inter-entreprises

Date Session
Ce plan de cours est établi à titre indicatif. Son contenu peut être adapté à chaque formation Télécharger la fiche pdfDemander un devis

Code

CANVAS-CREANIMHTML5

Description détaillée

HTML 5 rappels 

Composants d'une application Web.

Tour d'horizon des frameworks HTML 5.

Les nouvelles API orientées médias.

Perspectives et conséquences pour les développeurs.

Le langage JavaScript : mise à niveau.

Travaux pratiques 

Programmation autour des nouvelles API JavaScript.

 

L'API Canvas avec JavaScript 

L'élément Canvas. Présentation de L'API.

Dessiner : gestion du remplissage.

Création des formes.

Importer, utiliser des images et manipuler les pixels.

Gestion du texte. Création des effets (ombres...).

Première animation et principes pratiques.

Optimiser le canvas.

Travaux pratiques 

Révision et programmation JavaScript. Utilisation avec l'élément canvas pour réaliser des graphiques.

 

Création d'un concept Rich Media 

Motivation utilisateur : "feedback", "fish bait", émotionnelle...

Gameplay : règles et ergonomie.

Structurer les écrans essentiels : ouverture, interstice, "packshot".

Intégrer un processus de conception partagée.

Intégrer une dimension sociale par les réseaux : Facebook.

Préparation et organisation des ressources.

Réflexion collective

Création inversée du plan conceptuel à partir d'une étude de cas concrète. Définition d'un concept personnalisé de contenu Rich Media promotionnel selon les ressources fournies.

 

Faciliter la création avec les frameworks 

Quelle solution choisir ? KineticJS, PaperJS, FabricJS ...

KineticJS, présentation et concepts. Tour d'horizon de l'API.

Organisation des ressources : stage, layers, groups.

Création de tracés et importation de bitmap.

Gestion des événements.

Animation et interpolation. Drag and Drop.

Travaux pratiques 

Création de bannières interactives et de jeux connectés

 

3D avec Three.js 

3D en Javascript, présentation et théorie.

Notion de scène : création.

Mise en oeuvre des caméras.

Concepts clés du framework.

Gestion des lumières.

Définition et animation d'objets.

Application de textures.

Travaux pratiques 

Création d'une animation HTML 5 en 3D avec Three.js

 
 

 

 
 

Les dernières places disponibles

Aucune annonce pour le moment
Une erreur est survenue
Une erreur est survenue, l'administrateur a été contacté
Revenir à la première page