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

Similar Messages

How is this Flash Site done?

I'm trying to make a site like www.georgespencer.com
Any ideas how its done?

well mayb..bt i'm having difficulty figuring out two
functionalities here..
1. when you click on any thumbnail..it zooms and navigation
buttons appear at the sides..if you move to any other clip and then
click on the "ZOOM OUT" button the movie zooms out at the clip
where it had stopped. How do i detect which thumbnail was on the
screen when the zoom out btn was clicked?
2. when u reach a the end of any row or column u have an
option to move the 1st clip of the next row e.g.
if you reach at the end of the 1st row..the right arrow btn
changes to another button which then slides down the Movie to the
1st clip of the 2nd row.. how is dis done?

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

I am reloading Photoshop CS2 and I can't get it activated. How is this to be done?

I am reloading Photoshop CS2 and I can't get it activated. How is this to be done?

The activation servers are retired and so your old CS2 copy and serial number no longer work.
Adobe has non-activated Photoshop CS2 and a new serial number to go with it only for CS-CS2 owners.
Get this here at:
https://www.adobe.com/cfusion/entitlement/index.cfm?pid=4485850&e=cs2_downloads

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();

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 to link flash animations in dreamweaver 8

Hey everyone i have been trying to learn dreamweaver 8, flash
8, and others in a short time. My question is,
I am trying to create a website in dreamweaver 8 but i am
having trouble making a link to another page of the site out of the
flash animation once it's done. I can't find a option for that
anywhere, I was able to link the table in which the animation sits
but it does nothing. For now i just have the word ENTER below the
animation so the rest of the site can be viewed.
here's the link to the site where the animation first page is
www.fatcatzcreative.com
I have spent days trying to figure this out and being the
typical man i have finally broken down and am askin for help.
Thanks in advance to all.

HTML cannot link Flash.
If you want links in Flash, you will have to edit the Flash
file's
actionscript and add the links there.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"crayzboost" <[email protected]> wrote in
message
news:ekkfm4$2rl$[email protected]..
> Hey everyone i have been trying to learn dreamweaver 8,
flash 8, and
> others in
> a short time. My question is,
>
> I am trying to create a website in dreamweaver 8 but i
am having trouble
> making a link to another page of the site out of the
flash animation once
> it's
> done. I can't find a option for that anywhere, I was
able to link the
> table in
> which the animation sits but it does nothing. For now i
just have the word
> ENTER below the animation so the rest of the site can be
viewed.
>
> here's the link to the site where the animation first
page is
> www.fatcatzcreative.com
>
> I have spent days trying to figure this out and being
the typical man i
> have
> finally broken down and am askin for help.
>
> Thanks in advance to all.
>

How was this site built ???

I came across this Flash site and was wondering what product,
other than Flash, would have been used to build it.
http://www.mitsubishi-motors.com.au/red/
What I'm particular interested to know is how the 3d
transitions were accomplished after a menu item is clicked. I
imagine it would have been done is some other program and brought
into Flash.

This was probably done in a sophisticated 3D program like
3DStudio Max,
Maya, or Lightwave, etc. While the 3D is done by highly
skilled artist(s),
what's just as important is the planning for the transitions
between the 3D
scenes and the overall planning effort which seems to be a
large effort in
and of it's own.

How to show Flash animation

(Web Logic 6.1.4)
On my WL server in "web.xml" configuration file of my web-application I have
correctly defined the MIME-type for shockwave flash animations and I can see
it if I open it directly (direct link on .SWF file). But I'd like to have
the classic and proper approach showing SWF file inside HTM file using
OBJECT/EMBED tags. I created HTM file with OBJECT/EMBED tags and I can see
my flash animation in it if I run this page directly by IE but if I put this
HTM file on server and try to see it served by WL server it does not work!
How to solve this issue?
Stjepan Brbot

Well thanks Ned, I do apologize for the shortness of the post, i was in a bit of a rush. I also assumed this would be easy to infer as its quite simple.
The flash animation can be seen here - http://www.blakecorp.com. it shows three blocks which move around a bit.
The user should be able to click on a block and this should lead to a url.
I have tried various geturl combos on various events all over the code and nothing works.
I am not a flash guru so apologies if I cant give you a design of this as I did not write it.
I think the problem is that the images etc are not buttons but I am struggling to find a way to make this work.
This is probably 10 minutes work for a flash programmer
Any help appreciated.
Thanks

How to Prevent Flash Animation Playing?

I have a flash animation that plays automatically when the user lands on the homepage of my site. It's part of the header, so it's present on every subsequent page of the site as well. However, I would like it to NOT play on the other pages. It should be visible, but only display the first frame or so of the animation, rather than playing automatically on every page.
How do I stipulate that in the code? Is there a line I can add somewhere?
Thanks for any help.

the easiest thing to do, is to create two different swfs. one for the home page (that you've already made) and one for the other pages which will be the same as the one you have now except you want to add a stop() to the swf's first frame.

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.

How was this program done?

Any ideas as to how this program was created?
It allows you to view a short 3d animation of each tecnique,
which you can also rotate left or right a full 360, or view from on
top...you can control playback speed and make either the attacker
or defender dissapear...
I am curious how the 3d space was created and then inserted
into an executable program...
http://www.aikido3d.com/

BKearney1 wrote:
> I purchased the program to play around with and check it
out...and there seems
> to be more to it than what you describe as to how it was
made...it appears to
> be an animated 3d clip, which I agree was done in some
3d application...but the
> part that has me confused is how did they then build in
the ability to spin 360
> degrees around the animation while it was playing...you
can actual spin around
> the characters....I can spin the point of view of the
camera a full 360 around
> the two characters while the animation is playing, or
pop to a top view...or
> even a follow option...it seems that if this was a
series of images you would
> not be able to do some of these things...or it would
take a tremendous number
> of images?
I did not see the program, I have only seen the stuff
available on websites and that's
how we do it in Flash. Frame by frame, than action script to
control the frames.
Based on mouse move (distance in pixels) or coordinates of
the mouse versus the
clip size the movie jumps to corresponding frame. Most of the
360 done in such way.
The application could be done in Director. You said CXT and
these in fact are Director
Protected Cast Files. Director has 3d capabilities and is way
more powerful than flash
when comes to desktop delivery.
Best Regards
Urami
!!!!!!! Merry Christmas !!!!!!!
Happy New Year
<urami>
If you want to mail me - DO NOT LAUGH AT MY ADDRESS
</urami>

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 "flash" animation done?

Similar Messages

Maybe you are looking for