Sujets sur : Cours AS3
Afficher du flash dans une page HTML avec SWFObject
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é 1517 fois – 51,71 KoTé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.
Comment utiliser l’API Google Maps en ActionScript 3
Google Maps est partout, sur une multitude de site !!!
Et en plus, il est possible d’utiliser les cartes Google Maps gratuitement sur son site 😉
Voila, dans votre site full flash, comment implémenter la puissance de Google Maps ?
Google a mis à disposition des développeurs une API entièrement documentée (en anglais).
L’API Google Maps est donc le thème du cours AS3 de cette semaine.
Voici ce que vous allez apprendre :
- Comment implémenter utiliser l’API Google Maps dans un site flash.
- Le code complet pour personnaliser les contrôles Google Maps et les mettre à la couleur de votre application flash.
- Comment utiliser la majorité des fonctionnalités de l’API Google Maps avec votre application flash.
- Comment proposer à visiteurs des fonctionnalités identiques à Mappy ou Viamichelin, avec le calcul, l’affichage de l’itinéraire, étape par étape, et tout en flash !
- Et encore plein d’autres possibilités… l’API Google Maps est ultra complète pour une utilisation avec Flash 😉
Cette formation vous permettra d’être capable d’utiliser l’API Google Maps et d’implémenter les fonctionnalités dont vous avez besoin directement dans votre site full flash.
L’API Google Maps
Version démonstration
Ci-dessous la démonstration d’une application flash utilisant les cartes Google !
1 |
http://e6msyji6epr.exactdn.com/wp-content/uploads/2011/09/google-map.swf |
Télécharger le code source du cours AS3
Vous trouverez l’ensemble du code source commenté pour vous aider dans l’utilisation de l’API Google Maps dans vos applications flash.
Télécharger “API Google Maps”
ex-api-google-maps.zip – Téléchargé 911 fois – 238,54 KoPour utiliser les cartes Google Maps, vous avez besoin d’une API Key (c’est gratuit).
Vous pouvez consulter la documentation complète de l’API Google Maps.
Il est même possible de créer des cartes 3D Google Maps avec PaperVision 3D, visionnez les exemples de démo 3D.
Et vous, utilisez-vous l’API Google Maps dans une application flash ?
Par exemple, il est possible de proposer une carte de tous les membres ou utilisateurs d’une de vos applications.
Postez votre lien d’application implémentant l’API Google Maps dans les commentaires ci-dessous.
Comment personnaliser le Player Dailymotion en AS3 et utiliser le streaming ? (API Dailymotion)
Il y a quelques jours, vous avez appris à personnaliser complètement le Player Video YouTube.
Mais vous préférez utiliser Dailymotion 😉
C’est également possible de personnaliser le Player Vidéo Dailymotion.
C’est ce que vous allez découvrir dans le cours vidéos de cette semaine 😉
Voici ce que je vais vous apprendre :
- Comment personnaliser le Player Vidéo Dailymotion pour le mettre à l’image de votre site.
- Comment utiliser les fonctionnalités du Player Dailymotion sur votre site.
- La méthode pour avoir un serveur de streaming gratuit.
- Comment utiliser la puissance des serveurs Dailymotionpour votre site, pour diffuser vos vidéos, qu’elles soient privées et / ou publics.
- La stratégie pour utiliser l’API Dailymotionavec des performances optimisées.
- L’utilisation du Framework PureMVC pour architecturer le Player Dailymotion.
- Comment utiliser l’API Dailymotion, ses paramètres, sa configuration et les fonctionnalités proposées.
A l’issue de cette formation, vous saurez programmer votre propre Player Vidéo, avec cette fois, toutes les fonctionnalités du Player Dailymotion.
Et vous pourrez, bien évidemment, l’utiliser pour diffuser vos vidéos sur votre site.
API Dailymotion
Version démonstration
Ci-dessous, le résultat du Player Vidéo Dailymotion avec l’implémentation de contrôles supplémentaires pour la gestion de l’avance rapide.
Un cours complet avec le code source est disponible pour les membres AS3 Formation.
Ce Player s’appuie sur le Framework PureMVC.
Comme pour le Player YouTube, il est possible de complètement personnaliser graphiquement le Player Dailymotion.
1 |
http://e6msyji6epr.exactdn.com/wp-content/uploads/2011/08/dailymotion-streaming.swf |
Télécharger le code source du cours AS3
Vous trouverez l’ensemble du code source commenté pour utiliser l’API Dailymotion dans vos applications flash.
Télécharger “exemple player video dailymotion.”
ex-player-video-dailymotion.zip – Téléchargé 787 fois – 98,60 KoLa documentation de l’API Dailymotion (en anglais).
Les paramètres du Player Dailymotion (avec flashvars).
Un exemple d’intégration de l’API du Player Dailymotion.
Le site des créateurs de ce film sur Half Life.
Et vous, utilisez-vous l’API Dailymotion ou l’API You Tube dans vos applications flash ?
Postez votre application implémentant l’une des deux API dans les commentaires ci-dessous.
Dites-nous pourquoi vous préférez l’une ou l’autre API.
Comment utiliser les informations Facebook dans une application Flash ? (API Facebook)
Commentaires fermés sur Comment utiliser les informations Facebook dans une application Flash ? (API Facebook)
Facebook a un succès mondial… et c’est peu de le dire !!!
Il y a un potentiel énorme pour les développeurs… flash / actionscript évidemment 😉
Savez-vous que l’API Facebook vous donne accès à une multitude de fonctionnalités Facebook ?
Toutes prêtes à être mises en œuvre dans une application flash !
Elle est pas belle la vie 😉
L’API Facebook est donc le thème du cours AS3 de cette semaine.
Voici ce que vous allez apprendre :
- Comment ajouter dans une application flash et l’utiliser l’API Facebook.
- La méthode pour configurer votre fichier html avec l’appel de votre swf, une méthode indispensable…
- Comment tout savoir sur les données de l’utilisateur Facebook, et surtout comment les utiliser dans votre application flash.
- Quelles sont les fonctionnalités disponibles, comme l’envoie de photos, afficher les albums photos, favoris, récupération des amis, de leurs informations… et comment mettre en œuvre ces fonctionnalités directement dans votre swf.
- Et encore plein d’autres possibilités… l’API Facebook est ultra complète pour le Flash 😉
Cette formation vous permettra d’être capable d’utiliser l’API Facebook et d’implémenter les fonctionnalités dont vous avez besoin directement dans votre jeu flash (ou application).
L’API Facebook
Version démonstration
Cliquez sur le lien ci-dessous pour la démonstration d’une application flash, directement dans Facebook !
Application Flash avec API Facebook.
Voici un autre exemple d’application qui utilise facebook.
Une webcam est nécessaire pour s’amuser avec cette application. Webcam Facebook a été développé avec le framework Pixlib.
Un cours complet avec le code source est disponible pour les membres AS3 Formation.
Note : un compte facebook est nécessaire pour utiliser cette application de démonstration.
Télécharger le code source du cours AS3
Vous trouverez l’ensemble du code source commenté pour vous aider dans l’utilisation de l’API Facebook dans vos applications flash.
Télécharger “Application API Facebook”
ex-facebook-api.zip – Téléchargé 889 fois – 132,53 KoPour créer votre application sur Facebook, enregistrez-la sur : http://www.facebook.com/developers/
Notez l’Id de l’application et la clé secrète pour l’utiliser dans votre application flash.
Consultez des exemples de l’utilisation l’API Facebook (en anglais).
Consultez la documentation complète de l’API Facebook (en anglais).
Et vous, utilisez-vous l’API Facebook dans une application flash ?
Dans quelles types d’applications ? Des jeux flash ?
Postez votre lien d’application implémentant l’API Facebook dans les commentaires ci-dessous.
Comment personnaliser le Player YouTube en AS3 et utiliser le streaming ? (API YouTube)
Vous possédez un site avec plusieurs vidéos sous forme de tutoriels.
Comme la majorité, moi y compris, vous mettez vos vidéos sur YouTube, pour ensuite les afficher sur votre site.
Savez-vous qu’il est possible de complètement personnaliser le Player Vidéo YouTube ?
C’est ce que vous allez découvrir dans le cours vidéos de cette semaine 😉
Voici ce que je vais vous apprendre :
- Comment personnaliser le Player Vidéo YouTube pour le mettre à l’image de votre site.
- Comment utiliser les fonctionnalités du Player YouTube sur votre site.
- La méthode pour avoir un serveur de streaming gratuit.
- Comment utiliser la puissance des serveurs YouTube pour votre site, pour diffuser vos vidéos, qu’elles soient privées et / ou publics.
- La stratégie pour utiliser l’API YouTube avec des performances optimisées.
- L’utilisation du Framework PureMVC pour architecturer le Player YouTube.
- Comment utiliser l’API YouTube, ses paramètres, sa configuration et les fonctionnalités proposées.
A l’issue de cette formation, vous saurez programmer votre propre Player Vidéo, qui implémente toutes les fonctionnalités du Player YouTube. Et vous pourrez l’utiliser pour diffuser vos vidéos sur votre site.
API YouTube
Version démonstration
Ci-dessous, le résultat du Player Vidéo YouTube avec l’implémentation de contrôles supplémentaires pour la gestion de l’avance rapide.
Un cours complet avec le code source est disponible pour les membres AS3 Formation.
Ce Player s’appuie sur le Framework PureMVC.
Il est possible de complètement le personnaliser graphiquement. Hélas, je suis développeur et non graphiste 🙁
1 |
http://e6msyji6epr.exactdn.com/wp-content/uploads/2011/07/you-tube-streaming.swf |
Télécharger le code source du cours AS3
Vous trouverez l’ensemble du code source commenté pour vous aider dans l’utilisation de l’API YouTube dans vos applications flash.
Télécharger “API YouTube”
ex-you-tube-player.zip – Téléchargé 937 fois – 102,78 KoLa documentation de l’API YouTube (en anglais).
Le site des créateurs de ce film sur Half Life.
Et vous, utilisez-vous l’API You Tube dans une application flash ?
Dans quelles types d’applications ?
Postez votre lien d’application implémentant l’API You Tube dans les commentaires ci-dessous.
Comment créer des animations avec les tweens en pure AS3 ?
Vous êtes de plus en plus à l’aise avec la programmation actionscript 3.
Mais vous ne connaissez pas suffisamment le logiciel Adobe Flash pour créer des animations sympa. J’avais le même problème que vous.
Les possibilités d’Adobe Flash sont immenses, il est compliqué de trouver les fonctionnalités utiles au début !
Savez-vous qu’il est possible d’animation vos interface graphiques simplement en pure AS3 ?
Je vais tout vous expliquer dans ce cours vidéos.
Voici ce je vais vous apprendre :
- Comment animer vos applications flash en pure AS3 ?
- Quelles classes / framework utiliser ?
- Et comment l’implémenter dans n’importe quelle application ou jeu flash ?
- Comment enchainer plusieurs effets sur chaque éléments ?
- La technique pour écouter la fin d’une animation et lancer une demande à votre visiteur.
- La solution pour lancer vos effets avec un décalage, un délai de quelques secondes (c’est vous qui le déterminez).
- Comment choisir le type d’effet : Elastic, Bounce…
- Et la majorité des fonctionnalités utilisées pour optimiser vos Tweens.
A la fin de cette formation, vous serez à même d’animer vos applications flash sans utiliser le logiciel Adobe Flash.
Les Tweens en AS3
Version démonstration
Ci-dessous, le résultat dans de l’application avec Eaze Tween.
Cliquez sur l’écran pour relancer les effets de Tween.
1 |
http://e6msyji6epr.exactdn.com/wp-content/uploads/2011/07/eaze-tween.swf |
Télécharger le code source Tween
Vous trouverez l’ensemble du code source commenté pour vous aider dans l’intégration de cette fonctionnalité dans vos applications flash.
Télécharger “Eaze Tween”
ex-eaze-tween.zip – Téléchargé 595 fois – 337,82 KoLe site officiel : Eaze Tween
Ci-dessous, une partie de la classe Main modifiée.
[codesyntax lang= »actionscript3″ title= »Eaze Tween » bookmarkname= »Eaze Tween »]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 |
/** The Initial Developer of the Original Code is Matthieu - https://www.actionscript-facile.com Portions created by the Initial Developer are Copyright (C) 2010 the Initial Developer. All Rights Reserved. Contributor(s) : */ package { import aze.motion.easing.Expo; import flash.display.DisplayObject; import flash.events.MouseEvent; import flash.display.Bitmap; import flash.events.Event; import flash.display.Sprite; import aze.motion.easing.Bounce; import aze.motion.easing.Elastic; import aze.motion.EazeTween; import aze.motion.eaze; import com.demonsters.debugger.MonsterDebugger; public class Main extends Sprite { private var oLogo : Bitmap; private var oLogo3 : Bitmap; /** * Constructeur. * */ public function Main() { // attend la fin de l'initialisation de la scène this.addEventListener(Event.ADDED_TO_STAGE, onReady, false, 0, true); } /** * Démarrage de l'application. * définit le nombre d'images par secondes dans les paramètres de compilation * -default-frame-rate 40 * */ private function onReady(event : Event) : void { this.removeEventListener(Event.ADDED_TO_STAGE, onReady); // Init De MonsterDebugger MonsterDebugger.initialize(this); MonsterDebugger.trace(this, "Start Application"); this.stage.addEventListener(MouseEvent.MOUSE_DOWN, onReloadEffect); // instanciation de l'objet graphique var oFirefox : Logo = new Logo(); oLogo = new Bitmap( oFirefox ); oLogo.smoothing = true;// pour lisser le rendu de l'image addChild( oLogo ); var oFirefox3 : Logo = new Logo(); oLogo3 = new Bitmap( oFirefox3 ); oLogo3.x = 233; oLogo3.smoothing = true;// pour lisser le rendu de l'image addChild( oLogo3 ); startEffect(true); } /** * Lancement des effets. * @param bFirst : si c'est le premier lancement, effet différent (à true). * */ private function startEffect(bFirst:Boolean = false) : void { // click sur l'écran if(!bFirst) { oLogo.x = oLogo.y = 0; oLogo.width = 256; oLogo.height = 256; eaze(oLogo3).to(3,{width:256, height:256, x:233, y:0, alpha:100}) .easing(Bounce.easeInOut) .chain(oLogo3).to(5,{width:33, height:33, x:360, y:260, alpha:0}) .easing(Expo.easeInOut) .chain(oLogo).to(3, {width:33, height:33, x:450, y:350 })// enchainement d'une deuxième Tween .onComplete(newEffect, oLogo) ;// en s } else { eaze(oLogo3).to(5,{width:33, height:33, x:360, y:260, alpha:0}) .easing(Bounce.easeInOut)// le type d'effet à utiliser .chain(oLogo).to(3, {width:33, height:33, x:450, y:350 })// enchainement d'une deuxième Tween .onComplete(newEffect, oLogo)// à la fin des tween, appel de cette fonction avec les paramètres ;// en s } } /** * Enchainement d'une deuxième effet après le premier. * */ private function newEffect(oDisplay:DisplayObject):void { eaze(oDisplay).from(3, {width:330, height:330, x:30, y:30 })// à partir de cette configuration .easing(Elastic.easeInOut) .colorMatrix(0.2, 0, -1); // brightness, contrast, saturation, hue. } /** * Click sur l'écran par l'utilisateur. * Relance tous les effets. * */ private function onReloadEffect(event : MouseEvent) : void { MonsterDebugger.trace(this, "click sur l'écran"); EazeTween.killAllTweens(); // arrête immédiatement toutes les tweens en cours. startEffect(); } } } |
[/codesyntax]
Et vous, quelles libraires utilisez-vous pour créer vos animations / Tweens ?
Ou peut être préférez-vous les interpolations avec Adobe Flash ?
Partagez vos astuces dans les commentaires ci-dessous.
Comment utiliser les polices embarquées en Flash ActionScript 3 avec FDT PowerFlasher ?
Dans un article précédent, vous avez appris à créer des swf contenant des polices partagées avec FlashDevelop et swfmill.
Après utilisation, cette méthode s’avère longue et compliquée. Comme vous, c’est cette solution que j’utilisais au départ.
Puis j’ai découvert l’éditeur FDT. C’est un logiciel très efficace, il permet de créer très rapidement et simplement des swf contenant vos polices de caractères.
Un vrai jeu d’enfant !
Vous choisissez les polices à inclure dans le swf, leurs styles et il suffit de cliquer sur le bouton « create » pour obtenir un swf de polices embarquées.
Ce n’est pas plus compliqué que cela.
Dans le cours vidéo de cette semaine, je vous propose de découvrir la création de swf de polices embarquées ou partagées avec FDT PowerFlasher.
Voici ce que je vais vous apprendre :
- Pourquoi créer des swf contenant uniquement des polices de caractères, quel est l’intérêt.
- Comment utiliser FDT PowerFlasher pour créer des swf de polices embarquées ou partagées.
- Pour ceux qui n’ont pas de licence FDT, la technique pour créer des swf de polices de caractères gratuitement. Et comment automatiser la création.
- Pour ceux qui préfèrent le logiciel Adobe FLash CS5, vous saurez comment concevoir des swf de polices partagées directement avec Adobe CS5.
A la fin de cette formation actionscript, vous connaitrez plusieurs méthodes pour créer des swf de polices partagées. Et surtout, vous saurez quand cela est nécessaire ou non.
Exemple d’application flash
Ci-dessous, l’application charge un fichier fonts.swf qui contient 3 polices de caractères différentes. Puis le flash affiche du texte en utilisant ces polices embarquées.
1 |
http://e6msyji6epr.exactdn.com/wp-content/uploads/2011/07/FDT-polices-partagees.swf |
Téléchargez le code source polices embarquées en AS3
Vous trouverez l’ensemble du code source commenté pour ce cours Actionscript.
Télécharger “FDT Polices partagées en AS3”
ex-FDT-polices-embarquees.zip – Téléchargé 897 fois – 298,06 KoLe site DaFont pour télécharger des polices de caractères originales.
Téléchargez l’éditeur FDT PowerFlasher.
Avez-vous des polices de caractères préférées ?
Partagez-les via les commentaires ci-dessous.
Et ajoutez le lien vers votre application flash pour montrer un rendu visuel de leurs utilisations.
Comment debugger son code actionscript 3 avec Flash ?
Dans les articles précédents, vous avez découvert les outils pour programmer en actionscript 3. Vous connaissez également les bases de programmation AS3.
Vous concevez des applications flash de plus en plus évoluées 😉
Mais comme la majorité des développeurs (moi y compris), vous rencontrez des bugs difficiles à localiser et corriger !
Et chaque fois, vous passez des heures et des heures pour trouver ce fameux bug, qui est en fait une erreur d’inattention : l’erreur bête en somme.
En procédant à tâtons pour corriger vos applications, vous perdez un temps considérable.
Ce qu’il vous manque, c’est un outil efficace pour vous aider à « tracker » les bugs beaucoup plus rapidement.
Dans le cours vidéo de cette semaine, je vous propose de découvrir un de ces outils. Vous allez adorez 😉
Voici ce que je vais vous apprendre :
- Pourquoi utiliser Monster Debugger pour le debug de vos jeux flash.
- Comment installer Monster Debugger pour commencer le debug de votre code AS3.
- Comment effectuer du debug en live directement dans les navigateurs Firefox et Google Chrome.
- Comment debugger une application en ligne d’une façon totalement transparente pour vos visiteurs.
A la fin de cette formation, vous serez capable de trouver et corriger rapidement les bugs de vos applications flash, quelles soient en ligne ou sur le bureau (Adobe AIR).
Exemple d’application avec le debug
Ci-dessous, une démonstration de l’intégration du Monster Debugger.
Lancez Monster Debugger, puis rechargez cette page.
Et amusez-vous à changer les paramètres du swf !
1 |
http://e6msyji6epr.exactdn.com/wp-content/uploads/2011/07/main-base.swf |
Téléchargez le code source debug AS3
Vous trouverez l’ensemble du code source commenté pour ce cours Actionscript.
Télécharger “Debug AS3 avec Monster Debugger”
ex-debug-monster-debugger.zip – Téléchargé 840 fois – 49,97 KoLe site Monster Debugger pour télécharger et installer ce logiciel Adobe AIR.
Et vous, quel logiciels utilisez-vous pour debugger votre code Actionscript 3 ?
Partagez vos logiciels de debug dans les commentaires ci-dessous.