Sujets sur : Framework AS3

Et voici la suite des tutoriels flash dédiés à Open Source Média Framework ou plus communément appelé OSMF.

Pour rappel, Adobe Flash a développé un Framework Open Source pour simplifier l’utilisation des médias 😉

Il s’agit d’OpenSourceMediaFramework ou plus communément appelé OSMF.

Ce nouveau tutoriel ActionScript vous permet de lire plusieurs vidéos en simultanées dans votre Player Vidéo OSMF !

Le Framework OSMF permet d’implémenter énormément de fonctionnalités dans votre Player Vidéo, il y aura donc d’autres tutoriels flash dédiés à OSMF.

Des tutoriels sur l’intégration des médias (comme des images, de la musique), d’applications évoluées (basées sur OSMF), l’utilisation des plugins (You Tube, Analytics)…

Voici ce que vous allez mettre en pratique suite à cette formation Flash :

• Des nouvelles techniques pour utiliser la librairie OpenSourceMediaFramework.
• Comment lire plusieurs vidéos en parallèles avec OSMF (des vidéos en streaming et en chargement progressif).
• Comment ajouter des informations sur la vidéo en cours de lecture comme la durée écoulée…
• Et toujours des astuces de configuration pour choisir des parties précises des vidéos à lire ( un extrait de 30 secondes par exemple).
• Comment personnaliser vos boutons de contrôles (lecture, pause, volume), l’avance rapide…
• Un exemple pratique sur l‘implémentation d’OSMF dans vos applications flash.

Avec ce tutoriel flash, vous créez un player vidéo avec une liste de lecture et l’exécution d’une application flash !

OSMF Lecture de Vidéos en simultanées

Version démonstration

Voici la version de l’application « Open Source Media Framework Lecture simultanées de plusieurs vidéos ».

Télécharger le code source OSMF Vidéos en simultanées

Vous trouvez ci-dessous le code source de l’application Player Vidéo pour lire plusieurs vidéos simultanément.

Le fichier zip contient également la version OSMF 2.0 au format .swc.

Ce code source est accompagné du fichier fla avec l’ensemble des composants du Framework AS3 Facile.

Télécharger “OSMF Vidéos simultanées”

osmf-part5-video-parallel.zip – Téléchargé 1058 fois – 559,10 Ko

Consultez le site officiel OpenSourceMediaFramework.

Téléchargez la dernière version d’OSMF.

Utilisez-vous le player vidéo OSMF, le votre fait maison  ou un autre ?

Partagez les fonctionnalités de vos players vidéos ci-dessous.

Et voici la suite des tutoriels flash dédiés à Open Source Média Framework ou plus communément appelé OSMF.

Pour rappel, Adobe Flash a développé un Framework Open Source pour simplifier l’utilisation des médias 😉

Il s’agit d’OpenSourceMediaFramework ou plus communément appelé OSMF.

Ce nouveau tutoriel ActionScript vous permet de créer une playlist qui mélange des vidéos et l’exécution d’une application flash directement par OSMF !

Le Framework OSMF étant extrêmement complet en terme de fonctionnalités, il y aura d’autres tutoriels flash dédiés à OSMF.

Des tutoriels sur l’intégration des médias (comme des images, de la musique), d’applications évoluées (basées sur OSMF), l’utilisation des plugins…

Voici ce que vous allez mettre en pratique suite à cette formation Flash :

• Les différentes techniques pour utiliser la librairie OpenSourceMediaFramework.
• Comment créer une liste de lecture avec des vidéos en chargement progressif, en streaming.
• La technique pour exécuter une application flash directement depuis OSMF.
• Comment ajouter des informations sur la vidéo en cours de lecture comme la durée écoulée…
• Les astuces pour choisir des parties précises des vidéos à lire (les 10 premières secondes par exemple).
• Comment ajouter vos boutons de contrôles (lecture, pause, volume), l’avance rapide…
• Un exemple pratique sur l‘implémentation d’OSMF dans vos applications flash.

Avec ce tutoriel flash, vous créez un player vidéo avec une liste de lecture et l’exécution d’une application flash !

Open Source Media Framework Playlist Vidéos

Version démonstration

Voici la version de l’application « Open Source Media Framework Playlist Vidéos ».

Télécharger le code source OSMF Playlist Vidéos

Vous trouvez ci-dessous le code source du Player Vidéo avec l’exécution d’une application flash pendant la lecture d’une playlist de vidéos.

Le fichier zip contient également la version 1.6 (Flash Player 10) d’OSMF (librairie OSMF1_6_FP10.swc).

Ce code source est accompagné du fichier fla avec l’ensemble des composants du Framework AS3 Facile.

Télécharger “OSMF playlist videos”

osmf-part3-videos-serie.zip – Téléchargé 1042 fois – 671,57 Ko

Consultez le site officiel OpenSourceMediaFramework.

Téléchargez la dernière version d’OSMF.

Créez votre serveur RTMP de vidéos en streaming avec Amazon S3 et Amazon CloudFront.

Comment utilisez-vous les fonctionnalités d’OSMF ?

Montrez moi vos players vidéo personnalisés avec OSMF.

Et partagez les fonctionnalités que vous avez mis en place avec OSMF.

Et voici la suite des tutoriels flash dédiés à Open Source Média Framework ou plus communément appelé OSMF.

Pour rappel, Adobe Flash a développé un Framework Open Source pour simplifier l’utilisation des médias 😉

Il s’agit d’OpenSourceMediaFramework ou plus communément appelé OSMF.

Ce nouveau tutoriel ActionScript vous apprend lire une playlist de vidéos en streaming !

Le Framework OSMF étant extrêmement complet en terme de fonctionnalités, il y aura d’autres tutoriels flash dédiés à OSMF.

Des tutoriels sur l’intégration des médias (comme des images, de la musique), la création de playlists, d’applications évoluées (basées sur OSMF), l’utilisation des plugins…

Voici ce que vous allez mettre en pratique suite à cette formation Flash :

• Les différentes techniques pour utiliser la librairie OpenSourceMediaFramework.
• Comment lire une vidéo en streaming avec OSMF.
• La technique pour créer une liste de vidéos lues en streaming.
• Comment ajouter des informations sur la vidéo streaming comme la durée écoulée…
• Les astuces pour personnaliser OSMF avec vos graphismes.
• Comment ajouter vos boutons de contrôles (lecture, pause, volume), l’avance rapide…
• La technique pour ajouter une image (dynamique) de type « watermark » au dessus de votre vidéo !
• Un exemple pratique sur l‘implémentation d’OSMF dans vos applications flash.

Avec ce tutoriel flash, vous mettez en place un lecteur de vidéos en streaming, en moins de 5 minutes, dans vos applications flash !

Open Source Media Framework Vidéos Streaming

Version démonstration

Voici la version de l’application « Open Source Media Framework Vidéos Streaming ».

Télécharger le code source OSMF Vidéos Streaming

Vous trouvez ci-dessous le code source du Player Vidéo avec OpenSourceMediaFramework et l’ajout d’une image watermark.

Le fichier zip contient également la version 1.6 (Flash Player 10) d’OSMF (librairie OSMF1_6_FP10.swc).

Ce code source est accompagné du fichier fla avec l’ensemble des composants du Framework AS3 Facile.

Télécharger “OSMF Vidéos Streaming”

osmf-streaming.zip – Téléchargé 1145 fois – 629,83 Ko

Consultez le site officiel OpenSourceMediaFramework.

Téléchargez la dernière version d’OSMF.

Créez votre serveur RTMP de vidéos en streaming avec Amazon S3 et Amazon CloudFront.

Quel lecteur utilisez-vous pour lire vos vidéos en streaming ?

Vous utilisez peut être un player de vidéos en streaming basé sur l’API Youtube ou Dailymotion ou votre player vidéos fait-maison 😉

Partagez vos techniques avec vos classes ActionScript, ci-dessous.

Suite à la 1ère partie du tutoriel flash OpenSourceMediaFramework, voici la suite dédié à ce Player de média.

Pour rappel, Adobe Flash a développé un Framework Open Source pour simplifier l’utilisation des médias 😉

Il s’agit d’OpenSourceMediaFramework ou plus communément appelé OSMF.

Ce nouveau tutoriel ActionScript vous apprend à ajouter une image de type « watermark » pendant la lecture de vos vidéos.

Le Framework OSMF étant extrêmement complet en terme de fonctionnalités, il y aura plusieurs tutoriels flash dédiés à OSMF.

Des tutoriels sur l’intégration des médias (comme des images, de la musique), la création de playlists, d’applications évoluées (basées sur OSMF), l’utilisation des plugins…

Voici ce que vous allez mettre en pratique suite à cette formation Flash :

• Les différentes techniques pour utiliser la librairie OpenSourceMediaFramework.
• Comment ajouter des informations sur la vidéo, la progression du chargement, la durée écoulée…
• Les astuces pour personnaliser OSMF avec vos graphismes.
• Comment ajouter vos boutons de contrôles, l’avance rapide…
• La technique pour ajouter une image (dynamique) de type « watermark » au dessus de votre vidéo !
• Un exemple pratique sur l‘implémentation d’OSMF dans vos applications flash.

Avec ce tutoriel flash, vous utilisez le framework OSMF dans vos applications flash. Et avec une image (votre logo d’entreprise, votre marque) qui s’affiche pendant la lecture de vos vidéos 😉

L’OpenSourceMediaFramework Image Watermark

Version démonstration

Voici la version de l’application « OpenSourceMediaFramework Image Watermark ».

Télécharger le code source OSMF Watermark

Vous trouvez ci-dessous le code source du Player Vidéo avec OpenSourceMediaFramework et l’ajout d’une image watermark.

Le fichier zip contient également la version 1.6 (Flash Player 10) d’OSMF (librairie OSMF1_6_FP10.swc).

Ce code source est accompagné du fichier fla avec l’ensemble des composants du Framework AS3 Facile.

Télécharger “OpenSourceMediaFramework Watermark”

OpenSourceMediaFramework-part2.zip – Téléchargé 397 fois – 629,88 Ko

Consultez le site officiel OpenSourceMediaFramework.

Téléchargez la dernière version d’OSMF.

Utilisez-vous votre propre player vidéo, OpenSourceMediaFramework ou un autre framework ?

Si vous aussi, vous utilisez OSMF, montrez moi vos personnalisations du player vidéo OSMF.

Partagez vos techniques et codes source de vos lecteurs vidéos dans les commentaires ci-dessous.

Une question qui revient souvent : la création d’un player vidéo.

Comment lire une vidéo avec flash ?

Justement, Adobe Flash a développé un Framework Open Source pour simplifier l’utilisation des médias 😉

Il s’agit d’OpenSourceMediaFramework ou plus communément appelé OSMF.

Ce nouveau tutoriel ActionScript vous apprend à mettre en oeuvre OpenSourceMediaFramework dans vos applications flash.

Le Framework OSMF étant extrêmement complet en terme de fonctionnalités, il y aura plusieurs tutoriels flash dédiés à OSMF.

Des tutoriels sur l’intégration d’autres types de média (comme des images, de la musique), l’utilisation des plugins…

Voici ce que vous allez mettre en pratique suite à cette formation Flash :

• Intégrer OSMF en moins de 5 minutes dans votre application flash.
• Les différentes techniques pour utiliser la librairie OpenSourceMediaFramework.
• Comment ajouter des informations sur la vidéo, la progression du chargement, la durée écoulée…
• Les astuces pour personnaliser OSMF avec vos graphismes.
• Comment ajouter vos boutons de contrôles, l’avance rapide…
• Un exemple pratique sur l‘implémentation d’OSMF dans vos applications flash.

Avec ce tutoriel flash, vous utilisez le framework OSMF dans vos applications flash.

L’OpenSourceMediaFramework

Version démonstration

Voici la version de l’application « OpenSourceMediaFramework ».

Télécharger le code source OSMF

Vous trouvez ci-dessous le code source complet de la mise en oeuvre d’OpenSourceMediaFramework pour créer un player vidéo.

Le fichier zip contient également la version 1.6 (Flash Player 10) d’OSMF (librairie OSMF1_6_FP10.swc).

Ce code source est accompagné du fichier fla avec l’ensemble des composants du Framework AS3 Facile.

Télécharger “OSMF part 1”

OpenSourceMediaFramework-part1.zip – Téléchargé 378 fois – 629,08 Ko

Consultez le site officiel OpenSourceMediaFramework.

Téléchargez la dernière version d’OSMF.

Utilisez-vous votre propre player vidéo, OpenSourceMediaFramework ou un autre framework ?

Si vous aussi, vous utilisez OSMF, je serais curieux de voir vos lecteurs vidéos.

Partagez les codes source de vos lecteurs vidéos dans les commentaires ci-dessous.

Et voici la suite du 1er tutoriel flash sur la création d’un jeu flash avec les Framework Pixlib et Starling !

Le thème de ce Cours ActionScript 3 aborde la création d’un jeu flash en utilisant l’API Starling combiner à la puissance du Framework Pixlib 😉

La 2ème partie de ce tutoriel flash est consacré à l’implémentation des différentes fonctionnalités de Starling Framework.

Voici ce que vous allez apprendre dans ce tutoriel flash :

• Comment mettre en pratique les fonctionnalités principales de Pixlib 3.0.
• Plusieurs techniques pour optimisation les performance d’un jeu flash avec stage3D via Starling Framework.
• Une solution détaillée pour une détection précise des collisions avec Starling Framework.
• Comment mettre en place les différentes vues Starling et utiliser la puissance de stage3D.
• Les explications pratiques pour la création du défilement du décor, des nuages…
• La gestion des données avec 3 Modèles différents : chargement des éléments, lecture des sons MP3, le moteur de détection des collisions.
• La méthode pour utiliser des animations (les vaisseaux ennemis, les explosions, les tirs…) avec Starling.
• L’utilisation des polices embed « bitmap font » au sein du jeu flash (à partir d’images png) !
• La création des différentes classes Manager : les ennemis, les rockets / lazers, les explosions…
• Des astuces pour conserver une fréquence de 60 FPS.

Cette formation vous permettra d’utiliser plusieurs fonctionnalités clés du Framework Pixlib et de le coupler avec Starling Framework !

Jeu Flash avec Pixlib et Starling Framework

Version démonstration

Ci-dessous un lien vers le jeu flash créé : Afterburner.

Essayez de battre le record !

Télécharger le code source du cours AS3

Et voici le code source de l’application créée avec Pixlib et Starling Framework.

Télécharger “Afterburner avec Pixbib et Starling”

src-afterburner-pixlib-starling.zip – Téléchargé 1135 fois – 4,48 Mo

Note : les graphismes et l’idée proviennent de Waste Invaders. J’ai entièrement recréé le moteur du jeu (le code AS3).

Le fichier zip contient également le code source complet du Framework Pixlib avec les différentes extensions utilisées (PixQuick, PixService, PixLogger…)

L’extension PixLogger est modifiée pour prendre en charge la dernière version de Monster Debugger.

Présentation de Starling Framework par Thibault Imbert.

Télécharger la dernière version de Starling Framework directement depuis le site officiel.

Télécharger le code source de Pixlib 3.0 directement depuis le site officiel.

Consultez des tutoriels supplémentaires sur le Starling Framework.

Avez-vous déjà développé des jeux flash ou Adobe AIR avec Starling Framework ?

Partagez vos réalisations dans les commentaires ci-dessous.

Dites-nous les gains de performances que vous avez réussi à obtenir.

Comme vous le savez surement, la nouvelle API Stage 3D, sortie avec le Player Flash 11, apporte un gain de performances considérables !

Par défaut, vos applications Flash (en 2D) ne bénéficie pas de cette nouvelle technologie…

Sauf que le Framework Starling permet, grâce à des classes proches de celles natives de Flash, d’utiliser la puissance du GPU dans vos applications flash classiques en 2D.

Le thème de ce Cours ActionScript 3 aborde la création d’un jeu flash en utilisant l’API Starling combiner à la puissance du Framework Pixlib 😉

Dans la 1ère partie de ce tutoriel flash, nous allons démarrer tranquillement la création de notre jeu avec Pixlib 3.0.

Voici ce que vous allez apprendre dans ce Cours ActionScript :

• Comment mettre en pratique les fonctionnalités principales de Pixlib 3.0.
• Les techniques pour optimisation les performance d’un jeu flash avec stage3D via Starling Framework.
• Et surtout comment architecturer votre jeu flash autour de Pixlib combiné à Starling Framework.
• Différentes solutions pour obtenir une taille du swf inférieure à 150 Ko.
• Comment mettre en place le chargement dynamique de toutes les ressources : images, xml, sons mp3, polices de caractères…
• Des astuces pour conserver une fréquence de 60 FPS.
• Tout ce qu’il faut pour utiliser le flash remoting via l’extension PixService et AMPHP 2.0.1.
• La création de la structure MVC, l’organisation des Vues, les différents Modèles…
• La gestion des évènements et des commandes dans Pixlib avec l’extension PixQuick.

Cette formation vous permettra d’utiliser plusieurs fonctionnalités clés du Framework Pixlib et de le coupler avec Starling Framework !

Jeu Flash avec Pixlib et Starling Framework

Version démonstration

Ci-dessous un lien vers le jeu flash créé : Afterburner.

Essayez de battre le record !

Télécharger le code source du cours AS3

Et voici le code source de l’application créée avec Pixlib et Starling Framework.

Télécharger “Afterburner avec Pixbib et Starling”

src-afterburner-pixlib-starling.zip – Téléchargé 1135 fois – 4,48 Mo

Note : les graphismes et l’idée proviennent de Waste Invaders. J’ai entièrement recréé le moteur du jeu (le code AS3).

Le fichier zip contient également le code source complet du Framework Pixlib avec les différentes extensions utilisées (PixQuick, PixService, PixLogger…)

L’extension PixLogger est modifiée pour prendre en charge la dernière version de Monster Debugger.

Présentation de Starling Framework par Thibault Imbert.

Télécharger la dernière version de Starling Framework directement depuis le site officiel.

Télécharger le code source de Pixlib 3.0 directement depuis le site officiel.

Consultez des tutoriels supplémentaires sur le Starling Framework.

Avez-vous déjà développé des jeux flash ou AIR avec Starling Framework ?

Partagez vos réalisations dans les commentaires ci-dessous. Dites-nous les gains de performances que vous avez réussi à obtenir.

L’utilisation des évènements est indispensable dans la création de vos applications flash.

Le système Event par défaut d’Adobe est très pratique. Cependant, il représente un défaut de taille :

Il n’est pas possible de transmettre des paramètres avec nos évènements !

Dans certaine situation, cela peut s’avérer très problématique… et vous causer beaucoup de nuits blanches en tant que développeur flash !

Heureusement, Robert Penner a eu l’ingénieuse idée de créer une librairie de diffusion d’évènements, prenant en charge le passage de paramètres 😉

Présentation AS3 Signals

AS3Signals est une librairie qui améliore et peut remplacer l’utilisation du système événementiel de Flash.

Cette librairie s’inspire du système événementiel de C# et signals/slots de QT.

Ces caractéristiques :

• Un signal est un mini-dispatcher spécifique à un événement, avec son propre réseau d’écouteurs.
• Un signal est un attribut concret de la classe qui émet celui-ci.
• Les écouteurs souscrivent à un objet concret et non plus à un canal défini par une chaine de caractères.
• Les constantes définissant un événement ne sont plus nécessaires.

AS3Signals est compatible avec les objets natifs d’AS3 émettant des événements (comme par exemple le clic de la souris).

Une fonctionnalité intéressante est la possibilité, pour un émetteur, de désinscrire la totalité des écouteurs grâce à l’appel d’une seule méthode.

Utilisation AS3 Signals

La mise en place d’AS3 Signals est relativement simple. Voici une mise en pratique pas à pas.

Etape 1 : la classe Event

Dans votre classe « Event », celle qui diffuse des évènements pour informer des écouteurs.

Vous devez ajouter un objet Signal ou NativeSignal selon l’utilisation à réaliser.

Avec AS3 Signals, il est possible de typer les paramètres à transmettre avec l’évènement (c’est génial 😉 ).

Un objet Signal prend comme paramètre, le type des paramètres transmis avec l’évènement.

Par exemple :

[codesyntax lang= »actionscript3″ title= »AS3 Signals » bookmarkname= »AS3 Signals »]

[/codesyntax]

Ensuite, lorsque la classe Event doit diffuser un évènements aux écouteurs, il faut procéder comme suit :

[codesyntax lang= »actionscript3″ title= »AS3 Signals » bookmarkname= »AS3 Signals »]

[/codesyntax]

Etape 2 : les écouteurs

Pour écouter les évènements diffuser par la classe « Event », il suffit de lui indiquer la fonction qui sera appelée. Cette fonction récupère en entrée les paramètres envoyé par l’objet Signal.

[codesyntax lang= »actionscript3″ title= »AS3 Signals » bookmarkname= »AS3 Signals »]

[/codesyntax]

Et puis c’est terminé !

Options supplémentaires

AS3 Signals peut même remplacer les évènements par défaut d’Adobe (MouseEvent…).

Il suffit d’utiliser l’objet NativeSignal et de lui transmettre le type d’évènement à capturer.

[codesyntax lang= »actionscript3″ title= »AS3 Signals » bookmarkname= »AS3 Signals »]

[/codesyntax]

Vous pouvez également simuler l’évènement AS3 Signals pour informer les écouteurs.

[codesyntax lang= »actionscript3″ title= »AS3 Signals » bookmarkname= »AS3 Signals »]

[/codesyntax]

Pour supprimer un écouteur :

[codesyntax lang= »actionscript3″ title= »AS3 Signals » bookmarkname= »AS3 Signals »]

[/codesyntax]

Pour supprimer tous les écouteurs d’un seul coup :

[codesyntax lang= »actionscript3″ title= »AS3 Signals » bookmarkname= »AS3 Signals »]

[/codesyntax]

Il est même possible d’ajouter des écouteurs qui seront appelés une seule fois puis supprimés automatiquement !

Cela peut être utile dans certains cas…

[codesyntax lang= »actionscript3″ title= »AS3 Signals » bookmarkname= »AS3 Signals »]

[/codesyntax]

Les performances

Le gain de performances est énorme du passage du système Event d’Adobe à AS3 Signals de Robert Penner.

Consultez le résultat des benchmarks.

Mise en pratique AS3 Signals

Ci-dessous une mise en pratique complète d’AS3 Signals.

Téléchargement

Téléchargez le code source complet et commenté de l’exemple pratique.

Télécharger “Exemple AS3 Signals”

ex-as3-signals.zip – Téléchargé 346 fois – 236,95 Ko

Téléchargement depuis le dépôt GitHub : https://github.com/robertpenner/as3-signals

Avez-vous l’intention d’utiliser AS3 Signals dans vos applications pour remplacer Event d’Adobe ?

Ou peut être préférez-vous rester avec le système évènementiel par défaut de Flash ?

Il vous convient parfaitement…