[flexcoders] Re: Image Pan - Step 1
OK,
I have the slider demo working in flex2. I do still have one problem
with that. The image only loads part of the image and sizes wierd
inside of the Canvas. I can't really zoom, if I do, it just moves the
image and makes it bigger inside of the canvas, the part I started
with. I can never seem to get to other areas of the map with a zoom.
The code looks like:
?xml version=1.0 encoding=utf-8?
mx:Application xmlns:mx=http://www.adobe.com/2006/mxml;
layout=horizontal
initialize=setupVars()
mx:Script
![CDATA[
var mouse:Point;
var rect:Rectangle;
var r_img:Rectangle;
var r_mask:Rectangle;
var xPos:int;
var yPos:int;
private function setupVars(): void {
rect = new Rectangle(0, 0, 450, 350);
mouse = new Point(0,0);
myMap.load(SB memorial map.png);
myMap.scrollRect = rect;
myMap.x = 20;
myMap.y = 20;
myMap.cacheAsBitmap = true;
addEventListener(mouseMove, handleMouseMove);
r_img = new Rectangle(0, 0, myMap.width, myMap.height);
r_mask = new Rectangle(myMap.x, myMap.y, rect.width,
rect.height);
}
private function handleMouseMove(event:Event):void {
if (!chkLockScroll.selected) {
mouse.x = myMap.mouseX;
mouse.y = myMap.mouseY;
if (r_mask.containsPoint(mouse)) {
yPos= ( (Math.abs(myMap.y -
mouse.y)/rect.height)*(r_img.height - rect.height));
xPos= ( (Math.abs(myMap.x -
mouse.x)/rect.width)*(r_img.width - rect.width));
}
rect.x += (xPos - rect.x)/8;
rect.y += (yPos - rect.y)/8;
trace(rect);
myMap.scrollRect = rect;
}
}
private function panUp():void {
rect.y -= 20;
myMap.scrollRect = rect;
trace(myMap.scrollRect);
}
private function panDown():void {
rect.y += 20;
myMap.scrollRect = rect;
trace(myMap.scrollRect);
}
private function panRight():void {
rect.x += 20;
myMap.scrollRect = rect;
trace(myMap.scrollRect);
}
private function panLeft():void {
rect.x -= 20;
myMap.scrollRect = rect;
trace(myMap.scrollRect);
}
private function zoomIn():void {
myMap.scaleX += 0.1;
myMap.scaleY += 0.1;
}
private function zoomOut():void {
myMap.scaleX -= 0.1;
myMap.scaleY -= 0.1;
}
]]
/mx:Script
mx:VBox height=100%
mx:Button label=Left id=btnLeft click=panLeft()/
mx:Button label=Right id=btnRight click=panRight()/
mx:Button label=Up id=btnUp click=panUp()/
mx:Button label=Down id=btnDown click=panDown()/
mx:Spacer/
mx:Button label=Zoom In id=btnZoomIn click=zoomIn()/
mx:Button label=Zoom Out id=btnZoomOut click=zoomOut()/
mx:CheckBox label=Scroll id=chkLockScroll selected=true/
/mx:VBox
mx:Panel width=100% height=100% layout=absolute
cornerRadius=33 backgroundColor=#c0c0c0 id=myPanel title=Map
Basics 101 fontFamily=Georgia fontSize=16
mx:Canvas width=100% height=100%
mx:Image width=100% height=100% id=myMap
scaleContent=false/
/mx:Canvas
/mx:Panel
/mx:Application
Any Ideas?
Rich
--- In flexcoders@yahoogroups.com, richmcgillicuddy [EMAIL PROTECTED] wrote:
Hello,
I am new to the group and to Flex/Flash. We have a mapping tool that
we had created about a year back that uses flash 8. We want to move up
to Flex 2 for a number of reasons. I am trying to create the mapping
hello world application. We use a standard png image as the background
for the map. I am trying to create a simple image in a panel that has
a series of buttons to the left where I can zoom in/out and pan in all
directions. The zoom in/out is working fine (although I have questions
regarding that) but the pan is not working. My code is attached to the
bottom of this email message. Logically the steps I need to go through
to get this to work are:
1. Simple map - Image
[flexcoders] Re: Image Pan - Step 1
Figured out the partial image thing. If the Image component is inside
of anything but a canvas and I set the height and width of the
component to 100% it resizes the image and crops the rest of it.
Rich
--- In flexcoders@yahoogroups.com, richmcgillicuddy [EMAIL PROTECTED] wrote:
Hello,
I am new to the group and to Flex/Flash. We have a mapping tool that
we had created about a year back that uses flash 8. We want to move up
to Flex 2 for a number of reasons. I am trying to create the mapping
hello world application. We use a standard png image as the background
for the map. I am trying to create a simple image in a panel that has
a series of buttons to the left where I can zoom in/out and pan in all
directions. The zoom in/out is working fine (although I have questions
regarding that) but the pan is not working. My code is attached to the
bottom of this email message. Logically the steps I need to go through
to get this to work are:
1. Simple map - Image management Pan Zoom Possibly overview window
similar to Google or Yahoo.
2. Create an object that is a member of that map. This object needs to
be able to display itself as a number of different types (Images,
dots, characters). After reading through tutorials, I can create my
own object that descends from a sprite. My questions here are will the
dot zoom and coordinate based on the zoom, pan of the background map?
How can I make that happen?
3. More complex tooltips than the standard tooltips. I want a tooltip
that displays about 5-10 lines of information and possibly links to
other areas of the web site. Would you just create a separate window
to act as a tooltip window and place whatever information in the
window you need?
4. Incorporating effects to the movements of these objects. I've seen
the component explorer, I want the movement of these items on the map
to slide from one spot to the other. The demo app in the explorer
works well. How would you combine multiple effects to happen at the
same time?
Any help would be greatly appreciated.
Step 1 Source Code
?xml version=1.0 encoding=utf-8?
mx:Application xmlns:mx=http://www.adobe.com/2006/mxml;
layout=horizontal
mx:Script
![CDATA[
private function panUp():void {
myMap.scrollRect.top -= 10;
trace(myMap.scrollRect);
if (myMap.scrollRect.top 0) {
myMap.scrollRect.top = 0;
}
}
private function panDown():void {
myMap.scrollRect.top += 10;
trace(myMap.scrollRect);
if (myMap.scrollRect.top 0) {
myMap.scrollRect.top = 0;
}
}
private function panRight():void {
myMap.scrollRect.left += 10;
trace(myMap.scrollRect);
if (myMap.scrollRect.left 0) {
myMap.scrollRect.left = 0;
}
}
private function panLeft():void {
myMap.scrollRect.left -= 10;
trace(myMap.scrollRect);
if (myMap.scrollRect.left 0) {
myMap.scrollRect.left = 0;
}
}
private function zoomIn():void {
myMap.scaleX += 0.1;
myMap.scaleY += 0.1;
}
private function zoomOut():void {
myMap.scaleX -= 0.1;
myMap.scaleY -= 0.1;
}
]]
/mx:Script
mx:VBox height=100%
mx:Button label=Left id=btnLeft click=panLeft()/
mx:Button label=Right id=btnRight click=panRight()/
mx:Button label=Up id=btnUp click=panUp()/
mx:Button label=Down id=btnDown click=panDown()/
mx:Spacer/
mx:Button label=Zoom In id=btnZoomIn click=zoomIn()/
mx:Button label=Zoom Out id=btnZoomOut click=zoomOut()/
/mx:VBox
mx:Panel width=100% height=100% layout=absolute
cornerRadius=33 backgroundColor=#c0c0c0 id=myPanel title=Map
Basics 101 fontFamily=Georgia fontSize=16
mx:Image horizontalCenter=20 verticalCenter=20 width=504
height=601 source=SB memorial map.png scaleContent=false
id=myMap/
/mx:Panel
/mx:Application
--
Flexcoders Mailing List
FAQ: http://groups.yahoo.com/group/flexcoders/files/flexcodersFAQ.txt
Search Archives: http://www.mail-archive.com/flexcoders%40yahoogroups.com
Yahoo! Groups Links
* To visit your group on the web, go to:
http://groups.yahoo.com/group/flexcoders/
* To unsubscribe from this group, send an email to:
[EMAIL PROTECTED]
* Your use of Yahoo! Groups is subject to:
http://docs.yahoo.com/info/terms/
[flexcoders] Re: Image Pan - Step 1
Last night, I was able to find a demo called SpriteArranger that
showed addng different types of objects as children to a DisplayCanvas
. This really helped in understanding the AddChild. I think I'll go
with the displayobjects initially since we have a PC version written
that uses the same approach. I still am having issues with panning an
image left, right... Then the next things I need to figure out are:
1. Making an internal searchable list of children. I saw the AddChild
function, but the displayobject does not have a Children Property. I
need to research the different types of arrays and find one that I can
have a key associated with the object so as data comes in, I can
update sprite 47. Is there a HashArray or something similar. These
maybe simple questions but I am brand new to this stuff. There seems
to be tons of docs but few examples.
2. On the panning issue, lets say I have a map background that is
1000x1000. My viewport is 200X400, I need to understand how to control
the viewport and panning.
3. Memory Management. As you mentioned, tons of objects will have
issues, I need to get a feel for how many is too many, if the user
switches maps, how to delete the children...
Thanks for your help,
Rich
--- In flexcoders@yahoogroups.com, JesterXL [EMAIL PROTECTED] wrote:
Base class is like DisplayObjectContainer, but that's an abstract
class;
both Sprite and MovieClip extend that. However, if you are using Flex,
there is no point to utilize MovieClip since you don't have frames;
Sprite's
good. Also, the last line should be addChild(container), at least
in an AS3
project.
...however, you have 2 choices here.
DisplayObjects are nice because you can put all of your map data in one
DisplayObject, and then move just that 1 Sprite, scale that 1
sprite, ect.
It makes your code really concise, and flexible because you can put
anything
you want in it. Think how Yahoo Maps and Google Maps have like
textures,
directions, lines, markers, etc. all in theirs.
...but tons of obects, while better in Flash Player 9, are still
slower than
1 bitmap. If you aren't planning of going all charting-style, you
outta
give thought to a blitting solution if you want her to scale
hardcore. You
basically draw everything to an offscreen bitmap, and then use a
Rect to
copyPixels into an on-screen bitmap. That way, you could add
thousands of
objects, and you're map would run really well. Harder to code and less
flexible, though. Sprites and the DisplayObject really nice, so.
- Original Message -
From: richmcgillicuddy [EMAIL PROTECTED]
To: flexcoders@yahoogroups.com
Sent: Tuesday, July 25, 2006 8:29 PM
Subject: [flexcoders] Re: Image Pan - Step 1
OK, just needed the right terms to search on. Found this in the help:
import flash.display.Sprite;
import flash.events.MouseEvent;
var container:Sprite = new Sprite();
container.name = container;
var circle:Sprite = new Sprite();
circle.name = circle;
circle.graphics.beginFill(0xFFCC00);
circle.graphics.drawCircle(40, 40, 40);
container.addChild(circle);
container.mouseChildren = false;
container.addEventListener(MouseEvent.CLICK, clicked);
function clicked(event:MouseEvent):void {
trace(event.target.name); // container
}
Then, it states to add the container to the DisplayObject. This is
where I get confused. What is the base container class for the
DisplayList and how do I attach it? I don't think I need a movie clip
becuase it says it basically is a sprite with a timeline.
Rich
--- In flexcoders@yahoogroups.com, JesterXL jesterxl@ wrote:
2. If they are children, they too will scale. Add them to the
Sprite's
displaylist.
3. We've done this successfully in Flex 1.5. In Flex 2, you can set
the
toolTipClass on the ToolTipManager class to utilize your own class.
4. To combine multiple effects at the same time, utilize the
mx:Parrellel
tag; it'll make all effects inside it happen at the same time
(exluding
their own startDelay attributes).
Have you tried replacing x y with scrollRect?
- Original Message -
From: richmcgillicuddy rich@
To: flexcoders@yahoogroups.com
Sent: Tuesday, July 25, 2006 3:02 PM
Subject: [flexcoders] Image Pan - Step 1
Hello,
I am new to the group and to Flex/Flash. We have a mapping tool that
we had created about a year back that uses flash 8. We want to move up
to Flex 2 for a number of reasons. I am trying to create the mapping
hello world application. We use a standard png image as the background
for the map. I am trying to create a simple image in a panel that has
a series of buttons to the left where I can zoom in/out and pan in all
directions. The zoom in/out is working fine (although I have questions
regarding that) but the pan is not working. My code is attached to the
bottom of this email message. Logically the steps I need to go through
to get
Re: [flexcoders] Re: Image Pan - Step 1
1. You could use the old skool Object (hash / associative array) approach,
or the new Dictionary class.
2. set the scrollRect to 200x400, and then just move the sprite. So:
myContainer = new Sprite();
myContainer.addChild(myMap);
myContainer.scrollRect = new Rect(0, 0, 200, 400);
addChild(myContainer);
myMap.x += 100;
Don't know 3.
- Original Message -
From: richmcgillicuddy [EMAIL PROTECTED]
To: flexcoders@yahoogroups.com
Sent: Wednesday, July 26, 2006 9:13 AM
Subject: [flexcoders] Re: Image Pan - Step 1
Last night, I was able to find a demo called SpriteArranger that
showed addng different types of objects as children to a DisplayCanvas
. This really helped in understanding the AddChild. I think I'll go
with the displayobjects initially since we have a PC version written
that uses the same approach. I still am having issues with panning an
image left, right... Then the next things I need to figure out are:
1. Making an internal searchable list of children. I saw the AddChild
function, but the displayobject does not have a Children Property. I
need to research the different types of arrays and find one that I can
have a key associated with the object so as data comes in, I can
update sprite 47. Is there a HashArray or something similar. These
maybe simple questions but I am brand new to this stuff. There seems
to be tons of docs but few examples.
2. On the panning issue, lets say I have a map background that is
1000x1000. My viewport is 200X400, I need to understand how to control
the viewport and panning.
3. Memory Management. As you mentioned, tons of objects will have
issues, I need to get a feel for how many is too many, if the user
switches maps, how to delete the children...
Thanks for your help,
Rich
--- In flexcoders@yahoogroups.com, JesterXL [EMAIL PROTECTED] wrote:
Base class is like DisplayObjectContainer, but that's an abstract
class;
both Sprite and MovieClip extend that. However, if you are using Flex,
there is no point to utilize MovieClip since you don't have frames;
Sprite's
good. Also, the last line should be addChild(container), at least
in an AS3
project.
...however, you have 2 choices here.
DisplayObjects are nice because you can put all of your map data in one
DisplayObject, and then move just that 1 Sprite, scale that 1
sprite, ect.
It makes your code really concise, and flexible because you can put
anything
you want in it. Think how Yahoo Maps and Google Maps have like
textures,
directions, lines, markers, etc. all in theirs.
...but tons of obects, while better in Flash Player 9, are still
slower than
1 bitmap. If you aren't planning of going all charting-style, you
outta
give thought to a blitting solution if you want her to scale
hardcore. You
basically draw everything to an offscreen bitmap, and then use a
Rect to
copyPixels into an on-screen bitmap. That way, you could add
thousands of
objects, and you're map would run really well. Harder to code and less
flexible, though. Sprites and the DisplayObject really nice, so.
- Original Message -
From: richmcgillicuddy [EMAIL PROTECTED]
To: flexcoders@yahoogroups.com
Sent: Tuesday, July 25, 2006 8:29 PM
Subject: [flexcoders] Re: Image Pan - Step 1
OK, just needed the right terms to search on. Found this in the help:
import flash.display.Sprite;
import flash.events.MouseEvent;
var container:Sprite = new Sprite();
container.name = container;
var circle:Sprite = new Sprite();
circle.name = circle;
circle.graphics.beginFill(0xFFCC00);
circle.graphics.drawCircle(40, 40, 40);
container.addChild(circle);
container.mouseChildren = false;
container.addEventListener(MouseEvent.CLICK, clicked);
function clicked(event:MouseEvent):void {
trace(event.target.name); // container
}
Then, it states to add the container to the DisplayObject. This is
where I get confused. What is the base container class for the
DisplayList and how do I attach it? I don't think I need a movie clip
becuase it says it basically is a sprite with a timeline.
Rich
--- In flexcoders@yahoogroups.com, JesterXL jesterxl@ wrote:
2. If they are children, they too will scale. Add them to the
Sprite's
displaylist.
3. We've done this successfully in Flex 1.5. In Flex 2, you can set
the
toolTipClass on the ToolTipManager class to utilize your own class.
4. To combine multiple effects at the same time, utilize the
mx:Parrellel
tag; it'll make all effects inside it happen at the same time
(exluding
their own startDelay attributes).
Have you tried replacing x y with scrollRect?
- Original Message -
From: richmcgillicuddy rich@
To: flexcoders@yahoogroups.com
Sent: Tuesday, July 25, 2006 3:02 PM
Subject: [flexcoders] Image Pan - Step 1
Hello,
I am new to the group and to Flex/Flash. We have a mapping tool that
we had created about a year back that uses flash 8. We want to move up
to Flex 2 for a number
[flexcoders] Re: Image Pan - Step 1
Thanks for the tips. I have a few days of work to get done (Both flex
and non flex) with this stuff and I'll follow up and let you know how
it goes.
On the pan, I was able to find something that uses movie clips but and
flash7/8 (so it won't work) but it is exactly what I was looking for.
You can find it here
(http://sephiroth.it/tutorials/flashPHP/scrollRect/). What would I
need to do in order to convert this to the container/child image code
in Flex 2?
Rich
--- In flexcoders@yahoogroups.com, JesterXL [EMAIL PROTECTED] wrote:
1. You could use the old skool Object (hash / associative array)
approach,
or the new Dictionary class.
2. set the scrollRect to 200x400, and then just move the sprite. So:
myContainer = new Sprite();
myContainer.addChild(myMap);
myContainer.scrollRect = new Rect(0, 0, 200, 400);
addChild(myContainer);
myMap.x += 100;
Don't know 3.
- Original Message -
From: richmcgillicuddy [EMAIL PROTECTED]
To: flexcoders@yahoogroups.com
Sent: Wednesday, July 26, 2006 9:13 AM
Subject: [flexcoders] Re: Image Pan - Step 1
Last night, I was able to find a demo called SpriteArranger that
showed addng different types of objects as children to a DisplayCanvas
. This really helped in understanding the AddChild. I think I'll go
with the displayobjects initially since we have a PC version written
that uses the same approach. I still am having issues with panning an
image left, right... Then the next things I need to figure out are:
1. Making an internal searchable list of children. I saw the AddChild
function, but the displayobject does not have a Children Property. I
need to research the different types of arrays and find one that I can
have a key associated with the object so as data comes in, I can
update sprite 47. Is there a HashArray or something similar. These
maybe simple questions but I am brand new to this stuff. There seems
to be tons of docs but few examples.
2. On the panning issue, lets say I have a map background that is
1000x1000. My viewport is 200X400, I need to understand how to control
the viewport and panning.
3. Memory Management. As you mentioned, tons of objects will have
issues, I need to get a feel for how many is too many, if the user
switches maps, how to delete the children...
Thanks for your help,
Rich
--- In flexcoders@yahoogroups.com, JesterXL jesterxl@ wrote:
Base class is like DisplayObjectContainer, but that's an abstract
class;
both Sprite and MovieClip extend that. However, if you are using
Flex,
there is no point to utilize MovieClip since you don't have frames;
Sprite's
good. Also, the last line should be addChild(container), at least
in an AS3
project.
...however, you have 2 choices here.
DisplayObjects are nice because you can put all of your map data
in one
DisplayObject, and then move just that 1 Sprite, scale that 1
sprite, ect.
It makes your code really concise, and flexible because you can put
anything
you want in it. Think how Yahoo Maps and Google Maps have like
textures,
directions, lines, markers, etc. all in theirs.
...but tons of obects, while better in Flash Player 9, are still
slower than
1 bitmap. If you aren't planning of going all charting-style, you
outta
give thought to a blitting solution if you want her to scale
hardcore. You
basically draw everything to an offscreen bitmap, and then use a
Rect to
copyPixels into an on-screen bitmap. That way, you could add
thousands of
objects, and you're map would run really well. Harder to code and
less
flexible, though. Sprites and the DisplayObject really nice, so.
- Original Message -
From: richmcgillicuddy rich@
To: flexcoders@yahoogroups.com
Sent: Tuesday, July 25, 2006 8:29 PM
Subject: [flexcoders] Re: Image Pan - Step 1
OK, just needed the right terms to search on. Found this in the help:
import flash.display.Sprite;
import flash.events.MouseEvent;
var container:Sprite = new Sprite();
container.name = container;
var circle:Sprite = new Sprite();
circle.name = circle;
circle.graphics.beginFill(0xFFCC00);
circle.graphics.drawCircle(40, 40, 40);
container.addChild(circle);
container.mouseChildren = false;
container.addEventListener(MouseEvent.CLICK, clicked);
function clicked(event:MouseEvent):void {
trace(event.target.name); // container
}
Then, it states to add the container to the DisplayObject. This is
where I get confused. What is the base container class for the
DisplayList and how do I attach it? I don't think I need a movie clip
becuase it says it basically is a sprite with a timeline.
Rich
--- In flexcoders@yahoogroups.com, JesterXL jesterxl@ wrote:
2. If they are children, they too will scale. Add them to the
Sprite's
displaylist.
3. We've done this successfully in Flex 1.5. In Flex 2, you can set
the
toolTipClass
Re: [flexcoders] Re: Image Pan - Step 1
Actually, the code should port quite easily.
the image.onEnterFrame for example should be changed to addEventListener.
The _x should be changed to just x.
A lot of those are minor. Flash 8 didn't have Sprite; all we had was
MovieClip so you could still use MovieClip in Flash Player 9, but there
isn't a point, and Sprite MovieClip have most of the same required
properties methods you need.
- Original Message -
From: richmcgillicuddy [EMAIL PROTECTED]
To: flexcoders@yahoogroups.com
Sent: Wednesday, July 26, 2006 10:55 AM
Subject: [flexcoders] Re: Image Pan - Step 1
Thanks for the tips. I have a few days of work to get done (Both flex
and non flex) with this stuff and I'll follow up and let you know how
it goes.
On the pan, I was able to find something that uses movie clips but and
flash7/8 (so it won't work) but it is exactly what I was looking for.
You can find it here
(http://sephiroth.it/tutorials/flashPHP/scrollRect/). What would I
need to do in order to convert this to the container/child image code
in Flex 2?
Rich
--- In flexcoders@yahoogroups.com, JesterXL [EMAIL PROTECTED] wrote:
1. You could use the old skool Object (hash / associative array)
approach,
or the new Dictionary class.
2. set the scrollRect to 200x400, and then just move the sprite. So:
myContainer = new Sprite();
myContainer.addChild(myMap);
myContainer.scrollRect = new Rect(0, 0, 200, 400);
addChild(myContainer);
myMap.x += 100;
Don't know 3.
- Original Message -
From: richmcgillicuddy [EMAIL PROTECTED]
To: flexcoders@yahoogroups.com
Sent: Wednesday, July 26, 2006 9:13 AM
Subject: [flexcoders] Re: Image Pan - Step 1
Last night, I was able to find a demo called SpriteArranger that
showed addng different types of objects as children to a DisplayCanvas
. This really helped in understanding the AddChild. I think I'll go
with the displayobjects initially since we have a PC version written
that uses the same approach. I still am having issues with panning an
image left, right... Then the next things I need to figure out are:
1. Making an internal searchable list of children. I saw the AddChild
function, but the displayobject does not have a Children Property. I
need to research the different types of arrays and find one that I can
have a key associated with the object so as data comes in, I can
update sprite 47. Is there a HashArray or something similar. These
maybe simple questions but I am brand new to this stuff. There seems
to be tons of docs but few examples.
2. On the panning issue, lets say I have a map background that is
1000x1000. My viewport is 200X400, I need to understand how to control
the viewport and panning.
3. Memory Management. As you mentioned, tons of objects will have
issues, I need to get a feel for how many is too many, if the user
switches maps, how to delete the children...
Thanks for your help,
Rich
--- In flexcoders@yahoogroups.com, JesterXL jesterxl@ wrote:
Base class is like DisplayObjectContainer, but that's an abstract
class;
both Sprite and MovieClip extend that. However, if you are using
Flex,
there is no point to utilize MovieClip since you don't have frames;
Sprite's
good. Also, the last line should be addChild(container), at least
in an AS3
project.
...however, you have 2 choices here.
DisplayObjects are nice because you can put all of your map data
in one
DisplayObject, and then move just that 1 Sprite, scale that 1
sprite, ect.
It makes your code really concise, and flexible because you can put
anything
you want in it. Think how Yahoo Maps and Google Maps have like
textures,
directions, lines, markers, etc. all in theirs.
...but tons of obects, while better in Flash Player 9, are still
slower than
1 bitmap. If you aren't planning of going all charting-style, you
outta
give thought to a blitting solution if you want her to scale
hardcore. You
basically draw everything to an offscreen bitmap, and then use a
Rect to
copyPixels into an on-screen bitmap. That way, you could add
thousands of
objects, and you're map would run really well. Harder to code and
less
flexible, though. Sprites and the DisplayObject really nice, so.
- Original Message -
From: richmcgillicuddy rich@
To: flexcoders@yahoogroups.com
Sent: Tuesday, July 25, 2006 8:29 PM
Subject: [flexcoders] Re: Image Pan - Step 1
OK, just needed the right terms to search on. Found this in the help:
import flash.display.Sprite;
import flash.events.MouseEvent;
var container:Sprite = new Sprite();
container.name = container;
var circle:Sprite = new Sprite();
circle.name = circle;
circle.graphics.beginFill(0xFFCC00);
circle.graphics.drawCircle(40, 40, 40);
container.addChild(circle);
container.mouseChildren = false;
container.addEventListener(MouseEvent.CLICK, clicked);
function clicked(event:MouseEvent):void {
trace
[flexcoders] Re: Image Pan - Step 1
Thanks for the pointers. I replaced myMap.scrollRect.Top with myMap.X
and myMap.scrollRect.X, both had no effect. What should be my base
container object? Right now I just have an image as the base
container, is there a better choice. In our Flash 8 code, we have 3
different movie clips.
On the children, where is the Sprite collection? Which container class
has this as its display list. after rereading your sentence, are you
saying that the base container should be a sprite and it has a display
list?
Thanks for your help,
RIch
--- In flexcoders@yahoogroups.com, JesterXL [EMAIL PROTECTED] wrote:
2. If they are children, they too will scale. Add them to the Sprite's
displaylist.
3. We've done this successfully in Flex 1.5. In Flex 2, you can set
the
toolTipClass on the ToolTipManager class to utilize your own class.
4. To combine multiple effects at the same time, utilize the
mx:Parrellel
tag; it'll make all effects inside it happen at the same time (exluding
their own startDelay attributes).
Have you tried replacing x y with scrollRect?
- Original Message -
From: richmcgillicuddy [EMAIL PROTECTED]
To: flexcoders@yahoogroups.com
Sent: Tuesday, July 25, 2006 3:02 PM
Subject: [flexcoders] Image Pan - Step 1
Hello,
I am new to the group and to Flex/Flash. We have a mapping tool that
we had created about a year back that uses flash 8. We want to move up
to Flex 2 for a number of reasons. I am trying to create the mapping
hello world application. We use a standard png image as the background
for the map. I am trying to create a simple image in a panel that has
a series of buttons to the left where I can zoom in/out and pan in all
directions. The zoom in/out is working fine (although I have questions
regarding that) but the pan is not working. My code is attached to the
bottom of this email message. Logically the steps I need to go through
to get this to work are:
1. Simple map - Image management Pan Zoom Possibly overview window
similar to Google or Yahoo.
2. Create an object that is a member of that map. This object needs to
be able to display itself as a number of different types (Images,
dots, characters). After reading through tutorials, I can create my
own object that descends from a sprite. My questions here are will the
dot zoom and coordinate based on the zoom, pan of the background map?
How can I make that happen?
3. More complex tooltips than the standard tooltips. I want a tooltip
that displays about 5-10 lines of information and possibly links to
other areas of the web site. Would you just create a separate window
to act as a tooltip window and place whatever information in the
window you need?
4. Incorporating effects to the movements of these objects. I've seen
the component explorer, I want the movement of these items on the map
to slide from one spot to the other. The demo app in the explorer
works well. How would you combine multiple effects to happen at the
same time?
Any help would be greatly appreciated.
Step 1 Source Code
?xml version=1.0 encoding=utf-8?
mx:Application xmlns:mx=http://www.adobe.com/2006/mxml;
layout=horizontal
mx:Script
![CDATA[
private function panUp():void {
myMap.scrollRect.top -= 10;
trace(myMap.scrollRect);
if (myMap.scrollRect.top 0) {
myMap.scrollRect.top = 0;
}
}
private function panDown():void {
myMap.scrollRect.top += 10;
trace(myMap.scrollRect);
if (myMap.scrollRect.top 0) {
myMap.scrollRect.top = 0;
}
}
private function panRight():void {
myMap.scrollRect.left += 10;
trace(myMap.scrollRect);
if (myMap.scrollRect.left 0) {
myMap.scrollRect.left = 0;
}
}
private function panLeft():void {
myMap.scrollRect.left -= 10;
trace(myMap.scrollRect);
if (myMap.scrollRect.left 0) {
myMap.scrollRect.left = 0;
}
}
private function zoomIn():void {
myMap.scaleX += 0.1;
myMap.scaleY += 0.1;
}
private function zoomOut():void {
myMap.scaleX -= 0.1;
myMap.scaleY -= 0.1;
}
]]
/mx:Script
mx:VBox height=100%
mx:Button label=Left id=btnLeft click=panLeft()/
mx:Button label=Right id=btnRight click=panRight()/
mx:Button label=Up id=btnUp click=panUp()/
mx:Button label=Down id=btnDown click=panDown()/
mx:Spacer/
mx:Button label=Zoom In id=btnZoomIn click=zoomIn()/
mx:Button label=Zoom Out id=btnZoomOut click=zoomOut()/
/mx:VBox
mx:Panel width=100% height=100% layout=absolute
cornerRadius=33
[flexcoders] Re: Image Pan - Step 1
OK, just needed the right terms to search on. Found this in the help:
import flash.display.Sprite;
import flash.events.MouseEvent;
var container:Sprite = new Sprite();
container.name = container;
var circle:Sprite = new Sprite();
circle.name = circle;
circle.graphics.beginFill(0xFFCC00);
circle.graphics.drawCircle(40, 40, 40);
container.addChild(circle);
container.mouseChildren = false;
container.addEventListener(MouseEvent.CLICK, clicked);
function clicked(event:MouseEvent):void {
trace(event.target.name); // container
}
Then, it states to add the container to the DisplayObject. This is
where I get confused. What is the base container class for the
DisplayList and how do I attach it? I don't think I need a movie clip
becuase it says it basically is a sprite with a timeline.
Rich
--- In flexcoders@yahoogroups.com, JesterXL [EMAIL PROTECTED] wrote:
2. If they are children, they too will scale. Add them to the Sprite's
displaylist.
3. We've done this successfully in Flex 1.5. In Flex 2, you can set
the
toolTipClass on the ToolTipManager class to utilize your own class.
4. To combine multiple effects at the same time, utilize the
mx:Parrellel
tag; it'll make all effects inside it happen at the same time (exluding
their own startDelay attributes).
Have you tried replacing x y with scrollRect?
- Original Message -
From: richmcgillicuddy [EMAIL PROTECTED]
To: flexcoders@yahoogroups.com
Sent: Tuesday, July 25, 2006 3:02 PM
Subject: [flexcoders] Image Pan - Step 1
Hello,
I am new to the group and to Flex/Flash. We have a mapping tool that
we had created about a year back that uses flash 8. We want to move up
to Flex 2 for a number of reasons. I am trying to create the mapping
hello world application. We use a standard png image as the background
for the map. I am trying to create a simple image in a panel that has
a series of buttons to the left where I can zoom in/out and pan in all
directions. The zoom in/out is working fine (although I have questions
regarding that) but the pan is not working. My code is attached to the
bottom of this email message. Logically the steps I need to go through
to get this to work are:
1. Simple map - Image management Pan Zoom Possibly overview window
similar to Google or Yahoo.
2. Create an object that is a member of that map. This object needs to
be able to display itself as a number of different types (Images,
dots, characters). After reading through tutorials, I can create my
own object that descends from a sprite. My questions here are will the
dot zoom and coordinate based on the zoom, pan of the background map?
How can I make that happen?
3. More complex tooltips than the standard tooltips. I want a tooltip
that displays about 5-10 lines of information and possibly links to
other areas of the web site. Would you just create a separate window
to act as a tooltip window and place whatever information in the
window you need?
4. Incorporating effects to the movements of these objects. I've seen
the component explorer, I want the movement of these items on the map
to slide from one spot to the other. The demo app in the explorer
works well. How would you combine multiple effects to happen at the
same time?
Any help would be greatly appreciated.
Step 1 Source Code
?xml version=1.0 encoding=utf-8?
mx:Application xmlns:mx=http://www.adobe.com/2006/mxml;
layout=horizontal
mx:Script
![CDATA[
private function panUp():void {
myMap.scrollRect.top -= 10;
trace(myMap.scrollRect);
if (myMap.scrollRect.top 0) {
myMap.scrollRect.top = 0;
}
}
private function panDown():void {
myMap.scrollRect.top += 10;
trace(myMap.scrollRect);
if (myMap.scrollRect.top 0) {
myMap.scrollRect.top = 0;
}
}
private function panRight():void {
myMap.scrollRect.left += 10;
trace(myMap.scrollRect);
if (myMap.scrollRect.left 0) {
myMap.scrollRect.left = 0;
}
}
private function panLeft():void {
myMap.scrollRect.left -= 10;
trace(myMap.scrollRect);
if (myMap.scrollRect.left 0) {
myMap.scrollRect.left = 0;
}
}
private function zoomIn():void {
myMap.scaleX += 0.1;
myMap.scaleY += 0.1;
}
private function zoomOut():void {
myMap.scaleX -= 0.1;
myMap.scaleY -= 0.1;
}
]]
/mx:Script
mx:VBox height=100%
mx:Button label=Left id=btnLeft click=panLeft()/
mx:Button label=Right id=btnRight click=panRight()/
mx:Button label=Up id=btnUp
Re: [flexcoders] Re: Image Pan - Step 1
Base class is like DisplayObjectContainer, but that's an abstract class;
both Sprite and MovieClip extend that. However, if you are using Flex,
there is no point to utilize MovieClip since you don't have frames; Sprite's
good. Also, the last line should be addChild(container), at least in an AS3
project.
...however, you have 2 choices here.
DisplayObjects are nice because you can put all of your map data in one
DisplayObject, and then move just that 1 Sprite, scale that 1 sprite, ect.
It makes your code really concise, and flexible because you can put anything
you want in it. Think how Yahoo Maps and Google Maps have like textures,
directions, lines, markers, etc. all in theirs.
...but tons of obects, while better in Flash Player 9, are still slower than
1 bitmap. If you aren't planning of going all charting-style, you outta
give thought to a blitting solution if you want her to scale hardcore. You
basically draw everything to an offscreen bitmap, and then use a Rect to
copyPixels into an on-screen bitmap. That way, you could add thousands of
objects, and you're map would run really well. Harder to code and less
flexible, though. Sprites and the DisplayObject really nice, so.
- Original Message -
From: richmcgillicuddy [EMAIL PROTECTED]
To: flexcoders@yahoogroups.com
Sent: Tuesday, July 25, 2006 8:29 PM
Subject: [flexcoders] Re: Image Pan - Step 1
OK, just needed the right terms to search on. Found this in the help:
import flash.display.Sprite;
import flash.events.MouseEvent;
var container:Sprite = new Sprite();
container.name = container;
var circle:Sprite = new Sprite();
circle.name = circle;
circle.graphics.beginFill(0xFFCC00);
circle.graphics.drawCircle(40, 40, 40);
container.addChild(circle);
container.mouseChildren = false;
container.addEventListener(MouseEvent.CLICK, clicked);
function clicked(event:MouseEvent):void {
trace(event.target.name); // container
}
Then, it states to add the container to the DisplayObject. This is
where I get confused. What is the base container class for the
DisplayList and how do I attach it? I don't think I need a movie clip
becuase it says it basically is a sprite with a timeline.
Rich
--- In flexcoders@yahoogroups.com, JesterXL [EMAIL PROTECTED] wrote:
2. If they are children, they too will scale. Add them to the Sprite's
displaylist.
3. We've done this successfully in Flex 1.5. In Flex 2, you can set
the
toolTipClass on the ToolTipManager class to utilize your own class.
4. To combine multiple effects at the same time, utilize the
mx:Parrellel
tag; it'll make all effects inside it happen at the same time (exluding
their own startDelay attributes).
Have you tried replacing x y with scrollRect?
- Original Message -
From: richmcgillicuddy [EMAIL PROTECTED]
To: flexcoders@yahoogroups.com
Sent: Tuesday, July 25, 2006 3:02 PM
Subject: [flexcoders] Image Pan - Step 1
Hello,
I am new to the group and to Flex/Flash. We have a mapping tool that
we had created about a year back that uses flash 8. We want to move up
to Flex 2 for a number of reasons. I am trying to create the mapping
hello world application. We use a standard png image as the background
for the map. I am trying to create a simple image in a panel that has
a series of buttons to the left where I can zoom in/out and pan in all
directions. The zoom in/out is working fine (although I have questions
regarding that) but the pan is not working. My code is attached to the
bottom of this email message. Logically the steps I need to go through
to get this to work are:
1. Simple map - Image management Pan Zoom Possibly overview window
similar to Google or Yahoo.
2. Create an object that is a member of that map. This object needs to
be able to display itself as a number of different types (Images,
dots, characters). After reading through tutorials, I can create my
own object that descends from a sprite. My questions here are will the
dot zoom and coordinate based on the zoom, pan of the background map?
How can I make that happen?
3. More complex tooltips than the standard tooltips. I want a tooltip
that displays about 5-10 lines of information and possibly links to
other areas of the web site. Would you just create a separate window
to act as a tooltip window and place whatever information in the
window you need?
4. Incorporating effects to the movements of these objects. I've seen
the component explorer, I want the movement of these items on the map
to slide from one spot to the other. The demo app in the explorer
works well. How would you combine multiple effects to happen at the
same time?
Any help would be greatly appreciated.
Step 1 Source Code
?xml version=1.0 encoding=utf-8?
mx:Application xmlns:mx=http://www.adobe.com/2006/mxml;
layout=horizontal
mx:Script
