More Related Stories

Adobe After Effects 7.0 Professio... Edition for Windows Animate your ideas and create compelling motion gr...
From: $623 to $1,251
ADOBE LA FULL AFTER EFFECTS PB 7 MAC RETAIL ENG 1U Animate your ideas.
From: $635 to $1,251
Adobe AFTER EFFECTS STD 7 WIN UPG ENG STD-STD 1U The industry standard for motion graphics and visu...
From: $176 to $246
Tutorial: Page (1) of 2 - 09/21/06 Email this story to a friend. email article Print this page (Article printing at MyDmn.com).print page
From After Effects to Flash and Back, Part 2 Making Flash-ready sequences, well, Flash-readier By Kevin Schmitt

If you were with me for the last installment, you're already hip to the palpable excitement in the air that has already worked its way into a fever pitch. Today we're going to--wait for it--take the content we made last time in After Effects and put it all together in Flash. I, for one, can't wait, so let's get this party started.

If you recall from last time (available here if you don't), we made three items in After Effects: two FLV files (a looping background and a masked clip from Night of the Living Dead) and one SWF file (a spinning text animation that simply proclaimed, "Zombies!"). The idea was to take all of this After Effects-generated content and assemble it in Flash, which would yield the following masterpiece of interactivity (fig. 1):


Figure 1 (click to play)

Excitement abounds, does it not? But I digress. We need to fire up Flash and get all this stuff put together. If you want to download the pieces and follow along, you're certainly welcome to do so:

Ready? Good. The first step once Flash is running is to make a new Flash Document (Control+N on Windows or Command+N on the Mac and select Flash Document) and set the dimensions to 450x150 at 30fps with a black background (fig. 2). Also, make sure the target player is Flash 8, as we'll be adding a couple of things that are only supported in Flash 8.


Figure 2

Now, I'm a neat freak when it comes to Flash projects, so the next step would be to indulge my by making several layers in the first frame of the main Timeline, as shown in Figure 3:


Figure 3

We've got (from the bottom up) layers for the background, the video clip, the rotating text, the button that will start the clip and text playing, and one for the ActionScript. And while I'm in anal retentive mode, I must insist that we put a stop action in our actions layer. So, click in frame 1 of the actions layer, head to the Actions panel (F9 if it's not already open) and type the following:

stop();

With that out of the way, let's go about the task of importing the clips we made in After Effects. I'm all about picking the low-hanging fruit first, so let's take care of the easiest one and bring in our spinning "Zombies!" text. Select the Import to Library command (File:Import:Import to Library) and navigate to wherever you downloaded the text.swf file to (after you've unzipped it, of course). Once you've selected the file, it will show up in the Library as text_swf, along with several graphic symbols that represent the individual letters (fig. 4).


Figure 4

Now, this step is entirely optional, but as I like to do a bit of housecleaning to ward off a bad case of Library stank, feel free to rename the letter symbols and place them in a folder (fig. 5) as I've so obsessive compulsively done. At the very least, rename your text.swf Movie Clip to a more Flash-appropriate text_mc.


Figure 5

We have to perform a bit of surgery on our newly-renamed text_mc Movie Clip to make it ready for this particular project, so double-click on text_mc in the Library to open the text_mc Timeline. If you scroll across the Timeline, you'll notice that you have 150 keyframes of exciting Zombie text action (fig. 6). Neat-o.


Figure 6

Anyway, rename Layer 1 to text, and create a new layer and name that actions. Put a stop(); action in frame 1 of the actions layer like we did on the main timeline, then scroll out to frame 150, add a keyframe there (F6), and add another stop(); in the new keyframe. Once all that is done, your Timeline for the text_mc symbol should look something like Figure 7.


Figure 7: I've split this view in half so you can see the action at the first and last frames of the sequence.

The last thing to do before we move on is to head back up to the main Timeline (click "Scene 1" in the Timeline window to get there), select the text layer, and drag an instance of the text_mc Movie Clip to the Stage. Make sure the registration point is sitting at the very top of the Stage and about a third of the way over (fig. 8, left), which translates to an x coordinate of 185 and a y coordinate of 56 when the symbol position grid is set to top left (fig. 8, center). The last thing to do here is to head for the Properties panel and assign this instance of the Symbol the highly inventive name of "text_mc" (fig. 8, right).


Figure 8

One down, two to go. Let's work on the background. Select frame 1 in the bg layer on the main timeline, and then Select File:Import:Import Video from the menu bar to start the FLV import wizard. From there, follow the sequence outlined in Figures 9-11 to get the video into the project:


Figure 9: Adjust your path to match where your file is, of course, but the file in question here is bg.flv.


Figure 10: We definitely want to embed the video inside the Flash movie.


Figure 11: Make it a Movie Clip, place it on the stage, and expand the timeline.


Page: 1 2 Next Page

Related Sites: Creative Mac ,   Digital Producer ,   Digital Webcast ,   Digital Animators ,   Animation Artist ,   Siggraph News ,   Audio Video Producer ,   Corporate Media News ,   Digital Game Developer ,   Digital Media Designer ,   Oceania ,   MacAnimationPro ,   MacDesignPro ,   Test Site ,   After Effects ,   Webcast (BN) ,   Flash
Related Newsletter: DMN Newsletter ,   CMN Newsletter ,   Pixels Newsletter ,   Levels Newsletter ,   Mac Alert Newsletter ,   Renders ,   Streamline Newsletter ,   Digital Media Net ,   DMNForums ,   Tutorial Finder
To Comment on This Article, Click HERE

Most Recent Reader Comments:
  • Re: From After Effects to Flash and Back, Part 2 by Stevearly at Sep. 26, 2006 1:41 pm gmt
  • From After Effects to Flash and Back, Part 2 by DMN Editorial at Sep. 25, 2006 9:18 pm gmt

    Click Here To Read All Posts
    Must be Registered to Respond (Free Registration!!!, CLICK HERE)
  • apple desktops
    Apple Power Mac G5 Quad-core SuperDrive 2.5GHz - M9749LL/A (Rated by 7 users)
    Power Mac G5 Dual 2.7GHz SuperDrive
    Price Range $2,595 to $2,799View Details Related Items

    iUnitek: $2799.00
    CompuAmerica: $2595.00
    Apple Power Mac G5 Dual-core SuperDrive 2 GHz - M9747LL/A (Rated by 7 users)
    Apple Power Mac G5 Dual-core SuperDrive 2 GHz
    Price Range $1,899View Details Related Items

    iUnitek: $1899.00
    Apple iMac 17 IN 1.83GHZ Desktop Intel Core Duo 512/160/SD (Rated by 15 users)
    Widescreen iMac Intel Core Duo featuring 160GB hard drive, built-in iSight and more.
    Price Range $949 to $1,699View Details Related Items

    Apple Store: $999.00
    MacMall: $1399.00
    Best Buy Business: $1149.16
    Apple REMOTE DESKTOP V3 RETAIL 10 MANAGED SYSTEMS (Rated by 0 users)
    1046267 MA231Z/A APPLE REMOTE DESKTOP V3 RETAIL 10 MANAGED SYSTEMS MA231Z/A
    Price Range $186 to $299View Details Related Items

    JR.com: $279.99
    Trinity Software: $198.00
    MacMall: $279.99
    Apple REMOTE DESKTOP V3 RETAIL UNLIMITED MANAGED SYSTEMS (Rated by 0 users)
    1046301 MA232Z/A APPLE REMOTE DESKTOP V3 RETAIL UNLIMITED MANAGED SYSTEMS MA232Z/A
    Price Range $359 to $499View Details Related Items

    Amazon: $449.10
    PC Connection: $499.00
    MacMall: $469.99
    Apple Remote Desktop - complete package (Rated by 0 users)
    Apple Remote Desktop 2 delivers over 50 new features including VNC-compatible screen sharing, Remote Shell Scripts, Task Lists, and Remote Boot Disk Selection.
    Price Range $295 to $306View Details Related Items

    Bargains101: $295.00
    Checkout Soft: $305.98
    HOT THREADS on DMN Forums
    Page Title can't change using Dreamweaver Template Pages?!? (1) • by blueStupa on the on the Web Design forum Mac vs PC color difference??? (1) • by Mark Griesbauer on the on the Adobe Photoshop forum **Professionally Trained Composer**  • by Mike Watts on the on the Demo Reels forum [FORUM NEWS] ONE DAY SALES (OCTOBER 23-27) LIMITED  • by Ko on the on the Plugin Central forum Adobe Photoshop Style Layer Tutorial  • by videxpertise on the on the Adobe Photoshop forum Object lable badly formatted  • by awilks on the on the Adobe Illustrator forum Thoughts on the Adobe Version of Dreamweaver?  • by blueStupa on the on the Macromedia Dreamweaver forum
    Marketplace
    Laptop LCD Screen
    Replacement laptop screens for your high resolution graphics needs! We carry high resolution LCD screens for all brands including, Apple, Compaq, Dell, IBM, HP, Sony, Gateway,...
    Free CorelDraw Graphics Suite X3
    Get the CorelDraw Graphics Suite X3 for free when you complete sponsor's survey!
    Free DigiMemo Digital Notepad
    Digitally capture and store handwritten notes for free! survey required
    Get your Designs noticed
    Stand out from the crowd. Place your design onto a professional looking CD or DVD. Primera offers CD-DVD Printers and disc duplicators to help you get your design out there.
    Laptop Screen
    We stock laptop LCD screens for all brands of notebooks including Dell, IBM, Compaq, Sony, Toshiba, Gateway, HP and more. We have thousands of laptop screens to fulfill your L...
    Free Creative Xmod X-Fi Module
    Enjoy surround sound on any stereo/speaker system/headphones using this free module! survey required
    Buy a Link Now!
    © Copyright, 2006 Digital Media Online, All Rights Reserved