Move Page left/Right based on Gesture Swipe

I am using a MovieClip Component to load a swf file

I need to know how I can move the screen left or right when the user zooms in.

Dgofman: I am not using scroller because when I did usability testing, users did not like the fact that the page was bouncing around...

My code is as follows:

public function onSwipe(event:TransformGestureEvent):void{
				if ( event.offsetY == -1 ) {
					currentPage = pdfContent.currentFrame + 1;
					pdfContent.gotoAndStop(currentPage);
				}
				else if ( event.offsetY == 1 ) 
				{
					currentPage = pdfContent.currentFrame - 1;
					pdfContent.gotoAndStop(currentPage);
				}
				else if ( event.offsetX == -1 ) 
				{
					
			
				}
				else if ( event.offsetX == 1 ) 
				{
					
				}
			}

protected function pdfHolder_gestureZoomHandler(event:TransformGestureEvent):void
			{
				var zoomFactor:Number = .1;
				if(pdfContent.scaleX < 2){
					pdfContent.scaleX += zoomFactor;
					pdfContent.scaleY += zoomFactor;
				}
				
				if (pdfContent.scaleX > 1){
					pdfContent.scaleX -= zoomFactor;
					pdfContent.scaleY -= zoomFactor;
				}
			}

<mx:UIComponent id="pdfHolder" y="0" width="100%" height="100%"
					gestureZoom="pdfHolder_gestureZoomHandler(event)"
					gestureSwipe="onSwipe(event)"/>

Open in new window

Trying_to_LearnAsked:
Who is Participating?
 
dgofmanConnect With a Mentor Commented:
That exactly what I am working on, but I wrote differently - multiplying base on scale of context size


pdfContent.x -= event.offsetX * (width / pdfContent.width);

so, that give you the same effect for scrolling large and small content documents more smooth effect
0
 
dgofmanCommented:
did you try move the child of pdfContent

var child:* = pdfContent.getChildAt(0);
child.x = N;
child.y = N;
0
 
Trying_to_LearnAuthor Commented:
This is what I currently have.. it moves but veryyyy little..and only in 1 direction

public function onSwipe(event:TransformGestureEvent):void{
				if ( event.offsetY == -1 ) {
					currentPage = pdfContent.currentFrame + 1;
					pdfContent.gotoAndStop(currentPage);
				}
				else if ( event.offsetY == 1 ) 
				{
					currentPage = pdfContent.currentFrame - 1;
					pdfContent.gotoAndStop(currentPage);
				}
				else if ( event.offsetX == -1 ) 
				{
					pdfContent.x += event.offsetX;
			
				}
				else if ( event.offsetX == 1 ) 
				{
					pdfContent.x -= event.offsetX;
				} 
			}

Open in new window

0
Simple Misconfiguration =Network Vulnerability

In this technical webinar, AlgoSec will present several examples of common misconfigurations; including a basic device change, business application connectivity changes, and data center migrations. Learn best practices to protect your business from attack.

 
dgofmanCommented:
I need a full code to understand your problem defiantly (+= N) is not a good solution
0
 
Trying_to_LearnAuthor Commented:
<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
		xmlns:s="library://ns.adobe.com/flex/spark"
		xmlns:mx="library://ns.adobe.com/flex/mx"
		actionBarVisible="true" 
		overlayControls="false" tabBarVisible="false" title="Book"
		viewActivate="init()"
		gestureSwipe="onSwipe(event)"
		gestureZoom="onZoom(event)">
	
	<fx:Declarations>
		<s:Animate id="anim" target="{hGr}" duration="500">
			<s:motionPaths>
				<s:SimpleMotionPath id="pth" property="horizontalScrollPosition" />
			</s:motionPaths>
		</s:Animate>
	</fx:Declarations>
	
	<fx:Script>  
		<![CDATA[  
			import flash.events.TransformGestureEvent;
			import flash.ui.Multitouch;
			import flash.ui.MultitouchInputMode;
			
			import mx.collections.*;
			import mx.controls.SWFLoader;
			import mx.core.UIComponent;
			import mx.events.FlexEvent;
			import mx.events.ItemClickEvent;
			
			private var loader:Loader;
			[Bindable]
			private var pdfContent:MovieClip;
			[Bindable]
			private var currentPage:uint;
			private var lastSearchIndex:int;
			private var lastSearchText:String;
			private var so:SharedObject;
			
			private function init():void{
				so = SharedObject.getLocal("SwipeMenuCache");
				var lc:LoaderContext = new LoaderContext(false, ApplicationDomain.currentDomain);
				lc.allowLoadBytesCodeExecution = true;
				loader = new Loader(); 
				loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete);
				loader.load(new URLRequest("ComputerNetworking.swf")); 
				pdfHolder.addChild(loader);
				Multitouch.inputMode = MultitouchInputMode.GESTURE;
				//pdfContent.addEventListener(TransformGestureEvent.GESTURE_ZOOM, onZoom);
				//pdfContent.addEventListener(TransformGestureEvent.GESTURE_SWIPE, onSwipe);
				
				
				//initCollections();
			}
			
			private function onComplete(event:Event):void{
				event.target.removeEventListener(Event.COMPLETE, onComplete);
				var timer:Timer = new Timer(100);
				timer.addEventListener(TimerEvent.TIMER, handleTimer);
				timer.start();
			}
			
			
			private function handleTimer(event:TimerEvent):void{
				pdfContent = loader.content as MovieClip;
				if(pdfContent && pdfContent.currentFrame == 2 && pdfContent.numChildren > 0) {
					event.target.removeEventListener(TimerEvent.TIMER, handleTimer);
					event.target.stop();
					/* currentPage = 2;
					pdfContent.gotoAndStop(currentPage); */
					var lastPage:Number = so.data["lastPage"];
					sendMessage("PageNum", isNaN(lastPage) ? 2 : lastPage);
				}
			}
			
			
			private function sendMessage(arg1:*, arg2:*=null):void{
				var zoomFactor:Number = .1;
				//scroller.viewport.verticalScrollPosition = 0;
				//scroller.viewport.horizontalScrollPosition = 0;
				switch(arg1){
					case "PageDn":
						if(pdfContent.currentFrame < pdfContent.framesLoaded){
							currentPage = pdfContent.currentFrame + 1;
							pdfContent.gotoAndStop(currentPage);
						}
						break;
					case "PageUp":
						if(pdfContent.currentFrame > 1){
							currentPage = pdfContent.currentFrame - 1;
							pdfContent.gotoAndStop(currentPage);
						}
						break;
					case "PageNum":
						if(arg2 >= 1 && arg2 <= pdfContent.framesLoaded){
							currentPage = arg2;
							pdfContent.gotoAndStop(currentPage);
						}
						break;
					case "ZoomIn":
						if(pdfContent.scaleX < 2){
							pdfContent.scaleX += zoomFactor;
							pdfContent.scaleY += zoomFactor;
						}
						break;
					case "ZoomOut":
						if(pdfContent.scaleX > 1){
							pdfContent.scaleX -= zoomFactor;
							pdfContent.scaleY -= zoomFactor;
						}
						break;
					case "Find":
						if(lastSearchText != arg2){
							lastSearchText = arg2;
							lastSearchIndex = -1;
						}
						if(findText(lastSearchIndex, currentPage, pdfContent.framesLoaded, arg2) == false)
							findText(-1, 1, currentPage, arg2)
				}
				if(so.data["lastPage"] != currentPage){
					so.data["lastPage"] = currentPage;
					so.flush();
				}
				pdfHolder.width = pdfContent.width;
				pdfHolder.height = pdfContent.height;
			} 
			
			private function findText(searchIndex:int, start:uint, end:uint, text:String):Boolean{
				for(var i:uint = start; i <= end; i++){
					currentPage = i;
					pdfContent.gotoAndStop(currentPage);
					var snap:TextSnapshot = pdfContent.textSnapshot;
					var index:int = snap.findText(searchIndex + 1, text, false);
					if(index != -1){
						lastSearchIndex = index;
						return true;
					}
				}
				return false;
			}
			
			/*
			protected function load():void{
			_webView = new StageWebView();
			_webView.stage = stage;
			_webView.loadURL("file:///C:/Users/hp/Adobe Flash Builder 4.6/SwipeMenu/src/test.html");
			_webView.addEventListener(Event.COMPLETE,handleLoad);
			stage.addEventListener(StageOrientationEvent.ORIENTATION_CHANGE, orientationChangeHandler);
			orientationChangeHandler();
			}
			
			protected function orientationChangeHandler(event:Event=null):void{
			_webView.viewPort = new Rectangle(0, hGr.height, width, height);
			}
			
			protected function orientationChangeHandler2(event:Event=null):void{
			_webView.viewPort = new Rectangle(300, hGr.height, width-300, height);
			}
			*/
			
			
			
			
			protected function button2_clickHandler(event:MouseEvent):void
			{
				trace(event.target.label + " clicked! " + hg.isPopUp);
				hg.closeDropDown();
			}
			
			[Embed(source="MxTree.swf", mimeType="application/octet-stream")]
			private var treeSWF:Class;
			
			private var loader2:Loader;
			private var tree:*;
			
			public var xmlBalanced:XMLList =
				<>
											<node page="3" label="Cover Page"/>
											<node page="4" label="Forward"/>
											<node page="5" label="Table of Contents"/>
											<node page="7" label="Chapter 1">
											<node page="8" label="1.0 Direct Link Networks-----------------6"/>
								
											<node page="8" label="1.1 Hardware Building Blocks-------------6">
											<node page="9" label="1.1.1 Nodes------------------------------7"/>
											<node page="10" label="1.1.2 Links------------------------------7"/>
											</node>
								
											<node page="10" label="1.2 Encoding-----------------------------8"/>
								
											<node page="11" label="1.3 Framing------------------------------9">
											<node page="11" label="1.3.1 Byte-Oriented Protocols-----------10"/>
											<node page="12" label="1.3.2 Bit-Oriented Protocols (HDLC)-----10"/>
											<node page="12" label="1.3.3 Clock-Based Framing (SONET)-------10"/>
											</node>
								
											<node page="12" label="1.4 Error Detection---------------------10">
											<node page="13" label="1.4.1 Two-Dimensional Parity------------11"/>
											<node page="14" label="1.4.2 Internet Checksum Algorithm-------11"/>
											<node page="14" label="1.4.3 Cyclic Redundancy Check0000-------12"/>
											</node>
								
											<node page="16" label="1.5 Reliable Transmission---------------13">
											<node page="17" label="1.5.1 Stop-and-Wait---------------------14"/>
											</node>
								
											<node page="17" label="1.6 Ethernet----------------------------14">
											<node page="18" label="1.6.1 Physical Properties---------------15"/>
											<node page="19" label="1.6.2 Access Protocol-------------------17"/>
											<node page="20" label="1.6.3 Experience with Ethernet----------18"/>
											</node>
									</node>
								</>;
			
			private function initCollections():void {
				var lc:LoaderContext = new LoaderContext(false, ApplicationDomain.currentDomain);
				lc.allowLoadBytesCodeExecution = true;
				loader2 = new Loader();
				loader2.loadBytes(new treeSWF(), lc);
				loader2.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete2);
				treeHolder.addChild(loader2);
			}
			
			private function onComplete2(event:Event):void{
				event.target.removeEventListener(Event.COMPLETE, onComplete2);
				var timer:Timer = new Timer(100);
				timer.addEventListener(TimerEvent.TIMER, handleTimer2);
				timer.start();
			}
			
			private function handleTimer2(event:TimerEvent):void{
				var content:MovieClip = loader2.content as MovieClip;
				if(content && content.currentFrame == 2 && content.numChildren > 0) {
					event.target.addEventListener(TimerEvent.TIMER, handleTimer2);
					event.target.stop();
					tree = content["application"].tree;
					tree.labelField = "@label";
					tree.dataProvider = xmlBalanced;
					tree.width = treeHolder.width;
					tree.height = treeHolder.height;
					tree.setStyle("borderStyle", "none");
					tree.addEventListener(ItemClickEvent.ITEM_CLICK, onItemClick);
				}
			}
			
			private function onItemClick(event:*):void{
				var item:Object = event.itemRenderer.data;
				if (tree.dataDescriptor.isBranch(item)) {
					tree.expandItem(item, !tree.isItemOpen(item), true);
				}
				
				var data:XML = event.itemRenderer.data;
				if(data.@page.length())
					sendMessage("PageNum", data.@page.toString()-1);
				if(data.@url.length())
					parentDocument.rightView.webView.loadURL(data.@url);
			}
			
			public function executeSearchG():void {
				if ((src_ggl.text) > " ")
				var u:URLRequest = new URLRequest("https://www.google.com/search?hl=en&q=" + src_ggl.text);
				navigateToURL(u,"_blank");
			}
			
			public function executeSearchW():void {
				if ((src_ggl.text) > " ")
					var u:URLRequest = new URLRequest("http://en.wikipedia.org/wiki/" + src_wki.text);
				navigateToURL(u,"_blank");
			}
			
			protected function hGr_gestureSwipeHandler(event:TransformGestureEvent):void
			{
				onSwipe(event)
				
			}
			
			import spark.core.NavigationUnit;
			
			protected function scrollToThere(dir:uint):void {
				var value:Number = hGr.getHorizontalScrollPositionDelta(dir);
				if (value != 0) {
					pth.valueBy = value;
					anim.play();
				}
			}
							
			public function onSwipe(event:TransformGestureEvent):void{
				if ( event.offsetY == -1 ) {
					currentPage = pdfContent.currentFrame + 1;
					pdfContent.gotoAndStop(currentPage);
				}
				else if ( event.offsetY == 1 ) 
				{
					currentPage = pdfContent.currentFrame - 1;
					pdfContent.gotoAndStop(currentPage);
				}
				else if ( event.offsetX == -1 ) 
				{
					pdfContent.x *= event.offsetX;
			
				}
				else if ( event.offsetX == 1 ) 
				{
					pdfContent.x -= event.offsetX;
				} 
			}
			
			protected function button3_clickHandler(event:MouseEvent):void
			{
				import views.BooksView;
					navigator.pushView(BooksView);
			}
			
			protected function onZoom(e:TransformGestureEvent):void
			{
				pdfContent.scaleX *= e.scaleX;
				pdfContent.scaleY *= e.scaleY;
				/* var zoomFactor:Number = .1;
				if(pdfContent.scaleX < 2
				){
					pdfContent.scaleX += zoomFactor;
					pdfContent.scaleY += zoomFactor;
				}
				
				if (pdfContent.scaleX > 1){
					pdfContent.scaleX -= zoomFactor;
					pdfContent.scaleY -= zoomFactor;
				} */
			}
			
			
			protected function emptyB(event:FocusEvent):void
			{
				src_txt.text = "";
			}
			
			protected function emptyG(event:FocusEvent):void
			{
				src_ggl.text = "";
			}
			
			protected function emptyW(event:FocusEvent):void
			{
				src_wki.text = "";
			}	
			
			protected function cb_Search_clickHandler(event:MouseEvent):void
			{
				src_txt.text = "Book";
				src_ggl.text = "Google";
				src_wki.text = "Wikipedia";
			}
			
		]]>
		
	</fx:Script>  
	
	
	<!--<mx:UIComponent id="pdfHolder" x="{treeHolder.width}" y="{hGr.height}" width="{width - treeHolder.width}" height="{height}"/>-->
	<!--<mx:UIComponent id="pdfHolder" x="{0}" y="{hGr.height}" width="{width}" height="{height}"/>-->

	<mx:UIComponent id="pdfHolder" y="0" width="100%" height="100%"/>
	
	<!--gestureZoom="onZoom(event)"
	gestureSwipe="onSwipe(event)"-->
	
	<!--<s:Scroller id="scroller" width="100%" height="100%" y="0">
		<s:Group width="100%" height="100%">
			<mx:UIComponent id="pdfHolder"/>
		</s:Group>
	</s:Scroller> -->
	
	<s:navigationContent>
		<s:Button label="Back" icon="assets/book.png"
				  click="button3_clickHandler(event)"/>
	</s:navigationContent>
	<s:titleContent>
		<s:HGroup id="hGr" width="808" height="55" clipAndEnableScrolling="true" gap="8"
				  horizontalAlign="left" verticalAlign="middle"
				  gestureSwipe.portrait="hGr_gestureSwipeHandler(event)">
			<s:CalloutButton id="TOC" width="102" height="52" label="TOC" calloutDestructionPolicy="never"
							 icon="@Embed('assets/contents-32.png')" click="initCollections()"
							 verticalPosition="start">
				<s:calloutLayout>
					<s:HorizontalLayout />
				</s:calloutLayout>
				<s:calloutContent>
					<mx:UIComponent id="treeHolder" width="350" height="400"/>
				</s:calloutContent>
			</s:CalloutButton>
			<!--<s:Button width="102" height="52" label="TOC" click="initCollections()"
			icon="@Embed('assets/contents-32.png')"/>-->
			<s:Button id="pageDown"   width="52" height="52" click="sendMessage('PageDn')" icon="@Embed('assets/Down_32.png')"/>
			<s:Button id="pageUp"   width="52" height="52" click="sendMessage('PageUp')" icon="@Embed('assets/Up_32.png')"/>
			<!--<s:Label   color="#FDF9F9" fontSize="20" text="Page: {pdfContent.framesLoaded}"/>-->
			<s:Label   color="#FDF9F9" fontSize="20" text="Page:"/>
			<s:TextInput id="PN" width="59" height="52"
						 enter="sendMessage('PageNum', int(PN.text)+1)" fontSize="16"
						 fontStyle="normal" text="{currentPage-1}"/>
			<s:CalloutButton id="cb_Search" width="127" height="52" label="Search"
							 calloutDestructionPolicy="never" icon="assets/Zoom-32.png"
							 verticalPosition="after"
							 click="cb_Search_clickHandler(event)">
				<s:calloutLayout>
					<s:VerticalLayout/>
				</s:calloutLayout>
				<s:calloutContent>
					<s:TextInput id="src_txt" width="127" height="52" text="Book" focusIn="emptyB(event)" enter="sendMessage('Find', src_txt.text)"/>
					<s:TextInput id="src_ggl" width="127" height="52" text="Google" focusIn="emptyG(event)" enter="executeSearchG()"/>
					<s:TextInput id="src_wki" width="127" height="52" text="Wikipedia" focusIn="emptyW(event)" enter="executeSearchW()"/>
				</s:calloutContent>
			</s:CalloutButton>
			
			
			<s:CalloutButton id="hg" height="52" calloutDestructionPolicy="never"
							 icon="@Embed('assets/Highlightmarker-green-32.png')"
							 verticalPosition="after"
							 enabled="false">
				<!-- layout the callout content here -->
				<s:calloutLayout>
					<s:VerticalLayout paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" horizontalAlign="center" gap="5"/>
				</s:calloutLayout>
				<s:calloutContent>
					<s:Button icon="@Embed('assets/Highlightmarker-green-32.png')" click="button2_clickHandler(event)"/>
					<s:Button icon="@Embed('assets/Highlightmarker-32.png')" click="button2_clickHandler(event)"/>
					<s:Button icon="@Embed('assets/Highlightmarker-red-32.png')" click="button2_clickHandler(event)"/>
					<s:Button icon="@Embed('assets/Highlightmarker-blue-32.png')" click="button2_clickHandler(event)"/>
				</s:calloutContent>
			</s:CalloutButton>
			<s:Button height="52" icon="@Embed('assets/Emblem-Note-32.PNG')"
					  enabled="false"/>
			<s:Button height="52" icon="@Embed('assets/bookmark-32.png')"
					  enabled="false"/>
			<s:Button id="zoomin"   height="52" click="sendMessage('ZoomIn')" icon="@Embed('assets/Zoom-in-32.png')"/>
			<s:Button id="zoomout"   height="52" click="sendMessage('ZoomOut')" icon="@Embed('assets/Zoom-out-32.png')"/>
		</s:HGroup>
	</s:titleContent>
	
	<s:actionContent>
	<s:CalloutButton width="50" icon="@Embed('assets/Settings.png')" toolTip="Settings"
	verticalPosition="after">
	<s:calloutLayout>
	<s:VerticalLayout paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" horizontalAlign="center" gap="5"/>
	</s:calloutLayout>
	<s:calloutContent>
	</s:calloutContent>
	</s:CalloutButton>
	<s:Button width="50" fontStyle="normal" fontWeight="bold"
	icon="@Embed('assets/consulting.png')" lineThrough="false" textDecoration="none"
	toolTip="Help"/>
	</s:actionContent>
	
	<s:states>
		<s:State name="portrait"/>
		<s:State name="landscape"/>
	</s:states>
</s:View>

Open in new window

0
 
Trying_to_LearnAuthor Commented:
ok its working fine now

here is updated code

public function onSwipe(event:TransformGestureEvent):void{
				if ( event.offsetY == -1 ) {
					currentPage = pdfContent.currentFrame + 1;
					pdfContent.gotoAndStop(currentPage);
				}
				else if ( event.offsetY == 1 ) 
				{
					currentPage = pdfContent.currentFrame - 1;
					pdfContent.gotoAndStop(currentPage);
				}
				else if ( event.offsetX == -1 ) 
				{
					pdfContent.x -= event.offsetX*-10;
			
				}
				else if ( event.offsetX == 1 ) 
				{
					pdfContent.x += event.offsetX*10;
				} 
			}

Open in new window

0
 
Trying_to_LearnAuthor Commented:
Thank you :)
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.