Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New Coder
    Join Date
    Nov 2011
    Posts
    38
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Image pop up window

    I am trying to get a pop up window to come up when you click on a image in my gallery. i go the window to come up but the image does not show up. can someone help with my coding.

    here is my gallery.mxml

    Code:
    <?xml version="1.0" encoding="utf-8"?>
    <s:Group xmlns:s="library://ns.adobe.com/flex/spark"
    		 xmlns:fx="http://ns.adobe.com/mxml/2009"
    		 xmlns:ATE="http://ns.adobe.com/ate/2009"
    		 xmlns:ai="http://ns.adobe.com/ai/2009"
    		 xmlns:d="http://ns.adobe.com/fxg/2008/dt"
    		 xmlns:flm="http://ns.adobe.com/flame/2008"
    		 xmlns:lib="assets.graphics.slider.*"
    		 xmlns:fc="http://ns.adobe.com/flashcatalyst/2009"
    		 xmlns:mx="library://ns.adobe.com/flex/mx"
    		 xmlns:components="components.*"
    		 width="970" height="511"
    		 initialize="onInit()">
    	
    	<fx:Script>
    		<![CDATA[
    			import mx.collections.ArrayCollection;
    			
    			import spark.effects.Fade;
    			import spark.events.IndexChangeEvent;
    			import spark.events.RendererExistenceEvent;
    			
    			import valueObjects.ImageVO;
    			import valueObjects.SectionVO;
    			
    			import mx.managers.PopUpManager;
    			
    			[Bindable]
    			public var selectedSection:SectionVO;
    			public var selectedIndex:Number;
    			public var autoTimer:Timer;
    			public var idleTimer:Timer;
    			
    			public var sectionData:Array=new Array();
    			public var xmlLoader:URLLoader=new URLLoader();
    			
    			public function onInit():void
    			{
    				xmlLoader.addEventListener(Event.COMPLETE, handleLoadComplete);
    				xmlLoader.load(new URLRequest("assets/designImageData.xml"));
    				
    				autoTimer=new Timer(4000);
    				autoTimer.addEventListener(TimerEvent.TIMER, handleAutoTimerEvent);
    				
    				idleTimer=new Timer(60000);
    				idleTimer.addEventListener(TimerEvent.TIMER, handleIdleTimerEvent);
    			}
    			
    			public function handleAutoTimerEvent(event:TimerEvent):void
    			{
    				setSelectedIndex(selectedIndex + 1);
    			}
    			
    			public function handleIdleTimerEvent(event:TimerEvent):void
    			{
    				idleTimer.stop();
    				idleTimer.reset();
    				autoTimer.start();
    			}
    			
    			public function stopTimer():void
    			{
    				autoTimer.stop();
    				autoTimer.reset();
    			}
    			
    			public function handleLoadComplete(e:Event):void
    			{
    				var image:ImageVO;
    				var section:SectionVO;
    				var xmlData:XML=new XML(e.target.data);
    				
    				for each (var sectionList:XML in xmlData..section)
    				{
    					section=new SectionVO();
    					section.name=sectionList.@name;
    					
    					for each (var item:Object in sectionList.item)
    					{
    						image=new ImageVO();
    						image.thumb=item.thumb;
    						image.image=item.image;
    						section.items.addItem(image);
    					}
    					
    					sectionData.push(section);
    				}
    				
    				navList.dataProvider=new ArrayCollection(sectionData);
    				navList.selectedIndex=0;
    				selectedSection=sectionData[0];
    				setSelectedIndex(0);
    				autoTimer.start();
    			}
    			
    			public function indexChangeHandler(event:IndexChangeEvent):void
    			{
    				idleTimer.reset();
    				idleTimer.start();
    				selectedSection=sectionData[event.newIndex];
    				setSelectedIndex(0);
    			}
    			
    			public function handleThumbAdd(event:RendererExistenceEvent):void
    			{
    				event.renderer.addEventListener(MouseEvent.CLICK, handleThumbClick);
    			}
    			
    			public function handleThumbClick(event:Event):void
    			{
    				stopTimer();
    				idleTimer.reset();
    				idleTimer.start();
    				var image:ImageVO=event.currentTarget.data as ImageVO;
    				setSelectedIndex(selectedSection.items.getItemIndex(image));
    			}
    			
    			public function setSelectedIndex(value:Number):void
    			{
    				if (value >= selectedSection.items.length)
    				{
    					value=0;
    				}
    				
    				var selectedImage:ImageVO=selectedSection.items.getItemAt(value) as ImageVO;
    				
    				if (selectedIndex != value)
    				{
    					var pic1:Image=images.removeElementAt(0) as Image;
    					var pic2:Image=images.getElementAt(0) as Image;
    					
    					pic1.source=selectedImage.image;
    					pic1.alpha=0;
    					images.addElement(pic1);
    					
    					var fade:Fade=new Fade(pic1);
    					fade.alphaTo=1;
    					fade.duration=1500;
    					fade.play();
    					selectedIndex=value;
    					
    					var fade1:Fade=new Fade(pic2);
    					fade1.alphaTo=0;
    					fade1.duration=1000;
    					fade1.play();
    				}
    			}
    			
    			private function launchPopUp(e:MouseEvent):void {
    				if(images.selectedImage){
    					var win : Window = new Window();
    					PopUpManager.addPopUp(win,this,true);
    					PopUpManager.centerPopUp(win);
    			}
    		}
    			
    		]]>
    	</fx:Script>
    	
    	<s:List id="navList" y="0" 
    			width="160" height="511" 
    			allowMultipleSelection="false"
    			change="indexChangeHandler(event)" horizontalCenter="-404"
    			itemRenderer="components.GalleryButtonRenderer"/>
    	
    	
    	<s:Group id="images" x="273" y="2"
    			 width="694" height="507"
    			 maxWidth="694" maxHeight="507">
    		<mx:Image verticalAlign="middle" horizontalAlign="center" width="694" height="507" maxWidth="694" maxHeight="507" buttonMode="true" click="launchPopUp(event);"/>
    		<mx:Image verticalAlign="middle" horizontalAlign="center" width="694" height="507" maxWidth="694" maxHeight="507" buttonMode="true" click="launchPopUp(event);"/>
    	</s:Group>
    	
    	
    	<s:DataGroup id="thumbList" y="2" 
    				 width="100" height="507" buttonMode="true"
    				 clipAndEnableScrolling="true"
    				 dataProvider="{selectedSection.items}"
    				 horizontalCenter="-274" 
    				 itemRenderer="components.ThumbRenderer"
    				 rendererAdd="handleThumbAdd(event)">
    		<s:layout>
    			<s:VerticalLayout horizontalAlign="center"/>
    		</s:layout>
    	</s:DataGroup>
    	<s:VScrollBar y="0" fixedThumbSize="true" horizontalCenter="-219"
    				  skinClass="components.VerticalScrollbarSkin2" viewport="{thumbList}"/>
    </s:Group>
    and here is the window.mxml

    Code:
    <?xml version="1.0" encoding="utf-8"?>
    <mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml"
    				layout="vertical" width="100%" height="100%"
    				horizontalAlign="center"
    				showCloseButton="true"
    				close="closeWindow(event);"
    				click="dispatchEvent(new CloseEvent(CloseEvent.CLOSE));">
    	
    	<mx:Script>
    		<![CDATA[
    			
    			import mx.events.CloseEvent;
    			import mx.managers.PopUpManager;
    			
    			[Bindable]
    			public var selectedImage:String;
    			
    			private function closeWindow(e:CloseEvent):void {
    				PopUpManager.removePopUp(this);
    			}
    			
    		]]>
    	</mx:Script>
    	
    	<mx:Image source="{selectedImage}"/>
    	
    </mx:TitleWindow>

  • #2
    New Coder
    Join Date
    Jan 2012
    Location
    Columbus, Ohio, U.S.A
    Posts
    41
    Thanks
    0
    Thanked 8 Times in 8 Posts
    you have this bit in your window.mxml code:

    <mx:Image source="{selectedImage}"/>



    but you probably need to set that property when you pop the window open:
    Code:
    private function launchPopUp(e:MouseEvent):void {
    				if(images.selectedImage){
    					var win : Window = new Window();
    win.selectedImage = images.selectedImage;  //set it here...
    					PopUpManager.addPopUp(win,this,true);
    					PopUpManager.centerPopUp(win);
    			}

  • #3
    New Coder
    Join Date
    Nov 2011
    Posts
    38
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by adaminaudio View Post
    you have this bit in your window.mxml code:

    <mx:Image source="{selectedImage}"/>



    but you probably need to set that property when you pop the window open:
    Code:
    private function launchPopUp(e:MouseEvent):void {
    				if(images.selectedImage){
    					var win : Window = new Window();
    win.selectedImage = images.selectedImage;  //set it here...
    					PopUpManager.addPopUp(win,this,true);
    					PopUpManager.centerPopUp(win);
    			}
    I tried that and I am getting error messages saying undefined property selectedImage at

    Code:
    			private function launchPopUp(e:MouseEvent):void {
    				if(images.selectedImage){   //error
    					var win : Window = new Window();
    					win.selectedImage = images.selectedImage;  //error//set it here...
    					PopUpManager.addPopUp(win,this,true);
    					PopUpManager.centerPopUp(win);
    				}
    			}

  • #4
    New Coder
    Join Date
    Jan 2012
    Location
    Columbus, Ohio, U.S.A
    Posts
    41
    Thanks
    0
    Thanked 8 Times in 8 Posts
    Hi again,

    what happens when you trace
    Code:
     images.selectedImage
    ?

    I just noticed that your selectedImage variable in the main app code is of type ImageVO. Do you have a source string in this class? IE: can you do something like --->
    Code:
    win.selectedImage = images.selectedImage.source
    ?

    paste you ImageVO code here if you're still having problems fresh.

  • #5
    New Coder
    Join Date
    Nov 2011
    Posts
    38
    Thanks
    1
    Thanked 0 Times in 0 Posts
    when i put in

    Code:
    win.selectedImage = images.selectedImage.source
    i get this error

    1119: Access of possibly undefined property selectedImage through a reference with static type spark.components:Group.

  • #6
    New Coder
    Join Date
    Nov 2011
    Posts
    38
    Thanks
    1
    Thanked 0 Times in 0 Posts
    have also tried this and get only one error

    Code:
    			private function launchPopUp(e:MouseEvent):void {
    				if(selectedSection.items){
    					var win : Window = new Window();
    					win.sourceImage = selectedSection.items; 
    					PopUpManager.addPopUp(win,this,true);
    					PopUpManager.centerPopUp(win);
    				}
    			}
    1119: Access of possibly undefined property sourceImage through a reference with static type components:Window.

  • #7
    New Coder
    Join Date
    Nov 2011
    Posts
    38
    Thanks
    1
    Thanked 0 Times in 0 Posts
    tried this and still get sourceImage error

    Code:
    private function launchPopUp(e:MouseEvent):void {
    				if(ImageVO){
    					var win : Window = new Window();
    					win.sourceImage = ImageVO; 
    					PopUpManager.addPopUp(win,this,true);
    					PopUpManager.centerPopUp(win);
    				}
    			}

  • #8
    New Coder
    Join Date
    Jan 2012
    Location
    Columbus, Ohio, U.S.A
    Posts
    41
    Thanks
    0
    Thanked 8 Times in 8 Posts
    where is the code for ImageVO? can you post that?

  • #9
    New Coder
    Join Date
    Nov 2011
    Posts
    38
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by adaminaudio View Post
    where is the code for ImageVO? can you post that?
    I posted my entire code in the first post. here it is again

    Code:
    <?xml version="1.0" encoding="utf-8"?>
    <s:Group xmlns:s="library://ns.adobe.com/flex/spark"
    		 xmlns:fx="http://ns.adobe.com/mxml/2009"
    		 xmlns:ATE="http://ns.adobe.com/ate/2009"
    		 xmlns:ai="http://ns.adobe.com/ai/2009"
    		 xmlns:d="http://ns.adobe.com/fxg/2008/dt"
    		 xmlns:flm="http://ns.adobe.com/flame/2008"
    		 xmlns:lib="assets.graphics.slider.*"
    		 xmlns:fc="http://ns.adobe.com/flashcatalyst/2009"
    		 xmlns:mx="library://ns.adobe.com/flex/mx"
    		 xmlns:components="components.*"
    		 width="970" height="511"
    		 initialize="onInit()">
    	
    	<fx:Script>
    		<![CDATA[
    			import mx.collections.ArrayCollection;
    			
    			import spark.effects.Fade;
    			import spark.events.IndexChangeEvent;
    			import spark.events.RendererExistenceEvent;
    			
    			import valueObjects.ImageVO;
    			import valueObjects.SectionVO;
    			
    			import mx.managers.PopUpManager;
    			
    			[Bindable]
    			public var selectedSection:SectionVO;
    			public var selectedIndex:Number;
    			public var autoTimer:Timer;
    			public var idleTimer:Timer;
    			
    			public var sectionData:Array=new Array();
    			public var xmlLoader:URLLoader=new URLLoader();
    			
    			public function onInit():void
    			{
    				xmlLoader.addEventListener(Event.COMPLETE, handleLoadComplete);
    				xmlLoader.load(new URLRequest("assets/designImageData.xml"));
    				
    				autoTimer=new Timer(4000);
    				autoTimer.addEventListener(TimerEvent.TIMER, handleAutoTimerEvent);
    				
    				idleTimer=new Timer(60000);
    				idleTimer.addEventListener(TimerEvent.TIMER, handleIdleTimerEvent);
    			}
    			
    			public function handleAutoTimerEvent(event:TimerEvent):void
    			{
    				setSelectedIndex(selectedIndex + 1);
    			}
    			
    			public function handleIdleTimerEvent(event:TimerEvent):void
    			{
    				idleTimer.stop();
    				idleTimer.reset();
    				autoTimer.start();
    			}
    			
    			public function stopTimer():void
    			{
    				autoTimer.stop();
    				autoTimer.reset();
    			}
    			
    			public function handleLoadComplete(e:Event):void
    			{
    				var image:ImageVO;
    				var section:SectionVO;
    				var xmlData:XML=new XML(e.target.data);
    				
    				for each (var sectionList:XML in xmlData..section)
    				{
    					section=new SectionVO();
    					section.name=sectionList.@name;
    					
    					for each (var item:Object in sectionList.item)
    					{
    						image=new ImageVO();
    						image.thumb=item.thumb;
    						image.image=item.image;
    						section.items.addItem(image);
    					}
    					
    					sectionData.push(section);
    				}
    				
    				navList.dataProvider=new ArrayCollection(sectionData);
    				navList.selectedIndex=0;
    				selectedSection=sectionData[0];
    				setSelectedIndex(0);
    				autoTimer.start();
    			}
    			
    			public function indexChangeHandler(event:IndexChangeEvent):void
    			{
    				idleTimer.reset();
    				idleTimer.start();
    				selectedSection=sectionData[event.newIndex];
    				setSelectedIndex(0);
    			}
    			
    			public function handleThumbAdd(event:RendererExistenceEvent):void
    			{
    				event.renderer.addEventListener(MouseEvent.CLICK, handleThumbClick);
    			}
    			
    			public function handleThumbClick(event:Event):void
    			{
    				stopTimer();
    				idleTimer.reset();
    				idleTimer.start();
    				var image:ImageVO=event.currentTarget.data as ImageVO;
    				setSelectedIndex(selectedSection.items.getItemIndex(image));
    			}
    			
    			public function setSelectedIndex(value:Number):void
    			{
    				if (value >= selectedSection.items.length)
    				{
    					value=0;
    				}
    				
    				var selectedImage:ImageVO=selectedSection.items.getItemAt(value) as ImageVO;
    				
    				if (selectedIndex != value)
    				{
    					var pic1:Image=images.removeElementAt(0) as Image;
    					var pic2:Image=images.getElementAt(0) as Image;
    					
    					pic1.source=selectedImage.image;
    					pic1.alpha=0;
    					images.addElement(pic1);
    					
    					var fade:Fade=new Fade(pic1);
    					fade.alphaTo=1;
    					fade.duration=1500;
    					fade.play();
    					selectedIndex=value;
    					
    					var fade1:Fade=new Fade(pic2);
    					fade1.alphaTo=0;
    					fade1.duration=1000;
    					fade1.play();
    				}
    			}
    			
    			private function launchPopUp(e:MouseEvent):void {
    				if(images.selectedImage){
    					var win : Window = new Window();
    					PopUpManager.addPopUp(win,this,true);
    					PopUpManager.centerPopUp(win);
    			}
    		}
    			
    		]]>
    	</fx:Script>
    	
    	<s:List id="navList" y="0" 
    			width="160" height="511" 
    			allowMultipleSelection="false"
    			change="indexChangeHandler(event)" horizontalCenter="-404"
    			itemRenderer="components.GalleryButtonRenderer"/>
    	
    	
    	<s:Group id="images" x="273" y="2"
    			 width="694" height="507"
    			 maxWidth="694" maxHeight="507">
    		<mx:Image verticalAlign="middle" horizontalAlign="center" width="694" height="507" maxWidth="694" maxHeight="507" buttonMode="true" click="launchPopUp(event);"/>
    		<mx:Image verticalAlign="middle" horizontalAlign="center" width="694" height="507" maxWidth="694" maxHeight="507" buttonMode="true" click="launchPopUp(event);"/>
    	</s:Group>
    	
    	
    	<s:DataGroup id="thumbList" y="2" 
    				 width="100" height="507" buttonMode="true"
    				 clipAndEnableScrolling="true"
    				 dataProvider="{selectedSection.items}"
    				 horizontalCenter="-274" 
    				 itemRenderer="components.ThumbRenderer"
    				 rendererAdd="handleThumbAdd(event)">
    		<s:layout>
    			<s:VerticalLayout horizontalAlign="center"/>
    		</s:layout>
    	</s:DataGroup>
    	<s:VScrollBar y="0" fixedThumbSize="true" horizontalCenter="-219"
    				  skinClass="components.VerticalScrollbarSkin2" viewport="{thumbList}"/>
    </s:Group>

  • #10
    New Coder
    Join Date
    Jan 2012
    Location
    Columbus, Ohio, U.S.A
    Posts
    41
    Thanks
    0
    Thanked 8 Times in 8 Posts
    that's not your entire code, where are these classes:

    Code:
    import valueObjects.ImageVO;
    import valueObjects.SectionVO;

    those errors are telling you exactly what's wrong with your code. Go through the errors one by one and debug them. While you're at it: start learning about the Flash API and the Flex Framework as that will surely help you.
    I haven't the patience (nor the brilliance) to help people like you that start acting like scumbags.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •