Is it possible to animate text/object with 'end' in after effects just like you do with strokes? How can I achieve this? See the video and you'll understand what I wan't to achieve.
YouTube - Guy showing the 'end' on a stroke
Cheers,
Tommie
I think I see what you are asking. You want the shapes of a text layer (the actual lines of each character) to actually build on, right? Can't be done like that. Even if you use text and convert to shapes, you are looking at a world of pain because of the way letters are built by most fonts (for one thing, the shapes are actually filled, not stroked -- strokes are outlines).
The only way I would do this is by using the Element 3D plugin in After Effects and Cheetah3D (or whatever 3D tool you want to use). In Cheetah, I'd create the text shapes as extruded 3D text. Then I'd use the "Build" modifier ("Linear" setting) to progressively build the text. Then I'd export that out as an OBJ sequence (script for this is available on cheetah forum site -- I wrote it) and bring that sequence into Element3D and work with it that way. That will work. And as far as I know, that's the only way with a decent amount of control. Wedding video? Just curious. :-)
Related
Turns out I’m working with the Autodesk Forge viewer and Three.js, trying to render 2D text that can be interacted with (specifically select, rotate, and move).
To do this I am working with meshes (using MeshBasicMaterial, Mesh and TextGeometry) but it turns out that the text does not look perfectly sharp, it presents aliasing and I found that according to the API reference, the antialiasing is not applicable to 2d.
Here are some examples of the problem, as you can see, the more I move away from the plane, the worse the text looks (and even up close it doesn't look perfect):
I have tried to make a test representing the text with a Sprite (despite the fact that it would mean having to change the entire implementation already made with meshes of other functionalities) but apart from the fact that I cannot see it, I have seen example images and they do not appear either well: aliasing is visible from a distance and it looks really blurry up close. Here some examples:
Is there a way to correct this problem or is this the most I can get in 2D? I've tried searching for information on this but can't find anything helpful. And what has puzzled me the most has been realizing that antialiasing was not applicable in the case of 2d, like making it clear that nothing can be done to fix it.
I would be very grateful if you could solve my doubts, thank you very much in advance for your help.
An easier alternative, is to just use a higher pixel ratio for the renderer...
window.devicePixelRatio=2;
viewer.resize();
For example, using the custom geometry text, from Joao's demo, you can see the same aliasing issue at DPR=0.5 and DPR=1.0 ...
https://joaomartins-forge.github.io/textgeometry-sample/
But when I set the DPR=2.0, the text looks clean. The trade off is rendering performance, but your 2D drawings may be simple enough that it won't matter. You can use a 'mouse up' camera settle trick, to switch between DPR of 1 and 2, if you want a better UX experience.
There are a few ways to solve this aliasing issue for 2D (and 3D text).
The way I would recommend for your use case, is to use DIV elements (THREE.CSS3DRenderer), instead of text converted into three.js tessellated triangle geometry, as shown in this blog post:
https://forge.autodesk.com/blog/how-do-you-add-labels-forge-viewer
You can find out more information about THREE.CSS3DRenderer here:
https://threejs.org/docs/#examples/en/renderers/CSS3DRenderer
and an Example here: https://threejs.org/examples/#css3d_periodictable
Using CSS3DRenderer instead of CSS2DRenderer, means you will get the correct scaling (and rotation) of the div element as you zoom into your 2D drawing and the mathematics inside the calculation for the matrix transform has less edge-cases.
Once you are using DIV elements for your text, you will notice that the text is sharper and has no aliasing issues. That's because it is not being rasterized by the webGL pipeline, but by the SKIA library used by chrome/firefox/opera/etc for rasterizing text.
There is one final option, that uses signed-distance fields, but it's probably overkill for what you need.
Let me know if you want some example code.
In CSS or SVG, is it possible to warp text so it looks like it is written on a sphere or looked at using a magnifier?
Something similar to this
I have been look over the internet but could not find any guides.
All of the comments telling that it can't be done are wrong. YES IT CAN BE DONE. Well, it's not easy but possible. Let's start from the beginning.
1. Don't even think about writing the code. You need a vector graphics software. I used Corel Draw to this project.
2. You need to create all text, apply all transformation, style each letter, add shadow, background or whatever you need.
This is a simple project I created. It's a fast draft, but you can style the text exactly as on your photo. You can easily make all letters in the middle bigger than the others.
(sorry it's not in English!)
3. Force Corel Draw or any other program to save svg with fonts not curves.
4. I analyzed the code and I see that each letter is saved separetly as a glyph:
<glyph horiz-adv-x="222" unicode="l"><path d="m63.876 0.23623l-2.504 715.49 87.971 0.33072 2.504-715.49-87.971-0.33072z"/></glyph>
Some other letters are saved as text and transformations are applied:
<text class="fil1 fnt0" x="1045" y="1269"><tspan rotate="335">L</tspan></text>
5. FULL CODE looks like this. It's long. I minified it a little bit.
FIDDLE: https://jsfiddle.net/ubw1rdq7/
SOLUTION 2 - MUCH EASIER
It's not fun if you have each letter saved separetly because the file may be huge. You can save your text as a curve and have only one path. This will behave like an image but you can inline the code into your html.
Here is a fiddle:
https://jsfiddle.net/wyfhfjo4/
In both cases all code is over 30kb in size and I made only simple transformations. i hope I gave you some idea how you can achieve desired effect. 99% of the project is to work in vector editing software like Corel Draw and apply all transformation to the text.
For any 3d transformation it's better to transform the text to curves as it will definitely be easier. As an output you will get a path not glyphs.
It is possible to do this using an feDisplacementMap in SVG, but this is currently bugged in current Chrome, so not very useful to you.
I'm developing a BlackBerry 10 mobile application using the Momentics IDE (native SDK).
I have a Label which has fixed width. If a Text does not fit in this Label, I want it to be ellipsis (elliding the text with the conventional "..." at the end) in place of a fade effect (just sort of "ghosts" into oblivion) like the Cascades designers have chosen to be in such case like presented in the image below.
Can any one help me on this ?
Since Peter doesn't seem to know how to do this in a straight forward way, the only option left would seem to be the complicated way. You may, of course, create your own control and manage the text rendering in the way you would like using an ellipsis instead of the fade. That would seem to be a great deal of work for what in the end will really only result in your program being unconventional on the platform.
Edit:
Since you think it is worth a bounty I will add the following thought.
Using the ellipsis method, instead of the fade method, may impose a performance penalty on your application. Elliding text requires the computation of how many characters may be displayed int the available area and still leave room for the ellipsis. This is not a trivial mater with variable width type faces or different character sets. The fade, on the other hand, is a simple transparency operation. Since UI graphics operations in Cascades are all done in hardware the fade is quite efficient and independent of the size of the string, text area, type face, etc.
Which version of QML? QML element Text has elide property and this is what you want.
We are desperate to convert an image so that it can be used as an image map. Everything I have tried, really doesnt cut the mustard. I havent the experience to work at very high resolutions.. plus I dont know the terminology and neither have the skills or resources to invest in learning how to do this, knowing many others on here and the internet have far greater experience.
I have downloaded and played with Inkscape, but really am going round in circles...
So thought I would ask here.
What I am after is similar to Raphael Australia Map or David Lynchs, http://davidlynch.org/js/maphilight/docs/demo_usa.html
No frills, no effects, just change the state color of the map on hover and retain that event on click.
Here is what we have ...
What we have is a MAP like this.
We lost the original file, which was pure gray. I have this left :(
Anyway, we want it so that each state ( including the territory ACT ) not indicated on the above map, represented in pink #ec008c . On hover
Map needs to be FLAWLESS !! Also require that any imagery must be png and transparent bg.
Must remain exact size as above. Must be extremely accurate on svg coordinates, and optionally would like the STATE text to appear , like the QLD is shown on the image above, but not wholly necessary.
Can anyone point me in the right direction please.
Have you tried Path > Trace Bitmap in Inkscape? If you play with the settings you should be able to get a decent vectorised image.
Vectorised:
EPS:
http://dl.dropbox.com/u/13402937/Australia.eps
Adobe Illustrator:
http://dl.dropbox.com/u/13402937/Australia.ai
try to use this tool, its the potrace part to trace pixelpictures in inkscape with many features. potrace traces pictures from commandline
I have obtained extraordinary results with https://vectormagic.com/ , which can be tried online.
A customer has asked us to a add a feature to his website allowing visitors to colour in panels in a simple line drawing.
The website visitor will have a limited palette to choose from and will select a colour and click in a shape within the line drawing to colour it in as in:
There will only be four or five of these line drawings. The drawings themselves are not required to be interactive or flexible, only the colouring.
The line drawings will be super simple and we don't need to save the visitor's selections although the visitor will want to print or email the result.
Simple simple stuff. Most of the time where you see this done on sophisticated websites I assume it's done with Flash.
But is Flash the only way to go? Or can it be done with JQuery/Javascript or Silverlight or something else? Our team's knowledge covers ASP.NET, HTML, CSS, Javascript. No experience of Flash.
If you have a finite number of line drawings, and a limited number of colours, you could just pre-generate every possible colour/section combination - isolate each area as a transparent GIF/PNG and composite them using position:absolute to create an "onion skin" / animation cel effect. Use some old-school HTML image-map code (or server-side parsing of the myimage.X / myimage.Y parameters, or jQuery) to work out where they clicked, identify the image section under the mouse click location, and replace that image only with the corresponding version in their selected colour.
You can't draw these kinds of shape without using canvas or SVG. And I am not sure about the support provided by browsers for these.
If you can go for canvas then you ca ntake a look at
Processing js library
or for SVG
Raphaël—JavaScript Library
There are only two ways i can think of atm:
Split the line drawings into the colourable elements and show each image absolutly positioned to merge the images into one on the website.
Use Javascript to load a pre-coloured image of that part with "onclick" (or generate a coloured version with asp/php/whatever server-side.
Not sure if it's possible to print absolute positioned elements cleanly.
Use flash, it's simple there so even without experience you should be able to do it in 1-2 workdays.
My guess is that you could use the new HTML 5 canvas element to achieve this goal in an open, standards compliant manner.
Note: canvas is a new feature and is only supported in recent browser releases (latest Safari, Firefox or Chrome for example).