Erstellen Sie mit AS3 einen Smooth Rolling Scroller

() translation by (you can also view the original English article)

In diesem tutorial lernen Sie, wie man eine Scroll-Liste aktiviert durch Maus nach oben und unten Bewegungen mit unterschiedlichen Geschwindigkeiten auf der Grundlage der position des Cursors. Ich werden auch noch die Vorbereitung der Liste der Daten mit PHP, laden von XML-Daten und eine kurze Erläuterung des Algorithmus kam ich mit. Genießen Sie!

Schritt 1: Einführung

Der andere Tag, als ich testete ein Smartphone, ich sah, wie einer der diese Coole, nette Liste scroller tweening-Effekte. Also fing ich an zu denken, wie ich erreichen konnte, einen solchen Effekt in Flash, habe einige nachforschungen im web-und ehrlich gesagt nicht genau, was ich suchte. So, hier ist das Ergebnis meines kleinen Auftrag.

Schritt 2: die Planung der Anwendung

Nach einigen Recherchen fand ich einen schönen Algorithmus. Es einfach bezieht sich die Bewegung der Maus mit dem Prozentsatz des sichtbaren Bereichs (später auf, wird dies erkannt, als die Maske), die Sie tatsächlich in spitz. Danach wird der container bewegt wird, in der gleichen Anteil.

Sagen wir zum Beispiel, dass die Maus in der Nähe der Unterseite des blauen geschweiften Klammer. In diesem Szenario werden die container bewegen würde 20% nach oben.

Wie Sie sehen können, funktioniert das ziemlich gut. Wenn Sie mit dem Mauszeiger erreicht den oberen oder unteren Rand des sichtbaren Bereichs, haben wir die Gewissheit, dass wir erreicht haben, an den Anfang oder das Ende der Liste. Diese Technik ist sehr einfach, weil wir nicht haben, um sorgen über die Liste zu erreichen, zum Beispiel, der Anfang und weiterhin bewegen entlang.

Aber... Was ist, wenn wir haben Hunderte von Listenelementen? Jetzt haben wir ein problem. Wenn unsere sichtbaren Bereich (Maske) hat, sagen wir mal, auf 500 Pixel Höhe und wir haben eine Liste mit 100 items (alle content-Bereich), jeder von Ihnen mit einer Höhe von 20 Pixel, das bewegen der Maus 1/5 des sichtbaren Bereichs (Maske) führen würde, der übergang von 20 items (400px / 20 px) mit der Geschwindigkeit des Lichts. Also denke ich, dieser Ansatz wäre nicht das Ergebnis sehr gut.

Also, ich kam mit dieser Lösung:

Im Grunde habe ich definiert zwei Zonen – unter und über der Mitte. Jede zone hat einen zugeordneten Wert. Dieser Wert wird berechnet auf der Grundlage der Entfernung zwischen dem Mauszeiger und dem Mittelpunkt. Also, wenn wir tatsächlich ordnen Sie diesen Wert mit einer Variablen könnten wir ändern die Geschwindigkeit, die basierend auf der position der Maus. Das minus-Zeichen ist nur für die Entscheidung, die Richtung der Bewegung.

Having said that, lassen Sie uns einige echte Inhalte.

Schritt 3: Greifen Sie die Daten

Wir werden mit einer externen xml-Datei füttern der Anwendung, weil:

Wir können hinzufügen, entfernen, Bearbeiten, löschen von Daten, die sehr leicht
Actionscript 3 ist eine tolle API zur Arbeit mit xml

Also, wir brauchen eine große Liste von items... und Was ist mit der Liste von Ländern auf der ganzen Welt?

(Dieser Schritt ist schon ein extra-Thema, weil ich mit anderen werden Sprache, mir zu helfen, mit der xml-Datei Vorbereitung. Also, wenn dies nicht von Interesse sind, keine Sorge, dies wird in den download-Dateien)

Ich habe gerade Gegoogelt [Liste der Länder] und in der ersten Folge habe ich diese Liste:

1 Afghanistan
2 Akrotiri
(...)
256 Sambia
257 Simbabwe

(Quelle: https://www.listofcountriesoftheworld.com)

Kopieren Sie alles, um einige text-Datei und speichern Sie es. Ich nannte es countries.txt.

Das Skript ist in PHP geschrieben. Sie benötigen einen web-server, um Sie auszuführen. Ich bin mit wampserver, ein nettes bundle für die Installation von PHP, MySQL und Apache mit ein paar Klicks.

Um dieses Skript verwenden, müssen Sie initialisiert die web-server, und führen Sie das Skript in einem Unterverzeichnis \www\ Verzeichnis. Eine Letzte Anmerkung: das Skript und die countries.txt müssen im gleichen Ordner sein.


<?php
$lines = file("countries.txt");
$fp = fopen('data.xml', 'a');
fwrite($fp, '<?xml version="1.0" encoding="UTF-8"?>' . "\n");
fwrite($fp, '<items>' . "\n");
foreach($lines as $line) {
  $line = rtrim($line, "\r\n");
	$pattern = '/\d+\s*/';
	$replacement = '';
	$line =  preg_replace($pattern, $replacement, $line);
	$str = "\t" . '<item>' . $line . '</item>' . "\n";
	fwrite($fp, $str);
}
fwrite($fp, '</items>');
fclose($fp);
?>

Die Ausgabe dieses Skripts wird in einer Datei abgespeichert werden mit dem Namen data.xml. Wenn Sie nicht verstehen, diesen Schritt nicht zu sorgen, denn Sie können es herunterladen von hier.

Schritt 4: einrichten des .fla-Datei

Wenn du dir die demo, Sie werden feststellen, dass unsere Anwendung hat eine Schnittstelle, buttons und so weiter. Lassen Sie uns also beginnen, alle Grafiken zusammen.

Öffnen Adobe Flash und erstellen Sie eine neue ActionScript 3 Datei mit den folgenden Einstellungen:

Breite: 450px
Höhe: 500 Pixel
frame rate: 63
Klasse: DocumentClass

Speichern Sie die Datei. Ich habe namens mine Blättern.fla.

Schritt 5: Die Hintergrund-Bild

"Datei" > "Importieren" > "in Bühne Importieren" und wählen Sie die background.jpg Bild (alle Bilder sind enthalten in assets.zip innerhalb der source-download).

Jetzt:

Fenster " > " ausrichten

Damit öffnen Sie das Bedienfeld "Ausrichten". Zentrieren des Bildes auf der Bühne, indem Sie auf die Schaltflächen im Bild unten gezeigt.

Und jetzt geben Sie dem layer den Namen Hintergrund (vergessen Sie nicht, um Sie zu verriegeln):

Step 6: The Scroller's Background

Eine neue Ebene erstellen ein Bild importieren, das pad.png. Der Import ist genau das gleiche wie der Vorherige Schritt. Drücken Sie die F8-Taste, um wandeln Sie es in ein MovieClip, und geben Sie ihm den Namen mcPad. Als Nächstes klicken Sie auf die Kontrollkästchen Export für ActionScript und in der Klasse Eingabefeld, geben Sie den Namen Pad.

Im Grunde definieren wir die pad-MovieClip als eine Unterklasse der MovieClip-Klasse selbst. Daher sind wir in der Lage, es zu benutzen, direkt von unserem code und behandeln Sie es wie einen normalen MovieClip, da es erbt von MovieClip-Klasse. Ziemlich cool, huh?

Nun, dann löschen Sie die Instanz von der Bühne, aber nicht aus der Bibliothek (weil wie ich schon sagte, wir werden es aus dem code).

Schritt 7: Die Tasten

Importieren Sie das Bild itemBackground.jpg drücken Sie die F8-Taste, um wandeln Sie es in ein MovieClip. Geben Sie den Namen mcItem. Wieder einmal "export für ActionScript" und benennen Sie die Klasse Element.

Jetzt der Prozess wird etwas anders sein:

doppelklicken Sie auf die mcItem MovieClip für die Herstellung einige änderungen in
benennen Sie die Schicht nur dort Zurück und verriegeln Sie es
erstellen Sie eine neue Ebene und nennen Sie es Über
importieren Sie das Bild itemBackground-over.jpg die Über layer
konvertieren in einen MovieClip, und geben Sie einen Namen mcItemOver
position der mcItemOver MovieClip an der Stelle x = 0 und y = 0
geben Sie Ihr den Instanznamen item_btn_over

Schließlich sperren Sie die Über-Schicht, um wieder auf die Hauptzeitleiste, und löschen Sie die mcItem MovieClip-Instanz von der Bühne.

Schritt 8: Die Schriftart

Für diese Anwendung bin ich mit der schriftart " Arial Rounded MT Bold Negrito schriftart (es ist eine Kostenlose schriftart, die ich heruntergeladen habe meins von hier). Da es nicht ein system schriftart, die wir haben, um es zu importieren:

auf der Bibliothek separator klicken Sie auf den oberen rechten Knopf (der mit einem kleinen Pfeil)
wählen Sie Neue Schriftart
rufen Sie fontArialRounded, dann wählen Sie die schriftart über die dropdown-box unten. Wieder einmal Export für ActionScript und in der Klasse Feld geben Sie den Namen ArialRounded

In der Haupt-timeline, brauchen wir nur die Hintergrund-Ebene, so können Sie löschen Sie die verbleibenden Ebenen.

Dass es für das Flash-Authoring-tool. Lassen Sie mit dem Programmieren beginnen.

Schritt 9: Hinzufügen der Anwendung im Hintergrund auf die Bühne

Erstellen Sie eine neue ActionScript-Datei, speichern Sie es als Sie für "DocumentClass".als. Fügen Sie dann diesen code:


package {
	import flash.display.MovieClip;
	public class DocumentClass extends MovieClip {

		private var _pad:MovieClip;

		public function DocumentClass() {
			_pad = new Pad();
			addChild(_pad);
			_pad.x = stage.stageWidth / 2 - _pad.width / 2;
			_pad.y = stage.stageHeight / 2 - _pad.height / 2;
		}
	}
}

(Wenn Sie nicht sicher sind, was wir hier tun, schauen Sie sich diese kurze Einführung in die Dokument-Klassen.)

Denken Sie daran, die mdPad MovieClip? Daran erinnern, dass wir exportiert haben, es für ActionScript. So, Wann immer wir wollen zu instanziieren dieser MovieClip-wir haben halt zu geben

1
2	new Pad();

Dieser code erstellt im Prinzip eine Instanz der mcPad MovieClip, und fügt es auf die Bühne mit der addChild () - Methode. So, jetzt, die _pad ist auf unserer DisplayList!

Habe ich dann zentriert es auf der Bühne (vertikal und horizontal).

Testen Sie die Anwendung, und Sie sollten sehen, die hintergrund-layout auf den flash-player.

Schritt 10: Container

Unsere Anwendung wird Sie einen container verwenden, um zu halten alle Einzelteile zusammen. So, wir gehen, um erstellen Sie einen neuen MovieClip in der DocumentClass. Die Eigenschaft deklarieren:

1
2	private var _container:MovieClip;

Konstruktor, am Ende:

1
2	_container = new MovieClip();
3	addChild(_container);

Schritt 11: der Import der XML-Daten

Fügen Sie die folgenden import-Anweisungen:

1
2	import flash.events.Event;
3	import flash.net.URLRequest;
4	import flash.net.URLLoader;

Erklären Sie die folgenden Eigenschaften:

1
2	public var loader:URLLoader;
3	public var data:XML;
4	public var items:XMLList;

Dann implementieren Sie die folgenden Methoden:


private function dataLoad():void {
	loader = new URLLoader();
	loader.addEventListener(Event.COMPLETE, dataLoaded); 
	loader.load(new URLRequest("data.xml"));
}

private function dataLoaded(event:Event):void {
	trace("Data Loaded.");
}

Schließlich fügen Sie diese Methode aufrufen, um den Konstruktor übergeben werden:

1
2	dataLoad();

Bisher haben wir:


package {
	
	import flash.display.MovieClip;
	import flash.events.Event;
	import flash.net.URLRequest;
	import flash.net.URLLoader;

	public class DocumentClass extends MovieClip {

		private var _pad:MovieClip;
		private var _container:MovieClip;
		public var loader:URLLoader;

		public function DocumentClass() {
			_pad = new Pad();
			addChild(_pad);
			_pad.x = stage.stageWidth / 2 - _pad.width / 2;
			_pad.y = stage.stageHeight / 2 - _pad.height / 2;

			_container = new MovieClip();
			addChild(_container);
			
			dataLoad();
		}
		
		private function dataLoad():void {
			loader = new URLLoader();
			loader.addEventListener(Event.COMPLETE, dataLoaded); 
			loader.load(new URLRequest("data.xml"));
		}
				
		private function dataLoaded(event:Event):void {
			trace(new XML(event.target.data.toString()));
		}
	
	}
}

Testen Sie die Anwendung, und Sie sollten sehen, in der Konsole, alle xml-Daten. Let ' s move on.

Schritt 12: Erstellen Button

Fügen Sie die folgenden import-Anweisungen:


import flash.text.TextFormat;
import flash.text.TextField;
import flash.text.TextFieldAutoSize;
import flash.text.Font;

Fügen Sie diese neuen Variablen:


public var data:XML;
public var items:XMLList;
private var _item:Item;
private var _itemTextField:TextField;
private var _defaultFormat:TextFormat = new TextFormat();
private var _arialRounded:Font = new ArialRounded();
private var _textFieldXPosition:uint = 10;
private var _textFieldYPosition:uint = 13;
private var _textFieldWidth:uint = 240;
private var _textFieldHeight:uint = 25;
private var _itemPosition:uint = 49;

Update der dataLoaded Methode:


private function dataLoaded(event:Event):void {

	// this property holds the loaded xml data
	data = new XML(event.target.data);			
	// the items property holds all the repeating item elements
	items = data.item;
	
	// this iterates over every item
	for (var i = 0; i < items.length(); i++) {
		// remember the mcItem? We are instantiating that MovieClip
		_item = new Item();
   		// sets the Over layer MovieClip's alpha to 0 
		_item.item_btn_over.alpha = 0;		
		// creates the Item textfield
		_itemTextField = new TextField();
			_itemTextField.x = _textFieldXPosition;
			_itemTextField.y = _textFieldYPosition;
			_itemTextField.selectable = false;
			_itemTextField.width = _textFieldWidth;
			_itemTextField.height = _textFieldHeight; 
			_itemTextField.embedFonts = true;
			_defaultFormat.color = 0x111112;
			_defaultFormat.font = _arialRounded.fontName;
			_defaultFormat.size = 18;
			_itemTextField.defaultTextFormat = _defaultFormat;
			_itemTextField.text = items[i].toString();
		
		// adds the textfield to the item's display list
		_item.addChild(_itemTextField);
		// positions each item vertically based on the iteration value
		_item.y = i * _itemPosition;
			_item.buttonMode = true;
			_item.mouseChildren = false;
		// adds the item to the container display list		
		_container.addChild(_item);
	}	
}

Jetzt haben wir die 200+ - Tasten und legen Sie Sie auf den Bildschirm. Wenn Sie die Anwendung ausführen, werden Sie bemerken, dass diese Liste beginnt an der Position (0, 0) und füllt sich über die gesamte Bühne. Das ist nicht das, was wir wollen, so lassen Sie einfach den Griff, dass in den nächsten Schritt.

Schritt 13: Maskierung der Liste

Wir erstellen eine Form, die Maske, die Liste, damit wir sehen nur den sichtbaren Bereich, wie im Bild von vorher:

Am Ende werden wir Mitte der Maske und container. So fügen Sie eine weitere import-Anweisung:

1
2	import flash.display.Shape;

Eigenschaften:


private var _mask:Shape;
private var _maskWidth:uint = 288;
private var _maskHeight:uint = 290;
private var _paddingTop:uint = 120;

Und... In der dataLoaded Methode am Ende, fügen Sie den folgenden code:


_mask = new Shape();
_mask.graphics.beginFill(0xFF0000);
_mask.graphics.drawRect(0, 0, _maskWidth, _maskHeight);
_mask.graphics.endFill();
// center the mask horizontally on the stage
_mask.x = stage.stageWidth / 2 - _container.width / 2;
// positions the mask vertically at 120px from the top
_mask.y = _paddingTop;
addChild(_mask);
// assigns the mask to the container
_container.mask = _mask;

// centers the container horizontally on the stage
_container.x = stage.stageWidth / 2 - _container.width / 2;
// positions the container vertically at a certain value
_container.y = _paddingTop;

Schritt 14: das Hinzufügen eines Hintergrund-der Container

Nur eine kleine Verbesserung... gerade jetzt unsere container hat eine Menge Löcher, denn es gibt eine Marge, die zwischen jedes Element. Also lasst es einen hintergrund zu vermeiden, die zu unerwünschten Ergebnissen, wenn das warten auf Ereignisse.

Eigenschaft:

1
2	private var _background:Shape;

Noch in der dataLoaded Methode, unter den vorhandenen code:


_background = new Shape();
_background.graphics.beginFill(0xFFFFFF);
_background.graphics.drawRect(0, 0, _container.width, _container.height);
_background.graphics.endFill();
_container.addChildAt(_background, 0);

Schritt 15: die Ereignis-Listener Hinzugefügt

Wie Sie wahrscheinlich wissen, Listener für die Ereignisse. Hier werden wir eine für den MouseOver-Ereignis und ein weiteres für die MouseOut-Ereignis.

Fügen Sie diese am Ende der dataLoaded Methode:

1
2	_container.addEventListener(MouseEvent.MOUSE_OVER, movingOver);
3	_container.addEventListener(MouseEvent.MOUSE_OUT, movingOut);

Lassen Sie uns nun die Implementierung der movingOver und movingOut Methoden:


private function movingOver (event:MouseEvent):void {
	_container.removeEventListener(MouseEvent.MOUSE_OVER, movingOver);	
}

private function movingOut (event:MouseEvent):void {
	_container.addEventListener(MouseEvent.MOUSE_OVER, movingOver);				
}

Jetzt können wir hören für Veranstaltungen, insbesondere MOUSE_OVER und MOUSE_OUT. Ereignisse wie Nachrichten, informieren, jedes Objekt wartet auf das gleiche Ereignis. Die "Nachricht" nur Sendungen, die das Ereignis aufgetreten ist. In diesem Fall ist der _container Objekt überwacht werden für MouseOver und MouseOut Ereignisse. Wenn Sie die _container hat die Möglichkeit, entsprechend zu reagieren.

Also, zuerst weisen wir die Ereignis-Listener, um die _container Objekt und dann, später, wenn die _container ist schwebte über den MouseOver listener entfernt wird. Im Gegenteil, wenn die Maus aus dem _container Objekt mit der Maus über listener zugewiesen ist, wieder auf die _container.

Schritt 16: Event-Flow

Der event-Fluss ist ein mächtiger Mechanismus, der es erlaubt, dass der Programmierer Bearbeiten Sie mehrere Objekte mit nur einem Ereignis-listener verarbeitet. So, wie Sie sich wahrscheinlich vorstellen, _container.addEventListener "Abhören" für Veranstaltungen, an denen die container, die Objekte und den hintergrund, Form – , ist -, Behälter-und alles drin. Sie können dies überprüfen, indem Sie den folgenden code in movingOver und movingOut Methoden:

1
2	trace(event.target);

Diese verfolgen das Objekt, die ausgelöst wurde, kann die Veranstaltung.

Schritt 17: OnEnterFrame

Beim hören für diese Veranstaltung können wir definieren ein Verhalten, das stattfinden wird für jeden frame, in unserem Fall 63-mal pro Sekunde. Das ist, warum die OnEnterFrame-event ist sehr nützlich für die Animationen basierend auf die fps. Wir benötigen diese, um unsere schriftrolle, so dass der movingOver und movingOut-Methoden sollten wie folgt Aussehen:


private function movingOver (event:MouseEvent):void {
	_container.removeEventListener(MouseEvent.MOUSE_OVER, movingOver);
	addEventListener(Event.ENTER_FRAME, enterFrame);
}
		
private function movingOut (event:MouseEvent):void {
	removeEventListener(Event.ENTER_FRAME, enterFrame);
	_container.addEventListener(MouseEvent.MOUSE_OVER, movingOver);				
}

Schritt 18: Das enterFrame-Methode

Fügen Sie diese Eigenschaften:

1
2	private var _maxSpeed:uint = 15;
3	private var _speed:Number;

Fügen Sie die folgende Methode am Ende des Codes (unter dem movingOut-Methode) . Diese ausgeführt wird, jedes frame, Dank der EnterFrame-Ereignis-listener, die wir zuvor erstellt haben. Ich werde erklären, was dieser code ist unten.


function enterFrame(event:Event):void {
	_speed = (_mask.height / 2 - _mask.mouseY) / (_mask.height / 2) * _maxSpeed;
	_container.y += _speed;
	if (_container.y >= _paddingTop) {
		removeEventListener(Event.ENTER_FRAME, enterFrame);
		_container.y = _paddingTop;
	}
	if (_container.y <= _mask.height - _container.height + _paddingTop) {
		removeEventListener(Event.ENTER_FRAME, enterFrame);
		_container.y = _mask.height - _container.height + _paddingTop;
	}
}

Und hier ist die Logik der scroller:

1
2	_speed = (_mask.height / 2 - _mask.mouseY) / (_mask.height / 2) * _maxSpeed;

Diese Codezeile wird die Geschwindigkeit durch die Aufteilung der Hälfte der Höhe der Bühne, mit der Maus Y-position.

Lassen Sie uns sagen, dass die Hälfte der Bühne ist 200px und der Maus cursor ist an position 300px. Die Formel anwenden erhalten wir:

(200 – 300) / 200 * 15 (_maxSpeed Eigenschaft) = -7.5, die negativ ist, so wird die Liste geben uns eine Abwärtsbewegung. Das ist genau das, was wir suchen. Wenn der Maus-cursor wurde über der Mitte hätten wir einen positiven Wert und würde die Liste nach oben zu verschieben.

Neben, mit dieser Aussage:

1
2	_container.y += _speed;

Wir werden die Zuordnung der tatsächlichen Geschwindigkeit jedes frame (63-mal pro Sekunde), um die _container.y-position. Dann überprüfen wir mit if-Anweisungen, ob der container die y-position ist, wo es sein soll. Erinnere mich an dieses Bild:

Schritt 19: Animieren Sie die Position-Taste

Ich werde greensock ' s TweenMax-Bibliothek (Sie können es herunterladen von hier) zu animieren, um jede Taste ein und aus (wenn der Mauszeiger darauf verlassen oder das Element).

Fügen Sie diese import-Anweisung:

1
2	import gs.*;

Update der movingOver und movingOut Methoden:


private function movingOver (event:MouseEvent):void {
_container.removeEventListener(MouseEvent.MOUSE_OVER, movingOver);
	addEventListener(Event.ENTER_FRAME, enterFrame);
	if (event.target is Item) 
		TweenMax.to(Item(event.target).item_btn_over, .2, {alpha:1});
}
		
private function movingOut (event:MouseEvent):void {
	removeEventListener(Event.ENTER_FRAME, enterFrame);
	_container.addEventListener(MouseEvent.MOUSE_OVER, movingOver);				
	if (event.target is Item)
		TweenMax.to(Item(event.target).item_btn_over, .2, {alpha:0});
}

Analysieren wir diesen code im detail. Die event.Ziel wird das Objekt verwiesen wird, löst das Ereignis, in diesem Fall MouseOver oder MouseOut. Dieses Objekt könnte eine _item, die _background oder die _container aber wir interessieren uns nur für Element-Objekte also, die wir angeben:

1
2	if (event.target is Item)

Dann, wenn dem so ist, werden wir Sie animieren, was auch immer Element-Objekt ausgelöst, das Ereignis durch Eingabe Element(event.Ziel ist).item_btn_over. Die item_btn_over ist der name der Instanz des mcItemOver MovieClip, dass wir in Schritt 7 erstellt haben. .2 ist die animation der Zeit, und der Letzte parameter, den wir angeben, welche Eigenschaft, die wir animieren wollen (alpha).

Schritt 20: Refactoring

Gerade jetzt, unsere Anwendung funktioniert ziemlich gut. Allerdings haben wir einige code wiederholt und eine sehr zentrale Anwendung als auch. Beachten Sie, dass die dataLoaded Methode ist dabei fast alles.

Actionscript hat eine hervorragende Unterstützung für die objektorientierte Programmierung. Könnten wir das so trennen Sie das laden von Daten von Anwendung Logik, etc.

Es ist ein schönes design das Muster " Model-View-Controller funktioniert sehr gut mit user interfaces. Dieses Muster grundsätzlich trennt, ist die Anwendung in drei verschiedenen Ebenen. Das Modell beschäftigt sich mit der business-Logik, data-handling. Der Controller befasst sich mit der menschlichen Interaktion mit der Anwendung. Und schließlich der Blick beschäftigt sich mit der visuellen Oberfläche der Anwendung.

In diesem Fall wird unsere Anwendung ist zu klein, um die Implementierung dieses Musters. Also, lasst uns anpassen, das Modell einfach und Verschiedenes View/Controller unserer Anwendung. Lassen Sie uns zunächst nur behandeln einige code wiederholt.

Schritt 21: Gemeinsame Aufgaben

Erstellen Sie eine neue ActionScript-Datei, und geben Sie den folgenden code:


package com.tutsplus.active.util {
	
	import flash.display.*;
	
	public class Align {
		
		public static function centerInStage (stage:Stage, mc:DisplayObject):void {			
			mc.x = stage.stageWidth / 2 - mc.width / 2;
			mc.y = stage.stageHeight / 2 - mc.height / 2;
		}
		
		public static function centerHorizontallyInStage (stage:Stage, mc:DisplayObject):void {			
			mc.x = stage.stageWidth / 2 - mc.width / 2;
		}
		
		public static function centerVerticallyInStage (stage:Stage, mc:DisplayObject):void {			
			mc.y = stage.stageHeight / 2 - mc.height / 2;
		}

	}
	
}

Wir haben zur Erfüllung dieser Aufgabe mehrere Male. So entschied ich mich zu einer Klasse, richtet ein Anzeigeobjekt auf der Bühne, Wann immer wir es nennen. Um diese Arbeit zu machen, müssen Sie eine directory-Struktur wie diese:

\com\tutsplus\active\util\

in Ihrer Produktions-Verzeichnis oder in Ihrer Klasse Weg. Weiter, in der umgestalteten "DocumentClass" Sie werden sehen, wie diese Klasse verwenden.

Schritt 22: Modell

Das Modell verwaltet das Verhalten und die Daten der domain-Anwendung, reagiert auf Anfragen für Informationen über seinen Status (in der Regel aus der Sicht) und reagiert auf Anweisungen zum ändern des Status (in der Regel von der Steuerung)

Quelle: MSDN.

Das laden der Daten und der Speicherung in Daten-Strukturen sind schön-Operationen für die Komposition unserem Modell. Erstellen Sie eine neue ActionScript-Datei, und nennen es ScrollModel.als:


package {
	
	import flash.events.Event;
	import flash.net.URLRequest;
	import flash.net.URLLoader;
	import flash.events.EventDispatcher;
	
	class ScrollModel extends EventDispatcher {
		
		public var loader:URLLoader;
		public var data:XML;
		public var items:XMLList;
		
		public static const MODEL_UPDATE:String = "modelChange";
		
		public function ScrollModel() {
			loader = new URLLoader();
			loader.addEventListener(Event.COMPLETE, dataLoaded);
		}
		
		public function load(req:URLRequest):void {
			loader.load(req);
		}
		
		private function dataLoaded(event:Event):void {			
			data = new XML(event.target.data);			
			items = data.item;
			dispatchEvent(new Event(ScrollModel.MODEL_UPDATE));
		}
	}	
}

Mit diesem update unserer dataLoaded Methode hat nur 3 Linien des Codes jetzt!

Es ist fast der gleiche code, den wir verwendet, in der Sie für "DocumentClass" für das laden der Daten, mit nur einem Unterschied:

1
2	dispatchEvent(new Event(ScrollModel.MODEL_UPDATE));

Nach der Zuordnung unserer 200+ items auf die XMLList-Eigenschaft diese Codezeile löst ein Ereignis für jeden, der Sie hört. In der Praxis müssen wir wissen, Wann dies geschieht, um die Nutzung dieser Daten in einer anderen Klasse.

Schritt 23: Die ScrollBox Klasse

Erstellen Sie eine neue Actionscript-Datei, und nennen Sie es ScrollBox.als:


package {
	
	import flash.display.Sprite;
	import flash.display.Stage;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.display.Shape;
	import flash.text.TextFormat;
	import flash.text.TextField;
	import flash.text.TextFieldAutoSize;
	import flash.text.Font;
	import gs.*;
	import com.tutsplus.active.util.Align;
	
	public class ScrollBox extends Sprite {
		
		private var _container:Sprite;
		private var _item:Item;
		private var _itemTextField:TextField;
		private var _defaultFormat:TextFormat = new TextFormat();
		private var _arialRounded:Font = new ArialRounded();
		private var _textFieldXPosition:uint = 10;
		private var _textFieldYPosition:uint = 13;
		private var _textFieldWidth:uint = 240;
		private var _textFieldHeight:uint = 25;
		private var _itemPosition:uint = 49;		
		private var _mask:Shape;
		private var _maskWidth:uint = 288;
		private var _maskHeight:uint = 290;
		private var _paddingTop:uint = 120;
		private var _background:Shape;		
		private var _maxSpeed:uint = 15;
		private var _speed:Number;		
		private var _items:XMLList;
		private var _stage:Stage;
		public var scrollModel:ScrollModel;
		
		public function ScrollBox (stage:Stage, m:ScrollModel) {
			this.scrollModel = m;
			this._stage = stage;
			scrollModel.addEventListener(ScrollModel.MODEL_UPDATE, createRollingScroller);
		}
		
		private function createRollingScroller(event:Event = null):void {		
			_container = new Sprite();
			_stage.addChild(_container);
			
			_items = scrollModel.items;
			for (var i = 0; i < _items.length(); i++) {
				_item = new Item();
				_item.item_btn_over.alpha = 0;
				
				_itemTextField = new TextField();
				_itemTextField.x = _textFieldXPosition;
				_itemTextField.y = _textFieldYPosition;
				_itemTextField.selectable = false;
				_itemTextField.width = _textFieldWidth;
				_itemTextField.height = _textFieldHeight; 
				_itemTextField.embedFonts = true;
				
				_defaultFormat.color = 0x111112;
				_defaultFormat.font = _arialRounded.fontName;
				_defaultFormat.size = 18;
				_itemTextField.defaultTextFormat = _defaultFormat;
				_itemTextField.text = _items[i].toString();
				
				_item.addChild(_itemTextField);
				_item.y = i * _itemPosition;
				_item.buttonMode = true;
				_item.mouseChildren = false;
				_container.addChild(_item);
			}
			
			_background = new Shape();
			_background.graphics.beginFill(0xFFFFFF);
			_background.graphics.drawRect(0, 0, _container.width, _container.height);
			_background.graphics.endFill();
			_container.addChildAt(_background, 0);
			
			_mask = new Shape();
			_mask.graphics.beginFill(0xFF0000);
			_mask.graphics.drawRect(0, 0, _maskWidth, _maskHeight);
			_mask.graphics.endFill();
			Align.centerHorizontallyInStage(_stage, _mask);	
			_mask.y = _paddingTop;
			addChild(_mask);
			
			_container.mask = _mask;

			Align.centerHorizontallyInStage(_stage, _container);	
			_container.y = _paddingTop;
			
			_container.addEventListener(MouseEvent.MOUSE_OVER, movingOver);
			_container.addEventListener(MouseEvent.MOUSE_OUT, movingOut);
		}
		
		private function movingOver (event:MouseEvent):void {
			_container.removeEventListener(MouseEvent.MOUSE_OVER, movingOver);
			addEventListener(Event.ENTER_FRAME, enterFrame);
			if (event.target is Item) 
				TweenMax.to(Item(event.target).item_btn_over, .2, {alpha:1});
		}
		
		private function movingOut (event:MouseEvent):void {
			removeEventListener(Event.ENTER_FRAME, enterFrame);
			_container.addEventListener(MouseEvent.MOUSE_OVER, movingOver);				
			if (event.target is Item)
				TweenMax.to(Item(event.target).item_btn_over, .2, {alpha:0});
		}
		
		
		function enterFrame(event:Event):void {
			_speed = (_mask.height / 2 - _mask.mouseY) / (_mask.height / 2) * _maxSpeed;
			_container.y += _speed;
			if (_container.y >= _paddingTop) {
				removeEventListener(Event.ENTER_FRAME, enterFrame);
				_container.y = _paddingTop;
			}
			if (_container.y <= _mask.height - _container.height + _paddingTop) {
				removeEventListener(Event.ENTER_FRAME, enterFrame);
				_container.y = _mask.height - _container.height + _paddingTop;
			}
		}
		
	}	
}

Beachten Sie die Align-Klasse Methoden, die wir verwenden:

1
2	Align.centerHorizontallyInStage(_stage, _mask);
3	Align.centerHorizontallyInStage(_stage, _container);

Jetzt müssen wir nur die Methode verwenden, Richten.centerHorizontallyInStage() richten Sie den display-Objekt horizontal.

Die createRollingScroller Methode ist nur dann starten, wenn wir fertig sind speichern Sie alle Daten in den Elementen:XMLList-Eigenschaft.

Schritt 24: Finale Für "DocumentClass"

Ändern Sie die DocumentClass:


package {
	
	import flash.display.MovieClip;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.net.URLRequest;
	import flash.net.URLLoader;
	import flash.events.*;
	import com.tutsplus.active.util.Align;

	public class DocumentClass extends MovieClip {
		
		private var _pad:MovieClip;
		public var scrollModel:ScrollModel;
		public var scrollBox:ScrollBox;

		public function DocumentClass() {
			config();
			scrollModel = new ScrollModel();
			scrollModel.load(new URLRequest("data.xml"));
			scrollBox = new ScrollBox(stage, scrollModel);
		}
		
		private function config():void {
			_pad = new Pad();
			addChild(_pad);
			Align.centerInStage(stage, _pad);
		}

	}	
}

Wieder, beachten Sie, wie einfach es ist, zu zentrieren, display-Objekte auf der Bühne Auszurichten.centerInStage () - Methode:

1
2	Align.centerInStage(stage, _pad);

Fazit

Das Wars für heute, Leute! Ich habe behandelt einige interessante Actionscript 3 Themen und ich hoffe, Sie finden diese nützlich. Warum nicht verbessern Sie diese Anwendung, um eine nächste Ebene, recfactoring, das hinzufügen von Funktionalitäten, etc?

Vielen Dank für folgende. Take care!