Importing Illustrator Website Design
by djelder
on
Feb 12, 2007 at 9:07:30 pm
Hi,
I've tried importing an illustraor file (.ai), exporting a .swf file, and exporting layers as .swf but for some reason when I go to import the files they never keep the design element from Illustrator. It doesn't seem to be happy importing illustrator elements into Flash. What is the best workflow from designing each page to eventually be changed into a flash Website with Illustrator?
Re: Importing Illustrator Website Design, one more thing to After Effects by djelder on Feb 12, 2007 at 10:00:51 pm
I actually recreated the files, it seemed to be buggy for some reason, but recreating the files worked.
Now I have a transition in mind for my website that I can create in After Effects, but wanted to figure out what would be the best way to lay it out in After Effects and then work with it in Flash.
Basically I will have my menu text, when rolled over I will have a glowing text animation created in after effects for each text, it'll be 100 frames and looping. When selecting a different page, going from the HOME page to OUR WORK page the text will grow brighter to comsume the page in light then fade away to reveal the next page. I will create this effect in after effects and export it as an .swf, now my question is when I create that effect, should I just use the one menu text OUR WORK in creating the animation and have it as an overlay animation that will reveal the next page, or should I use some other workflow?
Re: Importing Illustrator Website Design, one more thing to After Effects by grafxflow on Feb 12, 2007 at 10:48:36 pm
Hi,
Not sure if that's the best path to go concerning after effects. When exporting to swf it will actually create the equivalent of a jpeg sequence. Not a vector sequence.
Anyway from what you say every time you press a button it will jump to a section and the glow will be a screen transition. I would suggest creating separate scene for each section then on pressing each text button it will jump to that scenes first frame and play. Maybe disabling the buttons temporarily to let the animation finish.
Re: Importing Illustrator Website Design, one more thing to After Effects by djelder on Feb 15, 2007 at 7:07:32 pm
So I was searching for something that I would like to mimic in Flash, Zen Festival is a site that uses one tool I would like to use, on the text rollovers, the text illuminates and glows, I would like to have that same effect. I only know how to do it in After Effects, how would I do something like that in Flash? Then once that's done and the user selects the button, it will then go to the next page (As you said), and at that point the glow to white and back to reveal the next page would begin. I know how to do that some what, but I still need to do some tweaking to it.
Re: Importing Illustrator Website Design, one more thing to After Effects by grafxflow on Feb 15, 2007 at 9:06:51 pm
Hi,
I've checked the website link and on looking closeup at the edge of the button effect have noticed a sharp edge, like it's in a box. Which could either be a mask or a sequence of some form. My bets are it is a png sequence set to millions plus (containing transparent alpha), and imported into a flash sequence. Then this is placed in a flash movie button.
I know in after effects you can save a png sequence with an alpha. You can only but try!
Re: Importing Illustrator Website Design, one more thing to After Effects by djelder on Feb 15, 2007 at 10:33:12 pm
Cool, thanks for the tip. I had already taken this tutorial into effect and was working on the effect as we speak. I will let you know how it turned out.
Re: Importing Illustrator Website Design by djelder on Feb 20, 2007 at 8:29:01 pm
Ok, so far things are looking good for the animation of the text. I followed the after effects to flash tutorial in bringing it into flash. Now I have my website, I have created an invisible button on top of my text, I have the animated text in a movie clip in place for the rollover action. **Note: in my movie clip animation of the text, I have the animation starting on frame 2, because I didn't want the animation on the screen.** So I clicked on the invisible button in the scene, and added this to the text:
on (rollOver) {
gotoAndPlay("about_us",2);
}
the instance for the movie clip is called about_us and then I told it to play frame 2, but it didn't do anything, what did I do wrong?? Also, when the mouse continues to hover over the text, I would like the animation to loop. did I do something wrong in my process?
