Flashhilfe.de - Flash Community

Image Slider per Drag + Easing [Flash CS4]

 


AntwortenRegistrieren Seite1  

FrontEnds#1
Benutzerbild von FrontEnds
Beiträge: 2
Registriert: Mar 2010

13.03.2010, 14:56

Hallo,
Unter http://www.graphictherapy.com gibt es eine sehr einfache aber effektive Bildergalerie.
Mit Flash habe ich bisher nicht viel gemacht, würde aber ganz gerne das mit dem Draggen und dem weichen scrollen sowie der optimalen Anpassung an den Bildschirm genauso umsetzen.
Für nen einfachen Slider gibts ja genug Tuts, passt nur nicht. Oder was müsste man da umbauen?
Gibts dafür nen passendes Tutorial?

Danke für Hilfe, (Wäre zu den 697Seiten, welche ich mir gerade besorgt habe, ne echt geile Altrenative)
Robin
Schlagwörter: CS4, Drag, Drop, Gallery, liquid, slider
Werbung
Beiträge: 0
Registriert: Feb 2016


falter80#2
Benutzerbild von falter80
Beiträge: 15
Registriert: Aug 2007

11.02.2012, 15:33

Hey FrontEnds,
hast du mittlerweils etwas zum Thema gefunden?
Ich suche original das gleiche.
Danke
vindel#3
Benutzerbild von vindelFlashhilfe.de Moderator
Beiträge: 3000
Wohnort: Köln
Registriert: Oct 2007

13.02.2012, 10:54

Soo,

also wenn du / ihr wisst wie man einen normalen Slider umsetzt, dann habt ihr schon mal die halbe Miete. Jetzt müsst ihr im Prinzip nur die Drag'drop Funktion nutzen die in Flash ja schon integriert ist.
Das ganze habe ich mal für Mobile Anwendungen gebaut:
ActionScript:
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
52
import flash.events.MouseEvent;
import fl.transitions.Tween;
import fl.transitions.easing.*;
import fl.transitions.TweenEvent;

stage.addEventListener(MouseEvent.MOUSE_DOWN, mDown);
stage.addEventListener(MouseEvent.MOUSE_UP, mUp);

var mScroll:Boolean = true;
var mPos:int;
var cPos:int;
var mDelta:Number;
var posOld:Number;
var nachlauf:int = 10; // Gibt die Stärke des Nachlaufes an

var scContentTW:Tween = new Tween(scContent, "x", Strong.easeOut, scContent.x, scContent.x, 0.1, true);

function mDown(e:MouseEvent) {
     if(stage.mouseX > 0 && stage.mouseX < stage.stageWidth && mScroll) {
        scContentTW.stop();
        mPos = posOld = mouseX;
        cPos = scContent.x;
        mDelta = 0;
        stage.addEventListener(MouseEvent.MOUSE_MOVE, mMove);   
     }
}

function mMove(e:MouseEvent) {
     scContent.x = cPos+mouseX-mPos;
     mDelta = mouseX-posOld
     posOld = mouseX;
}

//
function mUp(e:MouseEvent) {
     stage.removeEventListener(MouseEvent.MOUSE_MOVE, mMove);
     // Kante erkennen
   if(scContent.x < 0 && (scContent.width+scContent.x) < stage.stageWidth) {
        scContentTW = new Tween(scContent, "x", Strong.easeOut, scContent.x, stage.stageWidth-scContent.width, 1, true);
     } else if(scContent.x > 0 && scContent.x+scContent.width > stage.stageWidth) {
        scContentTW = new Tween(scContent, "x", Strong.easeOut, scContent.x, 0, 1, true);
     } else if(mDelta != 1 && mDelta != 0) {
        // Nachlauf      
      var end:Number = scContent.x+mDelta*nachlauf;
        if(end < 0 && (scContent.width+end) < stage.stageWidth)
           end = stage.stageWidth-scContent.width;
        else if(end >0 && end+scContent.width > stage.stageWidth)
           end = 0;
        scContentTW = new Tween(scContent, "x", Strong.easeOut, scContent.x, end, 1, true);
     }   
     mDelta = 0;
}

Also es werden zwei Listener erstellt - für die Mausaktion "gedrückt" und "losgelassen". Beim Tastendruck wird dann die aktuelle Maus und MC Position gespeichert, sowie ein neue Listener für die Mausbewegung gestartet. Nach dem die Maus losgelassen wurde, muss jetzt ein wenig gerechnet werden. Zum einen muss erkannt werden ob der MC über den Rand hinaus gedragged wurde - dann soll er ja direkt zurück an den Rand gehen, oder aber der normale Nachlauf muss realisiert werden. Dazu gibts die Variable "nachlauf", welche die Stärke des Nachlaufes angibt.
public Weltformel(Problem){
      if (Problem gelöst) return Lösung;
      else Weltformel(kleiners Problem);
}

Angehängte Dateien:
Adobe Flash Animationen scroll-example.swf6.23 KB
falter80#4
Benutzerbild von falter80
Beiträge: 15
Registriert: Aug 2007

22.02.2012, 20:06

hey vindel,
hat wunderbar geklappt, nur ist da noch ein problemchen. Wenn du die Fla exportierst die anhängt ist, siehst du was ich meine. Links (der schwarze rahmen ist die stage) kann ich den Slider nicht ziehen, rechts schon... seltsam
Und kann ich dem Slider sagen das die Kante nicht die Stage sondern das Browserfenster ist, links wie rechts?
Wenn du Lust hast schaus dir an
Danke

Angehängte Dateien:
Adobe Flash Quelldatei slide_er.fla58.00 KB
Werbung
Beiträge: 0
Registriert: Feb 2016


vindel#5
Benutzerbild von vindelFlashhilfe.de Moderator
Beiträge: 3000
Wohnort: Köln
Registriert: Oct 2007

23.02.2012, 11:58

Hallo,

also der Code Berechnet den Slider für die gesamte Bühne = Stage, es kann sein, dass du deinen Film oben links ausrichten musst...
http://help.adobe.com/de_DE/FlashPlatform/reference/actionscript/3/flash/display/StageAlign.html
Also kannst du es nicht durch einen Rahmen begrenzen, außer du änderst das Script ab.
public Weltformel(Problem){
      if (Problem gelöst) return Lösung;
      else Weltformel(kleiners Problem);
}
Skyjacker#6
Benutzerbild von Skyjacker
Beiträge: 1
Registriert: Feb 2014

03.02.2014, 21:38

Hey ihr! Ich habe gerade euer script hier entdeckt und finde es fabelhaft! :-) würde das gerne benutzen, habe nur ein problem... und zwar ist das die stage...
wie kann ich das ganze umschreiben so das es sich nur auf einen bestimmten bereich bezieht den ich angeben kann (evtl. movieclip) weil würde die fertige swf gern in einen anderen fla importieren damit das ganze dann da läuft. Oder halt gleich das script in den neuen fla-swf setzen aber da muss ich ja irgendwie ne begrenzung haben damit er nicht die ganze stage benutzt... springt dann nämlich irgendwie falsch umher...

hoffe ihr könnt mir helfen :-)

AntwortenRegistrieren Seite1  

Schnellantwort

Du musst registriert sein, um diese Funktion nutzen zu können.

 
Ähnliche Beiträge zum Thema
Partner Webseiten: art-and-law.de  Mediengestalter.info   php-resource.de   phpforum.de   phpwelt.de   Pixelio.de   Scubacube.de  
Haftungsausschluss   Datenschutzerklärung   Hier Werben   Impressum
© 1999-2019 Sebastian Wichmann - Flashhilfe.de