I have two shapes in a skin:
1.Circle
s:Ellipse width="20" height="20" includeIn="collapsed">
s:fill>
s:SolidColor color="#BBBBBB"/>
/s:fill>
/s:Ellipse>
2.Rectangle
s:Rect radiusX="10" radiusY="10" width="80" height="20" includeIn="expanded">
s:stroke>
s:SolidColorStroke color="0" weight="1"/>
/s:stroke>
s:fill>
s:SolidColor color="#00FF00"/>
/s:fill>
/s:Rect>
I want to have a shape tween. This kind of shape tween that is possible in Flash IDE. Circle needs to transform into rectangle smoothly. Is it possible in mxml ?
Only the Flash IDE can do it using the Timeline. You can't create it using code (unless you draw it manually), hence Flex doesn't support this feature.
However, I did find a Tweening library called Tweensy that says can do Vector Shape Tweens. It's in beta right now and I've never tried it, but it's worth a shot.
Related
I need to have a group box in flex 3 - simple border with a heading at the top but the heading at the top should not have any border line through it.
I searched on the Net and the closest that I could get with source is
http://keg.cs.uvic.ca/flexdevtips/titledborder/srcview/
But the problem with this is that I can’t view in design mode what is on the group box. Does anyone know how to fix this?
Then I decided to go with canvases and an input box
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:local="*">
<mx:TextInput
text="This should be my label"
x="124" y="72"
width="166" height="32"
borderStyle="solid"
fontWeight="bold"
color="#003366" backgroundColor="#D81010"/>
<mx:Canvas x="107" y="88" width="263" height="200" borderStyle="solid" label="Testst">
</mx:Canvas>
</mx:Application>
But I can't seem to get the Textinput to be ontop of the canvas. There is a line through the box as in the below picture
Does anyone know how to resolve this or have a better idea?
thanks
What you are looking for is a component equivalent to "fieldset" in HTML. It would be easier to use create component for better styling control. For Flex 2/3, you may use jwopitz-lib; but if you could use Flex 4 or above, try the ShinyLib component (specifically the FieldSet class and FieldSet skin). It would be easier if you could migrate the application to Flex 4 or the latest Flex, you would be exposed to a lot more components.
To get a custom component to work in design mode, you need to compile the code into a SWC library. Then reference the SWC library in your application project. I've never bothered to do this, I imagine you may get mixed results. I haven't bothered w/design mode in over 5 years :)
The reason the "window" component (in the URL that you linked to in the question) works in design mode is that it extends the Flex component TitleWindow. Since it extends an existing Flex component, I am assuming design mode knows how to render it.
My company has only two flex pdf libraries available, AlivePDF and PurePDF.
I am having trouble finding very good documentation related to what I need to do so I hope to get some feedback from people who have used these libs.
The primary thing I need to do is paste a group of DisplayObjects into a pdf, with decent quality of the image. I had used org.alivepdf.pdf.PDF.addImage(..) function before but the image quality was very poor and somehow the process cropped off parts of the image, making it unusable.
Here is an example of something that might need to be pasted into a pdf:
<s:HGroup id="imageGroup">
<s:Label text="Chart Title" />
<mx:Legend dataProvider="myChart" />
<mx:LineChart id="myChart">
<!-- do chart stuff here -->
</mx:LineChart>
</s:HGroup>
PDF.addImage() generates low resolution graphics. For higher quality, use this instead:
take a snapshot of the image group using ImageSnapshot.captureImage(), setting the dpi to 300
add the resulting bytearray to the PDF using addImageStream()
I have used AlivePDF for a while. There are a few quirks and the documentation is sparse, but this is workable and the results are great.
I am still struggling with transforming my app build in Java/Eclipse to Flex/Actionscript with Flashbuilder.
Now I can not find how I should implement an image to cover the hole screen.
In my current app I used relative layout and
<ImageView
android:id="#+id/img"
android:scaleType="centerCrop"
android:layout_width="fill_parent"
android:layout_height="0dip"
android:layout_above="#id/bottom"
android:layout_below="#id/rubrik"
/>
but I do not find how I shall define this in Flex views.
Check out this SO question.
You need to modify the scaleMode property of the Image spark tag (as documented here).
<s:Image scaleMode="BitmapScaleMode.STRETCH" x="0" y="0" height="100%" width="100%" source="#Embed('assets/example.jpg')"/>
You can play with either BitmapScaleMode.STRETCH, BitmapScaleMode.ZOOM, or BitmapScaleMode.LETTERBOX.
i have a mobile application that i am creating in Adobe Flex (Flash Builder 4), and i am trying to create a zoom function. The one i have works, but the point is to be able to more easily read words that are in the image (the images are .jpg files). The images are 2550x3300 originally, but as soon as you zoom, the image quality reduces drastically, and nothing is readable.
My code for the zoom function is included below.
protected function onZoom(e:TransformGestureEvent, img:Image):void
{
img.transformAround(new Vector3D(e.localX, e.localY, 0), new Vector3D(img.scaleX*e.scaleX, img.scaleY*e.scaleY, 0));
}
and this is the code for the image object:
<s:Image id="titlepage" includeIn="title_page" x="0" y="0" width="320" height="415"
gesturePan="onPan(event, titlepage)"
gestureSwipe="onSwipe(event)"
gestureZoom="onZoom(event, titlepage)"
source="#Embed('assets/myImage.jpg')"/>
Image quality would be improved by setting smooth to true for anti-aliasing.
<s:Image smooth="true" />
There are many ways to handle registration issues - you might be interested in Yahoo Astra utils DynamicRegistration class.
Maybe something like this?
<fx:Script>
<![CDATA[
import com.yahoo.astra.utils.DynamicRegistration;
protected function image_gestureZoomHandler(event:TransformGestureEvent):void
{
DynamicRegistration.scale(image,
new Point(event.localX, event.localY),
image.scaleX *= event.scaleX,
image.scaleY *= event.scaleY);
}
]]>
</fx:Script>
<s:Image id="image"
smooth="true"
gestureZoom="image_gestureZoomHandler(event)" />
I'm not positive on this, but I think the 'transform' functions creates a bitmap out of your Image which is why you're losing quality. Try using the 'smoothing' attribute on your image.
From there, it's simply scaling and moving your image incrementally. However, what I'm not sure about is if the localX/Y property is from the original place of touch, or of the new position on the container (ie. if you're pinch/zooming from the middle and it scales, will the point still be on the middle or slightly top left).
I'll try to test this out on my phone and see what I come up with.
Can anyone tell me how can we create a wobbling effect using flex 3?
I need something like the effect which is show in ubuntu when we see an alert or move a folder.
Thank you.
Not sure if there is anything specifically built in Flex to handle the "wobble" effect specifically, but you can combine the Flex Move and bounce effects to create a kind of "wobble":
<?xml version="1.0"?>
<fx:Declarations>
<s:Bounce id="bounceEasing"/>
<s:Elastic id="elasticEasing"/>
<s:Move id="moveRight"
target="{myImage}"
xBy="500"
duration="2000"
easer="{elasticEasing}"/>
<s:Move id="moveLeft"
target="{myImage}"
xBy="-500"
duration="2000"
easer="{bounceEasing}"/>
</fx:Declarations>
<s:Image id="myImage"
source="#Embed(source='assets/logo.jpg')"/>
<s:Button label="Move Right"
x="0" y="100"
click="moveRight.end();moveRight.play();"/>
<s:Button label="Move Left"
x="0" y="125"
click="moveLeft.end();moveLeft.play();"/>
Customize the code above to make smaller movements and link the left and right moves, and you have a wobble. You might also decide to add an event listener for the MouseEvent.ROLL_OVER to play the wobble effect when the mouse rolls over the component.