[flexcoders] Re: Getting a Sprite into a Flex Container?
I got a class that extends Sprite that I want to put into a Flex DisplayObject container (Canvas or any similar custom made component). My question is: Is implementing the IUIComponent interface the only way to get this working or Are there any other ways around it? A SWFLoader is not what can use in this situation. Any hints would be appreciated. You can place them on mx:Image mx:Canvas id=myCanvas width=100% height=100% mx:Image id=spritelayer x=0 y=0 scaleContent=false autoLoad=true / /mx:Canvas then in as: spriteLayer.addChild(mysprite); etc. works for me br maciek
[flexcoders] Re: hotspot
Hey Sandy,
Defining rectangular hotspots in Flex is relatively easy. I use
transparant Canvas instances on top of the Image to respond to mouse
clicks. I choose to use an external xml file to hold my hotspot
information. It looks like this;
?xml version=1.0 encoding=ISO-8859-1?
hotspots
spot id=c01 x=229 y=225 w=95 h=90 alpha=0
You clicked on my purse!
/spot
spot id=c02 x=70 y=193 w=76 h=103 alpha=0
Those are my bags!
/spot
/hotspots
So now here is the code I use
?xml version=1.0 ?
mx:Application
xmlns:mx=http://www.adobe.com/2006/mxml;
layout=absolute creationComplete=init()
mx:Script
![CDATA[
import mx.rpc.events.ResultEvent;
import flash.events.MouseEvent;
import mx.containers.Canvas;
public var myHotSpots:XMLList;
public var myMessage:Object = new Object();
public function init():void {
myHotSpotData.send();
}
private function myHotSpotDataResult(event:ResultEvent):void {
myHotSpots = event.result.spot;
createHotSpots();
}
private function canvasClickHander(event:MouseEvent):void {
var msgID:String = event.currentTarget.id;
myLabel.text = myMessage[msgID];
}
private function createHotSpots():void {
for(var ndx:Number = 0;ndx myHotSpots.length();ndx++)
{
var myCanvas:Canvas = new Canvas();
myCanvas.id = [EMAIL PROTECTED];
myCanvas.useHandCursor = true;
myCanvas.buttonMode = true;
myCanvas.mouseChildren = false;
myCanvas.setStyle(backgroundColor,
0xff);
myCanvas.alpha = [EMAIL PROTECTED];
myCanvas.width = [EMAIL PROTECTED];
myCanvas.height = [EMAIL PROTECTED];
myCanvas.x = [EMAIL PROTECTED];
myCanvas.y = [EMAIL PROTECTED];
[EMAIL PROTECTED] = myHotSpots[ndx].text();
myCanvas.addEventListener(click,
canvasClickHander);
this.addChild(myCanvas);
}
}
]]
/mx:Script
mx:HTTPService id=myHotSpotData
url=hotspotdata.xml result=myHotSpotDataResult(event)
showBusyCursor=true resultFormat=e4x/
mx:Image id=myImage source=200387680-001.jpg width=337
height=455 /
mx:Label id=myLabel width=337 x=0 y=430 textAlign=center/
/mx:Application
Let's first skip over the Script and look at the interface tags. I
define an Image tag and a Label that rests at the bottom on the Image.
I use an HTTPService to access the external XML file as E4X (I love E4X).
OK, now up to the Script. After importing a few classes I declare an
XMLList variable to hold my XML result. The myMessage Object instance
will hold the text message for each Canvas instance.
The init() function triggers the HTTPService.
The myHotSpotDataResult function stores the result in the XMLList
variable and calls the createHotSpots() function.
The canvasClickHander() function handles the mouse click on each of
the canvases. It access the myMessage Object variable to output the text.
Now for the magic ... The createHotSpots() function creates a Canvas
instance for every line in the XMLList. It sets several properties and
a style. Notice the three properties called useHandCursor, buttonMode,
and mouseChildren. These are needed so the mouse cursor will change to
a hand when you hover over the Canvas hotspot. The Canvas's
transparency is set using the alpha property. I populate the myMessage
object. I create an EventListener to call the canvasClickHander()
function when the Canvas is clicked upon. An finaly we add the Canvas
instance to the display.
As I said, rather simple. I created a small app that allows me to
create the xml file containing the hotspot data. It allows me to place
hotspots on the Image, move them around, resize them, and save it's
properties in an xml file. Let me know if you want to take a look at
it. Later I will add the capability to add non-rectangular hotspots.
Theo
http://therush.wordpress.com
--- In flexcoders@yahoogroups.com, Sandy Saline [EMAIL PROTECTED]
[flexcoders] Re: Canvas
Hi Titipouns, If I understand you question correctly, I would go with a ViewStack as a solution. Here is my completed code (I colored each of the Canvases so you can see the change): ?xml version=1.0 encoding=utf-8? mx:Application xmlns:mx=http://www.adobe.com/2006/mxml; layout=absolute mx:ViewStack id=myCanvases width=400 height=400 mx:Canvas id=canvas_father width=400 height=400 backgroundColor=0xff /mx:Canvas mx:Canvas id=canvas01 width=400 height=400 backgroundColor=0x00ff00 mx:Label x=142 y=28 text=Affichage canvas 01/ /mx:Canvas mx:Canvas id=canvas02 width=400 height=400 backgroundColor=0xff mx:Label x=142 y=28 text=Affichage canvas 02/ /mx:Canvas /mx:ViewStack mx:Button x=197 y=420 label=Display canvas01 on canvas_father click=myCanvases.selectedIndex = 1/ mx:Button x=197 y=450 label=Display canvas02 on canvas_father click=myCanvases.selectedIndex = 2/ /mx:Application As you can see I created a ViewStack Container to encompas the three Canvases. I use the selectedIndex property to change the currently viewable Canvas. In this solution I opted not to use your two Canvas component. They were simply included into the main application. I could also interpret your question as wanting to overlay Canvas01 OR Canvas02 on top of the canvas_father. I'll post my solution to that following this one. Theo http://therush.wordpress.com --- In flexcoders@yahoogroups.com, titipouns19 [EMAIL PROTECTED] wrote: Hello, I want to display the component canvas01 or the component canvas02 on a canvas object who is in a mxml application file. How can i do this ? canvas01 : ?xml version=1.0 encoding=utf-8? mx:Canvas xmlns:mx=http://www.adobe.com/2006/mxml; width=400 height=400 mx:Label x=142 y=28 text=Affichage canvas 01/ /mx:Canvas canvas02 : ?xml version=1.0 encoding=utf-8? mx:Canvas xmlns:mx=http://www.adobe.com/2006/mxml; width=400 height=400 mx:Label x=142 y=28 text=Affichage canvas 02/ /mx:Canvas mxml application file : ?xml version=1.0 encoding=utf-8? mx:Application xmlns:mx=http://www.adobe.com/2006/mxml; layout=absolute mx:Canvas id=canvas_father x=120 y=112 width=400 height=400 /mx:Canvas mx:Button x=197 y=24 label=Display canvas01 on canvas_father/ mx:Button x=197 y=54 label=Display canvas02 on canvas_father/ /mx:Application Thanks for your answer. Titipouns
[flexcoders] Re: Canvas
Hi Titipouns, It's me again. Here is my second solution to the question you posted: ?xml version=1.0 encoding=utf-8? mx:Application xmlns:mx=http://www.adobe.com/2006/mxml; xmlns:com=* layout=absolute mx:states mx:State name=addCanvas01 mx:AddChild position=lastChild mx:target com:Canvas01 x=120 y=112/ /mx:target /mx:AddChild /mx:State mx:State name=addCanvas02 mx:AddChild position=lastChild mx:target com:Canvas02 x=120 y=112/ /mx:target /mx:AddChild /mx:State /mx:states mx:Canvas id=canvas_father backgroundColor=0xff x=120 y=112 width=400 height=400 /mx:Canvas mx:Button x=197 y=24 label=Display canvas01 on canvas_father click=currentState='addCanvas01'/ mx:Button x=197 y=54 label=Display canvas02 on canvas_father click=currentState='addCanvas02'/ /mx:Application In this solution I use MXML states to define two states that will show the two Canvas components. The two Canvas components remain as they are. First, notice that I needed to add an additional namespace declaration to the Application tag. This allows me to use the two Canvas components. I use the prefix com and keep the two components in the same folder and the main application file. I then use the AddChild tag to add the Canvas component at the same location of the parent Canvas. The two buttons can then change the currentState upon the click event. I hope this helps. Theo http://therush.wordpress.com --- In flexcoders@yahoogroups.com, titipouns19 [EMAIL PROTECTED] wrote: Hello, I want to display the component canvas01 or the component canvas02 on a canvas object who is in a mxml application file. How can i do this ? canvas01 : ?xml version=1.0 encoding=utf-8? mx:Canvas xmlns:mx=http://www.adobe.com/2006/mxml; width=400 height=400 mx:Label x=142 y=28 text=Affichage canvas 01/ /mx:Canvas canvas02 : ?xml version=1.0 encoding=utf-8? mx:Canvas xmlns:mx=http://www.adobe.com/2006/mxml; width=400 height=400 mx:Label x=142 y=28 text=Affichage canvas 02/ /mx:Canvas mxml application file : ?xml version=1.0 encoding=utf-8? mx:Application xmlns:mx=http://www.adobe.com/2006/mxml; layout=absolute mx:Canvas id=canvas_father x=120 y=112 width=400 height=400 /mx:Canvas mx:Button x=197 y=24 label=Display canvas01 on canvas_father/ mx:Button x=197 y=54 label=Display canvas02 on canvas_father/ /mx:Application Thanks for your answer. Titipouns
Re: [flexcoders] Getting a Sprite into a Flex Container?
Hi, I got a class that extends Sprite that I want to put into a Flex DisplayObject container (Canvas or any similar custom made component). My question is: Is implementing the IUIComponent interface the only way to get this working or Are there any other ways around it? A SWFLoader is not what can use in this situation. Any hints would be appreciated. You can place them on mx:Image mx:Canvas id=myCanvas width=100% height=100% mx:Image id=spritelayer x=0 y=0 scaleContent=false autoLoad=true / /mx:Canvas then in as: spriteLayer.addChild(mysprite); etc. works for me br maciek
[flexcoders] Happy Eid Mubarak and New Year Wish
Hello In life we celebrate many events and today we have two great celebrations Eid and NEW YEAR together with such events we create our new hopes,ideas and we see success for coming days of life ,so wishing you greats event of life ,Happy New Year and Eid Mubarak with this pray May God brings happiness and success to your life Amen Thanks Sajid Hussain 92-321-2332623 __ Do You Yahoo!? Tired of spam? Yahoo! Mail has the best spam protection around http://mail.yahoo.com
[flexcoders] [Off-topic] Survey on Late/Cancelled Projects
Hi all, for my skoolin' I need to conduct a survey in support of a research paper (yes, how quaint). I'm doing my paper on why software projects are so often late, so this non-scientific survey is asking for your personal experience and perspective on the subject. It's only nine questions, should take no more than 2-3 minutes, and at the end you'll be rewarded with my undying gratitude. Heck, I'll even throw in a free copy of the research paper... on second thought, that sounds like more of a stick than a carrot. Anyway, if you so care to, the survey URL is: http://www.surveymonkey.com/s.asp?u=909693077280 Thanks, Merry insert your solstice-ish holiday here), and Happy New Year (whenever that is for you)! - Chris
Re: [flexcoders] Happy Eid Mubarak and New Year Wish
Good Message Sajid. May 2007 be a good year for all. Paul - Original Message - From: Sajid Hussain To: [EMAIL PROTECTED] Sent: Sunday, December 31, 2006 10:26 PM Subject: [flexcoders] Happy Eid Mubarak and New Year Wish Hello In life we celebrate many events and today we have two great celebrations Eid and NEW YEAR together with such events we create our new hopes,ideas and we see success for coming days of life ,so wishing you greats event of life ,Happy New Year and Eid Mubarak with this pray May God brings happiness and success to your life Amen Thanks Sajid Hussain 92-321-2332623 __ Do You Yahoo!? Tired of spam? Yahoo! Mail has the best spam protection around http://mail.yahoo.com
Re: [flexcoders] Getting a Sprite into a Flex Container?
Hey Sascha,
I hope this is what you were looking for.
I have a class which extends Sprite as below:
package {
public class myShape extends Sprite {
.
.
.
.
.
}
}
Now I have my owns custom component class file which I have added as follows:
First in the Application tag of your mxml file, mention a additional attribute
as 'xmlns:greet=com.*'. Here refer to the package where your custom component
class is.
Now use following to add the component to the Flex mxml file:
greet:test id=apiref /
Here 'greet' is the xmlns which we added in the application tag and 'test'
is my custom component class. You have to be careful to extend your custom
component class with the UIComponent class like:
package com {
//import myShape class if not in same package.
public class test extends UIComponent {
..
public function test() {
var shapeObj:myShape = new myShape();
addChild(shapeObj);
}
.
}
}
Now in the test class you can add the earlier Sprite extended class by creating
its object as above.
This should solve your purpose. Now the above mentioned test class can extend
any of the Classes like Canvas, or any container class. But UIComponent
happens to be the base class to all the container classes n so UIComponent
could be best opted choice.
Regards,
Amol.
- Original Message
From: Sascha [EMAIL PROTECTED]
To: flexcoders@yahoogroups.com
Sent: Saturday, December 30, 2006 3:40:33 PM
Subject: [flexcoders] Getting a Sprite into a Flex Container?
Hi,
I got a class that extends Sprite that I want to put into a Flex
DisplayObject container (Canvas or any similar custom made component). My
question is:
Is implementing the IUIComponent interface the only way to get this working
or
Are there any other ways around it? A SWFLoader is not what can use in this
situation. Any hints would be appreciated.
Thanks in advance,
Sascha
!--
#ygrp-mlmsg {font-size:13px;font-family:arial,helvetica,clean,sans-serif;}
#ygrp-mlmsg table {font-size:inherit;font:100%;}
#ygrp-mlmsg select, input, textarea {font:99% arial,helvetica,clean,sans-serif;}
#ygrp-mlmsg pre, code {font:115% monospace;}
#ygrp-mlmsg * {line-height:1.22em;}
#ygrp-text{
font-family:Georgia;
}
#ygrp-text p{
margin:0 0 1em 0;
}
#ygrp-tpmsgs{
font-family:Arial;
clear:both;
}
#ygrp-vitnav{
padding-top:10px;
font-family:Verdana;
font-size:77%;
margin:0;
}
#ygrp-vitnav a{
padding:0 1px;
}
#ygrp-actbar{
clear:both;
margin:25px 0;
white-space:nowrap;
color:#666;
text-align:right;
}
#ygrp-actbar .left{
float:left;
white-space:nowrap;
}
.bld{font-weight:bold;}
#ygrp-grft{
font-family:Verdana;
font-size:77%;
padding:15px 0;
}
#ygrp-ft{
font-family:verdana;
font-size:77%;
border-top:1px solid #666;
padding:5px 0;
}
#ygrp-mlmsg #logo{
padding-bottom:10px;
}
#ygrp-vital{
background-color:#e0ecee;
margin-bottom:20px;
padding:2px 0 8px 8px;
}
#ygrp-vital #vithd{
font-size:77%;
font-family:Verdana;
font-weight:bold;
color:#333;
text-transform:uppercase;
}
#ygrp-vital ul{
padding:0;
margin:2px 0;
}
#ygrp-vital ul li{
list-style-type:none;
clear:both;
border:1px solid #e0ecee;
}
#ygrp-vital ul li .ct{
font-weight:bold;
color:#ff7900;
float:right;
width:2em;
text-align:right;
padding-right:.5em;
}
#ygrp-vital ul li .cat{
font-weight:bold;
}
#ygrp-vital a {
text-decoration:none;
}
#ygrp-vital a:hover{
text-decoration:underline;
}
#ygrp-sponsor #hd{
color:#999;
font-size:77%;
}
#ygrp-sponsor #ov{
padding:6px 13px;
background-color:#e0ecee;
margin-bottom:20px;
}
#ygrp-sponsor #ov ul{
padding:0 0 0 8px;
margin:0;
}
#ygrp-sponsor #ov li{
list-style-type:square;
padding:6px 0;
font-size:77%;
}
#ygrp-sponsor #ov li a{
text-decoration:none;
font-size:130%;
}
#ygrp-sponsor #nc {
background-color:#eee;
margin-bottom:20px;
padding:0 8px;
}
#ygrp-sponsor .ad{
padding:8px 0;
}
#ygrp-sponsor .ad #hd1{
font-family:Arial;
font-weight:bold;
color:#628c2a;
font-size:100%;
line-height:122%;
}
#ygrp-sponsor .ad a{
text-decoration:none;
}
#ygrp-sponsor .ad a:hover{
text-decoration:underline;
}
#ygrp-sponsor .ad p{
margin:0;
}
o {font-size:0;}
.MsoNormal {
margin:0 0 0 0;
}
#ygrp-text tt{
font-size:120%;
}
blockquote{margin:0 0 0 4px;}
.replbq {margin:4;}
--
__
Do You Yahoo!?
Tired of spam? Yahoo! Mail has the best spam protection around
http://mail.yahoo.com
