Creation de la base du player
> La gamme Microsoft Expression > Le langage XAML et le WPF > Créer un player (1) : création de la base > Créer un player (2) : utilisation des clones > Créer un player (3) : exporter en XAML
Design est un logiciel de dessin vectoriel qui peut s’inscrire dans un processus de travail plus complexe de création d’applications interactives. Dans ce cadre, il est nécessaire d’exporter votre création pour la rendre accessible aux différents intervenants du projet comme les intégrateurs ou les développeurs. L’anglais est le plus souvent utilisé pour nommer les objets.
Chaque projet a ses conventions de nommage ; ici, les objets sont nommés en anglais et se terminent par « Brush », ce qui permet d’identifier le type d’éléments sans avoir le visuel, directement dans le code.
Création de la base du player
> Créez un nouveau document de 1 024 768 pixels (Ctrl + n). Ici, la taille ne sert que de référence, il est préférable de travailler dans un document d’une taille standard afin d’avoir une base et un ratio connus.
> Avec l’outil Rectangle, créez un premier rectangle.
> Dans le panneau des Calques, nommez ce rectangle « BackgroundBrush ».
> Dans le panneau Apparence, définissez un rayon d’angle de 4 pixels et un dégradé de remplissage de 3 points de couleur : noir, gris moyen, noir.
> Utilisez l’outil de Transformation de dégradé et appliquez une rotation de 90 ° au dégradé.
> Dans le panneau Apparence, définissez un contour de 2 pixels et un dégradé de contour de 3 points de couleur : gris moyen, noir, gris moyen.
> Faites un copier-coller de ce premier rectangle (Ctrl + c, Ctrl + v) pour délimiter la zone vidéo.
> Renommez le calque en « VideoBackgroundBrush ».
> Sélectionnez le rectangle et donnez-lui une taille de vidéo standard 320 240 pixels.
> Créez un nouveau calque, nommez-le « Boutons ».
> Sélectionnez l’outil Ellipse et créez un premier cercle en maintenant la touche Shift appuyée.
> Dans la palette Apparence, appliquez un fond dégradé du noir vers le blanc. Avec les outils de transformation de dégradé, appliquez le dégradé de haut en bas.
> Appliquez le même dégradé au contour et inversez les points de couleur dans la barre de dégradé.
> Faites un copier-coller de ce cercle et appliquez-lui un dégradé du blanc à 95 % au blanc à 0 %. Utilisez les outils de Transformation de dégradé pour obtenir l’effet visuel souhaité.
> Sélectionnez les deux cercles créés, groupez-les (Ctrl + g) et nommez le groupe « PlayButtonBrush ».