How to Stretch an image by dragging its sides in Adobe flex? - apache-flex

I want to develop a hair style app in adobe flex. In that ,the wigs should be placed in right position.
So i want to adjust the wigs in x and y directions.
Does anybody know how to stretch an image in x and y direction?
App Reference:
https://play.google.com/store/apps/details?id=air.MagicMirrorFree&feature=search_result
Thanks in advance

Take a look at the very good Transform Tool. I've used it myself and can highly recommend it.

you can put re-size handlers on pretty much anything, for example like this:
http://flexdevtips.blogspot.com/2009/03/resizable-containers.html
Hope that helps

If you want to develop it by yourself, you may have a look on the transformation matrix class. There is a very good tutorial about this:
http://www.senocular.com/flash/tutorials/transformmatrix/
Otherwise, you may use existing library:
as Richie_W mention, Transform Tool is a good one, the following is Transform Tool Developer Guide:
http://www.senocular.com/flash/tutorials/transformtool/
The following link is Transform Tool using in flex:
http://www.sephiroth.it/weblog/archives/2007/07/transformtool_modification.php
TransformManager is also another one:http://www.greensock.com/transformmanageras3/
but this is a commercial one.

Related

How to combine texts from left to right using GSAP

I just want to ask how did the developer do the animation of his name combining together from right to left? I just want to implement it myself to enhance my css skills.
Seems like he used GSAP ScrollTrigger here if I'm not mistaken.
https://www.danielspatzek.com/degenesis
Here is an incomplete jsFiddle that will hopefully point you in the right direction:
http://jsfiddle.net/86wkz3qu/19/
This example doesn't use scrollTrigger but I would highly recommend using it for something like this.
NOTE: Make sure the result display window is 870px for this example to get this sort of thing to scale I would try using vw instead of %
Sorry I can't spend more time on this- but good luck! :)

Parts of image behave as div HTML CSS

I would like to design some sort of a map, of a country, in which every state behaves as a different 'div'. Then I would link different pages to each of the states. But the borders of the state are not square/rectangle/any_regular_shape. The borders are complex shapes. How do I go about doing this?
Even though I break them in Photoshop, how do I recombine them perfectly in CSS?
Thank you!
You want something like this map, you should go for SVG and maybe RaphaelJS is a good start.
Try using an HTML image map:
http://www.htmlgoodies.com/tutorials/image_maps/article.php/3479741
Lots of good tutorials out there.
Consider using D3.js Geo Projections. This post written by one of the main developers behind D3 should be a good start.

creating a round list in CSS (for a round menubar)

I am really hoping someone can help me. I am trying to create a round menubar in CSS and I've searched and searched for solutions but have found nothing. I know how to create round areas (by setting the radius), and I know how to create a simple straight line menu using <ul> & <li> but, as said, I want to create a round one.
there is a picture of something alike what I'd love to get working:
If anyone could help me on this I'd be so thoroughly grateful.
Closest things I know of are these:
http://www.cssplay.co.uk/menus/cssplay-round-and-round.html
http://codepen.io/tgrant54/pen/lBHwK
Is that what you're after?
This menu looks almost like Path's Button.
You can find the link to Path's Button here.
You just need to modify it a bit so the menu displayed in full sphere.
This isn't something you really want to be doing in pure CSS.
You may be able to make circle shapes with border-radius, but you're not actually making a circular object -- it's still a regular box shape as far as the browser is concerned, just with the corners rounded off. This has absolutely no bearing at all on your ability to do anything else to do with circles or curves in CSS.
Yes, it's possible to do something along the lines you're after, by putting every character into its own element, and styling each of them with a specific position, but that's going to be painful, inflexible, and difficult to work with. If you really want to do this, there's a code generator you could try out here, but I'd say you're barking up the wrong tree.
If you want to do this kind of thing properly, what you really need to be thinking about is doing it in graphical format, using either Canvas or SVG, plus plenty of javascript code.
I'd suggest looking into a JS library like Raphael for this; there are people who have tried similar things already using Raphael, which may help you -- see here, for example: Radial Pie Menu With Raphael JS
Hope that helps.

Clearing pixels of font path in HTML <canvas>

I would like to know how I can create a colored canvas but with transparent parts with the font. I want the font to create a hole in this canvas. Is this possible and how ? My goal is to create the impression that an image is embbed in a font...
Thank you :)
<canvas> offers something called composite operations for cut off and such effects. I believe the operation you want is called destination out:
https://developer.mozilla.org/samples/canvas-tutorial/6_1_canvas_composite.html
And here is some more technical details in the spec:
http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#compositing
I cannot provide you an actual working code (your use case is pretty rare), but you should be able find a globalComposite tutorials and with little playing with their code you can find out how to apply the operation for your case.

Flex Drag and resize

I need to draw Line, Circle, and rectangle by mouse drag on canvas and then i need to to move and resize the drawn shapes.
How i can perform this in flex as i am new on this platform.
Please suggest me the method or refer any example with source to make it understand to me.
Please Help.
Thanks in Advance.
There is no such native feature in Flex. But, there are a couple of options, commercial and not:
http://www.rogue-development.com/objectHandles.html (free)
http://www.flashcomguru.com/components/flex_whiteboard/whiteboard_demo/ (payed)
You can do it by hand, if you wish, it's not very hard. I advice you to use Degrafa (http://degrafa.org/) for the actual drawing since it is way easier than native drawing API and it is opensource.

Resources