I have something cool in mind for a new personal project, more to update my skills really, but need a push in the right direction. It's a bit difficult for me to explain so bear with me.
Users can basically color the fill of a piece of text from left to right. They can do so, by dragging from the left to right. To achieve this I was thinking of [HTML5's text/image mask][1]. Users would then basically drag the text mask from left to right, and it would appear as they "colored" in the piece of text..
Now here is the difficult part; I want to record this drag and to allow users to replay how it was "colored" in by the user. So how fast/slow at different positions of the text.
Please let me know if my explanation unclear, otherwise I'd love to hear your suggestion/hint.
Thanks again!
Seems like no one have been on this road, where the fill of a text is animated through a drag. The closest I got was this: http://jsbin.com/ubaxi/ An animation of the fill with the canvas tag. Not very useful for my case, but still worth mentioning.
Also interesting, and maybe the way to go: Using jQuery animate on canvas objects
Related
I'm pretty new to SVG and how to work with them. I am not asking you for answer code, what I am asking is for some guide on maybe some plugin, maybe an article or some advice on how do I go about animating this SVG the way I wish to.
Problem:
I want to animate the picture below of the Sun, I'll be creating a vector graphic of this image obviously but what I want is these cuts in the bottom part of sun to animate and go from top to bottom revealing the background and second sun behind the main sun.
I want to do this inside a webpage so I need help regarding that.
Like I am not able to figure out how would I go about the whole process of making these cuts going down. Any help would be highly appreciated.
I would try https://rive.app/
As far as the how, I would create a short infinite loop. The horizontal bars would probably need to be their own shapes with some kind of masking effect on them to knock out the circle. You'd have to tween them to move up on the Y axis and let the height shrink to nothing as it moves up. The animation would probably only be 250-750ms. Let me know if that works!
So basically i would like to make image bounding boxes expand when clicked on. I don't want the images to expand but rather the bounding box sort of like in adobe indesign(if you are familiar with it) when you double click an image and you can move the image within the frame. Is this even possible? I recently got into coding and would like to know how i would go about coding this. Can this all be done through css or would i need to use javascript? I illustrated the concept to help further explain what I'm talking about. Please excuse me if i am incorrectly using terminology.
i already have this sprites on my computer (taken from internet), but how do i make it faces top left? because this sprites do not have character that faces topleft.. My question is, how do i do that? i want use this sprites character for my game, 2.5D..
Thanks.
I want it to faced like this (topleft):
I appreciate your answer. Thanks.
You're wanting to make the sprite face diagonally, somewhat up, and somewhat to the left? (To me, it looks like the chicken is facing to the right, but it's hard for me to really make out individual features on the chicken.)
In that case, you probably really need to draw a new graphic that is based on the others. Hire someone else, if you have to. Stuff that's easy to do in a typical programming language would have to do more with moving graphics around (translation), flipping them, rotating them, stretching them, that kind of thing. Those are the four basic geometric transformations in a programming language, and simply changing the alpha of the whole thing or something like that should be easy as well. But it's not easy at all to programmatically create something that looks like a brand new graphic, even if it is sort of similar to some graphics you already you have.
So I'm incredibly new to AS3, and barely know my way around.
I built a simple colouring book game, essentially changing some of the graphics of a tutorial, and replacing numbers and sizes to fit what I wanted to achieve. I then built a menu screen in a seperate scene and linked the two with code snippets and buttons to go back and forth.
The colour pickers are generated when the game is ran, however an issue I seem to be facing is that when I go back to my main menu, they are still there.
Can someone point me in the right direction as to how I can fix this? I'm sure it's a rather simple fix. I can provide the code from the tutorial if needed
I think you're right you need removechild this color to remove one color from stage... Maybe you need removechildren to remove all color, whin are on stage... Try this two way
I have an idea that I would like your input on how it can be achieved. Essentially, I would like to have a page where page elements would be responsive and animated. Let me give you an example - let's say I point my mouse over a button or an image and it would play an animation like http://hakim.se/experiments/html5/magnetic/02/ around it while mouse is pointing over it, fading away if I point away from it.
Alternatively, it would be cool to have something like http://hakim.se/experiments/html5/trail/03/ flowing from current mouse position to the element that I would like to draw user's attention to. I have little idea on how this can be implemented, thinking that creating a overlay and using element's coordinates would be most appropriate but not 100% it can be done this way. Do you have any recommendations or suggestions on best practices, existing libraries / frameworks that may assist me with this?
Thanks!