Créer ses propres boutons

Explications sur le fonctionnement de la V5
Répondre
Avatar du membre
JPD
Messages : 2009
Enregistré le : jeu. 17 mars 2005, 22:58
Localisation : Champs-sur-Marne

Créer ses propres boutons

#1

Message par JPD »

Pavel, l'un des développeur de PTE a indiqué comment créer ses propres boutons :
Firstly take a look at the image below. You can see a button and guides (red lines) show how this button will be completed in slide-show. There are 9 regions using that this button will be complete (render) into slide-show. Each of these regions has own section in the .ini button file. I’ve create a table shows you correspondence between .ini file sections and regions.


:160: Image
1 - LeftTop
2 - Top
3 - RightTop
4 - Right
5 - RightBottom
6 - Bottom
7 - LeftBottom
8 - Left
9 - Center

Each section has a format.

<SectionName>=<FileName>,<TopLeftPointX>,<TopLeftPointY>,<BottomRightPointX>,<BottomRightPointY>

For 2, 6, 9 regions you need to determine a piece that will be stretched for button width (depending on button text).

Button has 3 states. Normal, Hover (when mouse pointer under), Click (when mouse left button clicked under button). So each state is situated in own section. For the Normal sate section name is [NormalState], for the hover state is [HoverState] and at last for the click state is [ClickState]. Each state and each region can use different sources images. Read about section format above.

And the last .ini file section [TextParams] directs to the button text style. You can set default text color ( Color=R,G,B ), next 2 parameters (BtnOffset and BtnMinWidth) you can take from our standard buttons or experiment with these, and the last section Filtering allow you to use different algorithms to resize your button. Default means Bilinear resizing and Nearest means nearest.



Dans l'image ci-dessous, vous pouvez voir un bouton et des guides (les lignes rouges) donnant un aperçu de ce que sera le bouton au final dans le montage. Il y a 9 parties constituant ce bouton. Chacune de ces parties a une section propre dans le fichier de bouton btn.ini situé dans le répertoire correspondant à celui-ci.

:80: :20: Image




:80: Image

Chaque zone est délimitée par 2 pixels, celui en haut et à gauche de la zone et le second en bas et à droite, dans le fichier btn.ini, l'adresse du pixel haut/gauche est décrémenté de 1 en abscisse et en ordonnée.


Image

PTE va reprendre les zones ainsi définies pour construire le bouton final. Celui-ci diffèrera du bouton dessiné par sa largeur, celle-ci s'ajustant automatiquement en fonction de la longueur du texte inséré dans le bouton.
Pour cela, les zones 2, 9 et 6 auront leur largeur modifiée lors de l'affichage du bouton. En pratique c'est la première colonne de pixels (celle de gauche de chacune des zones) qui est répétée autant de fois que nécessaire pour adapter la largeur, c'est pourquoi il n'est pas nécessaire de définir ces zones dans toute leur largeur, seule la partie gauche importe.
Dans le fichier ini, par exemple, on aurait pu déterminer pour la zone 2 :
Top=Demo_normal.png,7,0,8,4 au lieu de
Top=Demo_normal.png,7,0,13,4
A l'affichage du bouton, par défaut, le texte s'ajuste à la hauteur de la zone 9. Il semble y avoir une erreur d'un demi-pixel dans le positionnement vertical (décalage vers le bas).

Bouton final (mode original + zoom=1400%)
Note : les traits rouges montrant les limites des zones ont été rajoutés

:20: Image
Modifié en dernier par JPD le lun. 30 avr. 2007, 20:10, modifié 9 fois.
:Dia:Jean-Pierre - Champs-sur-Marne
Béta-tests sur V5 - Diaporamas numériques
Avatar du membre
leonnoel
Messages : 338
Enregistré le : sam. 14 oct. 2006, 11:23
Localisation : couladere (sud toulouse)
Contact :

#2

Message par leonnoel »

bouton 9 ------> REPOS
Répondre

Qui est en ligne

Utilisateurs parcourant ce forum : Aucun utilisateur enregistré et 1 invité