Video-Mitschnitte zum Multimediatreff Flash, Flex und AIR
Galileo Design stellt kostenlose Video-Mitschnitte zum Multimediatreff vom 28.3.2009 online. Der in Köln stattgefundene Multimediatreff nahm die Programme Flash, Flex, AIR und Silverlight zur Erstellung von RIA`s unter die Lupe und es wurden die Vorteile einer Rich Internet Application, kurz RIA, aufgezeigt. Desweiteren wurde gezeigt wie effizient FDT als Entwicklungsumgebung zur Programmierung von größeren Flash-Projekten funktioniert. Dafür wurden Experten der Szene eingeladen, darunter auch von Adobe und Microsoft.
Die exklusiven Video-Mitschnitte behandeln dabei die Themenbereiche Flash, Flex und AIR: Die Zukunft von Rich Internet Applications, Neuerungen von Flash CS4 in der Praxis, reale Flex-Projekte und Programmieren mit FDT.
Die Video-Mitschnitte im einzelnen:
1. Flash & Flex – wie alles begann und was die Zukunft bringt [55:58]
2. Flash CS4 – die neuen Features in der Praxis [50:47]
3. Flex & AIR – Web- und Desktop-Anwendungen entwickeln [33:50]
4. Besser programmieren mit FDT [56:13]
Die über 3 Stunden andauernden Video-Mitschnitte kann man sich direkt auf der Galileo Design Website ansehen.
Weiterführende Links:
Flash, Flex und Air Video-Mitschnitte
Galileo Design
Multimediatreff
Flash Tutorial: Textfeld Stylesheet (CSS) mit AS 3
Textfelder in Flash zu formatieren ging bis Flash MX nur über internes Actionscript. Seit der Version Flash MX 2004 konnte man aber auch das bekannte CSS nutzen, das als Bestandteil für normale Html-Seiten eine vernünftige Struktur zur Formatierung von Texten bietet. Heute zeigen wir euch deshalb, wie man mit AS3 und einer CSS-Datei ebenso Texte in Flash formatieren kann.
1. Dazu müssen wir als erstes eine CSS-Datei mit dem Namen style.css anlegen und folgende Formatierungen für eine Überschrift einfügen:
h1{
font-family: Arial, Helvetica, sans-serif; //Die Auswahl der Fonts
color: #999999; //Die Schriftfarbe
font-size: 20px; //Die Schriftgröße
}
2. Danach erstellen wir in Flash ein dynamisches Textfeld mit einigen Eigenschaften und positionieren dieses auf der Bühne. Zum Schluß fügen wir es dann der Anzeigeliste hinzu. Der gesamte AS3-Code kommt dabei ins erste Bild der Hauptzeitleiste:
var tf:TextField = new TextField();
tf.width = 250;
tf.height = 200;
tf.x = 250;
tf.y = 250;
tf.wordWrap = true;
tf.multiline = true;
addChild(tf);
3. Nun müssen wir das Stylesheet, also die style.css laden. Dies geschieht mit dem URLLoader. Mit dem Event-Listener Event.COMPLETE wird das Laden dann abgefangen und die Funktion pushCSS() aufgerufen:
var url:URLRequest = new URLRequest("style.css");
var loader:URLLoader = new URLLoader();
loader.addEventListener(Event.COMPLETE, pushCSS);
loader.load(url);
4. Zum Schluß erstellen wir in der Funktion pushCSS() ein neues Stylesheet-Objekt und lesen anschließend mit der Methode parseCSS() das CSS aus. Abschließend ist es wichtig, das wir erst das CSS dem Textfeld zuweisen und dann den Text hinzufügen:
function pushCSS(evt:Event){
var css:StyleSheet = new StyleSheet();
css.parseCSS(loader.data);
tf.styleSheet = css;
tf.htmlText = "<h1>Das ist die formatierte Überschrift</h1>";
}
Nun können beliebig viele Textfelder in Flash mit CSS formatiert werden und man erspart sich eine Menge Arbeit.
Extremdruck – Online Druckerei
Ausgefallene Designs mit eigenen Formaten, asymetrische Falzungen, Sonderfarben, Stanzformen und Perforationen gibt es bei Extremdruck. Speziell ausgerichtet auf Agenturen und Designer sollen hier in Zukunft sämtliche Wünsche im Druckbereich erfüllt werden. Und das alles schnell und unkompliziert über eine Online-Kalkulation, mit der alle möglichen Eigenschaften des Produktes vorher festgelegt werden und die automatisch den Preis berechnet. Im Downloadbereich gibt es darüber hinaus Stanzformen, Tools, Anleitungen und ICC Farbprofile, die allesamt kostenlos heruntergeladen werden können.
Sicherlich eine gute Alternative für alle Agenturen und Designer, die auf ausgefallene Formate setzen und darüber hinaus Kosten und Zeit sparen wollen.
Hexosearch: Actionscript-Suchmaschine
Hexosearch heißt die neue themenbezogene Suchmaschine für Flash-Entwickler und Flash-Designer. Viele kennen es, man sucht im Netz nach speziellen Themen zu Actionscript und muß sich dabei durch unzählige Forenbeiträge, Blogs und andere Seiten kämpfen um am Ende genauso schlau zu sein wie vorher.
Hexosearch bietet als weltweit erste Suchmaschine einen speziellen Suchalgorithmus für Flash und Actionscript. User können darüber hinaus abstimmen ob die Suchergebnisse nützlich sind und somit die Qualität der Suchergebnisse mit beeinflussen. Für themenbezogene Blogs und Websites bietet Hexosearch auch die Möglichkeit, den Link direkt zu senden.
Wer also öfter auf der Suche nach Themen zu AS 2 oder AS 3 ist, der sollte sich die momentan noch in der Beta-Version befindliche Actionscript-Suchmaschine bookmarken und fleißig bei den Suchergebnissen mit abstimmen!
Flash Site: Nespresso
“Site of the Day” beim Favourite Website Award (FWA), das schafft nicht jede Produkt Website. Eine Kaffeemaschine schon und deshalb möchten wir euch heute dieses Schmuckstück von einer Flash Website vorstellen.
Mit viel Liebe zum Detail, netten Animationen und Grafiken macht die Flash Site einen rundum gelungenen Eindruck. Mit spielerischen Elementen wird dabei die Nespresso Citiz Kaffeemaschine anschaulich erklärt und man bekommt förmlich den Eindruck, das der Kaffee-Duft durch die Computer-Boxen strömt.
Nespresso Flash Site
Fazit:
Die Flash Website ist auf jeden Fall ein kleines Surferlebnis und zeigt wieder mal, wie gut sich Flash zur Darstellung von Produkten eignet.
Red Dot Award 2009 Anmeldeschluss
Für den diesjährigen Red Dot Award: Communication Design 2009 endet bald die Anmeldefrist. Agenturen, Designer und Kreative der Branche können sich noch bis zum 27.05.2009 anmelden und ihre Arbeiten einreichen.
Laut dem Red Dot Team, haben sich in diesem Jahr mehr Agenturen und Designer als je zuvor angemeldet um sich der internationalen Jury, die sich aus Persönlichkeiten unterschiedlicher Bereiche der Medienbranche zusammensetzt, zu stellen und den heiß begehrten Red Dot Award zu gewinnen. Dabei wurden die Kategorien weiter differenziert und es können nun auch alle Arbeiten eingereicht werden, die über klassische Websites hinausgehen und Träger neuartiger Kommunikationsformen sind.
Die Kategorien im Überblick:
1. Corporate Design
Signets & Logos, Erscheinungsbilder, Geschäftsausstattung, Selbstdarstellung, Firmendarstellung, CD-Manuals, Imagebroschüren
2. Stamps and Banknotes
Briefmarken, Banknoten
3. Annual Reports
Geschäftsberichte, Haus- und Mitarbeiterbroschüren
4. Advertising
Publikumsanzeigen, Kampagnen, Fachanzeigen, Tageszeitungsanzeigen, Imageanzeigen, Produktbroschüren, Werbebroschüren, Promotions, Sales-Promotion-Materialien, Wearables/T-Shirts, Funkspots, Poster
5. Packaging Design
Verkaufsverpackungen, Transportverpackungen, Displayverpackungen, CD-Cover, CD-Hüllen, CD-Leporellos, Schallplattencover, Schallplattenhüllen, DVD-Cover
6. Editorial
Bücher, Kalender, Kataloge, Illustrationen, Grafische Einzelarbeiten (z. B. Einladungen, Urkunden)
7. Magazines & Daily Press
Zeitungs- und Zeitschriftengestaltung, Zeitungs- und Zeitschriftentitel,Zeitungs- und Zeitschriftenbeiträge
8. Typography
Piktogramme, Ideogramme
9. Games
Gesellschaftsspiele, Brettspiele, Puzzle
10. Comics
11. Posters
12. Information Design/Public Space
Messestände und -präsentationen, Ausstellungen, Showrooms, Shops, Displays, Leit- und Informationssysteme, Veranstaltungsdesign
13. Online Communication
Corporate websites, Public service websites, Micro websites
14. Online Advertising
Banners, In-game advertising, Client games
15. E-Commerce Design
Online shops, Online auctions, Recruiting
16. Online News
17. Online Community Design
Blogs, Chat forums
18. Online Service Design
Search engines, E-mail providers
19. Online Education and Knowledge
Databanks, Edutainment
20. Virtual World
Installations, Environments, Online Interactions
21. Digital Games
Browser games, Mobile games, Off-line games, Character design, Gambling
22. Graphical User Interfaces
Interface Design, Touchscreens, Icons
23. TV & Cinema
TV-on-air-Design, TV-on-air-Promotion, TV-Spots, Kinowerbung
24. Image Films
25. Sound Design
Corporate Sound, Sound logo, Audio branding, Jingles, Product Sound
Die Gewinnbenachrichtigung erfolgt im August 2009 und die feierliche Preisverleihung am 9.12.2009 im Red Dot Design Museum. Alle ausgezeichneten Arbeiten werden anschließend vom 10.12.2009 bis 10.01.2010 im Red Dot Design Museum einer breiten Öffentlichkeit präsentiert.
Weiterführende Links:
Red Dot Award
Red Dot Award Anmeldung
Gaia – Flash Framework
Wer gerne mit Frameworks arbeitet, sollte sich das Gaia-Flash Framework einmal genauer ansehen. Dabei handelt es sich um ein gut durchdachtes Entwurfsmuster (engl. Design Pattern), um komplette Seitenstrukturen in Flash schnell und einfach zu erstellen. Das Open Source Framework verkürzt dabei die Entwicklungszeit von Flash Websites deutlich und bietet dem Entwickler jede Menge Zusatzfunktionen an, wie unter anderem die einfache Erstellung einer Navigation mit XML und die automatische Koppelung mit swfadress, die für das so genannte Deep Linking sorgt. Das von Steven Sacks entwickelte Gaia-Flash Framework unterstützt dabei AS2 und AS3 Projekte.
Das Framework sollte man sich als ein Grundgerüst für die weitere Programmierung einer Flash Website vorstellen. Gaia legt dabei die komplette Verzeichnisstruktur für die Website vollautomatisch an. Quelldateien (.fla) und veröffentlichte Dateien (.swf) werden automatisch, anhand der vorher definierten XML-Navigationsstruktur mit angelegt, ebenso wie die benötigten AS-Dateien und Klassen (beispielsweise TweenMax für Animationen). Die voreingestellte Ordnerstruktur folgt dabei dem Industriestandard, kann aber auch mit eigenen Namenskonventionen verwendet werden:
*lib ordner – .fla dateien
*bin ordner – .swf dateien, .html, usw.
*src ordner – .as dateien, klassen
Installiert wird das Gaia-Flash Framework ganz einfach als MXP Komponente, mit dem für Flash mitgelieferten Adobe Extension Manager. Nach der Installation öffnet man einfach nur Flash und ruft unter Fenster > Andere Bedienfelder > Gaia Framework, die Oberfläche von Gaia auf.
Die Highlights von Gaia im Überblick:
- Revolutionary scaffolding engine builds fully functional Flash sites in less than 10 minutes
- Simple API for Navigation, Transitions, Preloading, Asset Management makes development a snap
- Deep Linking achieved through seamless integration with SWFAddress
- SEO Scaffolding makes Search Engine Optimization as easy as pressing a button
- Easy enough for novices
- Powerful enough for experts
Fazit:
Aufbauend auf dem zeiteinsparenden Gaia Flash-Framework kann sich der Entwickler somit mehr mit der Konzeption und dem Design der Website beschäftigen. Das anlegen einer kompletten Seite wird zum Kinderspiel und auch Deep Linking und SEO wird bei einer Flash Website nicht vergessen. Insgesamt ein hilfreiches Framework, das einem ein gutes Stück Arbeit bei der Entwicklung von Flash Webseiten abnimmt.
Weiterführende Links:
Gaia-Flash Framework
Gaia-Flash Framework FAQ
Gaia-Flash Framework Demo
Was ist ein Framework?
Ein Framework (dt. Rahmenstruktur) ist ein Programmiergerüst, das in der Softwaretechnik, insbesondere im Rahmen der objektorientierten Softwareentwicklung sowie bei komponentenbasierten Entwicklungsansätzen, verwendet wird.
Ein Framework ist selbst noch kein fertiges Programm, sondern stellt den Rahmen, innerhalb dessen der Programmierer eine Anwendung erstellt, zur Verfügung, wobei u. a. durch die in dem Framework verwendeten Entwurfsmuster auch die Struktur der individuellen Anwendung beeinflusst wird. Ein Framework gibt somit in der Regel die Anwendungsarchitektur vor.
Quelle: Wikipedia
Photoshop Tutorial: Portrait Montage
Wer gerne einmal eine professionelle Portraitmontage machen möchte, sollte sich das aktuelle Photoshop Tutorial auf psd.tutsplus näher ansehen. In 22 Schritten wird hier erklärt, wie man aus einem normalen Portrait eine atemberaubende Kulisse mit plastischen Effekten zaubert. Zum Einsatz kommt hier natürlich Adobe Photoshop, das mit seinen vielen Funktionen dieses erst ermöglicht.
In dem Photoshop Tutorial wird als erstes eine ganz normale Portrait-Aufnahme freigestellt und vor einem bewölkten Himmel platziert. Danach werden im Zusammenspiel mit Pinsel und Masken, verschiedene Bereiche des Gesichts hervorgehoben um einen plastischen Look zu erhalten. Mit Gradiationskurven und Filtern wird das Ergebnis dann immer mehr verfeinert, bis ein perfektes Gesamtbild entsteht. Zum Schluß wird noch der Regen sowie die Sonne hinzugefügt und fertig ist der Photoshop Montage-Cocktail.
Photoshop Tutorial - Portrait Montage
Sicherlich ist das Photoshop Tutorial nichts für Anfänger, aber für fortgeschrittene Photoshop Nutzer sollte das ganze kein Problem darstellen. Hilfreich ist auch das begleitende Video Tutorial, in dem alle Arbeitsschritte nochmal ausführlich nacheinander gezeigt werden.
Adobe Flash Catalyst
Seit langem gibt es eine große Lücke, die in der Medienproduktion zwischen Designern und Entwicklern herrscht. Insbesondere im Screendesign gehen die Meinungen des machbaren auf beiden Seiten desöfteren mal auseinander. Der Designer möchte beispielsweise gerade dort einen Button im Layout platzieren, wo der Entwickler die meisten Schwierigkeiten für die Umsetzung der Interaktionen sieht. Solche und noch viele andere Beispiele führen dazu, das der Entwicklungsprozess gebremst wird.
Flash Catalyst, ein gerade in Entwicklung befindliches Tool von Adobe setzt genau an dem Punkt an und versucht die Lücke zwischen Designer und Entwickler zu schließen. Als eigenständiges Tool kann man mit Flash Catalyst, vorgefertigte Layouts die man mit Produkten der Creative Suite 4 designed hat, darunter z.B. Photoshop, Fireworks oder Illustrator, in funktionierende Internet,- oder Desktopanwendungen umwandeln. Rich Internet Applications, kurz RIA, für den Desktop oder eben fürs Web sind damit kein Problem mehr.
Als Designer kann man nun bequem das gerade erstellte Photoshop-Layout, z.B. ein Screendesign für eine Website in Catalyst importieren und die einzelnen Ebenen mit Interaktionen versehen (Buttons, Checkboxen, Textfelder usw.). Dabei ist einem die Benutzeroberfläche von Flash Catalyst hilfreich, ähnelt sie doch der Benutzeroberfläche von Photoshop. Nach und nach kann man sich so seine eigene Anwendung “zusammenklicken” und als Rich Internet Application (SWF) oder Desktop-Anwendung (Adobe Air) veröffentlichen.
Sicherlich fragen sich jetzt alle Flasher und Flexer ob sie nun arbeitslos werden, da ihnen ja anscheinend Flash Catalyst die Arbeit abnimmt? Die Antwort ist ganz klar nein. Internet,- und Desktopanwendungen sind so vielfältig wie die Ansprüche an die jeweiligen Anwendungen. Und genau hier muß Catalyst passen, denn es werden zwar viele grundlegende Funktionalitäten bereitgestellt, wie unter anderem Transitions, also Tweens für Movieclips oder die verschiedenen Zustände für Buttons (RollOver, RollOut, Click etc.), aber darüber hinaus gibt es eben auch viele Problemstellungen die Flash Catalyst nicht bewältigen kann und wo nach wie vor ein Flash,- bzw. Flexentwickler benötigt wird.
Und hier setzt dann auch das Konzept von Flash Catalyst an, denn beim veröffentlichen der Anwendung wird ein XML-Austauschformat (FXG) erzeugt, das mit dem Flexbuilder ohne weiteres von Flash,- bzw. Flexentwicklern genutzt werden kann. Somit wird der Designer zwar auch zum Entwickler, aber eben nur in begrenztem Maß und dem eigentlichen Entwickler wird Arbeit abgenommen.
Sicherlich wird sich dieses Prinzip in Zukunft durchsetzen, spart man doch damit ungemein Zeit und viel Verwirrung innerhalb des Entwicklungsprozesses. Der Designer kann seine Ideen schon im Vorfeld teilweise selber umsetzen und der Entwickler verleiht der jeweiligen Anwendung im Anschluss die benötigte Funktionalität.
Weiterführende Links:
Adobe Labs – Flash Catalyst
Screenshots – Flash Catalyst
Folge uns auf Twitter
