Sujets sur : menu framework

Cours ActionScript 3 ‘menu framework’

Utiliser Starling Framework pour créer des Buttons et un 1 Menu de Jeu Flash

Commentaires fermés sur Utiliser Starling Framework pour créer des Buttons et un 1 Menu de Jeu Flash

Ecrit le 18 octobre par Matthieu
Publié dans le(s) sujet(s) Flash 2D |Jeux Flash

Starling Framework étant une libraire ActionScript qui fournit un saut de performances considérable, continuons la découverte des différentes fonctionnalités.

Le thème de ce Cours ActionScript 3 est axé sur la création de boutons pour un Menu de jeu flash !

Pour une présentation de Starling Framework, je vous invite à consulter le Cours AS3 dédié.

Vous pouvez également étudier les cours précédents sur Starling Framework.

Dans ce Cours AS3, nous allons apprendre à créer plusieurs boutons optimisés avec Stage 3D.

Voici ce que vous allez apprendre dans ce Cours ActionScript :

  • Comment utiliser une partie des classes Starling, proches de celles natives en Flash (Sprite, MovieClip…).
  • La technique pour créer un menu composé de plusieurs boutons.
  • Et comment implémenter les classes Starling dans votre code ActionScript.
  • Un parcours de l’API Starling avec la découverte de plusieurs fonctionnalités intéressantes.
  • Le code complet pour créer votre interface d’accueil de votre jeu flash optimisé par Starling Framework.

Cette formation vous permettra de créer un menu avec plusieurs boutons et un paysage défilant pour une application flash en 2D.

Ensuite, il vous reste à implémenter les actions spécifiques à chaque bouton.

Création de Buttons avec Starling Framework

[spoiler]

Bonjour et bienvenue sur actionscript-facile.com

 

Dans cette série de cours consacré au Framework starling, nous continuons à apprendre à utiliser les fonctionnalités qu’il recèle.

 

Le thème de ce cours est consacré à la création des boutons d’un menu avec starling, dans une application flash AS3.

 

Pour ceux qui savent pas ce que c’est starling, une présentation rapide :

c’est une librairie en pure AS3.

Starling reproduit l’architecture de flash et display list, Sprite, movieclip.

 

L’avantage, c’est que tout votre rendu d’une application flash normale, donc pas en 2D, est directement calculée par le GPU.

Cela permet d’avoir des performances très intéressantes.

 

 

Pour une présentation un peu plus détaillée, je vous renvoie à la vidéo, au cours vidéo numéro 01 qui présente starling dans le détail.

 

On va passer tout de suite aux exemples pratiques de ce cours.

C’est-à-dire la création d’un menu avec starling Framework.

 

Je le répète vite fait : pensez à mettre Wmode = direct pour activer stage3D et l’accélération du CPU avec le flash Player 11.

 

De toute façon, ce sera dans le fichier de code source.

 

Ensuite, pensez à vos paramètres de compilation. Je les ai mis ici à rajoutez -SWF-version=13 pour activer l’api stage3D du flash Player 11.

 

Et également, pensez, il y a trois choses à reprendre le Player global version 11 .SWC qui sera également en téléchargement sous cette vidéo.

 

On part de notre classe main classique qui étend Sprite mais le Sprite de flash player 10. Sprite et on utilise starling en créant une instance de l’objet.

 

 

Starling l’anti crénelage, multitouche, si on est sur un Smartphone.

Et on démarre.

 

Ce qui nous intéresse, c’est de créer un menu.

On a nos éléments de boutons que je vais vous montrer.

 

Les assets, ici nous avons donc le bouton état normal et le bouton état cliqué donc c’est des images PNG tout simplement rien de bien méchant.

 

On définit un tableau vector avec les noms de chacun de nos boutons du menu :

jouer, options, se connecter.

 

On importe les deux boutons directement dans notre SWF.

L’état bas est à cliqué, du bouton est l’état normal, je vous explique.

Après, on créé des bitmaps de nos boutons que nous avons ici.

 

A des constantes à modifier, on en créé des bitmaps. Ils ont créé les textures de nos boutons.

 

Nous, on va créer un menu pour le fond.

Je vous expliquerais après et ont créé un bouton pour notre menu.

En fait, ça va contenir tout nos boutons.

Et puis là, on a notre tableau.

On boucle et on créé nos boutons.

 

Alors pour créer un bouton, on lui donne la texture pour l’état haut, le nom, le contenu texte, la texture pour l’état bas.

On met le texte en gras, sa taille et là c’est un effet, un scale donc de 0,9 au lieu de 1 sur le bouton.

 

Lorsque le bouton sera cliqué, il qui sera réduit.

On le positionne et on l’ajoute dans notre container.

On écoute l’événement triggered c’est à dire triggered sera envoyé à chaque fois que le bouton est cliqué par l’utilisateur.

 

Et quand il est cliqué qu’est ce qu’on fait ?

 

On fait un petit trace dans monster debuguer.

Ensuite on écoute le stage sur chaque image. Cela simule l’événement onEnterFrame.

 

Finalement, on centre notre menu sur la scène et on l’affiche.

 

J’ai rajouté autre chose, je précise que ces exemples provienne du livre en anglais de Thibault Imbert.

 

J’apprends à les utiliser et et je vous explique un petit peu ce que j’en ai compris.

 

On va mettre une image de fond.

Tout simplement une image de fond dans assets, rien de bien méchant.

 

Un container qui va contenir nos deux images. C’est une image qui va défiler.

Il y aura notre menu et le fond qui défile.

En fait, il y a 2 images pour simuler le défilement du fond. Ce sera les mêmes sauf qu’elles seront collées l’une à côté de l’autre.

 

On crée un bitmap de notre image, une texture. Vous commencez à bien connaître, c’est le troisième exemple que nous voyons.

 

Création texture, notre container et on créé nos deux images.

C’est les même donc à partir de la même texture, et on les positionnent.

Elles sont toutes les deux les unes à la suite des autres. On les ajoute sur la scène.

 

Enfin sur notre container, nos deux images sur le container et le container sur la scène.

Et là, vous voyez que le menu sera affiché par-dessus le background.

Donc le container d’un backround et donc là on fait scroller l’image à chaque onEnterFrame tout simplement.

 

Cela permet d’utiliser des boutons.

Je vous remontre une bitmap texture pour chaque bouton et on a la classe bouton qui contient pas mal d’appel ici.

 

Et pour enable l’état bas on peut changer en live.

On a un getter setter sur la texture pour l’état bas du bouton, pareil pour l’état normal.

 

Ici ça, ça permet de positionner le texte dans le bouton.

Par défaut le texte est centré dans l’image du bouton, mais on peut le positionner beaucoup plus précisément.

 

Si vous êtes curieux, vous regarderez la classe un peu plus en détail.

 

Je lance la compilation et ensuite je vais ouvrir mon navigateur Firefox pour vous montrer le résultat.

 

Voilà le résultat, camtasia enregistre, donc moi ça rame. Comme vous le savez, j’ai un PC plutôt moyen. Donc en fait, on a le fond qui défile.

Sur votre PC, en tant qu’exemple, il défilera à 40 images/secondes.

Donc le fond défile et nous avons donc la création de nos boutons.

 

Si je clic sur un bouton, voyez l’état bas du bouton et si on regarde le debugger, on voit que le bouton option a été cliqué.

 

Ensuite, je clique sur le bouton jouer et le bouton se déconnecter.

 

Donc ça pourra être très utile ce style de menu. Par exemple, pour vos jeux flash, cela utilisera également entre le scrolling, vos boutons, la puissance du flash Player 11 et surtout stage 3D.

Donc on regarde dans le debugger, on a appuyé sur jouer et se connecter.

 

Je fais un clear traces et puis je vais ré-appuyer sur le bouton règles tout simplement.

 

Il se réduit après on peut faire des enable / disable derrière et on constate l’appui sur le bouton.

 

C’est un exemple qui reste assez basique de l’utilisation des éléments embarqués et vecteurs, des textures.

 

Une image qu’on met dans un Sprite, la classe image que nous avons déjà vu plusieurs fois et qui contient pas mal de choses très intéressantes.

 

Je vous laisserais découvrir smothing etc.

 

Maintenant on a vu la classe bouton.

 

Dans le prochain cours, on verra les polices embarquées.

Comme pour les animations, c’était tout intégré dans une image PNG, nos polices embarquées seront également intégrés dans une image PNG.

 

Et on refera notre menu avec des polices embarquées à partir d’une image PNG.

 

Comme d’habitude, vous trouverez le code source de starling framework sous cette vidéo.

 

 

Et vous avez également le livre PDF complet de Thibault Imbert en anglais sous cette vidéo si vous voulez apprendre plus rapidement à maîtriser et à utiliser starling framework.

 

Si jamais vous avez commencé à créer des premières applications qui utilisent la puissance du flash Player 11 et stage 3D n’hésitez pas à poster sous cette vidéo dans les commentaires.

 

Je vous dis à très bientôt sur actionsript-facile.com

[/spoiler]

Version démonstration

Ci-dessous un exemple de création de Menu avec Starling Framework dans flash !

Cliquez ici pour voir la version de démonstration N°1.

Télécharger le code source du cours AS3

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

Le fichier zip contient également la version 11 de playerglobal v.11.swc pour la compilation de votre application flash.

Télécharger “Exemple Starling Framework Button Menu”

ex-starling3-button-menu.zip – Téléchargé 1384 fois – 656,64 Ko

Présentation de Starling Framework par Thibault Imbert.

Télécharger la dernière version de Starling Framework.

Consulter le code source directement sur GitHub.

Le Site Officiel de Starling Framework.

La documentation de l’API Starling Framework.

Le Forum officiel consacré à Starling Framwework.

Télécharger le livre « Introduction à Starling Framework » de Thibault Imbert (rédigé en anglais).

Télécharger “Livre Starling Framework”

Introducing_Starling-rev_1.0.pdf – Téléchargé 13187 fois – 8,90 Mo

Avez-vous développé vos premières applications flash avec Starling Framework ?

Si oui, postez un lien vers votre application dans les commentaires ci-dessous.

Si non, pourquoi ? Utilisez-vous une autre technique pour profiter de l’API Stage 3D ?