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.

Similar Messages

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 effect done?

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

If you want to end up wanting to kill yourself, just try doing that in Illustrator. That was probably done using a program that has more than Illustrator’s pathetic 3D effects. The biggest problem you will have is that Illustrator can only model one object at a time. You can extrude an outline of Florida and be happy with the result, but once you try using different extrude height for different states you will see the problem.
Illustrator cannot model a “scene”, meaning all objects exist within one 3D universe with the same lighting, perspective, and vanishing points. Painstaking trial and error will be needed to get each state to look correct in relation to all the other states. Also, Illustrator extrudes from the centre out, so suing different extrude heights will mean the bottoms of each state are not aligned to the same surface. Fixing that will also take a lot of trial and error. best of all, once the bases of the states are nice and aligned, the perspective consistency will be off because you had to move everything.
Conclusion: If this was done in Illustrator, it was not done using and 3D effects. It was done using talent and experience.

How is this effect created of an HTML page peeling?

I am familiar with the page Flip effect now quite popular to
create flash-based virtual magazines but its the first time I see a
page pull on an html page. Can anyone explain how its done please?
http://www.anapharm.com/

I've seen stuff like this at DartMotif.com
http://www.dartmotif.com/samples/PeelDown.asp
Hope that helps
"OrlandoJetset" <[email protected]> wrote in
message
news:enefpi$7s2$[email protected]..
>I am familiar with the page Flip effect now quite popular
to create
>flash-based
> virtual magazines but its the first time I see a page
pull on an html
> page.
> Can anyone explain how its done please?
>
>
http://www.anapharm.com/
>

How is this effect created? budweiser logo

hey everyone, anyone know how this bevel is created in illustrator?
larger image at this link:
http://thescore.ibj.com/content/wp-content/uploads/2008/05/budweiser.jpg
cheers

It's my understanding that the OP only wanted to know how the bevel in the lettering, not the entire logo, was created.
Here's a fairly simple method for making a Faux Bevel.
1. Path outlines. If using type converted to outlines, use Pathfinder>Unite to create compound path.
2. You'll be using at least four copies of these compound paths, so duplicate paths.
3. Center layer: fill with horizontal gray/white linear gradient.
4. Top layer: Give a new compound path white fill, offset to left, mask with compound path of the lettering in its original position.
5. Note the the 'bevels' may not look clean, especially on fonts with connecting lines. Erase or delete unwanted areas.
6. Bottom layer: Apply gold stroke of desired width on a new set of outlines. Object>Path>Outline stroke. Fill with gold gradient.
7. Turn on all layers.
Your Faux Bevel is complete.

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 was this background created?

Hi,
From this site:
https://www.softwarekey.com/
I've downloaded the attached jpg image.
Notice the background has a nice wash or maybe soft stone effect. I'm talking about the soft diagonal lines. Not the gradient so much. Can someone give me pointers how to get this? I've tried brushes, patterns, textures. I've tried various gradients. And I don't even get close.
TIA.

a combination of Filter->Render->Fibers, Filter->Blur->Motion Blur and Filter->Blur->Surface Blur should get you close enough (it'll be a grayscale so you'll have to set it to the Overlay or Soft Light blend modes at reduced opacity). Can't give you exact numbers because in the short time i've been messing with it i haven't been able to get it to look exactly like that but it's close enough

How was SiteCatalyst Netverages created?

Can I ask what software, plugins etc have been used to create the dynamic visuals for SiteCatalyst NetAverages??
I really like the infogrphic presentation and usability that it delivers.
Thanks
Matt

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

I'm traveling to Europe for several weeks. What's the best converter to use and how will this effect my computer?

I"m traveling to Europe for several weeks. What's the best converter and how will this effect my computer over time?

Right! Our regular power bricks cover the gamut of 100-240 VAC, 50-60 Hz that will take care of everything save, say, a failing portable generator chugging in the tip of the Alps...
And you can drink the Apple koolaid and purchase the Official $40 Apple Adapter Kit ( http://store.apple.com/us/product/MB974ZM/B?fnode=MTY1NDEwMQ ) that will look chic and color matched to your brick, or do as Kappy says and get a regular equivalent from the nearest Radio Shack

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 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 done?

see the effect on the name
I'm referring to the name coming in on the top left, you will
see it skewed then swing out like a gate and stop
I tried every which way to skew and scale to get a transition
to look like this and I find that the skew allows you to pull (lets
say) the left corner up while holding alt but the shape never
conforms. I tried doing it with text, breaking up the text,
creating a graphic and a movie symbol of the text and still can't
do this.
No luck finding any tutorial or video on it either
I'm on a Mac using CS3
Any help?

Sorry, I thought I had the answer but I was wrong. This
effect was created one of two ways, in Illustrator or After
Effects. I have Illustrator CS3 and found out how to export
animations as swfs . So in my case I would have to create the text
effect and export as an swf (frame by frame animation) but this is
where I need help. I cannot find a way to export just a text effect
and drop it in an existing fla? Only way I could think of was using
loadMovie but there has to be a different way. I went ahead and
used a Flash decompiler and opened the swf of the link in the
original post with the text effect in it. In the fla the text
effect is in a layer with frame by frame animation inside a
movieclip on the main timeline. So how did they export an swf of
this text effect and get the effect into a movieclip since
Illustrator only exports swf's not fla's?
if I'm unclear in my explanation I'd be glad to clarify it.

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.

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 effect created?

Similar Messages

Maybe you are looking for