Neues Video: Gestalten eines glänzenden 3D-Text-Effekts (Silverlight 3)

Hi Community,
auf LawBot on Silverlight, meinem Video-Channel auf vimeo.com, findet Ihr ein neues Video zur Gestaltung eines räumlich glänzenden Texteffekts (Silverlight 3):
http://vimeo.com/channels/lawbot#10197392
Bitte postet Feedback in meinem Blog:
http://blogs.windowsclient.net/silverlaw/default.aspx.
Beste Grüße,
M. (LawBot/SilverLaw)
- Anmelden oder Registrieren um Kommentare zu schreiben
-

Kommentare
Gutes Video! Allerdings zwei
Gutes Video! Allerdings zwei Anmerkungen: Apple macht es in der Regel einfacher, weil der Effekt häufig auch in klein aussehen muss. Apple macht es einfach so, dass ein zweiter Textblock in weiß unter einen schwarzen geschoben wird, und der ein kleines wenig nach unten versetzt wird.
Außerdem ist der Schatten, den Du verwendets, mit Vorsicht zu genießen! Ich sage eigentlich immer, dass die Bitmap-Effekte ein No-Go sind, da sie jegliche Performance zunichte machen.
Danke für's Feedback
Hallo Daniel,
danke für Deinen Kommentar und die Hinweise.
Wegen möglicher Performanceprobleme stimme ich Dir zu. Ich meine aber, dass das deswegen vielleicht etwas entspannter gesehen werden kann, weil nach meinem Geschmack Effekte im Design ohnehin sparsam eingesetzt werden sollten. Wenn ein Design mit Effekten überladen ist, wirkt es einfach nicht mehr.
Man kann beim schwarzen Tiefenschatten den Blur-Effekt zwar weglassen. Aber dann ist der Tiefenschatten halt ziemlich scharfkantig. Durch den Blur-Effekt wirkt das Ganze einfach echter.
Das Beispiel in der Epression Gallery ist ein bißchen anders gebaut (http://gallery.expression.microsoft.com/en-us/LBSHD), arbeitet aber auch mit Blur-Effekten. Ein Blur-Effekt hängt am Z-Index 0, was bewirkt, dass man den schwarzen Z-Index -1 garnicht mehr als solchen wahrnimmt, sondern der Schwarzanteil teilweise auf Z-Index 0 einwirkt. Dadurch wirkt dann der Z-Index 0 richtig plastisch. Zoom das mal auf 1000% im Browser und Du wirst selbst dann den schwarzen Z-Index -1 nicht als solchen sehen, nur den plastischen Effekt bei Z-Index 0. Solche Sachen gehen aber soweit ich das blicke eben nur mit Effekten, hier einem Blur-Effekt. Mit nem normalen Farbverlauf bekommt man solche Plastizität nicht hin. Performancemäßig mag das problematisch werden, aber manche Gestaltungen gehen mit XAML einfach nicht anders. Es sei denn man nimmt ein PNG. Dann aber geht die Dynamik flöten, wenn man z.B. den Text-Inhalt über ein DataBinding verändern muss.
Wie Apple das macht wußte ich bisher nicht. Verstehe ich Dich aber richtig, dass die Apple-Variante aus zwei Ebenen besteht? Andernfalls würde es ja meinem Vorgehen im Beispielvideo entsprechen: Hinter dem Vordergrund liegt eine schwarze (leicht nach rechts und oben) und dahinter eine weiße Ebene (noch etwas weiter leicht nach rechts aber leicht nach unten).
Oder meinst Du den Schein nach hinten, den ich eingebaut habe?
Beste Grüße,
M. (LawBot/SilverLaw)
Die Alternative zu
Die Alternative zu Bitmap-Effekten ist: Keine Bitmap-Effekete benutzen
Und auf den Schatten zu verzichten und das Gesamt-Design so ansprechend gestalten, dass es in keiner Weise beeinträchtigt wird.
Sollten die Effekte - was bei uns noch nie eingetreten ist - doch zwangweise zum Einsatz kommen müssen, gibt auch noch diverse Caching-Mechanismen, die das Schlimmste verhindern können, wenn man Glück hat.
Ich habe dazu vor einiger Zeit einen Blog-Eintrag geschrieben:
http://blog.yourexpression.de/node/56
Ja, wenn man den Apple-Effekt nachbauen wollte, könnte man es wie folgt tun:
- Ein Custom-Control bauen, z.B. mit Text-Eigenschaft und Textfarbe als DependencyProperty
- Im Standard-Template in der generic.xaml zwei Textblöcke, einen weißen und darüber und ein kleines Stück nach oben versetzt einen schwarzen
- Per TemplateBinding die Eigenschaft Text von beiden an die TextEigenschaft binden.
Bitmap Cashing
Ok, klare Aussage. Kein Bitmap Effekt ist die bessere Alternative. Aber Dein Blog Post und die beiden von Mike Snow und Mike Taulty verstehe ich schon so, dass Hardwarebeschleunigung und gezieltes Bitmap Cashing sinnvoll sein kann.
Das Problem sehe ich darin, das Ziel eines gezielten Bitmap Cashing zu definieren. Das Ziel kann ja letztlich nur der konkrete Rechner sein, auf dem eine Silverlight-Anwendung läuft.
Du schreibst in Deinem Blog Post z.B., dass gerade bei Vergrößerungen die Qualität leidet. Das könnte man doch aber im CasheMode BitmapCashe durch eine Erhöhung des Werts von RenderAtScale entschärfen. Je nach dem wie leistungsfähig dann die Grafikkarte auf einem konkreten System ist, kann das dann aber wiederum zu Performancebeeinträchtigungen führen, weil mit erhöhtem RenderAtScale auch der Traffic zur Grafikkarte zunimmt. Ich weiß nicht, ob es zur Laufzeit in Silverlight möglich ist, die Leistungsfähigkeit der GPU abzufragen. Wenn das möglich ist, könnte man je nach Leistungsfähigkeit und Auslastung der GPU zur Laufzeit zwischen verschiedenen RenderAtScale-Werten switchen, um so individuell die bestmögliche Performance zur Laufzeit zu erzielen. Da Bitmap Cashing auf einzelne UIElemente angewendet wird, würde das bei mächtigen Anwendungen dann nur ziemlich schnell ziemlich komplex werden.
Jedenfalls ist das ein sehr interessanter und wichtiger Bereich. Vielleicht wäre Hardwarebeschleunigung und Bitmap Cashing ja mal ein Thema für ein Video!?
Deine Anregung für ein Custom Control werde ich auf jeden Fall mal aufgreifen und umsetzen.
Beste Grüße,
M.
Silverlight 3 GlossyTexblock als Custom Control
Hallo Daniel,
wie versprochen habe ich ein Deiner Anregung entsprechendes Silverlight 3 Custom Control mit einem Glanzeffekt gebaut. Hier ist der Link zum Download, der den kompletten sourcecode enthält:
http://gallery.expression.microsoft.com/en-us/LWGTCC
Beim Aufbau bin so vorgegangen, dass ich zwei Textblock-Steuerelemente in ein Grid mit zwei Spalten und zwei Reihen eingebaut habe. Die erste Spalte und die erste Reihe sind jeweils 1 px hoch bzw. breit. Die beiden Textblöcke habe ich dann auf diese Grid-Struktur verteilt.
Die Foreground-Eigenschaft der beiden Textblöcke des Custom Control habe ich einfach an die Foreground- bzw. Background-Eigenschaften des Grid im Control Template gebunden.
Und wer keine Schmerzen mit Performanceproblemen hat, der kann das Control jetzt aufbohren, stylen und dem Hintergrund-Textblock einen Blur-Effekt hinzufügen
Beste Grüße,
M.