I just finished uploading a new tutorial to gotoAndLearn() which shows you how to create some slick animated buttons using After Effects and Flash. This technique is used quite often by Red Interactive to create their UFC sites. It involves creating a rollover animation in After Effects and then exporting as an FLV file for use in Flash. There are millions of possibilities for cool effects when using this workflow.
Update: I forgot to give credit to the designer at Red who blogged about this technique. It was Balind Sieber and here is his post describing the technique.
Enjoy the tutorial!
Lee
Sweet! I’ve been looking for a good tutorial using AE in this way.
Thanks!
Great tutorial!!
Awesome tutorial Lee! I’m digging the content you chose to work with also.
I’m torn, I have Anderson to win by submission in Rd. 3, but I love both fighters. The problem is I’m not sure if that’s even possible… I’m unsure if he has the power to take-down Dan, hold him down and submit him. I don’t think he can knock-out Dan either, this will be a bad match-up for Anderson! UFC needs a dominant champion already, it’s been too long, so I hope it’s Anderson. Anderson’s first real test in UFC MW!
I think Silva will knock him out in the 2nd round. Dan went 3 rounds with Minatauro and didn’t get submitted so I doubt Silva can do it. Anderson is just unstoppable right now. It should be an awesome fight though no matter what happens!
big thx!!!!!
Hi! Can you make a tutors about turn pages? thx )
Thanks again, Lee! I’ve only just started using After Effects so your timing’s spot on!
Nice tutorial. I´ve learned After Effects some time ago, but was not using it for sites in flash but after this tutorial I was inspired of using it again. thanks
Thanks, Lee.
Out of curiosity, is using Tweener to animate backwards through a timeline animation more efficient than using an onEnterFrame and subtracting frames to move backwards?
Well it is definitely easier. You can accomplish anything using EnterFrame events but the whole point of Tweener and other animation libraries is to make it easier to do with less code. It would get tricky if you wanted to use something besides linear animation. You would have to know how to implement Penner’s easing equations yourself.
Very cool. Its been awhile since I had tried After Effects in Flash. I had definitely not thought of using it with tweener. Thank you!
Very easy, thnaks for this tutorial. I’ll use it the aeffects again and with the trapcode plug in is spectacular.
hey lee, thanks a lot, very nice tutorial. I never knew how this kind of workflow is used, so thanks again! Great tutorial.
Remarkable! Great tut – really well put over.
Btw, any news (confirm / deny?) on hardware acceleration in the next version of flash?
Something to add perhaps in another version is masking the edge of the video in AE with a vignette…You may be able to avoid blending modes in this manner, to increase performance…Great tutorial, thanks!
I just updated the post with the link to the original blog post from Red. I couldn’t remember on whose blog I had seen it. Sorry Balind!
Great tutorial Lee – I always wondered what the big deal was about AE!
Quick question – where did you get that wicked looking Leather wallpaper?
Great Tutorial…
What is the hit like on memory ? If flash is playing multiple FLV animations embedded in the swf, do things slow down a lot ???
thanks, inspiring tutorial
@richard – the honest answer is that I’m not sure. These types of things definitely should be used sparingly. But check out some of Red’s UFC sites to check it out in production.
Aaah…found the wallpaper on DeviantArt:
http://stratification.deviantart.com/art/Luxury-Apple-74803325
Hi Lee,
I followed your tutorial and on testing the movie, rolling over the button gave me the error:
## [Tweener] Error: The property ‘_frame’ doesn’t seem to be a normal object property of [object ticket_1] or a registered special property.
With a bit of research, I managed to resolve this by importing and calling the init method on the DisplayShortcuts class:
import caurina.transitions.*;
import caurina.transitions.properties.*;
DisplayShortcuts.init();
butt.addEventListener(MouseEvent.ROLL_OVER, butt_ROLLOVER);
.
.
Thanks again for another interesting tutorial.
@Jase Hmmm maybe we are using different versions of Tweener.
@Lee Ah yes, you’re right. I was using the latest version from SVN (1.31.70), not the stable release (1.26.62).
Nice tutorial, you nailed one of the best uses of AE and Flash =)
@Jase I also got the same error as you, thanks for posting the fix =)
Keep up the ace work, might have to travel to London for the AIR tour =)
I had no idea how powerful the AE-Flash combo could be. My eyes have definitely been opened – greate tutorial Lee!
Nice job, hope to see more like this.
Awesome Tutorial! Thank you.
Big time thanks for this tutorial!!!! AE & Flash just got alot more interesting to me!
Absolutely great stuff! Thank you so much!
Hi Lee,
I’m using After Effects CS 3 but i don’t have the “.flv” format in the export option. Between the DV Stream and FLC i don’t have a FLV option. Any idea why is that ?
Thanks for this great tutorial.
Great tutorial, learned a whole lot i’d never seen before along the way. thanks.
Lee, you’re the king of tutes.
I was kind of expecting an error to be thrown because in Flash there is no “frame zero”.
Tweener must have an (“if frame is less than 1, goto frame 1) somewhere in the class that helped you. Maybe this is related to the prior versions of Tweener throwing errors.
Thanks!
Hi lee,
great tutorial, thanks. I have a question. when i use 1 button (ticket button) in the site there is no problem, but than i add 1 more button, “1120: Access of undefined property butt.” error occures. What are the codes needed use 2 buttons at the same time.
Thanks.
I solved the problem. I forget the butt2 in the codes. Thank you.
import caurina.transitions .*;
butt.addEventListener(MouseEvent.ROLL_OVER, butt_ROLLOVER);
function butt_ROLLOVER(e:MouseEvent):void
{
Tweener.addTween(buton1, {_frame:20, time:0.7, transition:”Linear”});
}
butt.addEventListener(MouseEvent.ROLL_OUT, butt_ROLLOUT);
function butt_ROLLOUT(e:MouseEvent):void
{
Tweener.addTween(buton1, {_frame:0, time:0.6, transition:”Linear”});
}
butt2.addEventListener(MouseEvent.ROLL_OVER, butt2_ROLLOVER);
function butt2_ROLLOVER(e:MouseEvent):void
{
Tweener.addTween(buton2, {_frame:20, time:0.7, transition:”Linear”});
}
butt2.addEventListener(MouseEvent.ROLL_OUT, butt2_ROLLOUT);
function butt2_ROLLOUT(e:MouseEvent):void
{
Tweener.addTween(buton2, {_frame:0, time:0.6, transition:”Linear”});
}
Hey,
thanks for this great tutorial!
But i’ve got the same problems as jase. I’ve tried many things but it won’t work.
Got big problems with the button
## [Tweener] Error: The property ‘_frame’ doesn’t seem to be a normal object property of [object ticket_1] or a registered special property.
But whatever i trie, i just can’t get it right. it’s frustrating.
greetz
ray
Thanks Lee, this tutorial was so great. I always liked to learn After Effects and I think I learned a lot with your tutorial.
“Hi Lee,
I’m using After Effects CS 3 but i don’t have the “.flv†format in the export option. Between the DV Stream and FLC i don’t have a FLV option. Any idea why is that?”
hi. i’ve found this replies, looking for the solution of my problem. as you can guess i have the missing flv format option. does anyone know what to do? this has been bothering me a lot. so please, tell if you know and
thanks a lot in advance.
urska
Great tut.
I see that this will only work if you Embed the video in SWF and play in time line. I was wondering if there is a way you can achieve this when loading the FLVs dynamically?
Thanks.
Where can I get tweener 1.26.62 so I can make it work?
I’m getting that same error as Jase but can’t seem to shake it. I’m a front end designer and don’t know a lot about code can someone please help. the error is
## [Tweener] Error: The property ‘_frame’ doesn’t seem to be a normal object property of [object ticket_1] or a registered special property.
Everything else works fine. Even on the downloaded fla file I get the same error so I know
I didn’t jack up my code.
Here is my code just in case.
import caurina.transitions.*;
butt.addEventListener(MouseEvent.ROLL_OVER, butt_ROLLOVER);
function butt_ROLLOVER(e:MouseEvent):void
{
Tweener.addTween(ticket, {_frame:18, time:0.3, transition:”linear”});
var over:Over = new Over();
over.play();
}
butt.addEventListener(MouseEvent.ROLL_OUT, butt_ROLLOUT);
function butt_ROLLOUT(e:MouseEvent):void
{
Tweener.addTween(ticket, {_frame:0, time:0.5, transition:”linear”});
}
I see that the 1.26.62 Tweener version works. Can someone help out on the fixe for the latest version Please?
Where can I download 1.26.62 Tweener version that works?
Found it… sorry!
For multiple buttons – Does any one see an issue with this code? I am trying to add 4 buttons and cant figure out with I am doing wrong- Thanks
import caurina.transitions.*;
import caurina.transitions.*;
import caurina.transitions.properties.*;
DisplayShortcuts.init();
butt.addEventListener(MouseEvent.ROLL_OVER, butt_ROLLOVER);
function butt_ROLLOVER(e:MouseEvent):void
{
Tweener.addTween(butt1, {_frame:30, time:0.7, transition:”Linear”});
}
butt.addEventListener(MouseEvent.ROLL_OUT, butt_ROLLOUT);
function butt_ROLLOUT(e:MouseEvent):void
{
Tweener.addTween(butt1, {_frame:0, time:0.6, transition:”Linear”});
}
butt2.addEventListener(MouseEvent.ROLL_OVER, butt2_ROLLOVER);
function butt2_ROLLOVER(e:MouseEvent):void
{
Tweener.addTween(net, {_frame:30, time:0.7, transition:”Linear”});
}
butt2.addEventListener(MouseEvent.ROLL_OUT, butt2_ROLLOUT);
function butt2_ROLLOUT(e:MouseEvent):void
{
Tweener.addTween(net, {_frame:0, time:0.6, transition:”Linear”});
}
Hey Lee,
Fantastic tutorial!
However whenever I add the actual function of the button getURL, I get an error and am stumped to where I should add that code. I am using:
on (release) {
getURL (“thewebsite”,”_blank”);
}
but I am always getting this:
1087: Syntax error: extra characters found after end of program.
Is there a more efficient way of getting this to work??
Thanks
i hav this error
## [Tweener] Error: The property ‘_frame’ doesn’t seem to be a normal object property of [object Cuadro] or a registered special property.
im using the last stable version of tweener ( tweener_1_31_74_as3 )
Hallo
My Name is Vincent , im from Germany..
Thx so much for this perfekt Tutorial , im still playing around with AE and its makes so much fun.Its a diffrent kind of working with Flash thats ofers so many new Way to desing a Page.
I looking to foward to see more Videos for working wit AE and Flash
Please make some more ……
For the Error Code:
## [Tweener] Error: The property ‘_frame’ doesn’t seem to be a normal object property of [object Cuadro] or a registered special property.
Its a simple Way to fix that …
Just Download the stable Version 1.26.62
You can download it here …
http://code.google.com/p/tweener/downloads/detail?name=tweener_1_26_62_as3.zip&can=2&q=
So thx again , and sry for my bad english
Vince
I did the tut but cant get past the exporting stage, im am very new as in 1 day new to aftereffects,
I keep getting a probleme of not being able to export as flv.?
Can anyone please help me?
It looks like I’m about the fourth person in this thread to get this error.
## [Tweener] Error: The property ‘_frame’ doesn’t seem to be a normal object property of [object Cuadro] or a registered special property.
Other than that the tut looks–and approach–looks very exciting.
For a fix to the “_frame” error see this thread:
http://code.google.com/p/tweener/issues/detail?id=34
Hi lee
I have copied the code exactly and im getting these errors
function butt_ROLLOVER(e:MouseEvent):void
function butt_ROLLOUT(e:MouseEvent):void
any ideas?
sorry lee it also said
class or interface “mouseevent”could not be loaded for both
freddy,
i got the same problem and now i figure it out.
try this, it should work:
function butt_CLICK (e:MouseEvent):void
{
var yourURL:URLRequest = new URLRequest(“yoursite”);
navigateToURL(yourURL);
}
butt .addEventListener(MouseEvent.CLICK, butt_CLICK);