Entwickler-Ecke :: Thema anzeigen - Image mit Klick-Effect

Massiv - Do 02.04.09 16:33
Titel: Image mit Klick-Effect

hallo

ich v ersuche ja grad einen Mp3 player zu programmieren.
ich habe so ein play icon bild, dass ich als play button nutzen möchte.
Jedoch nicht mit dem komponent button(weil das mit transparent blöd aussieht) sondern mit image.
Aber wenn man auf den image klickt sieht das so aus als ob nix passeirt.
kann man mit image nicht son klick effekt machne wie beim button?

Highspeeder - Do 02.04.09 16:36

hm..schwierig

Gausi - Do 02.04.09 16:41

Du könntest die Komponente TBitBtn probieren, das ist ein Button, auf den du ein Bild packen kannst. Wenn du das richtig angehst, bekommt man das auch so hin, dass man von dem "Windows-Teil" des Buttons (fast) nichts mehr sieht.

jaenicke - Do 02.04.09 16:42

Du kannst beide Bilder in zwei TBitmaps laden und bei OnMouseDown / OnMouseUp diese entsprechend dem Image zuweisen.

Boldar - Do 02.04.09 17:13

Hi,
Ich habe mal soetwas ähnliches gemacht, und zwar wie jaenicke es schon sagte, mit TImage. Ich hatte allerdings der einfachheit halber eine TImagelist mit 3 images (noch eins für mouseover).
Ich werde mal schauen, ob ich den quelltext noch finde.
mfg Boldar

Webo - Do 02.04.09 19:10

Jop, das leichteste dürfte sein, du nimmst dir für jedes Icon 4 mögliche Zustände:

den ganz normalen Zustand
wenn das Image im Fokus steht (Highlight) also etwas heller und hervorgehobener als das Normale
den "gedrückten Zustand", indem du das Icon quasi "nach hinten" schattierst (sodass der 3D-Effekt zum Vorschein kommt)
den deaktivierten Zustand, einfach ausgegraut

Sowas selbst zu basteln ist realtiv viel Arbeit, es gibt aber sehr viel vorgefertige Icons (mit allen Zuständen) im Internet, Google wird dir da weiterhelfen.

Die Icons änderst du dann im OnMouseDown / OnMouseUp / OnMouseMove / OnMouseLeave !

Yogu - Do 02.04.09 19:37

Webo hat folgendes geschrieben :

Die Icons änderst du dann im OnMouseDown / OnMouseUp / OnMouseMove / OnMouseLeave !

Brauchst du gar nicht, wenn du TBitButton verwendest! IMHO müssen die nur in der Richtigen Reihenfolge nebeneinander in der Bitmap stehen, und dann muss noch NumGlyphs gesetzt werden. Den Rest erledigt der BitBtn :D

Martok - Do 02.04.09 19:40

Oder, wenn du den Tastatur-Fokus nicht brauchst: TSpeedButton. Da kann man noch mehr mit machen was das Styling angeht.

Massiv - Fr 03.04.09 22:09

Ehrlich gesagt versteh ich nicht wie das klappen soll mit mehreren bildern!:(
wäre jm so nett und würd mal son beispiel zeigen?
wäre echt lieb bitte

Yogu - Fr 03.04.09 22:41

Zuerst musst du dir vier Bildchen machen:

Webo hat folgendes geschrieben :

den ganz normalen Zustand
wenn das Image im Fokus steht (Highlight) also etwas heller und hervorgehobener als das Normale
den "gedrückten Zustand", indem du das Icon quasi "nach hinten" schattierst (sodass der 3D-Effekt zum Vorschein kommt)
den deaktivierten Zustand, einfach ausgegraut

Die müssen natürlich alle gleich groß sein. Dann erstellst du dir ein Bild, das viermal so breit, aber gleich hoch wie ein einzelnes Bild ist. In diesem ordnest du nun deine vier Bilder in der gegebenen Reihenfolge an. Anschließend lädst du den Glyph (siehe den gleichnahmigen Parameter im TBitButton)

Yogu hat folgendes geschrieben :

und dann muss noch NumGlyphs gesetzt werden. Den Rest erledigt der BitBtn :D

Ich hoffe, das war jetzt verständlich erklärt :)

Webo - Sa 04.04.09 09:31

So eine "Bilderkette" würde dann wie im Anhang aussehen !
In diesem Beispiel ist ein Scrollbutton in 3 verschiedenen Phasen aufgeführt.

Massiv - Sa 04.04.09 18:14

Ich hab son delphi 6 grundwissen buch aber da steht nicht wie man das macht mit mehrere bilder mit glyph laden und wann welche angezeigt werden soll!
ich versteh nämlich nicht, wie man das macht, dass die bilder nach Wunsch des benutzer in der reihenfolge erscheinen! Versteht ihr?
ich könnt das natürlich mit loadfromfile() machen bei jedem ereigniss(zum beispiel bei mousup oder so)
ich möchte nämlihc nicht das das programm mit dem code loadfromfile() ein bild anzeigt denn das würde probleme bringen wenn ich das programm auf nem anderen rechner habe!

jaenicke - Sa 04.04.09 18:23

Wenn du die Bilder im selben Verzeichnis mitlieferst, dann kannst du dieses auch benutzen.

Besser geeignet wären Ressourcen, um die Bilder direkt in die Exe einzukompilieren.

Und dann könntest du auch noch eine TImageList verwenden, womit die Bilder auch in der Exe lägen.

Yogu - Sa 04.04.09 18:25

Du kannst das Bild (ist bei einem BitBtn nämlich nur eines) auch in das Formular laden, indem du im Objektinspektor unter Glyph auf die drei Punkte klickst.

Sonst wüsste ich nicht, was nach den diversen Anleitungen noch unklar sein könnte.

delphi10 - Sa 04.04.09 20:02

Lad Dir mal das http://www.delphi-forum.de/topic_fehlerhafte+DesktopVerknuepfungen+Icons_80203.html runter und schau Dir an, wie ich das mit TBtnButton gelöst habe.

Massiv - So 05.04.09 15:45

Delphi10, ich hab mir da programm geladen und jetzt?
was soll ich damit?

Yogu - So 05.04.09 19:39

Vielleicht ... anschauen, wie user profile icon

delphi10 das mit dem BitBtn gemacht hat? :roll:

delphi10 hat folgendes geschrieben :

[...] und schau Dir an, wie ich das mit TBtnButton gelöst habe.

Massiv - Mo 06.04.09 14:57

Das ist aber ein Programm und ich kanns nicht mit delphi öffnnen!

delphi10 - Mo 06.04.09 15:51

Du kannst das nicht mit Delphi in dem Sinne öffnen, aber als Programm starten und dir das Prinzip BtnButton anschauen (die Aktionschalter am unteren FormRand, jeweils mit vier Bildern).
Maus drüberfahren,
MausTaste drücken,
Maustaste loslassen und
Button gesperrt ist jeweils ein Bild, das mit den anderen drei zusammen von einem "großen" Bild zusammengefasst wird.

Massiv - Mo 06.04.09 15:55

Also ich weiss nur noch nicht, wie ich die bilder bearbeiten sollte damit sie so aussehen das sie geklickt wurden!
kannst mir vllt sagen mit welchem bild_programm du dass machst und was für effekte due anwendest?

delphi10 - Mo 06.04.09 17:33

Als Beispiel eine Sequenz als Anlage. In diesem Fall das erste Bild: Normaldarstellung; zweite Bild: Button gesperrt; dritte Bild: Maustaste gedrückt, Maustaste losgelassen wieder erstes Bild. Alles mit PaintShop Pro 7.0 ist aber eigentlich egal, jedes Malprogramm kann das prinzipiell. Das große Bild dann in eine RES-Datei packen:
"Einstellungen BITMAP Deine_Pfadangabe\Einstellungen1.bmp" und laden mit: Form3.BitBtn2.Glyph.LoadFromResourceName(hinstance,'Einstellungen');
Über die Einstellungen im O.Inspec. steht ja oben schon was.
Das sollte imho reichen zum Verständnis.

Garf - Mo 06.04.09 20:35

Massiv hat folgendes geschrieben :

Also ich weiss nur noch nicht, wie ich die bilder bearbeiten sollte damit sie so aussehen das sie geklickt wurden!

Am besten andere Programme ansehen und Anregungen holen. Und für die Komponente am besten einen Button nehmen, welcher von TGraphicControl abgeleitet wurde, und anpassen.

Grundsätzlich hast Du vier Zustände: Normal, Maus darüber (Hot), Maus gedrückt (Pressed) und deaktiviert (Disabled). Für jeden Zustand wird beim Create ein Bitmap angelegt:

Delphi-Quelltext

1:
2:
3:
4:

FNormal   : TBitmap;
FHot      : TBitmap;
FPressed  : TBitmap;
FDisabled : TBitmap;

Für den Zustand des Buttons nimmt man

Delphi-Quelltext

1:
2:
3:
4:
5:

type 
  TBtnState = (bsNormal, bsHot, bsPressed, bsDisabled);

var
  FState : TBtnState;

Dann werden diese Proceduren benötigt, um den Zustand zu verändern und den Button zu zeichnen

Delphi-Quelltext

1:
2:
3:
4:
5:

procedure CMMouseLeave(var Message: TMessage); message CM_MOUSELEAVE;
procedure MouseDown(Button: TMouseButton; Shift: TShiftState; X, Y: Integer); override;
procedure MouseMove(Shift: TShiftState; X, Y: Integer); override;
procedure MouseUp(Button: TMouseButton; Shift: TShiftState; X, Y: Integer); override; 
procedure Paint; override;

Dann müssten die Proceduren in etwa so aussehen

Delphi-Quelltext

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:

procedure TxyzButton.CMMouseLeave(var Message: TMessage);
begin
  inherited;

  if FState <> bsNormal) and (FState <> bsDisabled)
  then begin
    FState := bsNormal;
    Invalidate;
  end;

  Repaint;
end;

procedure TxyzButton.MouseDown(Button: TMouseButton; Shift: TShiftState; X, Y: Integer);
begin
  inherited MouseDown(Button, Shift, X, Y);

  if (Button = mbLeft)
  then begin
    FState := bsPressed;
    Invalidate;
  end;

  Repaint;
end;

procedure TxyzButton.MouseMove(Shift: TShiftState; X, Y: Integer); var NewState: TButtonState;
begin
  inherited MouseMove(Shift, X, Y);

  if FState <> bsPressed
  then begin
    FState := bsHot;
    Invalidate;
  end;

  Repaint;
end;

procedure TxyzButton.MouseUp(Button: TMouseButton; Shift: TShiftState; X, Y: Integer);
begin
  inherited MouseUp(Button, Shift, X, Y);

  if FState = bsPressed
  begin
    FState := bsHot;
    Invalidate;
  end;

  Repaint;
end;

Der Rest wie Create mit dem Erstellen der Bitmaps und Grundeinstellungen und Destroy zum Freigeben sollte klar sein. In der Procedure Paint wird entsprechend FState das entsprechende Bitmap gezeichnet, zum Beispiel

Delphi-Quelltext

1:	Canvas.Draw(0, 0, FNormal);

Jakob_Ullmann - Mo 06.04.09 21:13

Oder einfach die Helligkeit verändern, dann reicht ein Bild.

Massiv - Mi 08.04.09 11:30

Danke leute habs mit klick effekt hinbekommne^^
nochmals danke an alle^^

Massiv - Sa 11.04.09 18:16

delphi10, ich hab mal ne frage an dich^^:
bei deinem programm ist es so, dass wenn man mit dem mous an nem button drüber fährt kommt so ne grüne durchsichtige farbe auf dem button. wie hast du das gemacht?
hast du das mit nem Spezielen button gemacht, der so eine Eigenschaft ha?
oder ist das nur ein bild, daass du mit einem Bildbearbeitungsprogramm bearbeitet hast?
wenn das ein spezieler button ist, kannst du mir sagne wie der button heisst und wo ich ihn eventuell laden kann?

Nils:D - Sa 11.04.09 20:03

Seid Ihr Euch sicher, dass diese Lösung wirklich gut ist ? Irgendwann wird eh die Frage kommen "Wie mache ich das gleiche wie beim Button bei der Scrollbar". Und gerade der Button ist die einfachste Komponente überhaupt, das kann man auch über eigene Klassen und Canvas lösen. Genau das habe ich vor ein paar Wochen selbst programmiert. Aber das nur so nebenbei gesagt, wenn das Problem so gelöst ist, ist es gelöst. Aber falls die Frage zur Scrollbar/Listbox/... noch kommt, dann sollte man doch nochmal schauen ob das sinnvoll ist, auf Basis bestehender Komponenten zu arbeiten oder nicht doch lieber eigene zu programmieren. Das ist aber ehrlich gesagt auch eine meiner Macken, weil ich eben auf Plattformunabhängigkeit Wert lege und daher nur ungerne in die Tiefen der VCL eingreife.

delphi10 - Sa 11.04.09 22:25

Massiv hat folgendes geschrieben :

Dieser Effekt ist keine Eigenschaft eines Buttons. Es ist ein Shape im Hintergrund des BitBtn, das entsprechend der Ereignisse eingefärbt wird. Ein Beispiel für einen BitBtn:

Delphi-Quelltext

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:

   Procedure TFormX.BitBtnYMouseMove(Sender: TObject; Shift: TShiftState; X, Y: Integer);
   begin
     FormX.Shape1.brush.Color := clLime;
     FormX.Shape1.brush.Style := bsSolid;
   end;

   Procedure TFormX.BitBtnYMouseLeave(Sender: TObject);
   begin
     FormX.Shape1.brush.Color := clSkyBlue;
     FormX.Shape1.brush.Style := bsDiagCross;
   end;
// X und Y musst du entsprechend einsetzen

Diese Proceduren im Object-Inspector in das entsprechende Ereignis des BitBtn eintragen. Ist der BitBtn enabled, werden sie aufgerufen, ist der BitBtn deaktiviert, passiert gar nichts. Irgendwo im Programmstart wird das Shape initialisiert mit dem Style und Color von MouseLeave. Mehr steckt nicht dahinter, ist einfach nur ein Blickfang.
Gruß Delphi10