Solved

Move Page left/Right based on Gesture Swipe

Posted on 2012-03-17
7
1,261 Views
Last Modified: 2012-03-21
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

0
Comment
Question by:Trying_to_Learn
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
7 Comments
 
LVL 29

Expert Comment

by:dgofman
ID: 37749798
did you try move the child of pdfContent

var child:* = pdfContent.getChildAt(0);
child.x = N;
child.y = N;
0
 

Author Comment

by:Trying_to_Learn
ID: 37749957
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
 
LVL 29

Expert Comment

by:dgofman
ID: 37750041
I need a full code to understand your problem defiantly (+= N) is not a good solution
0
Is Your AD Toolbox Looking More Like a Toybox?

Managing Active Directory can get complicated.  Often, the native tools for managing AD are just not up to the task.  The largest Active Directory installations in the world have relied on one tool to manage their day-to-day administration tasks: Hyena. Start your trial today.

 

Author Comment

by:Trying_to_Learn
ID: 37750050
<?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
 

Author Comment

by:Trying_to_Learn
ID: 37750324
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
 
LVL 29

Accepted Solution

by:
dgofman earned 500 total points
ID: 37750418
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
 

Author Closing Comment

by:Trying_to_Learn
ID: 37750438
Thank you :)
0

Featured Post

Best Practices: Disaster Recovery Testing

Besides backup, any IT division should have a disaster recovery plan. You will find a few tips below relating to the development of such a plan and to what issues one should pay special attention in the course of backup planning.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

First things first - Preparation We need all the part for this install and it's much nicer to have them all on hand when you need them so here's what's required. Download Eclipse 3.5 32 bit (I like the Classic flavour) from here. (http://www.e…
After seeing many questions for JRNL_WRAP_ERROR for replication failure, I thought it would be useful to write this article.
In this brief tutorial Pawel from AdRem Software explains how you can quickly find out which services are running on your network, or what are the IP addresses of servers responsible for each service. Software used is freeware NetCrunch Tools (https…
Do you want to know how to make a graph with Microsoft Access? First, create a query with the data for the chart. Then make a blank form and add a chart control. This video also shows how to change what data is displayed on the graph as well as form…

724 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question