I am trying to create an animation for lemon juice and baking soda experiment, and I was wondering how can I create a foaming effect such as the one shown in this image:
The idea I have in mind is to simply draw a foam in photoshop and then use motion tween to change the size. I was hoping I could find a better solution to this.
I have something somewhat similar that you can probably use as a springboard for doing your own thing.
http://www.shaunhusain.com/SteamEffect/
http://www.shaunhusain.com/SteamEffect/srcview/index.html
Currently I'm just drawing some circles with this and then setting a blur on them (not very efficient I know but it served the purposed as I didn't need it to create a bajillion particles to still be effective as "steam" which was the intended goal). You could swap out the shapes/filter I'm using for your own drawing and use the same basic structure.
EDIT
Perhaps this requires at least a little explanation:
Basically you'd want to look at the two files SteamCanvas.mxml and BitOfSteam.as. To be honest I have no idea why I decided to write SteamCanvas as an mxml file. I chose to use Canvas as the base class so I could just wrap it around any other component as a container and be able to detect mouse clicks anywhere within a region. If this is being used in a pure Flash environment, that is one not using the Flex libraries (or mxmlc compiler) it could be changed to extend from Sprite and be written purely in AS3, essentially just the creationComplete code should be moved to the constructor. How this works is the SteamCanvas is a wrapper for whatever controls or components you want to put in it (just like a normal canvas uses absolute positioning, but could have containers that define layout nested within it if need be). The SteamCanvas sets up a timer and if the mouse is down when the timer ticks, it creates instances of BitOfSteam and sets the properties for the steam based on the SteamCanvases own currently set properties. In the project you'll also see a SteamEffectTest.mxml which is just the file you see running that has the sliders on it to change the properties of the SteamCanvas, I used these to come up with what I thought were good values to make somewhat realistic steam. If I remember I'll revisit this component tomorrow and try to take Marty's suggestions to get it updated.
Related
Since I don't know english very well, I'm not able to find clear examples and/or tutorials for what I'm trying to do.
So the (maybe stupid) question is:
How can I strongly customize tweens using Starling framework and make my Sprites(or MovieClips) following a line, curve or create every other non-linear movement that doesn't exist in Transition Class?
I have no problem with Basic Starling animation. So it should be a good start point.
Thanks in advance for examples, resources or suggestions.
PS. I already visit the "Starling Wiki" page about custom Transitions but, as a Beginner(almost Intermediate) coder I wasn't able to completely understand it.
I know there are many online resources about AS3/Starling/Flash/Nape/Box2D but it's not easy for a non-english Beginner programmer to understand them.
You can simple move Starling's movieClip by set .x .y .rotation
Since now, I haven't heard of scripted transition to make predefined non linear movement. As you said, you can move object from one position to another, but it won't happen in a curved line.
What I've done in the past is to predefine the path of the movement, as I needed exactly the same weird path. I did a path tween in Flash, then used one simple function to loop through all frames (using gotoAndStop()) and getting x and y property of the object, storing them in an array. This was done when initializing. Later on I could start animation on all my weird paths whenever I wanted, using onUpdate method of tween, and passing positions from the array I've populated in the beginning.
This of course is good if you have very weird paths. If you want very little curves, you could try to do a mathematical equation. Tween classes have an update function, which will be called on each frame. So on each frame you could do some calculations and modify the parameters. For example if you tween x and y properties, you could use the update function to add a random number to those values. Of course this will make very uncontrolled movement, I'm just giving an example.
The best solution I could think of, speaking of complexity/result ratio - to use Greensock's TweenMax (look at the second example) - it has a built in bezier tweening. This means it could move from point A to point B within a bezier curve. I think this will be a good solution for your problem :)
I'm brand new to Flash Professional and wanted to make a short 10 second clip. Instead of looking into using tweens and symbols (I wish I did) I used Flash Professional as a flip book, illustrating sketches for each keyframe.
I'm now in the colouring process and want to know if there is a way to colour an object (I've drawn with the brush tool) throughout multiple frames. is this even possible?
I understand there are some short cuts to repetitive tasks using ActionScript. But, once again I am brand new to Flash Professional and haven't tried anything in the ActionScript. I do however have a very basic knowledge of HTML coding and some javaScript if it helps at all…
If there is an alternate solution like exporting the file to another Adobe program that has a "colouring multiple frames" feature, that would be great too.
Sorry to say, to do that, you WILL have to work with symbols. However, this is an easy fix.
Select the object you want to color, click Modify--> Convert to Symbol. Give it a good name, and set it to MovieClip. Click OK.
Now, in the Library panel, double-click the icon next to your symbol name. Color as you wish.
There are multiple ways to put this on your timeline. You could replace each instance of that drawing with the symbol. Or, better, you could create a new layer with only one keyframe (and regular frames after that to the end of your animation. Place your object on that layer, and then remove all the old versions of that drawing.
NOTE: You will need to be mindful of where in the stack you put layers, as that sets the z-index of everything on that layer.
I'm creating a game using Flash Develop and ActionScript 3.0 and I can't figure out how to make a "Character Creation" menu, in the sense that, I want to animate a movieclip full of images (head, torso, arms, etc.) and then change out any image with another.
So I'd like players to be able to choose what kind of sunglasses they want their character to have, for example, and the different sunglasses will keep the animation that I made with the original ones.
From what I know so far I can export a movie clip as a .swf and use it as such, but how do I change out images and keep the animation?
Any suggestions are greatly appreciated.
Thanks!
I don't know how much actionscript you know.. but if you just want an idea how to do it and not the whole thing in code...
I would personally make different movie clips for the different parts of the body that can be changed and then change frames in that move clip. For example one movie clip with different hairstyles, one with (sun)glasses and so on.. and then just go to then next frame in the "hairMC" to change the hairstyle.
The way I'd do it is to create MovieClips that all implement the same Interface and then have other MC's higher up that know how to use the particular Interface. For example, if you had an IArm, it might know how to swing and how to grasp (and it might grasp by using an IHand). A fat ITorso might attach the arms at a different spot than a thin one.
And your Character might have an IHead, ITorso, etc. When you created a Character, you could either pass in these components via the constructor (I'm not a big fan of constructor arguments for Views, but it's one way to do this), or you can expose setters on your Character that allow you to set these properties one at a time.
This gives you tremendous flexibility in how to put your character together--none of the pieces know precisely how the others are put together, but the methods they need to operate on are in place, so you can put in any implementation you can think of.
Wasn't sure if this question belongs here, but I'll try. So I'm about to move my project from Director | Shockwave Player (if you ever heard of these) to Flash Player for numerous reasons and while I'm thinking how to better start off I got a question which really made me wonder. To the point.
Currently in Director each game window in the user interface (like small alerts or large windows with lot of elements in them) is drawn upon need - meaning that the actual window's graphical image is being put together from configuration (all sorts of properties like width, height and all elements and their properties) from numerous pieces of graphics (e.g. window background is made from 9 small pieces like the 4 corners, 4 middle pieces between corners for dynamic width and height and 1 central piece to fill the window) and then added to stage. This approach makes it easy to edit each graphical element without having to redraw the actual windows and everything in them if we would like to change the color scheme or improve something in a element. It also saves the resources as windows are being drawn only when requested.
Now I got to figure out if it's worth writing such code in Flash too as opposite to just creating all the windows and placing them in the library and adding to stage when they are requested. What do you think? Is it worth writing such implementation?
IMO, it depends on 1) How comfortable you are with Flash's drawing API / graphics class, and 2) How flexible each window/dialog needs to be.
If it's easier to just throw them together as static objects -- and if they don't necessarily need the flexibility to change dimensions/style much (can you count on one hand how many times they've needed to change since it was originally done in Director many years ago?), it's obviously easier to do this than going through the time/energy to recreate them dynamically, especially if you're not very comfortable with Flash's drawing API.
That said, a lot can be accomplished dynamically with Flash's drawing API, so if you have the time/interest I'd certainly suggest digging in and doing it the "right" way if you want to familiarize yourself with the drawing API.
My method for doing this sort of thing usually goes like this:
Create a separate class that extends Sprite/MovieClip; something like 'Dialog.as'.
Create public init(), show(), and hide() methods, and a private build() method.
init() is called just once upon initialization of your app, and takes some global parameters to hold on to internally (padding, colors, etc).
show() takes an argument of either text (a String), or even a Sprite/MovieClip -- whatever it is you want to show in this dialog. When called (when you want to spawn a window), it uses this -- plus whatever init parameters were originally passed in during init() -- to draw itself, and then unhides itself (tween the .alpha property, or simply set the .visible property).
When you want to close the dialog, make sure to invoke the hide() method, which first hides itself, and then cleans up whatever was created (removing listeners, etc) so that the next time it is called upon it can draw itself fresh.
It might also make sense to pass into this object a reference to the Stage (in the original init() call), so that it can center and size itself accordingly on the stage, and also addChild itself to the top of the display list so that it's always above everything else.
I hope this helps.
If is 2D you can check this:
http://pushbuttonengine.com/
if is 3D you can start here:
http://alternativaplatform.com/en/alternativa3d/
I can suggest you also Unity3D but this is outside of flash
Hope it helps
I'm creating a space game in actionscript/flex 3 (flash). The world is infinitely big, because there are no maps. For this to work I need to dynamically (programatically) render the background, which has to look like open space.
To make the world feel real and to make certain places look different than others, I must be able to add filters such as colour differences and maybe even a misty kind of transformation - these would then be randomly added and changed.
The player is able to "scroll" the "map" by flying to the sides of the screen, so that a certain part of the world is only visible at once but the player is able to go anywhere. The scrolling works by moving all objects except for the player in the opposite direction, making it look like it was the player that moved into that direction. The background also needs to be moved, but has to be different on the new discovered terrain (dynamically created).
Now my question is how I would do something like this, what kind of things do I need to use and how do I implement them? Performance also needs to be taken into account, as many more objects will be in the game.
You should only have views for objects that are within the visible area. You might want to use a quad tree for that.
The background should maybe be composed of a set of tiles, that you can repeat more or less randomly (do you really need a background, actually? wouldn't having some particles be enough?). Use the same technique here you use for the objects.
So in the end, you wind up having a model for objects and tiles or particles (that you would generate in the beginning). This way, you will only add a few floats (you can achieve additional performance, if you do not calculate positions of objects, that are FAR away. The quad tree should help you with that, but I think this shouldn't be necessary) If an object having a view leaves the stage, free the view, and use the quad tree to check, if new objects appear.
If you use a lot of objects/particles, consider using an object pool. If objects only move, and are not rotated/scaled, consider using DisplayObject::cacheAsBitmap.