How was this created? (Animation)

Looks simple enough but when we try to come up with a
solution to create it.. we come up empty handed.
The animation in question is on the homepage for
presentationpro.com - It happens on the left side of the screen
towards the begining. A partial circle starts (a lens-flare
preceeds it) and it completes itself into a full circle/donut. We
are trying to recreate this.. does anyone have an idea or know how
this was done?
Thanks you.

Here's my 10 min attempt to help you get started:
http://www.mudbubble.com/staging/presentationpro.html
download:
http://www.mudbubble.com/staging/presentationpro.zip
~~~~~~~~~~~~~~~~
--> Adobe Certified Expert
--> www.mudbubble.com
--> www.keyframer.com
~~~~~~~~~~~~~~~~
Anrkist wrote:
> Looks simple enough but when we try to come up with a
solution to create it..
> we come up empty handed.
>
> The animation in question is on the homepage for
presentationpro.com - It
> happens on the left side of the screen towards the
begining. A partial circle
> starts (a lens-flare preceeds it) and it completes
itself into a full
> circle/donut. We are trying to recreate this.. does
anyone have an idea or know
> how this was done?
>
> Thanks you.
>

Similar Messages

How was this "flash" animation done?

How was this "Flash" animation done?
http://www.templatemonster.com/flash-templates/15812.html
There is a "flash" that goes down the sholder of a man in this Flash intro page. It is a series of jpg images. Do you know how this can be done or which program was used? I want to chage the page of it.
Thanks, Steve

Hi Steve,
I'm pretty sure it's done with a mask. You have the man picture layer and the border layout masked by a symbol (maybe a square or rectangle) above it.
If you want to know how to use mask in Flash, just ask Google. There is a bunch of tutorial on the web.
Hope it's a good start for you !
Martin
http://www.martinc.biz

How was this created

I have a hard time believing that someone manually adjusted all 1200 gradient mesh nodes to cook this up just to sell it on a stock site... Is there another way to generate meshes? I need to do another version of this style...

Hah. Ask me about your font cache and then you can call me conversant.
So, as I said above, I was hoping to avoid the gradient mask in the name of simplicity and started off as such:
Divide up a circle into 120 slices. Make it twist with an Envelope Distort (mesh), take one of the now-twisted slices, toss the rest,
Give it a gradient somewhat like the middle of the range of colors, make it into a symbol.
Make another smaller slice that's feathered a good bit and fits within the thicker (outer part) of the larger slice, make it yellower (part of my problem - it gets darker towards the outside, nolt lighter) and make that a symbol.
Effect->transform->transform to rotate around 119 times to get back to round. Expand appearance to get 120 slices made of 2 symbols each. Select-> same symbol instance and re-group as 2 groups, one of each symbol. Use the symbol stainer to add variance.
Oh and make a version of the larger slice that's white with a dark inner glow, set to multiply, to add the dark lines. I put a gradient/difference cloud opacity mask over it to try to dull it some - it was still too strong in the end.
Problems:
would do better to be a blend between the symbols rather than using one feathered but can't because when you expand the rotate, you expand the blend.
the symbol stainer doesn't work very well, or very directly anyhow. Adding yellow to red somehow gets green. I would prefer it pull it towards yellow.
My next thought was to make a neutral starting slice that could be rotated around and adjusted with some randomly placed highlight/shading slices that would be blurred somehow. That killed my afternoon, waiting for Illustrator to do a radial blur on ~2 dozen blends. I thought my iMac would catch on fire. Here's where I sit, with no blur:
And I feel cautiously optimistic, based on the possibility of actually performing the blur I imagine.
I guess I was hoping that someone could suggest a new starting point since my starting points seemed to be falling a fair bit short. Maybe some insight as to how the original piece was created would help me to recreate it.
At this point, it's looking like I would have saved more time by doing gradient meshes! :-)
Thanks!

How was this created? 3D map

Can someone help me with how this was created. The 3D look of the states coming out of the map? Also the sides look cut too.
Thanks

Yup - an extrusion. To do this in Illustrator, select each of your shapes that make up the states you want coming out at you. Group them (Cmd or ctrl + G) and with your Group selected go to Effect > 3D > Extrude & Bevel. Set the extrude depth to match the effect you are after. The image you posted looks like some perspective has been added too. If you want a different colour for the cut sides, make sure your shapes have got a stroke applied.
Good luck.

How was this SWF created?

Hi. How was this video created? It displays the name "Joe
Schmoe" throughout; this could be any text, by the way.
http://www.cnnbcvideo.com/?nid=lRbWr4wkznBWkEcCraq91zQ5Njc2NA--&referred_by=14859716-SGF0a 4x
What software would you need? Any examples of how one might
create this? Thanks.
[Please note: I'm not responsible for the political content
of the video; I work for a non-profit who would like to create a
video like this for fundraising. Thanks.]

It could be one of the effects in Swish.
"xJaNx" <[email protected]> wrote in message
news:e5n44s$le9$[email protected]..
>i was just curious how was this effect created are there
online tutorials
>
> <a target=_blank class=ftalternatingbarlinklarge
> href="
http://www.olmosphoto.com/v2/index.html
>
> the">
http://www.olmosphoto.com/v2/index.html
>
> the</a> letters are scrambled and then change so
fast in the logo to the
> correct stance
>
> how is that done ?
>
> can someone help
>

How was this done (Stacking)?

Hello!
How was this effect done? http://www.riccardomagherini.com/fine_art/, I think I know how it is finished in PS, but how do you shoot this?

Hi Alex,
this tool is usually called the Blur or soft-focus effect (translated from my German PS). Many programs offer this brush for applying to the effect. Often you can select the photo, create a soft edge selection and then make the selection using filter blurred or you yourself blur some of the image areas.
And we have the tool "Unsharp Mask". For this purpose, only the original image and a blurred version are required. The layer structure, however, shows good results only if your program supports 32-bit color depth, like Photoshop.
On the other hand, I'm sure you will get better explanations, by asking Riccardo Magherini himself at http://www.riccardomagherini.com/fine_art/contact/. I'm sure you will get answers marked of a professional competence and responsibility.
Hans-Günter

How was this done - movable shape that changes percentage

I saw a presentation that had a pointer that the user could smoothly drag along a horizontal line, and when moving the pointer, the percentage underneath the pointer automatically changed. The pointer can be moved horizontally along the line, but cannot be moved vertically.
How was this done --- Is this something that can be accomplished in Captivate, or was it done in another program and inserted into Captivate? See two examples below.

AFAIK this can be done in Captivate, if you include some widgets (thinking about the Slider component widget of InfoSemantics). But widgets are not compatible with HTML5 output.
For HTML5, Edge Animate could produce that kind of interactivity as well, and you can embed an OAM package in Captivate, using the App packager in CP7, and right away in CP8.
Lilybiri

How i can create animated slide show?

How i can create animated slide show to my web sites listed bellow? Is Adobe PS suitble for it ?
My websites are
http://insurance-helpz.blogspot.com/
http://www.autoinsurance-helpz.blogspot.com/
You knowladge will help me to develop my sites with attractive slide show
Thank you

JJMack covers some possibilities, predicated on the embedded player in your Web site.
You might want to look at another pair of Adobe programs, that work well together: Adobe Premiere Elements and Photoshop Elements. They are available in a bundle, and, if you do not have Photoshop Extended (up through CS 5.5), or Ps CS 6, or Ps CC, they cost MUCH less.
One can create the SlideShow in the Organizer (sort of like Bridge, but with some differences), then can Send to Premiere Elements for final editing, such as the addition of Narration, or a Soundtrack. From PrE, one can then output to many, many different formats for linking to the player on the Web site.
Now, if you have Ps Extended, Ps CS 6, or Ps CC already, you have video-editing capabilities, but some of the output options (and even Import options), will be limited.
If searching for a program (or bundle of programs), then the Elements duo will do exactly what you need. Also, both of those programs have their own, very active forums, so you will have two communities to offer you support.
Good luck,
Hunt

Newbie / how was this done? animated stroke

My favorite DPS magazine has this beautiful animated stroke that I am showing below in these iPad screen captures. The stroke starts from upper left corner and progresses up until to lower right. This is DPS and I presume this animation is made in Flash before becoming a DPS html overlay, so I drawed a couples of black lines in Flash with several white rectangle tweens progressively covering the line in order to recreate that effect. That does not work, my SWF ignores the timeline and triggers all tweens at the same time, ruins the effect.
I am not a Flash guy, but do you people know if Flash is the easiest to create this effect?
Many thanks,

First, you need to get handle of AS3 drawing API and geometry/math capabilities.
Here is the link to Graphics class documentation:
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/Graphics. html
Here is the link to Point API docs:
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/geom/Point.html
Math is, well, the same as anywhere else.
In JavaScript you will need to get knowledge of its API as well - it is very similar because AS3 and JavaScript are siblings.
Here is a code that I commented as thoroughly as I could:
stop();
import flash.display.Graphics;
import flash.display.Shape;
import flash.display.Sprite;
import flash.events.Event;
import flash.geom.Point;
* Shape which is used to draw line into.
* Basically line drawing itself.
var animatedLineOverlay:Shape;
* Instance of animatedLineOverlay.graphics
* This variable is created to be reused
var overlayGraphics:Graphics;
// array of points between which to draw line
var overlayPoints:Array;
// x and y postions of line drawing
var overlayMargin:Number = 30;
* Used to kepp reference to current start and end points
* between which line is being drawn
var currentPoints:Object;
* Next point to which draw line in the animation.
* Declare here so it can be reused.
var nextPoint:Point;
* Line straight segmen starting point.
var sPoint:Point;
* Line straight segment end point
var ePoint:Point;
* Anngle under which to draw line segment
var angle:Number;
* Line draw speed
var speed:Number = 8;
* How far to advance line animation in a single frame along x
var advanceX:Number;
* How far to advance line animation in a single frame along y
var advanceY:Number;
init();
* Inititalizes entire thing by calling specialized functions
function init():void
    makeBackground();
    definePoints();
    makeOverlay();
    startAnimation();
* Starts line animation by adding ENTER_FRAME event listener
function startAnimation():void
    addEventListener(Event.ENTER_FRAME, drawLine);
* ENTER_FRAME event handler
* @param    e
function drawLine(e:Event):void
    // if no currentPoints defined - go through the logic
    if (!currentPoints)
         * since we shorten overlayPoints while animating line
         * whyen array is empty - stop animation
        if (overlayPoints.length == 0)
            // stop animation
            removeEventListener(Event.ENTER_FRAME, drawLine);
            // calling return will effectively exit drawLine function
            return;
        // get point to process by extracting first element in the array
        currentPoints = overlayPoints.shift();
        // if element contains color property - change line color
        if (currentPoints.lineColor)
            overlayGraphics.lineStyle(1, currentPoints.lineColor, 1, true);
        // get start and end points
        sPoint = currentPoints.start;
        ePoint = currentPoints.end;
        // calculate angle between the points
        angle = Math.atan2(ePoint.x - sPoint.x, ePoint.y - sPoint.y);
        // calculate how far line needs to advance along x/y based on the angle
        advanceX = speed * Math.sin(angle);
        advanceY = speed * Math.cos(angle);
        // move line to startgin position
        overlayGraphics.moveTo(sPoint.x, sPoint.y);
        // starting point position
        nextPoint = new Point(sPoint.x, sPoint.y);
    // advance drawing coordinates
    nextPoint.x += advanceX;
    nextPoint.y += advanceY;
    // add to line segment nextPoint coordinates
    overlayGraphics.lineTo(nextPoint.x, nextPoint.y);
     * if the lates drawing did not get to the exact target point
     * add the difference
    if (Point.distance(ePoint, nextPoint) <= speed)
        // add the difference
        overlayGraphics.lineTo(ePoint.x, ePoint.y);
         * nullify currentPoints so that on the next frame
         * funciont exectures first conditional
        currentPoints = null;
* Creates data for usage in animation.
* Points coordinates are arbitrary.
function definePoints():void
    // use this variables to make drawing dynamic - based on overall application dimensions
    var overlayWidth:Number = stage.stageWidth - overlayMargin * 2;
    var overlayHeight:Number = stage.stageHeight - overlayMargin * 2;
    overlayPoints = [];
     * each array element will be an Object
     * each Object will have two properties start and end
     * which represent points at which, naturally start and end line segment
     * points values are totally arbitrary - use your imagination
    overlayPoints.push({start: new Point(0, 0), end: new Point(0, overlayHeight / 6)});
    overlayPoints.push({start: new Point(0, overlayHeight * .5), end: new Point(0, overlayHeight)});
    overlayPoints.push({start: new Point(0, overlayHeight), end: new Point(overlayWidth / 8, overlayHeight)});
    overlayPoints.push({start: new Point(overlayWidth / 8, overlayHeight), end: new Point(overlayWidth / 6, overlayHeight - 50)});
    overlayPoints.push({start: new Point(overlayWidth / 6, overlayHeight - 50), end: new Point(overlayWidth * .5, overlayHeight - 50)});
    // this element also has color property - to change line color at this segment
    overlayPoints.push({start: new Point(overlayWidth * .5, overlayHeight - 50), end: new Point(overlayWidth - 20, overlayHeight - 50), lineColor: 0xFFFFFF});
    overlayPoints.push({start: new Point(overlayWidth - 20, overlayHeight - 50), end: new Point(overlayWidth - 20, overlayHeight - 100)});
    overlayPoints.push({start: new Point(overlayWidth - 20, overlayHeight - 100), end: new Point(overlayWidth, overlayHeight - 150)});
    overlayPoints.push({start: new Point(overlayWidth, overlayHeight - 150), end: new Point(overlayWidth, overlayHeight - 200)});
* Creates line drawing plain
function makeOverlay():void
    // instantiate
    animatedLineOverlay = new Shape();
    // gain reference to the graphics API
    overlayGraphics = animatedLineOverlay.graphics;
    // define line properties
    overlayGraphics.lineStyle(1, 0, 1, true);
    overlayGraphics.beginFill(0x000000);
    // draw initial rectangle at the top/left
    overlayGraphics.drawRect(0, 0, 80, 10);
    overlayGraphics.endFill();
    // position drawing plain at its margin
    animatedLineOverlay.x = animatedLineOverlay.y = overlayMargin;
    addChild(animatedLineOverlay);
* Makes applpication background.
function makeBackground():void
    graphics.beginFill(0xFF8040);
    graphics.drawRect(0, 0, stage.stageWidth * .5, stage.stageHeight);
    graphics.endFill();
    graphics.beginFill(0x0070DF);
    graphics.drawRect(stage.stageWidth * .5, 0, stage.stageWidth * .5, stage.stageHeight);
    graphics.endFill();

How was this made? AMAZING!

Hey guys! I found these images and I would like to know how they were created. (see images below) Anyone know how this was made? What filters were used to get this effect? Thanks in advance for all of your help!

This sort of look nearly always starts with the lighting, and generally tends to use the same lateral light from both sides, with little or no fill on the camera axis. Check out Dave Hill, Chase Jarvis etc. for more of the same. From there it's reduce saturation and increase contrast and you are best part of the way there.

How was this made?

http://www.youtube.com/watch?v=Jc8TNyT9MFc&feature=related
Was this made with a Motion/AE type software, or a true 3D animation software such as Maya or 3DSmax?

Probably both.

Transitions... how was this done?

http://www.lounginrecordings.com/index_flash.html
notice the smooth transition from section to section... as if
the whole site is one continuous movie? how is this handled? is
this a "levels" and "root" thing (something i know nothing about
yet)?
thanks.

joeq wrote:
> <a target=_blank class=ftalternatingbarlinklarge
> href="
http://www.lounginrecordings.com/index_flash.html
>
> notice">
http://www.lounginrecordings.com/index_flash.html
>
> notice</a> the smooth transition from section to
section... as if the whole
> site is one continuous movie? how is this handled? is
this a "levels" and
> "root" thing (something i know nothing about yet)?
These type of transitions are the easiest. Let me explain how
it works.
From frame 1 to 10 you have some motion tween - fading in.
Than from frame 10 to 20 fading out, or motion out, like in
your example motion out.
On that 10th frame there is an action that picks a variable
and go to frame in a
movie clip accordingly. All the button does is sets variable
and play
the timeline, than timeline frame 10th action call the
content and while
the fading is done, the content has been changed.
Button :
on (release) {
_root.pa = 2;
_root.play();
than frame 10
MovieClipWithContent.gotoAndPlay ("p" + _root.pa);
Inside MovieCLipWithContent make labels p1 p2 p3 p4 p5 p6 p7
and so on....
Regards
Urami
Happy New Year guys - all the best there is in the 2006
<urami>
http://www.Flashfugitive.com
</urami>
<web junk free>
http://www.firefox.com
</web junk free>

How was this effect created?

Hi,
Can anyone tell me what was done to create the cool effect at this site?
www.robbiecrawford.com
When the links on the left are rolled-over an image appears in a small window that follows the cursor. Very cool.
I was hoping to learn how to do that, myself, but can't figure it out. No need for a step-by-step tutorial, just a word or two to point me in the right direction.
THANK YOU!

It could essentially involve a movieclip that follows the mouseY property with a minor bit of tweening to a stop, possibly triggered by a MOUSE_MOVE event. Hover over/out of the individual menu items loads/unloads a preview image in the movieclip.

How Was This Icon Created?

Hi,
I'm fairly new to Photoshop and would like to find out how an icon was created on a website I've found. It's the small 'heart and bandage' at the top of the page. If anyone can help I'd be very, very grateful. This website is something to do with Surviving Infidelity
Thanks in advance for any help

Make the heart with the Custom Shape tool.
Add a Gradient Overlay (radial).
Make two little rectangles and align them at right angles with the transform tool.
I gave them a drop shadow to make them stand out better.

How is this text animation created

Hello Everyone,
I am at a loss as to how to create this slightly jittering/flickering text and images as featured in this video:
http://www.youtube.com/watch?v=9GorqroigqM
I'm assuming its either After Effects or Flash Professional but I have also seen this effect in Lower Thirds and Intro to Television Shows such as "Chasing New Jersey" Any assistance would be helpful. Thanks.
Refined_Silver

Refined_Silver wrote:
I'm assuming its either After Effects or Flash Professional but I have also seen this effect in Lower Thirds and Intro to Television Shows such as "Chasing New Jersey"
After Effects is often used to create lower thirds and TV show intros.
I can't see your example due to restrictions on the network where I work, but you might look into AE's quite powerful text animators.

How was this created? (Animation)

Similar Messages

Maybe you are looking for