Weave » Quellcode http://www.weave.de Webdesign, Konzeption & Development Thu, 22 Jul 2010 08:41:32 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 WEAVE 04.10. – Open Source Media Framework http://www.weave.de/code/osmf0410 http://www.weave.de/code/osmf0410#comments Mon, 12 Jul 2010 05:00:04 +0000 le http://www.weave.de/?p=2555

Ein Framework für alle Fälle

Mit Adobes Open Source Media Framework können ActionScript-Entwickler fast alle denkbaren multimedialen Player-Varianten leicht erstellen: von musikuntermalten Diashows über Video- und Audioplayer bis hin zu werbefinanzierten Videoplattformen im großen Stil. Florian Plag zeigt in einem Tutorial der WEAVE 04.2010 die wesentlichen Features.

Den Quellcode sowie Bild- und Filmmaterial zum Tutorial gibt’s hier: www.video-flash.de/weave

]]> http://www.weave.de/code/osmf0410/feed 0 WEAVE 03.10 – iPad App-Entwicklung http://www.weave.de/code/ipad0310 http://www.weave.de/code/ipad0310#comments Mon, 10 May 2010 13:16:23 +0000 ilona http://www.weave.de/?p=2473

Höher, breiter, weiter

Senior Interactive Developer Jens Franke zeigt in der WEAVE 03.2010, wie Sie eine iPhone App für das iPad konvertieren und anpassen können, was es beim Interface-Design der beiden Geräte für Unterschiede gibt und wie Sie einen RSS-Reader mit Detail-Ansicht und Video-Player sowie Slip-Screen programmieren.

Denn Quellcode zum Tutorial können Sie hier herunter laden.

Interessante Links zum Thema iPad-App-Entwicklung finden Sie hier:

STARTPUNKT APPLE
http://developer.apple.com/ipad/sdk/index.html

iPAD PROGRAMMING GUIDE
http://developer.apple.com/iphone/library/documentation/General/Conceptual/iPadProgrammingGuide
/Introduction/Introduction.html

iPAD HUMAN INTERFACE GUIDELINES
http://developer.apple.com/iphone/library/documentation/General/Conceptual/iPadHIG/Introduction
/Introduction.html

UNIVERSAL APPLICATIONS
http://devimages.apple.com/iphone/resources/introductiontouniversalapps.pdf

AUSBLICK AUF DAS iPHONE OS 4.0
www.apple.com/iphone/preview-iphone-os/

CORE TEXT PROGRAMMING GUIDE
http://developer.apple.com/iphone/library/documentation/StringsTextFonts/Conceptual/
CoreText_Programming/Introduction/Introduction.html#//apple_ref/doc/uid/TP40005533

iPAD-VERSION VON MAIL
www.apple.com/ipad/features/mail.html

TouchXML
http://code.google.com/p/touchcode/wiki/TouchXML

KissXML
http://code.google.com/p/kissxml/

json-framework
http://code.google.com/p/json-framework/

TouchJSON
http://code.google.com/p/touchcode/wiki/TouchJSON

ASYNCHRONES LADEN VON BILDERN FÜR UITableView

http://developer.apple.com/IPhone/library/samplecode/LazyTableImages/Introduction/Intro.html
>> Ein gutes Beispiel dafür, das asynchrones Laden vieler Bilder mittels der Klasse NSURLConnection Interfaces nicht zum Stocken bringt

INFOS ZUM STREAMING VON VIDEOS AUF DEM iPAD
https://developer.apple.com/iphone/library/technotes/tn2010/tn2224.html
https://developer.apple.com/iphone/library/technotes/tn2010/tn2224.html#SETTINGSFILES
http://digitalcontentproducer.com/videoencodvd/revfeat/encoding_apple_ipad_0420/index.html

VIMEO-CHANNEL ÜBER NEUE INTERACTIONSFORMEN “New ways of interaction”
http://vimeo.com/channels/newwaysofinteraction

VIDEO MAGAZINE DEMOS FÜR TABLETS
http://vimeo.com/10630568
http://vimeo.com/10676843
http://vimeo.com/10204353
http://vimeo.com/10207926
http://vimeo.com/10280094
http://vimeo.com/10253564
http://www.wired.com/video/wired-magazine-on-the-ipad/66775419001
http://www.youtube.com/watch?v=ntyXvLnxyXk

BLOGS
http://iphoneincubator.com/blog/
http://cocoawithlove.com/
www.iphoneflow.com
www.cimgf.com/

FOREN
http://stackoverflow.com/
www.iphonedevsdk.com
http://devforums.apple.com/index.jspa
www.osxentwicklerforum.de/index.php

]]> http://www.weave.de/code/ipad0310/feed 0 WEAVE 03.10 – vvvv Einsteiger-Tutorial http://www.weave.de/code/vvvv0310 http://www.weave.de/code/vvvv0310#comments Mon, 10 May 2010 05:00:37 +0000 ilona http://www.weave.de/?p=2408

Es werde Licht

Für die Mercedes-Benz Galleries in München und Berlin realisierte das Frankfurter Interactive Studio meso eine komplexe Lichtsteuerung mit Hilfe des Programmiersystem vvvv. Mitentwickler Sebastian Oschatz zeigt in WEAVE 03.10 anhand eines vereinfachten Beispiels, wie das geht. Unter folgendem Link können Sie sich Patches zum Workshop herunter laden.

www.meso.net/weave

]]> http://www.weave.de/code/vvvv0310/feed 0 WEAVE 03.10 – Datenvisualisierung mit Processing http://www.weave.de/code/dataviz0310 http://www.weave.de/code/dataviz0310#comments Mon, 10 May 2010 05:00:37 +0000 ilona http://www.weave.de/?p=2436

Daten sammeln und visualisieren

Für die WEAVE 03.2010 hat der Berliner Designer Cedric Kiefer nicht nur fünf Datenvisualisierungen erstellt – alle basierend auf den Online-Aktivitäten von fünf Kreativen, die sie 24 Stunden lang für uns trackten. Er zeigt in einem Tutorial auch Schritt für Schritt, wie sich Daten mittels Processing auswerten und gestalten lassen. Dazu stellt er hier nun den Quellcode sowie das Tool zum Aufzeichnen der Online-Aktivitäten zur Verfügung:

1// Das LogTool zum Aufzeichnen der Daten

2// Der Quellcode, um das Ganze besser nachvollziehen zu können

]]> http://www.weave.de/code/dataviz0310/feed 0 WEAVE 02.10 – Flash für Google http://www.weave.de/code/flash4google0210 http://www.weave.de/code/flash4google0210#comments Wed, 10 Mar 2010 05:00:27 +0000 le http://www.weave.de/?p=2149

Seo für Flash

Flash-Sites sind für Google in der Regel nur weiße Flecken auf der Weblandkarte. In Weave 02.2010 erklärt Holger Stitz, wie man sie mit HTML für die Suchmaschine optimiert. Ein lauffähiges Beispiel, den kommentierten Quellcode und eine kleine “Readme” können Sie hier als ZIP-Datei herunterladen.

flash_seo_beispielseite

]]> http://www.weave.de/code/flash4google0210/feed 0 WEAVE 01.10 – Data Centric Development http://www.weave.de/code/flashbuilder4dcd0110 http://www.weave.de/code/flashbuilder4dcd0110#comments Sun, 10 Jan 2010 05:00:00 +0000 le http://www.weave.de/?p=1916

Kontaktverwaltung mit Flash Builder 4

Mit Flash Builder 4 hält ein neuer Workflow Einzug in die Entwicklung von Rich-Internet-Applikationen. Entwickler Simon Widjaja zeigt, wie Sie mit den neuen Werkzeugen rund ums Data Centric Development (DCD) eine Flex-basierte Kontaktdaten-Verwaltung mit PHP-Backend realisieren – ohne eine Zeile PHP-Code. Hier gibt es das Flex-Projekt zum Herunterladen und ausprobieren.

]]> http://www.weave.de/code/flashbuilder4dcd0110/feed 0 WEAVE 06.09 – Tutorial Webtypografie http://www.weave.de/code/typotricks0609-2 http://www.weave.de/code/typotricks0609-2#comments Wed, 04 Nov 2009 05:00:51 +0000 fwolf http://www.weave.de/?p=1784

Der Quellcode zum Tutorial

René Schulze ist Webdesigner und –entwickler und zeigt in der WEAVE 06.2009 Schritt für Schritt, wie Sie Ihre Websites typografisch verfeinern können. Folgend finden Sie den Quellcode zum Durchlesen und Herunterladen:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2.  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3.  
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
  5. <head>
  6.  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  7.  
  8.  <title>Webtypografie | Weave</title>
  9.  <style type="text/css" media="screen">
  10.       /* —– Einfacher reset | Start —– */
  11.       * {
  12.                margin: 0;
  13.                padding: 0;
  14.                border: 0 none;
  15.           }
  16.       /* —– Einfacher reset | Ende —– */
  17.  
  18.  
  19.       /* —– Schriften hinzufügen | Start —– */
  20.  
  21.       @font-face {
  22.               font-family: GraublauWeb;
  23.               src: url('GraublauWeb.otf') format('truetype');
  24.           }
  25.  
  26.           @font-face {
  27.               font-family: GraublauWeb;
  28.               font-weight: bold;
  29.               src: url('GraublauWebBold.otf') format('truetype');
  30.           }
  31.           /* —– Schriften hinzufügen | Ende —– */
  32.  
  33.  
  34.           /* —– Textrhythmus und Schriftformatierung | Start —– */
  35.           body {
  36.                color: #222;
  37.                font-size: 100.1%;
  38.                font-family: GraublauWeb, 'Helvetica Neue', Helvetica, Arial, Sans-Serif;
  39.                background: #fdfdfd;/* url('./pattern.gif');*/
  40.           }
  41.  
  42.           html > body {
  43.                font-size: 100%;
  44.           }
  45.  
  46.           p {
  47.                font-size: .875em;
  48.                line-height: 1.5em;
  49.  
  50.                margin: 1.5em 0;
  51.           }
  52.  
  53.           .marginal-note {
  54.                font-size: .75em;
  55.                line-height: 1.75em;
  56.                margin: 0 0 1.75em 0;
  57.           }
  58.  
  59.           h1 {
  60.                color: #444;
  61.                font-size: 1.313em;
  62.                text-align: center;
  63.                background: transparent url('./color-pixel-898989.gif') repeat-x scroll left center;
  64.                line-height: 1em;
  65.                margin: 1em 0 0 0;
  66.           }
  67.  
  68.           h1 a {
  69.                color: inherit;
  70.                text-decoration: none;
  71.                background: #fdfdfd;
  72.                padding: 0 .5em;
  73.           }
  74.  
  75.           h1 a:before,
  76.           h1 a:after {
  77.                color: #898989;
  78.                content: '✪';
  79.           }
  80.  
  81.           h1 a:hover:before, h1 a:focus:before,
  82.           h1 a:hover:after, h1 a:focus:after {
  83.                content: '✩';
  84.           }
  85.  
  86.           h1 a:before {
  87.                padding-right: .5em;
  88.           }
  89.  
  90.           h1 a:after {
  91.                padding-left: .5em;
  92.           }
  93.  
  94.           h2 {
  95.                color: #444;
  96.                font-size: 1em;
  97.                line-height: 1.3125em;
  98.                margin: 1.3125em 0;
  99.           }
  100.  
  101.           h2.byline {
  102.                width: 100%;
  103.                font-size: .75em;
  104.                font-weight: normal;
  105.                text-align: center;
  106.                line-height: 1.75em;
  107.                letter-spacing: .07em;
  108.                margin: 0 0 1.75em 0;
  109.           }
  110.  
  111.           .amp {
  112.                font-family: Baskerville, "Goudy Old Style", "Palatino", "Book Antiqua", "Warnock Pro", serif;
  113.            font-style: italic;
  114.            font-size: 1.1em;
  115.           }
  116.  
  117.           .caps {
  118.                font-size: .9em;
  119.                text-transform: uppercase;
  120.           }
  121.  
  122.           sup {
  123.                line-height: 1em;
  124.           }
  125.  
  126.           sub {
  127.                line-height: 1em;
  128.                vertical-align: -.3em;
  129.           }
  130.  
  131.           h2.byline + p:first-letter {
  132.                font-size: 3.281em;
  133.                margin: .06em .1em 0 -.025em;
  134.                line-height: .75em; /* Safari-Ausgleich */
  135.                display: block;
  136.                float: left;
  137.           }
  138.           /* —– Textrhythmus und Schriftformatierung | Ende —– */
  139.  
  140.  
  141.           /* —– Struktur-CSS | Start —– */
  142.       #wrapper {
  143.            width: 46.25em; /* elastisch ✌ */
  144.            margin: 0 auto;
  145.       }
  146.  
  147.           h2, p {
  148.            width: 60%;
  149.       }
  150.  
  151.       .marginal-note {
  152.            width: 25%;
  153.            margin-right: 10%;
  154.            float: right;
  155.       }
  156.       /* —– Struktur-CSS | Ende —– */
  157.  </style>
  158. </head>
  159. <body>
  160.      <div id="wrapper">
  161.           <h1><a href="#" title="Zur Startseite gehen">Webtypografie und schick</a></h1>
  162.           <h2 class="byline">von René Schulze</h2>
  163.           <p>
  164.                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua … . Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor.
  165.           </p>
  166.           <p class="marginal-note">
  167.                <sup>1</sup>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
  168.           </p>
  169.           <p>
  170.                Lorem ipsum dolor sit amet, consectetur<sup>1</sup> adipisicing elit, sed do eiusmod tempor <span class="amp">&amp;</span> incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  171.           </p>
  172.           <h2>Lorem ipsum dolor sit amet</h2>
  173.           <p>
  174.                Aorem ipsum <sub>dolor</sub> sit amet, consectetur <span class="caps">adipisicing</span> elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco »laboris« nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  175.           </p>
  176.      </div>
  177. </body>
  178. </html>

Seperater Download-Link: http://www.weave.de/wp-content/uploads/2009/11/index.html.zip

]]> http://www.weave.de/code/typotricks0609-2/feed 0 WEAVE 06.09 – Softwarearchitektur http://www.weave.de/code/userinterface0609 http://www.weave.de/code/userinterface0609#comments Wed, 04 Nov 2009 05:00:30 +0000 fwolf http://www.weave.de/?p=1755

Flexible User Interfaces

Damit Anwendungen einfach und flexibel angepasst werden können, müssen sie von vorneherein logisch aufgebaut sein. Das spart nicht nur Zeit und Geld sondern auch Nerven. Wie man ganz einfach ein Desktop-User-Interface gegen ein Web-UI austauscht, erklärt Golo Roden in WEAVE 06.2009

Das endgültige Resultat:

using System;
  1. using System.Collections.Generic;
  2. using System.Linq;
  3. using System.Xml.Linq;
  4.  
  5. namespace Microkernel
  6. {
  7.     ///
  8.     /// Represents a service locator.
  9.     ///
  10.     public static class ServiceLocator
  11.     {
  12.         ///
  13.         /// Contains the mappings from contracts to types.
  14.         ///
  15.         private static Dictionary _mappings;
  16.  
  17.         ///
  18.         /// Initializes the  type.
  19.         ///
  20.         static ServiceLocator()
  21.         {
  22.             // Load the configuration.
  23.             _mappings =
  24.                 (from mapping in
  25.                     XElement.Load("ServiceLocator.xml").Element("mappings").Elements("mapping")
  26.                 select
  27.                     new KeyValuePair(
  28.                         Type.GetType(mapping.Attribute("contract").Value),
  29.                         Type.GetType(mapping.Attribute("type").Value))).ToDictionary(
  30.                     kvp =&gt; kvp.Key, kvp =&gt; kvp.Value);
  31.         }
  32.  
  33.         ///
  34.         /// Gets an instance for the specified contract.
  35.         ///
  36.         /// The type of the contract.
  37.         /// An instance that matches the specified contract.
  38.         public static TContract GetService() where TContract : class
  39.         {
  40.             // Instantiate the type and return it to the caller.
  41.             return (TContract)Activator.CreateInstance(_mappings[typeof(TContract)]);
  42.         }
  43.     }
  44. }

Die Konfigurationsdatei, damit der Mikrokernel weiß, welche Klasse bei der Anforderung einer Schnittstelle instanziiert werden soll.

  1. <?xml version="1.0" encoding="utf-8" ?>
  2. <serviceLocator>
  3.  <mappings>
  4.   <mapping contract="" type="" />
  5.  </mappings>
  6. </serviceLocator>
]]> http://www.weave.de/code/userinterface0609/feed 0 WEAVE 05.09 – Flash-Seiten zum Mitnehmen http://www.weave.de/code/flashpdf0509 http://www.weave.de/code/flashpdf0509#comments Tue, 25 Aug 2009 05:00:32 +0000 fwolf http://www.weave.de/?p=1505

Flash zum Mitnehmen

Flashpdf0509 550w in

Das Online-Portfolio von Christian Bartsch ist nicht nur online schick – besuchte Seiten kann man sich auch zu einem individuellen PDF zusammenstellen und herunterladen. Martin Anderle programmierte die Funktion mit Hilfe der alivePDF-API und stellt hier eine abgespeckte Version des Quellcodes zur Verfügung.

package
  1. {
  2.  import br.com.stimuli.loading.*;
  3.  
  4.  import org.alivepdf.colors.CMYKColor;
  5.  import org.alivepdf.fonts.*;
  6.  import org.alivepdf.layout.*;
  7.  import org.alivepdf.pdf.PDF;
  8.  import org.alivepdf.saving.Method;
  9.  
  10.  import flash.display.Sprite;
  11.  import flash.events.*;
  12.  import flash.geom.Rectangle;
  13.  import flash.net.FileReference;
  14.  import flash.text.TextField;
  15.  public class AlivePdfExamle extends Sprite
  16.  {
  17.   private var _pdf : PDF;
  18.   private var _loader : BulkLoader;
  19.   private var _header : String = "http://www.martinanderle.de/article/weavepdf/header.jpg
  20. ";
  21.   private var _img1 : String = "http://www.martinanderle.de/article/weavepdf/christian_bartsch.jpg
  22. ";
  23.   private var _img2 : String = "http://www.martinanderle.de/article/weavepdf/martin_anderle.jpg
  24. ";
  25.  
  26.   public function AlivePdfExamle()
  27.   {
  28.    loadImages();
  29.   }
  30.  
  31. /**
  32.  * Da wir mehrere Bilder laden ist der Einsatz des Bulkloaders sinnvoll,
  33.  * weil dieser mehrere Dateien gleichzeitig laden kann, desweiteren
  34.  * ist der Code übersichtlicher.
  35.  * Die Bilder werden als ByteArray geladen, da wir beim Header
  36.  * welcher aus Vektoren besteht 1200dpi und bei den Bildern 300dpi verwenden.
  37.  */
  38.  
  39.   private function loadImages() : void
  40.   {
  41.    _loader = new BulkLoader("ImageLoader");
  42.    _loader.addEventListener(BulkLoader.ERROR, loadError);
  43.    _loader.addEventListener(BulkProgressEvent.PROGRESS, loadProgress);
  44.    _loader.addEventListener(BulkLoader.COMPLETE, loadComplete);
  45.  
  46.    // Hinzufügen der Bilder zur Loading-Liste des BulkLoaders
  47.    _loader.add(_header, {type:BulkLoader.TYPE_BINARY});
  48.    _loader.add(_img1, {type:BulkLoader.TYPE_BINARY});
  49.    _loader.add(_img2, {type:BulkLoader.TYPE_BINARY});
  50.  
  51.    // Starten des Loaders
  52.    _loader.start();
  53.   }
  54.  
  55.   private function loadError(event : Event) : void
  56.   {
  57.    trace("Wenn die Datei lokal ausgeführt wird, muss diese im Adobe Settings Manager zur Kommunikation mit dem Internet freigeschaltet werden.");
  58.   }
  59.  
  60.   private function loadProgress(event : BulkProgressEvent) : void
  61.   {
  62.    trace("LOADING: ", Math.round(event.percentLoaded * 100));
  63.   }
  64.  
  65.   private function loadComplete(event : Event) : void
  66.   {
  67.    trace("LOAD_COMPLETE");
  68.  
  69.    // PDF Objekt erzeugen und Seitenformat definieren, es ist auch möglich eigene Formate anzugeben.
  70.    _pdf = new PDF(Orientation.LANDSCAPE, Unit.MM, Size.A4);
  71.  
  72.    firstPage();
  73.    secondPage();
  74.  
  75.    // end() schließt das PDF-Dokument.
  76.    _pdf.end();
  77.  
  78.    // Fügt einen Button auf der Bühne hinzu, dieser ist nötig, da aus Sichheitsgründen nur erlaubt ist den Flash Save-File Dialog innerhalb eines MouseEvents aufzurufen.
  79.    addButton();
  80.   }
  81.  
  82.   private function firstPage() : void
  83.   {
  84.    // PDF Seite hinzufügen
  85.    _pdf.addPage();
  86.  
  87.    // Geladenes Bild hinzufügen, positionieren und Breite festlegen
  88.    _pdf.addImageStream(_loader.getBinary(_header), 0, 0, 297);
  89.  
  90.    // Schrift Familie, Stil und Größe festlegen
  91.    _pdf.setFont(FontFamily.ARIAL, Style.ITALIC, 123);
  92.  
  93.    // Text angeben sowie Position bestimmen
  94.    _pdf.addText("weave", 20, 140);
  95.  
  96.    // Um beim nächsten Element die Schrift zu ändern, nochmals setFont() aufrufen und die Parameter ändern.
  97.    _pdf.setFont(FontFamily.TIMES, Style.ITALIC, 26);
  98.    _pdf.addText("pdf lookbook book example", 26, 151);
  99.  
  100.    // Wie bei der graphics Klasse von AS3 kann man hier Vektoren erzeugen, wir zeichnen hier ein einfaches Rechteck.
  101.    _pdf.lineStyle(new CMYKColor(0, 0, 0, 0), 0);
  102.    _pdf.beginFill(new CMYKColor(70, 1, 35, 0));
  103.  
  104.    _pdf.drawRect(new Rectangle(25, 158, 60, 10));
  105.  
  106.    // Mit textStyle() kann die Farbe des Textes geändert werden.
  107.    _pdf.textStyle(new CMYKColor(0, 0, 0, 0));
  108.    _pdf.setFont(FontFamily.ARIAL, Style.ITALIC, 18);
  109.    _pdf.addText("www.gsenpod.com", 27, 165);
  110.  
  111.    // Um einen Link-Bereich zu definieren, Koordinaten, Höhe, Breite und den Link angeben.
  112.    _pdf.addLink(25, 158, 60, 10, "http://www.gsenpod.com");
  113.   }
  114.  
  115.   private function secondPage() : void
  116.   {
  117.    // PDF Seite hinzufügen
  118.    _pdf.addPage();
  119.  
  120.    // Geladenes Bild hinzufügen, positionieren und Breite festlegen
  121.    _pdf.addImageStream(_loader.getBinary(_header), 0, 0, 297);
  122.  
  123.    // Bilder hinzufügen, positionieren und Breite und Höhe angeben
  124.    _pdf.addImageStream(_loader.getBinary(_img1), 12, 40, 135, 135);
  125.    _pdf.addImageStream(_loader.getBinary(_img2), 150, 40, 135, 135);
  126.  
  127.    _pdf.textStyle(new CMYKColor(0, 0, 0, 100));
  128.  
  129.    _pdf.setFont(FontFamily.ARIAL, Style.ITALIC, 26);
  130.    _pdf.addText("christian bartsch // martin anderle", 12, 192);
  131.   }
  132.  
  133. /**
  134.  * Speichern des PDF mittels der in Flash10 eingeführten FileReference Klasse.
  135.  * Um Missbrauch zu verhindern, muss der Aufruf innerhalb eines MouseEvents erfolgen.
  136.  */
  137.   private function downloadPDF(event : MouseEvent) : void
  138.   {
  139.    new FileReference().save(_pdf.save(Method.LOCAL), "weave – pdf lookbook book example.pdf");
  140.   }
  141.  
  142.   private function addButton() : void
  143.   {
  144.    var sprite : Sprite = new Sprite();
  145.    sprite.addEventListener(MouseEvent.MOUSE_UP, downloadPDF);
  146.    sprite.buttonMode = true;
  147.  
  148.    var textField : TextField = new TextField();
  149.    textField.mouseEnabled = false;
  150.    textField.text = "Get PDF";
  151.    sprite.x = stage.stageWidth / 2;
  152.    sprite.y = stage.stageHeight / 2;
  153.  
  154.    sprite.addChild(textField);
  155.    addChild(sprite);
  156.   }
  157.  }
  158. }
]]> http://www.weave.de/code/flashpdf0509/feed 0 WEAVE 05.09 – Animierte Button erzeugen mit jQuery http://www.weave.de/code/jquery0509 http://www.weave.de/code/jquery0509#comments Tue, 25 Aug 2009 05:00:17 +0000 fwolf http://www.weave.de/?p=1518

jQuery als Flash-Alternative

Das JavaScript-Framework jQuery erzeugt mit wenigen Zeilen Code sehr professionell wirkende Animationen. Anhand des folgenden Quellcodes von Johannes Kretschmar und Daniel Mies können Sie damit beispielsweise in nur 60 Minuten eine interaktive Karte erstellen.

GRUNDLEGENDES

Basis von jQuery ist die so genannte jQuery-Funktion:
$('p').hide();

Mögliche Beispiele für die Verwendung von Selektoren sind:
$('p') – jeder Absatz im Objekt
$('div > p') – jeder Absatz der Kindelement eines div-Element
$('ul.klasse li:first') – das erste li-Element in der unsortierten Liste mit der Klasse “klasse”
$('h1, h2, h3, h4, h5, h6') – alle Überschriften

Mögliche Funktionen, die auf selektierte Elemente angewendet werden können, sind zum Beispiel:
.hide() – das Element wird versteckt
.show() – das versteckte Element wird angezeigt
.fadeIn() – das Element wird langsam eingeblendet
.slideDown() – das Element wird von oben nach unten ausgefahren

Viele weitere Beispiele für Selektoren und Methoden finden Sie in der sehr ausführlichen Dokumentation unter http://docs.jquery.com

DAS GRUNDGERÜST

  1. <div class="infobox_wrapper" style="top:140px; left:260px;" >
  2.   <img src="punkt.png" alt="O" />
  3.   <h2>Stadtkirche</h2>
  4. </div>

DAS ERSTE ANIMIERTE ELEMENT MIT jQUERY

Laden Sie die jQuery-Quelldatei von http://www.jquery.com herunter und benennen Sie diese um in jquery.js. Dann binden Sie sie über
<script src="jquery.js" type="text/javascript"></script> in den >head<-Bereich Ihrer Webseite ein.

Codegerüst, in das Sie Ihren Code einfügen müssen:

  1. <script type="text/javascript">
  2. $("document").ready(function(){
  3.  
  4. });
  5. </script>

Die jQuery-Anweisungen hide[] und hover[]:

  1. $(".infobox_wrapper h2").hide();
  2. $(".infobox_wrapper img").hover(
  3.   function(){ $(this).next().fadeIn(500); },
  4.   function(){ $(this).next().fadeOut(500); }
  5. );

DER AUSKLAPPTEXT

Der Ausklapptext soll zunächst unsichtbar sein:

  1. $(".infobox_text").hide();
  2. $(".infobox_wrapper img").click(
  3.   function() {$(this).nextAll(".infobox_text").slideDown(500);}
  4. );

Zustände speichern:

$(“.infobox_wrapper img”).data(“clicked”,false);
  1.  
  2. Die Fallunterscheidung:
  3.  
  4. <pre lang="javascript">
  5. $(".infobox_wrapper img").click(
  6.  function() {
  7.   if ($(this).data("clicked") == true)
  8.   {
  9.    $(this).nextAll(".infobox_text").slideUp(500);
  10.    $(this).data("clicked",false);    
  11.   }
  12.   else
  13.   {
  14.    $(this).nextAll(".infobox_text").slideDown(500);
  15.    $(this).data("clicked",true);
  16.   }
  17.  }
  18. );

Erweiterung:

  1. $(".infobox_wrapper img").hover(
  2.  function() {
  3.   $(this).next().fadeIn(500);
  4.  },
  5.  function() {
  6.   if ($(this).data("clicked") == false)
  7.   {
  8.    $(this).next().fadeOut(500);
  9.   }
  10.  }
  11. );

EINE WEITERE ZOOMSTUFE

  1. <div id="karte">
  2.    <div class="zoom">
  3.     <img src="zoomout.png" alt="ZoomOut" class="zoomOut" />
  4.  ... InfoPunkte Zoomstufe 1 ...
  5.   </div>
  6.    <div class="zoom">
  7.     <img src="zoomin.png" alt="ZoomIn" class="zoomIn" />
  8.  ... InfoPunkte Zoomstufe 2 ...
  9.   </div>
  10. </div>

Aktuellen Zoom-Container verstecken:

  1. $(".zoomOut").click(
  2.    function() {
  3.     $(this).parent(".zoom").hide();
  4.     $(this).parent(".zoom").next(".zoom").show();
  5.     $("#karte").css("background-image","url(karte_out.jpg)");
  6.     }
  7.    );
  8. $(".zoomIn").click(
  9.    function() {
  10.     $(this).parent(".zoom").hide();
  11.     $(this).parent(".zoom").prev(".zoom").show();
  12.     $("#karte").css("background-image","url(karte_in.jpg)");
  13.     }
  14.    );

Alle Zoomstufen verstecken und ersten Zoom-Container anzeigen:

  1. $(".zoom").hide();
  2. $(".zoom:first").show();

WAS IST, WENN KEIN JAVASCRIPT AKTIVIERT IST

Zoom-out-Button über jQuery explizit wieder hervorholen:

  1. $(".zoomOut").show();

Erweiterung:

  1. <noscript>
  2.  Bitte aktivieren sie die Ausführung von JavaScript um alle <br/>
  3.  Funktionen dieser Webseite nutzen zu können. Vielen Dank.
  4. </noscript>
]]> http://www.weave.de/code/jquery0509/feed 0