Anzeige
Tutorialbeschreibung

Diashow

Diashow

In diesem Tutorial will ich euch zeigen, wie Ihr ganz leicht eine Diashow in Flash für eure Webseite machen könnt.


Schritt 1:
Als erstes erstellt Ihr ein neues Flashdokument und stellt die Größe auf 450x350 Pixel.

Bilder

Schritt 2:
Nun erstellt Ihr mit dem Rechteckswerzeug ein Rahmen (größe egal, Kontur schwarz, Füllfarbe keine) [1], nimmt das Auswahlwerkzeug klickt doppelt auf eine Linie des Rahmens [2.1] und ändert im Eigenschaftsinspektor die Größe auf 320x240 Pixel [2.2] und richtet es mittig aus, drückt danach F8 (oder Modifizieren | In Symbol konvertieren) und wählt Movieclip [3]. Zu letzt noch den Instanzname "dia" eingeben [4]. Ist recht viel für ein Schritt aber Ihr schafft das schon ;-).


Bilder

Schritt 3:
Jetzt gebt Ihr dem Ganzen eine Überschrift (mit dem Textwerkzeug) und macht unter den Rahmen 2 Zeichen, die nachher zum Vorwärts und Rückwärts abspielen genommen werden. Ich habe in meinem Beispiel einfach die Schriftart "Webdings" und  die  Zeichen "7" und "8" genommen. Ihr müsst aber beide Zeichen in einem Einzelnen Textfeld machen!!!

Bilder


Schritt 4:
Nun klickt Ihr das Symbol für "zurück" an und drückt F8 (oder Modifizieren | In Symbol konvertieren) und wählt "Schaltfläche" aus. Nach dem Bestätigen drückt Ihr F9 und gebt folgenden Text in den ActionScript Editor ein.

on(release) {   
    if (_root.nummer > 1) {        
        _root.nummer--;
        loadMovie("bilder/bild" + nummer + ".jpg", "dia");
    } else {
        _root.nummer = _root.bilder;
        loadMovie("bilder/bild" + nummer + ".jpg", "dia");
    }
}



Bilder


Schritt 5:
Das gleiche müssen wir auch für das andere Symbol ("vor") machen. Also auswählen, F8 drücken, Schaltfläche wählen, bestätigen, F9 drücken aber diesmal folgendes eingeben:

on(release) {
    if (_root.nummer < _root.bilder) {
        _root.nummer++;
        loadMovie("bilder/bild" + nummer + ".jpg", "dia");
    } else {
        _root.nummer = 1;
        loadMovie("bilder/bild" + nummer + ".jpg", "dia");
    }
}



Schritt 6:
So jetzt eine neue Ebene erstellen und F9 drücken. Nun folgt folgender Code-Teil:

var nummer = 1;
var bilder = 6;
loadMovie("bilder/bild" + nummer + ".jpg", "dia");

var bilder müsst ihr auf die Anzahl an Bilder die Ihr in die Diashow einbinden wollt ändern. Ich habe in meinem Beispiel nur 6 stück.

Schritt 7:
So fast fertig. Jetzt speichert Ihr eure Datei ab und veröffentlicht sie danach.

Bilder


Schritt 8:
Als letztes müsst Ihr die Bilder auf die größe 320x240 pixel ändern und das Format muss "jpg" sein. Außerdem müssen die Bilder in den Ordner "bilder" (selbst erstellen) und den namen "bild1.jpg", "bild2.jpg", "bild3.jpg" .. usw haben. Der Ordner "bilder" muss darüberhinaus im gleichen Verzeichnis sein wie eure ".swf" Datei.

So müsste es dann ungefähr aussehen:
Bilder


So meine Beispieldatei könnt ihr Hier runterladen.

Hoffe Ihr habt alles verstanden sonst einfach Email an Mathemaster@gmail.com.

Mfg Zeiflex

Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von wegewitz
  • 27.10.2010 - 13:11

Freu mich auf das Ausprobieren

Portrait von Palerider1971
Portrait von DraQ
  • 08.07.2010 - 16:12

gutes tutorial...danke

Portrait von womanisery
  • 17.05.2010 - 21:02

danke, sehr hilfreich ;)

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 03.05.2010 - 14:54

Vielen Dank, gut und verständlich beschrieben.

Portrait von womanisery
  • 27.04.2010 - 22:48

Danke ;) hilfreich und verständlich erklärt....

Portrait von Ella90
  • 08.04.2010 - 14:27

Danke, gut verständlich beschrieben.

Portrait von king4psd
  • 18.03.2010 - 23:41

Gut beschrieben, verständlich. Klasse.

Portrait von putzili2609
  • 14.01.2010 - 17:04

Informativ! Ist ein gutes Tutorial

Portrait von kinzig
  • 13.01.2010 - 10:08

Übersichtlich und gut. Dankeschön

Portrait von jr3012
  • 23.11.2009 - 09:23

danke für das schöne tut

Portrait von _Ina_
  • 02.09.2009 - 16:22

Super! das hilft mir weiter. Danke!

Portrait von Rhymes
  • 25.07.2009 - 16:10

echt cool, ich finds super, nur nen outcome wär auch gut :D

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 23.07.2009 - 09:20

sehr tolles tut ... danke sehr

Portrait von brina123
  • 17.07.2009 - 15:01

gut zu verstehen, danke

Portrait von Anja80
  • 18.05.2009 - 11:03

danke für das schöne tut

Portrait von catattack
  • 29.03.2009 - 12:21

jo gut zu verstehendes Tutorial. Danke

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 25.03.2009 - 21:24

Sehr einfach zu verstehen, klasse!

Portrait von mediamaster09
Portrait von silvereye2000
x
×
×