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.
Related
I have a component:
<mx:List width="100%" height="100%" />
and that works out for nearly all uses of this component, except one. I want to have height remain default in one usage.
According to Adobe's manual, the default is 0, but
<mystuff:myList height="0" />
doesn't work and
<mystuff:myList height="0%" />
is an improvement, but still not the same as having a <mx:List /> w/no height specified at all.
I'm using the Flex 3.5 SDK.
I'm not quite sure what you want to achieve by using the "default" sizing, but you could try setting the height to NaN.
<mystuff:myList height="NaN" />
I've been doing a tutorial on Treehouse on responsive web design. At this point in the tutorial we are asked to convert an image to an svg so it can scale fully responsively.
Rather than use Adobe Illustrator, which I don't own, I used the freeware Inkscape. Once the image is converted we are asked to open the image in a text editor and remove the height and width requirements from the svg declaration and add the object selector to our max width rule to our style css:
img, object {
max-width: 100%;
}
However, after removing height and width the image is not responsive but instead oddly clipped like so:
Does anyone know what error I have made? Or what I should have removed?
Sorry if the question has been asked before, I can't find it.
edit1, the code:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
id="svg2985"
version="1.1"
inkscape:version="0.48.4 r9939"
width="319"
height="177"
sodipodi:docname="logo.gif">
<metadata
id="metadata2991">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<defs
id="defs2989" />
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="640"
inkscape:window-height="480"
id="namedview2987"
showgrid="false"
inkscape:zoom="0.94984326"
inkscape:cx="159.5"
inkscape:cy="88.5"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="0"
inkscape:current-layer="svg2985" />
<image
width="319"
height="177"
xlink:href="
It is the "height" and "width" in the first SVG tag that I have removed.
Inkscape now provides an option to enable viewbox if you save the file as "optimized svg".
Very handy!
The fact that you have just put a raster image in your SVG isn't the actual reason for what you are seeing.
All it means is that when the scaling of the SVG works properly (see below), you won't see the benefits of using vector artwork. When you scale up vector artwork, you don't get the "jaggies" (blockiness) that you get when scaling up bitmaps. If your SVG just contains a bitmap, it is pretty much the same as just using the bitmap.
The actual problem here is that Inkscape doesn't include a viewBox attribute in the SVGs it saves.
When you remove the "width" and "height" attributes, they default to "100%". Which tells the browser to scale the SVG to fit the parent container. Unfortunately for this scaling to work, the browser needs to know what the dimensions of the SVG content are. That is what the viewBox attribute is for.
Illustrator adds the viewBox attribute, Inkscape does not.
To see what I mean, add the following to your <svg> tag after removing width and height:
viewBox="0 0 319 177"
You should find that your image is no longer clipped, and will resize when the page is resized.
As you can read it here ( and for completing qed's answer):
Select the object(s) to export
Open the document properties window ( Ctrl+Shift+D)
Select "Resize page to drawing or selection"
File > Save As Copy...
Select Optimized SVG as the format
You've done something wrong if you're "converting" raster to vector graphics. Not having used Inkscape, I can't say, but at least according to Wikipedia it's not capable of performing conversions.
You haven't converted anything, your image is in Graphics Interchange Format!
To see what a "real" SVG file looks like, open up the example from the wiki page.
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.
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.
I'm pretty new in Flex development. Now I'm learning layouts in Flex. I try to make the following layout.
alt text http://get2know.it/wp-content/uploads/2010/04/2010-04-23_232857.png
The red arrow means when enlarge the window, the red arrow widget will become large too. Can anyone implement this layout in Flex? Thanks in advance.
Here goes Yousui good luck:
<s:layout>
<s:BasicLayout/>
</s:layout>
<s:Label text="Name:" left="9.8" top="16.4" width="38" height="12"/>
<s:Label text="Description:" left="9.75" top="45.85"/>
<s:Label text="Pattern:" left="9.5" top="76"/>
<s:TextInput left="85" top="10" right="353"/>
<s:TextInput left="85.5" top="40" right="10.5"/>
<s:TextArea left="86" top="70" right="7" bottom="34"/>
<s:Button label="Insert Variable" bottom="6" left="86"/>
<s:Label text="Context:" width="45" top="16" right="300"/>
<s:ComboBox width="150" top="10" right="143"/>
<s:CheckBox label="Automatically insert" top="11" right="10.700012"/>
<s:Button label="Cancel" right="7" bottom="6.450012"/>
<s:Button label="OK" right="84.599976" bottom="6.799988"/>
If you are using Flash Builder Mac or Win version you have the Design view available (Linux Flash Builder doesn't have), this design would be easy to do.
But i guess that you probably aren't used to the way that Flash Builder handles control positioning, if thats the case:
Paste this code in the MXML file you have
Go to Design view and select one of these controls.
You will see in the Properties Panel in the Size and Position section, a sub section named Constrains, there is were you can lock (right, left, top and bottom) the corners of your control in a way that you would get the desired effect that you needed.
Case your Properties panel isn't visible. Go to Window > Show View > Properties.
Hope this helps.
EDIT:
If you have the MinWidth and MinHeight properties specified in your Application tag, beware that when shrinking your Flash App, the layout will adjust your layout to a minimum specified in those properties.
You could do something like this:
<VBox>
<HBox>
... // Name, context...
</HBox>
<HBox>
... // Description...
</HBox>
<HBox>
<Label text="Pattern: "/>
<VBox>
... // text and insert variable
</VBox>
</HBox>
</VBox>
For your scaling, just set your expanding controls to have width and/or heights of "100%" in the MXML.