Sujets sur : Adobe Flash

Le Cours AS3 de cette semaine aborde un sujet qui prend de plus en plus d’importance  : la 3D dans Flash.

Effectivement, le Flash Player 11 est orienté 3D avec une amélioration significative des performances et une utilisation du GPU (processeur de la carte graphique).

Pour exploiter ces nouvelles possibilités de Flash, nous allons nous intéresser au moteur 3D : Away3D.

Un moteur open source, très performant, avec une version optimisée pour le Flash Player 11 (qui sort prochainement).

Voici ce que vous allez apprendre dans ce Cours ActionScript :

• Comment implémenter et utiliser l’API Away3D dans une application flash.
• Le code complet pour créer un effet 3D sur un champ texte en utilisant des polices dynamiques (chargement à la volée).
• Les principales fonctionnalités de Away3D.
• Les possibilités offertes par la version 11 du Player Flash avec ce moteur 3D !
• Un parcours de l’API Away3D avec la découverte de plusieurs classes : création d’une scène 3D, gestion de la caméra, du rendu d’une vue en 3D, l’import / export de fichiers…

 

• Et encore plein d’autres possibilités… le moteur Away3D regorge de fonctionnalités 😉

Cette formation vous permettra de découvrir l’API Away3D et de créer votre première application flash en 3D.

Tout au long de l’année, plusieurs cours ActionScript sont entièrement consacrés au moteur Away3D.

Le moteur Away3D

Version démonstration

Ci-dessous un exemple tout simple d’utilisation de la 3D dans flash !

Télécharger le code source du cours AS3

Vous trouverez l’ensemble du code source commenté pour vous aider dans l’utilisation du moteur Away3D dans vos applications flash.

Télécharger “Away3D Effet Texte”

away3D-text-effect-ex1.zip – Téléchargé 829 fois – 969,49 Ko

Téléchargez la dernière version du moteur Away3D.

Vous pouvez consulter la documentation complète de l’API Away3D.

Et voici les sources ActionScript Away3D sur Google Code.

Et vous, quel moteur 3D utilisez-vous dans vos applications flash ? Away3D, Sandy 3D, Parpervision3D ?

Dites-moi votre moteur 3D préféré et pourquoi celui là dans les commentaires.

Bonjour, je suis Matthieu, Formateur des Développeurs ActionScript.

Ma programmation ActionScript a fait un bon énorme en avant grâce à la Méthode AS3 Facile.

Le Langage ActionScript 3, c’est Facile

Le développement avec l’AS3 n’a jamais été aussi simple, en très peu de temps, il est tout à fait possible de programmer des jeux flash !

Mais comment je fais ? Suivez le guide.

1ère étape : est ce que vous utilisez une méthode de programmation ?

C’est à dire, est ce que vous avez une méthodologie de référence pour vous guider dans la réalisations vos projets flash ?

C’est une question simple que je pose souvent aux débutants désirant apprendre le langage ActionScript 3. La plupart du temps, il me regarde avec étonnement, en ne sachant pas quoi répondre, tellement cette question est inhabituelle.

Dans 90% des cas, j’obtiens la réponse suivante : quoi, une méthode pour programmer en AS3, ça ne sert à rien !!!

Tout simplement, parce que les développeurs apprennent tout par eux mêmes, en consultant différents sites, en prenant des ressources à droite, à gauche, sans réellement d’organisation globale. Et surtout sans même comprendre comment fonctionne le code source téléchargé, ni comment le modifier pour l’adapter à un autre projet ou le faire évoluer avec des fonctionnalités supplémentaires.

Le but est de consulter le maximum de tutoriels, de codes sources pour répondre au projet en cours, au bugs sur notre application.

En fait, c’est comme se soigner après être malade. A chaque bugs, ou projet flash, le développeur consulte de nouveau plusieurs sites et codes source ActionScript.

Alors qu’il serait plus simple de faire du préventif, c’est à dire avoir une certaine hygiène de vie qui prévient les maladies. Donc en programmation, cela revient à utiliser une méthode, des stratégies qui ont fait leurs preuves, celles-ci réduisent fortement le nombre de bugs, de problèmes, de difficultés rencontrées pendant la réalisation d’un projet flash.

Ceci dit, il existe plusieurs solutions pour se former en programmation ActionScript.

2ème étape : OK, la programmation AS3 vous parait difficile.

Est ce que vous avez des ressources organisées sur l’AS3 ?

Si oui, passez à l’étape 3.

Si non, il est temps de vous pencher sur la question et d’arrêter de consulter différents codes source sans comprendre leur fonctionnement, ni le fonctionnement du Player Flash.

Je comprends qu’il parait plus facile de trouver la réponse à votre bug ou problème de programmation tout de suite, pour ce projet à rendre pour avant hier !

Mais honnêtement, ne vaudrait-il pas mieux résoudre ces difficultés une bonne fois pour toute ?

Si vous consultez des codes sources sans comprendre leur fonctionnement, vous ne progresserez jamais en programmation. Vous resterez toujours au même stade, avec les mêmes bugs et les mêmes problèmes.

Ceci dit, vous faites le bonheur de ces sites qui vendent des templates flash, des classes ActionScript prêts à l’emploi (souvent limités à l’usage..). Ces sites là ont besoin de développeurs comme vous !!!

Si toutefois, vous décidez d’apprendre réellement à la programmation ActionScript 3, de comprendre le principe de fonctionnement de l’AS3, du Player Flash, je vous invite à consulter ce sujet sur le livre gratuit Pratique d’ActionScript 3.

Ensuite, vous pouvez commencer petit à petit par suivre les Cours AS3 en Vidéos (commencez par la dernière page pour les premiers articles sur les bases de l’AS3) puis de continuer par acquérir les techniques d’un Développeur ActionScript confirmé.

3ème étape : essayez d’organiser votre programmation, pas de réinventer la roue à chaque projet.

Je suis persuadé qu’il est indispensable de développer ses propres classes utilitaires (ou d’utiliser un Framework AS3) en fonction du type de projet sur lesquels l’on développe.

Effectivement, si vous développez souvent des interfaces utilisateurs, un Framework de composants visuels (comme le Framework AS3 Facile) vous fera gagner un temps phénoménal. Vous n’aurez plus besoin de redévelopper à chaque fois une scrollbar, une liste déroulante, des combobox…

Avec vos classes utilitaires, vous pourrez vous concentrer sur l’implémentation des graphismes et des fonctionnalités de votre application.

Une stratégie de programmation efficace vous laisse du temps libre pour de la recherche technologique, l’amélioration de vos techniques de programmation, des tests d’API…

Petit à petit, vous possédez des compétences de plus en plus appréciées par votre employeur ou chef de projet. Vous devenez un développeur de confiance capable de faire face à tous les types de projets flash. Et vous devenez force de proposition sur les nouveaux projets. A ce moment là, de nouvelles portes s’ouvrent à vous 😉

Ainsi plutôt que de vous stresser à chaque nouveau projet, de copier-coller, d’acheter des templates ou des classes AS3 à droite, à gauche. Efforcez-vous de créer des classes ActionScript réutilisables, d’organiser votre code et de progresser dans votre gestion de projet (analyse, développement, programmation, outils, tests…).

Ce qui nous amène à la 4è étape.

4ème étape : La Programmation AS3, c’est Facile.

Formez-vous, trouvez une méthode de programmation.

Dès ma découverte du monde de la programmation, j’ai compris 2 choses :

• Pour devenir compétent dans un langage de programmation, il faut s’inspirer des meilleurs développeurs, de leur façon de programmer, comprendre leur mode de pensée, étudier leurs codes sources.

 

• Pour progresser très rapidement, il faut se former auprès des experts reconnus qui ont fait leurs preuves. Ne pas hésiter à investir dans des formations efficaces qui proposent une Méthode éprouvée de programmation.

 

Alors, oui, il faut faire le tri parmi toutes les ressources qui existent sur internet. Il est nécessaire de prendre le temps de lire des livres sur le langage que nous souhaitons apprendre.

Effectivement, les livres sont le moyen le plus abordable pour apprendre un nouveau langage. Personnellement, je lis beaucoup, que ce soit des livres de programmation informatique, de business, gestion de projets…

Et vous, comment apprenez-vous un nouveau langage de programmation ?

Vous arrive-t-il d’acheter des templates, des classes ActionScript toutes prêtes ?

Ou avez-vous suivi une formation spécifique ? Laquelle ?

 

Qu’est ce SWFObject ?

SWFOjbect 2 :

• Fournit 2 méthodes optimisées pour afficher le Player Flash, une approche par balise et une méthode utilisant le JavaScript.
• Fournit une API JavaScript contenant un panel complet d’outils, pour afficher des fichiers SWF et récupérer les informations du Player Flash.
• Utilise seulement un petit fichier JavaScript (10Kb / GZIPed : 3.9 Kb ).
• Successeur de SWFObject 1.5, UFO et Adobe Flash Player Detection Kit.
• Créé pour regrouper toutes les méthodes d’affichage du Player Flash et fournir un nouveau standard pour embarquer le contenu Adobe Flash Player.

Pourquoi devez-vous utiliser SWFObject ?

SWFOjbect 2 :

• Plus optimisé et plus souple que les autres solutions d’affichage du Player Flash.
• Fournit une solution pour tout le monde, ce n’est pas un problème si vous êtes un développeur HTML, Flash ou JavaScript, cela est pratique pour tout le monde.

• Casse le cycle bloqué dans des balises spécifiques aux constructeurs et met en avant l’utilisation des standards du web et le contenu alternatif.
• Utilisation du JavaScript non intrusif et les meilleures pratiques JavaScript.
• Facile à utiliser.

L’article Flash Embedding Cage Match du site A List Apart décrit le raisonnement complet de SWFObject 2.

Pourquoi SWFObject utilise JavaScript ?

Premièrement, SWFObject 2 utilise JavaScript pour résoudre les problèmes qui ne peuvent être résolus par des balises seules.

SWObject 2 :

• Détecte la version du Player Flash et détermine si le contenu Flash ou le contenu alternatif doit être visible, pour éviter d’avoir un plugin Flash « déprécié » et un mauvais rendu du contenu Flash.

 

• Fournit des fonctionnalités pour basculer sur le contenu alternatif dans le cas d’un plugin Flash « déprécié en manipulant le DOM (Note:  si le plugin Flash n’est pas installé, l’objet HTML bascule automatiquement sur le contenu alternatif).

 

• Donne la possibilité d’utiliser Adobe Express Install pour télécharger la dernière version du Flash Player.
• Fournit une API JavaScript pour effectuer les opérations classiques liées au Flash Player et à Flash.

Dois-je utiliser la méthode de publication statique ou dynamique ?

SWFObject 2 propose 2 méthodes différentes pour afficher du contenu Flash :

1. La méthode la publication statique intègre à la fois le contenu Flash et du contenu alternatif en utilisant un balisage conforme aux standards, et utilise JavaScript pour résoudre les problèmes qui le balisage seul ne peut résoudre.

2. La méthode de publication dynamique est basé sur un contenu alternatif et utilise JavaScript pour remplacer ce contenu avec du contenu Flash si la version de Flash Player demandée est installé et le support JavaScript est disponible (comme les versions précédentes de SWFObject et UFO).

Les avantages de la méthode de publication statique sont les suivants :

1. La mise en avant d’utilisation des normes de balisage conformes.
2. Meilleure performance d’intégration.
3. Le système d’intégration de contenu Flash ne s’appuie pas sur un langage de script, de tel sorte que votre contenu Flash peut atteindre une audience plus significative :

• Si vous avez le plug-in Flash installé, mais avec le JavaScript désactivé ou vous utilisez un navigateur qui ne supporte pas le JavaScript, vous serez toujours en mesure de voir votre contenu Flash.

 

• Flash va désormais fonctionner sur un appareil comme une Sony PSP, qui a un très faible support de JavaScript.
• Les outils automatisés tels que les lecteurs RSS sont en mesure d’indexer le contenu Flash

Les avantages de la méthode de publication dynamique sont les suivants :

1. Il s’intègre très bien avec les applications scriptées et permet l’utilisation de variables dynamiques (flashvars).
2. Il évite le système d’activation du contenu Flash dans Internet Explorer 6 / 7 et Opera 9 +.  Notez que Microsoft a éliminé la plupart des contenus à activer à partir de son navigateur Internet Explorer.

 

Comment intégrer du contenu Flash en utilisant SWFObject avec la méthode statique

ÉTAPE 1: ajouter le contenu Flash et le contenu alternatif en utilisant des balises conformes

Les balises de SWFObject utilisent l’imbrication des objets (avec Internet Explorer, des commentaires conditionnels) http://www.alistapart.com/articles/flashembedcagematch/ pour assurer la compatibilité maximale des navigateurs et le support des balises, tout en étant conforme aux normes et en ajoutant un contenu alternatif http://www.bobbyvandersluis.com/flashembed/testsuite/

[codesyntax lang= »html4strict » title= »ETAPE 1 : SWFObject 2″]

[/codesyntax]

REMARQUE : la méthode imbriquée objets nécessite une définition double objet (l'objet externe ciblant Internet Explorer et l'objet interne ciblant tous les autres navigateurs), vous avez donc besoin de définir les attributs de votre objet et éléments param imbriquées à deux reprises.

Attributs Requis:

• classid (élément objet extérieur uniquement, la valeur est toujours clsid: D27CDB6E-AE6D-11cf-96B8-444553540000).
• type (élément objet interne uniquement, la valeur est toujours application / x-shockwave-flash).
• data (élément objet interne uniquement, définit l’URL d’un fichier SWF).
• width (deux éléments objet, définit la largeur d’un fichier SWF)
• height (à la fois des éléments objet, définit la hauteur d’un SWF)

Élément param requis :

• movie (élément objet externe seulement, définit l’URL d’un fichier SWF)

NOTE : nous vous déconseillons d’utiliser l’attribut codebase pour pointer vers l’URL de l’installeur du plugin Flash sur les serveurs d’Adobe, car c’est illégal selon les spécifications qui en limitent l’accès au domaine du document en cours seulement. Nous recommandons l’utilisation du contenu alternatif avec un message indiquant à l’utilisateur qu’il peut avoir une expérience plus riche en téléchargeant le plugin Flash.

 

Comment pouvez-vous utiliser HTML pour configurer votre contenu Flash?

Vous pouvez ajouter des attributs optionnels, ils sont souvent utilisées sur l’élément objet:

• id
• name
• class
• aligner

Vous pouvez utiliser les option suivantes de Flash associées à l’élément param (plus d’info) :

• play
• loop
• menu
• quality
• scale
• salign
• wmode
• bgcolor
• base
• swliveconnect
• flashvars
• devicefont (plus d’info)
• allowScriptAccess (plus d’info ici et ici )
• seamlesstabbing (plus d’info)
• allowFullScreen (plus d’info)
• allowNetworking (plus d’info)

Pourquoi devez-vous utiliser le contenu alternatif ?

L’élément objet permet d’ajouter du contenu alternatif, qui sera affichée si Flash n’est pas installé ou pris en charge. Ce contenu sera également repris par les moteurs de recherche, ce qui en fait un outil formidable pour créer du contenu pour les moteurs de recherche. En résumé, vous devez utiliser un contenu alternatif si vous souhaitez créer du contenu qui est accessible pour les gens qui naviguent sur ​​le Web sans plugins , créer du contenu pour les moteurs de recherche ou de dire aux visiteurs qu’ils peuvent avoir une expérience utilisateur plus riche en téléchargeant le plug-in Flash .

ÉTAPE 2: Inclure la bibliothèque SWFObject JavaScript dans l’entête de votre page HTML

La bibliothèque SWFObject utilise un fichier JavaScript externe. Le code de SWFObject sera exécutée dès qu’il est lu et il exécutera toutes les manipulations DOM dès le DOM est chargé – pour tous navigateurs compatibles, comme IE, Firefox, Safari et Opera 9 + – ou sinon dès dès la diffusion de l’événement onload :

[codesyntax lang= »html4strict » title= »inclusion de SWFObject » bookmarkname= »inclusion de SWFObject »]

[/codesyntax]

ÉTAPE 3: enregistrer votre contenu Flash avec la bibliothèque SWFObject et dire à SWFObject quoi faire avec lui

Premièrement, renseignez un identifiant unique à la balise objet qui définit votre contenu Flash. Deuxièmement, appelez la méthode swfobject.registerObject:

1. Le premier argument (String, obligatoire) spécifie l'ID utilisé.
2. Le second argument (String, obligatoire) spécifie la version requise du lecteur Flash pour la publication de votre contenu. Il active la détection de la version Flash pour un fichier SWF pour déterminer s’il faut afficher le contenu Flash ou le contenu alternatif en effectuant une manipulation du DOM. Alors que les numéros de version flash respectent normalement ce principe : major.minor.release.build, SWFObject regarde seulement les 3 premiers numéros, donc les deux «WIN 9,0,18,0″ (IE) ou « Shockwave Flash 9 r18 « (tous les autres navigateurs ) se traduira par « 9.0.18 ». Si vous voulez seulement tester une version majeure, vous pouvez omettre les numéros de version mineure et mettre «9» au lieu de « 9.0.0 »

3. Le troisième argument (String, optionnel) est utilisé pour activer Adobe Installation express et spécifie l’URL de votre fichier SWF « Express Install ». « Express Install » affiche une boîte de dialogue flash standardisée « Téléchargez le plugin » à la place de votre contenu Flash, lorsque la version du plugin requis n’est pas disponible. Un fichier par défaut expressInstall.swf est fournis avec le projet. Il contient également le fichier expressInstall.fla et les fichiers AS (dans le répertoire SRC) pour vous permettre de créer votre SWF Express Install . Notez que »Express Install » s’éxécute une seule fois (la première fois qu’il est invoqué), qu’il est uniquement pris en charge par Flash Player 6.0.65 ou supérieur sur Windows ou Mac, et qu’il exige une taille minimale SWF de 310px par 137px.

4. Le quatrième argument (fonction JavaScript, optionnel) est utilisé pour définir une fonction de rappel, qui est appelée à la fois en cas de succès ou d’échec de l’intégration du fichier SWF (voir la documentation de l’API )

[codesyntax lang= »html4strict » title= »enregistrement de SWFObject » bookmarkname= »enregistrement de SWFObject »]

[/codesyntax]

CONSEILS

• Utilisez le générateur de code HTML et JavaScript SWFObject pour vous aider dans l’intégration de votre contenu flash.
• Répétez juste les étapes 1 et 3 pour ajouter de plusieurs fichiers SWF dans la même page HTML.

Comment intégrer du contenu Flash en utilisant SWFObject avec la méthode dynamique

ÉTAPE 1: Créer le contenu alternatif en utilisant des balises conformes

La méthode dynamique de SWFObject suit le principe de l’amélioration progressive et remplace le contenu alternatif HTML par le contenu Flash lorsque le JavaScript et le support du plug-in Flash sont disponibles. D’abord définir votre contenu alternatif et identifiez le avec un id:

[codesyntax lang= »html4strict » title= »création du contenu alternatif » bookmarkname= »création du contenu alternatif »]

[/codesyntax]

 

ÉTAPE 2: Inclure la bibliothèque SWFObject JavaScript dans l’entête de votre page HTML

La bibliothèque SWFObject utilise un fichier JavaScript externe. SWFObject sera exécutée dès qu’il est lu et exécutera toutes manipulations DOM dès que le DOM est chargé – pour tous navigateurs compatibles, comme IE, Firefox, Safari et Opera 9 + – ou sinon dès que l’événement onload est diffusé :

[codesyntax lang= »html4strict » title= »inclure le javascript SWFobject » bookmarkname= »inclure le javascript SWFObject »]

[/codesyntax]

 

ÉTAPE 3: affichage du SWF avec JavaScript

swfobject.embedSWF (swfUrl, id, largeur, hauteur, la version requise, expressInstallSwfurl, flashvars, params, les attributs, callbackFn)possède cinq paramètres obligatoires et cinq arguments facultatifs :

1. swfUrl (String, obligatoire) spécifie l’URL du votre fichier SWF
2. Id (String, obligatoire) spécifie l'id de l’élément div HTML (contenant votre contenu alternatif) que vous aimeriez remplacer par votre contenu Flash
3. largeur (String, obligatoire) spécifie la largeur de votre SWF
4. hauteur (String, obligatoire) spécifie la hauteur de votre SWF
5. Version (String, obligatoire) spécifie la version requise du lecteur Flash pour votre fichier SWF (le format est: « major.minor.release » ou « major »)
6. expressInstallSwfurl (String, optionnel) spécifie l’URL de votre fichier SWF « Express Install » et active Adobe Express Install. Notez que « Express Install » s’éxécute une seule fois (la première fois qu’il est appelé), qu’il est uniquement pris en charge par Flash Player 6.0.65 ou supérieur sur Windows ou Mac, et qu’il exige une taille minimale SWF de 310px par 137px.
7. flashvars (Object, optionnel) spécifie vos valeurs flashvars avec une association nom: valeur.
8. params (Object, optionnel) spécifie vos éléments params avec une association nom: valeur.
9. attributes (Object, optionnel) spécifie les attributs de votre objet avec une association nom: valeur.
10. callbackFn (fonction JavaScript, en option) est utilisé pour définir une fonction de rappel qui est appelée à la fois en cas de succès ou d’échec de l’intégration de votre fichier SWF (voir la documentation de l’API ).

REMARQUE : vous pouvez omettre les paramètres optionnels, tout en respectant l’ordre des paramètres. Si vous ne souhaitez pas utiliser un paramètre facultatif, mais utiliser le paramètre facultatif suivant, vous pouvez simplement passer la valeur false. Pour les flashvars, params et attributes des objets JavaScript, vous pouvez également passer un objet vide à la place: {}.

 

[codesyntax lang= »html4strict » title= »afficher votre contenu flash » bookmarkname= »afficher votre contenu flash »]

[/codesyntax]

Comment configurer votre contenu Flash?

Vous pouvez utiliser les attributes optionnels de l’élément object :

• id (REMARQUE: lorsqu’il est indéfinis, l’élément objet hérite automatiquement de l'id de l’élément conteneur du contenu alternatif)
• align
• name
• styleclass (regardez les notes à propos de class)
• class

Remarque : class est un mot-clé réservé en ECMA4 et génèrera des erreurs avec Internet Explorer si elle est entourée par des guillemets (par exemple "class" ou 'class'). C’est pour cette raison que swfobject fournit le mot-clé styleClass comme alternative sûre pour class; si vous utilisez styleClass, swfobject l’insère automatiquement dans la valeur classe.

Exemple :

[codesyntax lang= »javascript »]

[/codesyntax]

Si vous préférez utiliser la class au lieu de styleClass, mettez class mot entre guillemets comme ceci :

[codesyntax lang= »javascript »]

[/codesyntax]

Vous pouvez utiliser les éléments optionnels param (plus d’informations):

• play
• loop
• menu
• quality
• scale
• salign
• wmode
• bgcolor
• base
• swliveconnect
• flashvars
• devicefont (plus d’informations)
• allowscriptaccess (plus d’informations ici et ici)
• seamlesstabbing (plus d’informations)
• allowfullscreen (plus d’informations)
• allownetworking (plus d’informations)

Comment utiliser les Objets JavaScript afin de définir les valeurs de flashvars, params et attributes ?

Vous pouvez définir vos Objets JavaScript en utilisant la notation Object littérale, qui ressemble à :

[codesyntax lang= »javascript »]

[/codesyntax]

Vous pouvez ajouter vos associations nom: valeur dans la définition de l’objet (note: assurez-vous de ne pas mettre une virgule derrière le nom mais dernière la valeur à l’intérieur de l’objet).

[codesyntax lang= »javascript »]

[/codesyntax]

Ou ajouter des propriétés et des valeurs après sa création en utilisant une notation pointée :

[codesyntax lang= »javascript »]

[/codesyntax]

Que vous pouvez aussi écrire (cette version est moins lisible pour les développeurs) :

[codesyntax lang= »javascript »]

[/codesyntax]

Si vous ne souhaitez pas utiliser un argument optionnel, vous pouvez le définir comme false ou comme un objet vide (NOTE: à partir SWFObject 2.1, vous pouvez aussi utiliser null ou 0):

[codesyntax lang= »javascript »]

[/codesyntax]

L’objet flashvars est une notation abrégée qui est là pour simplifier son utilisation. Vous pouvez l’ignorer et renseigner flashvars via l’objet params :

[codesyntax lang= »javascript »]

[/codesyntax]

CONSEILS

• Utilisez le générateur de code HTML et JavaScript SWFObject pour vous aider à intégrer votre contenu flash.
• Répétez juste étapes 1 et 3 pour afficher plusieurs fichiers SWF dans la même page HTML.

Conseils pour la migration de SWFObject 1.5 vers SWFObject 2

1. SWFObject 2 est PAS rétrocompatibles avec SWFObject 1.5.
2. Il est conseillé d’ajouter tous vos blocs de scripts dans l’entête de votre page HTML. L’ajout vos scripts dans le corps de la page peut avoir impact visuel (par exemple : un clignotement lorsque le contenu alternatif est remplacé), parce votre code JavaScript sera exécuté ultérieurement (l’impact exact dépend votre implémentation).
3. La bibliothèque elle-même est maintenant écrite en minuscules : swfobject au lieu de SWFObject.
4. Les méthodes sont accessibles uniquement via la bibliothèque (plutôt que via une instance SWFObject dans SWFObject 1.5).
5. L’ API JavaScript est totalement différente et plus complexe.
6. SWFObject 2 remplace l’ensemble de votre contenu alternatif HTML, y compris l’élément div HTML, par le contenu Flash lorsque le JavaScript et le Flash sont disponibles, tandis que SWFObject 1.5 remplace seulement le contenu dans la div HTML référencé. Lorsque vous ne renseignez pas un attribut id, l’élément objet hérite automatiquement de l'id de l’élément div HTML de votre contenu alternatif.

Conseils pour la migration de UFO vers SWFObject 2

1. SWFObject 2 remplace l’ensemble de votre bloc de contenu HTML, y compris l’élément div HTML référencés, par le contenu Flash lorsque le JavaScript et le Flash sont disponibles, tandis que UFO ne remplace que le contenu dans la div HTML référencé. Lorsque vous ne spécifiez pas un attribut id, l’élément objet hérite automatiquement l'id de l’élément div HTML de votre contenu alternatif.
2. La fonctionnalité setcontainercss d’UFO n’a pas été incorporé dans SWFObject 2, mais il peut facilement être reproduit en utilisant l’API JavaScript SWFObject , regardez : swfobject.createCSS (selStr, declStr).

Est ce que SWFObject 2 supporte le type MIME application/xhtml+xml ?

SWFObject 2 ne soutient PAS   le type MIME XML, qui est un pattern de conception.

Il y a plusieurs raisons pourquoi nous ne sont pas soutenons pas cela :

• Seul un très petit nombre (non significatif) des développeurs Web l’utilise.
• Nous sommes incertain de la direction de ce type. Internet Explorer ne le supporte pas et tous les autres navigateurs utilisent une nouvelle façon standard de parser l’HTML (avec HTML 5), qui s’éloigne de la vision actuelle du W3C pour parser du HTML comme du XML

 

• Nous économiser une taille considérable sur le fichier et notre travail (test, résoudre les bugs) en ne le soutenant pas.

Tutoriels (niveau débutant)

• Détecter la version du Player Flash et afficher des fichiers SWF avec SWFObject 2
• Fournir un contenu alternatif pour les fichiers SWF
• Afficher du Flash avec SWFObject 2.0 (tutoriel vidéo) par Lee Brimelow
• Ajouter du contenu Flash dans une page HTML (tutoriel vidéo) par Matthieu Deloison.

Commentaires

Si vous avez toute questions / commentaires sur SWFObject ou sa documentation, ou des problèmes d’implémentation :

1. Assurez-vous d’avoir lu la FAQ
2. Utilisez le groupe de discussion SWFObject

Si vous trouvez des bugs ou si vous voulez demander une amélioration future, vous pouvez remplir un rapport sur la page SWFObject questions

Il y a une étape de base très importante lors de la création d’une application : l’affichage du flash dans une page web.

Au premier abord, cela a plutôt l’air compliqué. Lors de mes débuts dans la programmation flash, il y avait tellement d’options différentes que j’utilisais les valeurs par défaut avec Adobe Flash.

Heureusement, un groupe de développeurs talentueux a développé du javascript pour nous simplifier énormément l’intégration du flash dans une page web 😉

Voici ce que je vais vous apprendre :

• Comment ajouter du contenu flash dans une page html.
• Comment utiliser la puissance du script swfobject avec le flash.
• Toutes les possibilités offertes par l’API swfobject.
• Comment proposer à vos internautes la mise à jour automatique de leur player flash par un simple clique !
• Comment rendre votre balise flash <object> conforme XHTML.
• Une solution en ligne pour générer rapidement et facilement le code html nécessaire à l’affichage de votre application flash par un simple copier-coller 😉

 

• Comment détecter la version du player flash de votre visiteur et lui proposer une mise à jour automatique afin qu’il puisse profiter de l’ensemble des fonctionnalités de votre application flash.

 

• La technique pour utiliser automatiquement et sans mise à jour; une version toujours optimum de swfobject.
• Comment afficher un contenu alternatif à vos internautes qui n’ont pas le player flash installé.

A la fin de ce cours ActionScript, l’utilisation de swfobject pour afficher du contenu flash n’aura plus de secret pour vous !

SWFOBJECT

Télécharger le code source du cours AS3

Vous trouverez un exemple de code source utilisant les 2 techniques pour afficher du flash dans une page web.

Télécharger “swfobject”

ex-swfobject.zip – Téléchargé 1526 fois – 51,71 Ko

Téléchargez la dernière version de swfobject 2 avec les exemples d’utilisation.

Consultez l’API JavaScript pour connaître les possibilités de swfobject.

Récupérez votre code javascript directement avec le générateur en ligne swfobject.

Profitez automatiquement de la dernière version de swfobject avec le projet Google AJAX Libraries API.

Consultez la Documentation complète de SWFObject.

Et vous, utilisez-vous swfobject pour afficher votre contenu flash ?

Ou préférez-vous le fichier html généré automatiquement par Adobe Flash ?

Partagez vos motivations par rapport à votre solution utilisée.

Cette nouvelle interview est consacrée à Damien Buchet : Développeur ActionScript 3 avec PaperVision 3D.

Voici ce que vous allez découvrir :

• Comment Damien a débuté la programmation ActionScript.
• Quelles sont les ressources, sa méthodologie pour améliorer sa programmation ActionScript.
• Comment Damien a perfectionné sa connaissance de l’ActionScript 3 avec Google et des tutoriels.
• Comment et en combien de temps il a pu développer son premier projet en 3D Flash.
• Son point de vue sur l’utilisation des Frameworks ActionScript.
• Comment structurer ses projets ActionScript.
• Quelle organisation adopter pour son application Flash.
• Damien vous fournit même un exemple simple pour découvrir l’utilisation de PaperVision 3D.

 

Exemples SWF Flash avec PaperVision 3D

Voici l’application flash qui utilise PaperVision 3D pour le déplacement du cube.

Les exemples ci-dessous utilisent les tweens de Grant Skinner.

Utilisez les touches directionnelles et votre souris pour changer la position de la caméra.

Ci-dessous, l’exemple de Damien avec une petite modification sur la gestion des touches directionnelles.

Télécharger “Exemple Papervision 3D”

ex-papervision-3D-interview.zip – Téléchargé 640 fois – 748,72 Ko

Téléchargez le Framework Tweens de Grant Skinner.

Téléchargez le Framework 3D Flash Papervision 3D.

Allez visiter le site de Damien Buchet. Vous découvrirez les projets ActionScript qu’il a développé.

Avez-vous déjà utiliser la 3D dans Flash ?

Avec Papervision 3D, Sandy 3D Engine ou un autre Framework ?

Partagez vos exemples d’application et retour d’expérience dans les commentaires ci-dessous.

C’est super, vous arrivez maintenant à concevoir des applications flash de plus en plus interactives et sympa pour l’utilisateur 😉

Comme moi, au début de la programmation actionscript Flash, vous avez sans doute remarqué que plus une application contient des graphismes et de l’interactivité avec l’utilisateur, plus elle consomme des ressources mémoires !

Ce qui est très dérangeant pour donner une bonne expérience à notre utilisateur.

De ce fait, l’optimisation du code actionscript mais pas seulement devient primordiale.

Il est également possible d’optimiser les graphismes utilisés dans l’application Flash.

Tout cela est disponible à travers l’excellent livret « Optimizing Flash Ads » écrit par Thibault Imbert.

Comme ce livret est uniquement disponible en anglais.

Je me suis permis de vous le traduire en français : ce qui donne l’Optimisation des Publicités Flash.

Profitez-en, c’est une mine d’or pour améliorer simplement les performances d’une application flash 😉

Dans ce livret gratuit de formation ActionScript, vous apprendrez :

•  Comment l’option « redessiner les zones » peut vous aider à visualiser les objets graphiques gourmands en ressources CPU.
• Comment optimiser la taille de vos graphismes / formes avec l’outil lissage.
• Pourquoi un framerate élevé peut ruiner les performances de votre application.
• Quelles sont les options simples à mettre en œuvre en ActionScript pour augmenter significativement les performances de votre application.
• Pourquoi et comment la vidéo peut sauver votre application.
• Comment utiliser efficacement les Timers pour diminuer au maximum leur influence sur les ressources CPU nécessaires.
• Pourquoi il faut se méfier des interactions avec la souris.
• Et encore bien d’autres conseils essentiels … à appliquer pour créer des applications flash fluides et sympas pour l’utilisateur.

 Télécharger le livret de formation

Pour télécharger le livret « Optimisation des Publicités Flash« , cliquez sur le lien ci-dessous :

Télécharger “Optimisation des Publicités Flash”

Ads-Optimizations-v1-fr.pdf – Téléchargé 1520 fois – 1,35 Mo

Dites-moi ce que ce guide vous a apporté

Partagez votre retour dans les commentaires pour m’aider à l’améliorer.

Je compte le compléter en fonction des évolutions du Player Flash.

Profitez-en pour poster vos exemples de publicités flash optimisées !

Vous commencez à mieux connaitre la programmation actionscript.

Par contre, il est vrai que les licences logiciels (Adobe Flash CS5, FDT…) représentent un coût non négligeable.

Dans les cours précédents, nous avons découvert l’éditeur actionscript FlashDevelopp (gratuit). Puis nous avons également appris à créer des swf de polices partagées avec swfmill.

Savez-vous qu’il est possible de créer gratuitement des applications swf ?

Je vais tout vous expliquer dans ce cours vidéos.

Voici ce je vais vous apprendre :

• Quel logiciel utiliser pour créer des swf gratuitement ?
• Comment utiliser le logiciel swfmill ?
• Comment paramétrer swfmill ?
• Quelles sont les différentes fonctionnalités, options de swfmill ?
• La technique de création pas à pas de votre première application flash avec swfmill.

A la fin de cette formation, vous serez à même de concevoir des applications flash sans utiliser le logiciel Adobe Flash.

swfmill pour créer des applications flash

[dailymotion]http://www.dailymotion.com/video/xk69ud_creer-des-swf-gratuitement-sans-adobe-flash-cs5-mais-avec-swfmill_tech[/dailymotion]

Version démonstration

Ci-dessous, le résultat de l’application créée avec swfmill.

Télécharger le code swfmill

Vous trouverez l’ensemble du code source commenté pour vous aider dans l’utilisation de swfmill pour la création de vos applications flash.

Télécharger “swfmill exemple application”

ex-swfmill.zip – Téléchargé 1027 fois – 217,90 Ko

Télécharger le logiciel gratuit swfmill.

Ci-dessous, le fichier xml qui permet à swfmill de créer un swf.

[codesyntax lang= »xml » title= »library.xml » bookmarkname= »library.xml »]

[/codesyntax]

Avez-vous déjà utilisé swfmill ?

Quelles applications avez-vous programmé avec swfmill ?

Partagez vos liens dans les commentaires ci-dessous.

Savez-vous qu’il possible de programmer des applications flash beaucoup plus rapidement avec un éditeur Actionscript digne de ce nom ?

Ca y est, vous commencez à être beaucoup plus à l’aise en programmation flash !

Tout comme vous, au début, j’écrivais du code actionscript directement dans le logiciel Adobe Flash, la galère !!!

Compliqué, fastidieux, une compilation longue, une multitude de défauts rebutants qui enlève tout le plaisir de la programmation flash.

Eh oui, 80%  des développeurs débutants font comme vous, en compilant des swf avec le logiciel Adobe Flash.

En utilisant un éditeur Actionscript performant, vous allez redécouvrir le plaisir de vous concentrer uniquement sur la création de vos classes actionscript.

Fini les longs temps d’attente de compilation, l’ajout de paramètres compliqués…

Voici ce que je vais vous montrer :

• Comment installer et utiliser cet éditeur sur Windows, MAC ou Linux.
• Comment exploiter chacune des fonctionnalités pas à pas.
• La méthode simple pour compiler des applications très rapidement, d’un seul clic de souris !
• Comment partager votre code source avec vos prestataires / freelance, sans que ceux-ci puissent le copier / modifier.
• Comment mettre en œuvre la solution de création simplifiée de bibliothèques swc.

Ce cours consiste à vous aider à profiter au maximum des fonctionnalités offertes par cet éditeur actionscript, afin de vous aider à programmer efficacement.

Laissez-moi vous présenter l’éditeur Actionscript qui a grandement simplifié et amélioré mon développement d’applications flash.

Cet éditeur actionscript FDT vous permet de  programmer efficacement et GRATUITEMENT

Et en plus, il fonctionne sur les plateformes Windows, Linux et MAC !

Découvrez dans cette vidéo, l’éditeur que j’utilise dans mes projets actionscript.

Guide Editeur FDT PowerFlasher

Pour vous aider à utiliser l’ensemble des fonctionnalités de FDT, j’ai rédigé un guide complet d’utilisation.

• Télécharger la version gratuite de FDT PowerFlasher.
• Télécharger le Livret Gratuit pour apprendre a utiliser FDT PowerFlasher.

Ce guide FDT contient également une offre spéciale, réservée uniquement aux lecteurs Actionscript Facile.

Et vous, quel est votre éditeur Actionscript préféré ?

Dites-moi dans les commentaires, l’éditeur actionscript que vous utilisez le plus souvent.

Quels sont ces fonctionnalités ?

Et pourquoi l’utilisez-vous ?