Flash in Flex tutorial: Flash Weather Component

If you finished the Flash & Flex installation you can now continue with this tutorial. If you have no clue where i’m talking about you have to make sure that you installed the Flex component kit and Flex 2.0.1 patch correct. I explain that in the installation guide

Flash start

Lets start with flash. There could be easier ways to do the thing that i’m doing but I don’t have a lot of Flash Experience

It is also possible to download this example if you think this is to much text to read.

  1. Start Flash CS3 and make sure you have a clean document
  2. Go in the main menu in Flash to “insert > New Symbol..
  3. You get the next next screen in front of you. Fill it the same way. In the end we will change this some morestep3
  4. Click on “OK”
  5. Double click the WeatherComponent and make a nice Cloud (I hope you have the same graphic skills as me ;))
  6. Select the whole cloud, Click right mousebutton and choose for “convert to symbol”.
  7. Fill the screen the same as below and click on “OK”step7
  8. This is an important step: fill the “instance name” of your brand new cloud symbol and call it “Cloud” like below. If you forget this step you can’t call this symbol in Flex.step8
  9. Repeat step 5 till 8 and draw a nice sun and call the symbol “Sun”.step9
  10. Click now on “scene 1”. If you don’t see the Cloud and Sun on the stage you have to drag the “WeatherComponent” from the Library to the stage.
  11. Make sure that everything is left or beneath the “origine point”(step11). Everything that is not left or beneith this point is not shown in Flex
  12. Now we select “WeatherComponent” in the Library and go in the main menu to “Commands > Convert symbol to Flex component”. Flash asks if you want to change the Frame rate to 24, that is oke so click “OK”.
  13. Now we go to Flex to create a project but leave Flash open.
  14. We start Flex Builder 2.0.1 and create a new Flex project with the name “FlashInFlexExample” (you can choose your own name but I use this name in this tutorial)
  15. Now create 2 folders in the just created Flex project: “libs” & “com”. Now create in the “com” folder another folder called “flashClasses”.step15
  16. Now we continue with Flash, open Flash again.
  17. Go in Flash in the main menu to “File > Publish Settings”
  18. Go to the tab “Flash” and use the same settings like belowstep18
  19. Click now on the button “Settings…” behind “ActionScript Version”. Add the Classpath to the folder “com” from your flex project that you just added. It will look something like below. Ofcourse your project isn’t saved on the same path so make sure that you modify this to your own saved path.step19Note: Don’t forget to uncheck the checkbox “stage”. This is very important
  20. Now we save the Flash Project
  21. Go in the main menu to “File > Save as…” and save the WeatherComponent.fla in the “libs” folder that you added in your Flex Project. You don’t have to publish it because we still have to make some changes to WeatherComponent.fla
  22. Create a new “ActionScript File”. You can do this in the main menu “File > new… > ActionScript File”.
  23. You add the following text in this file:
    package flashClasses{
    
    //UIMovieClip needs to be imported
    import mx.flash.UIMovieClip;
    
    import flash.display.MovieClip;
    
    //class name need to be the same as the Movieclip name in Flash
    public class WeatherComponent extends UIMovieClip
    {
    //All movieclips that are on the stage are declared here
    public var Cloud:MovieClip;
    public var Sun:MovieClip;
    
    //This function changes the property "visible" in themovieclip Sun
    //this is a very simple function but it shows the possibilities
    public function sunVisibility(text:String):void{
    if (text == "sunVisible"){
    this.Sun.visible = true;
    }else{
    this.Sun.visible = false;
    }
    }
    
    }
    }
  24. Save the ActionScript file in the Flex project as “WeatherComponent.as”
  25. Now we tell Flash that he has to use the “WeatherComponent.as” for the symbol “WeatherComponent”
  26. Click in the Library with the right mousebutton on “WeatherComponent” and choose in the submenu for “Linkage”click on linkage
  27. Fill option in like I did belowlinkage
  28. Click on “OK. If you get an error you have to fix it. Here are some hints where to find the problem
    1. Sometimes he gives a weird error when you click “OK” and I don’t know why. Just click “Cancel” and “Ok” again.
    2. Or the problem is that the Classpath isn’t right, check step 19
  29. Publish your Flash project (the WeatherComponent) and make sure that WeatherComponent.swc is saved in the “libs” folder of your Flex Project. If you get an error than the following problems can cause it:
    1. If you get the error that Cloud and Sun are duplicated that it is possible that you didn’t uncheck the “stage ” checkbox at step 19
    2. If you get an error with this text: “1119: Access of possibly undefined property Sun through a reference with static type flashClasses:WeatherComponent.” it is possible that you didn’t provide the symbol Sun of a instance name (step 8)
  30. Now we go to Flex and create a “source path”.
  31. Click with the right mousebutton in Flex Builder on you main project folder and then on “properties”
  32. Go in the left menu to “Flex build path”. After this you select “Source Path” on the right side.
  33. Click on “Add Folder…”.
  34. Now you open the next folder: “C:Program FilesAdobeAdobe Flash CS3enConfigurationActionScript 3.0Classes” and click “OK”Note: This folder can be located somewhere else
  35. And now we add another “Library Path”, Click on the tab “Library Path”
  36. Click on “add SWC folder…” and browse to your flex project. Select the “libs” folder and click “OK”.
  37. Now we start editing “FlashInFlexExample.mxml” in Flex.
  38. You have to put: xmlns:flash=”*” in the application tag. The application tag will look like this:
  39. Now put between the Application tags the next line(if you type the first characters codehint already shows it):Note: if you only see half of the Flash “stage”it is possible that your didn’t put the origin point on the right place, see step 11
  40. Nice now we can show Flash in Flex.
  41. Put the next text inside FlashInFlexExample.mxml:
     <!--[CDATA[
    public function setSunVisibility():void {
    this.weatherComponent.sunVisibility(this.weatherForcast.selectedValue as String);
    }
    ]]-->
  42. If you now compile the application again and play around with the radiobuttons you see that you can change the visibillity of the Sun. You can do the same with the Cloud.

Events

A lot of the event that you use in Flex are also usable on the Flash Component, like mouseOver, initialize, move, etc…

Custom events

If you create a custom event in flash you have to register this with metadata like this above the WeatherComponent class:

[event(name="itemDropped", type="com.flashClasses.event.itemDroppedEvent")]

Point of interest

Flex automatically adjust the size of the Flash Component if it has moving parts. If this is not desired you can do the next things:

  1. Add a bounding box on the “stage” behind everything
  2. Use the setActualSize() methode. This is called when the Flash component is resizing.

I have made an example that is downloadable of this tutorial. You can download it an import it into Flex Builder. In this example I show the “problem” with the auto adjust.

*Update an importable zip for flexbuilder (tested in Flex builder 2) flashflexexample

test

Author Bio

9 Comments

  1. Arno Manders » Blog Archive » Flash in Flex tutorial installation guide - February 27, 2008

    […] If you already installed flexComponentKit and patched Flex builder 2.0.1 you can skip this installation guide and start building my WeatherComponent tutorial […]

  2. saul - March 3, 2008

    Interesting post and blog, congrats!

  3. Rooster - April 11, 2008

    Hey!
    Very nice tutorial, very useful for me, thanks!
    I have a problem though… When I declare a symbol on stage (wheather it’s a MovieClip or linked to a custom class), and try to use it in the code, the compiler says it’s a null object. This is just when I build it in Flex, but it works fine when I compile it in flash. Any suggestions? (I unchecked the stage in step 19… )

  4. Arno Manders - April 11, 2008

    Difficult to say from here. But it is going with the things Flex is using.
    Are you exporting the swc (you have to rebuild this every time you change something in the Class code of the weather component.
    Do they have a instance name?
    Did you add the source path in Flex?

    You can do everything over again or download my source code to see if that works and compare it to your code. Using Flash in Flex stays a very complex process and it can go wrong in many ways.

  5. Arno Manders - April 11, 2008

    I updated the tutorial with an importable flex project

  6. Rooster - April 11, 2008

    Thanks for the fast response!

    Yes I’ve done all the thing you mention above.

    I should say that it works fine when I create a new Object in the code and run addChild(Object);

    But if I want to instanciate the symbol on the stage if fails… Quite annoying since you have to set the x and y etc. props by code.

  7. Arno Manders - April 11, 2008

    Check your mail… maybe you can show me some code so I can help you some more

  8. Eugeniy - May 13, 2008

    Thanks alot, i try it works with FB 3.0

  9. mlk - November 18, 2011

    Where is step 11? 😛

Leave a Reply to Rooster Cancel reply