Using Flash Catalyst Custom Component in Flash Builder

I created a custom component in Flash Catalyst that is intended to be used in the way that one would use a BorderContainer in Flex/Flash Builder. Can anyone advise me how I might go about doing this?
many thanks,
Mark

And also there's a lot of new content to help every one started at http://www.adobe.com/devnet
If you're a CF/Flex developer you're gonna enjoy the new content here too
http://www.adobe.com/devnet/flex/flex_cf.html?devcon=f3

Similar Messages

How do I reuse a custom component in Flash Catalyst?

All-
I'm sure this is easy, I simply can't figure it out. I've created a custom component in Flash Catalyst with two states, open and closed. I'd like to reuse this component in my app with different text assest. How is this done? Duplicating the component isn't available in this version...do I need to recreate the whole thing with different text?
Cheers,
`me

If you look in the library panel, there should be an entry for your custom component - probably something like CustomComponent1.mxml. Drag this out onto the artboard to create a new instance of the component.
In the case of a custom component, you can't change much on the second instance. If you have something like a text input skin though, you can change the text it is displaying for each instance.
We are working on making this sort of thing easier in the future, so stay tuned

Can I import a custom component from Flash 8 into Flex?

'm creating a custom Flash Video Playback component in Flash
8 using AS2. I understand that I cannot import this to Flex as
stated in Livedocs: "You can use SWC files created in Flash 8 only
for skinning, not as components. Until the next version of Flash is
released, you can only use SWC files created in Flex 2 as
components."
But now that Flash 8 supports AS3 with the new Adobe Labs
add-on, if I create the custom component using AS3 in Flash 8, can
I then import it and use it in Flex 2.0.1?
Any help is appreciated,
Thanks!

I was going through my libraries trying to find the quick test I did when I was dabbling with the kit and I can't find it anywhere at all.
If I recall this was the pdf that I read to get it to work properly with CS3 and Flex 3 I don't know if you have read it already or if it will help, but it is the only thing I know for sure helped with the process.
http://download.macromedia.com/pub/labs/flex/3/flexbuilder3_componentkit_docs_121207.pdf

Importing a custom component from Flash Catalyst with Assets

I am experimenting with Flash Catalyst to see if it would work well for us to create components for Flash Builder to use. As a test I created a very simple component with a Pie Chart and a button and exported it as a fxpl file. In Flash Builder I created a Flex library project and imported the component to it. When I tried to use the component in a trivial test app it gave me an error, saying 'Could not resolve <graphics:fc_pie> to a component implementation', presumably because it had not put the component files in the right place of the library tree - by default they were put in a folder at the same level as components but with the name of the component, below which it had a components folder and an assets folder. If I move the files in these folders to the corresponding folders under src then it works fine.
The question is, how do I get Flash Builder to do this correctly? I assume I'm missing something obvious but I am a real Flash Builder Novice and this process is about evaluating which tools to use. Sorry if I'm being a numpty. I'm using Flash builder 4.5 and Flash Catalyst CS5.5.
Any help much appreciated.

If you look in the library panel, there should be an entry for your custom component - probably something like CustomComponent1.mxml. Drag this out onto the artboard to create a new instance of the component.
In the case of a custom component, you can't change much on the second instance. If you have something like a text input skin though, you can change the text it is displaying for each instance.
We are working on making this sort of thing easier in the future, so stay tuned

How to use a flex custom component in an AS3 Class?

Our software team has been developing flash applications using AS3 (via the FlashDevelop IDE and the free Flex SDK). Recently, some members of the team started exploring FlexBuilder and Flex (wow... why did we wait so long?). The problem is that some folks continue to develop using pure Action Script 3 (FlashDevelop) while others are creating custom components in FlexBuilder.
How do the AS3 developers use the Flex Custom components built in FlexBuilder in their AS3 Applications?

SwapnilVJ,
Your suggestions enabled me to make progress, but I'm still having a problem. Based on you suggestion, I learned how to make a swc using Flex Builder. I successfully added the swc to the lib resource in my AS3 project (FlashDevelop). I was able to instantiate one of my new components (code hinting even picked it up from the lib).
When I run my app, my component is not visible. I can trace properties of it and the values are correct. Any thought why I might not be seeing my custom component?
package trainer.games.board.MatchThree {
import flash.display.Sprite;
public class Test extends Sprite{
private var cp:MatchingGameControlPanel; // <<< this is my swc custom component created in Flex
public function Test() {
   cp = new MatchingGameControlPanel();
   cp.visible = true;
   addChild(cp);
   trace("width: ",cp.width); // <<< works and displays valid data for the component.

Importing a flash Catalyst .swf file in Flash CS5 ?

Hi,
I found Flash Catalyst by luck while browsing the Adobe website and downloading the Flash CS5 trial...
One simple question....
Can I import a .swf file created in Flash Catalyst into a Flash CS5 .fla as an element ?
I created a scrolling text attached to a custom made scrolling bar in Flash Catalyst, and I would now like to use it in my Flash CS5 project...
Well, I will be waiting for your responses...
Thanks in advance for your help !
Gilbert Gour

Unfortunately you can't import an SWF from Flash Catalyst into Flash CS5. Flash Catalyst uses the Flex Framework for building the its SWF. Flash CS5 does not use the Flex Framework and doesn't know what to do with that kind of file. You can load an SWF from Flash CS5 into your Flash Catalyst project, though.

Swf published from Flash Catalyst not playing in Flash Player

Hi All,
I have 2 issues which I'm not sure may be related or not.
- I've created a project in FC but when I publish it to .swf it does not open in Flash Player. It plays in Chrome but Flash Player 10 gives a blank screen.
- I have FC 5.5 and I want to make the project scale according to the browser size. How can I do this? I have checked the Resize option but when it open in Chrome it just cuts out all that is outside the browser screen area.
Thanks.
Tej

I can not recall the minimum Flash Player that is required for Flash Catalyst. I suspect that your version of Flash Player is too low. Chrome auto-updates to the latest version, so that is why it works in Chrome.
Also, make sure you understand the differences between resizing and scaling. I wrote a blog post on this here: http://chrisgriffith.wordpress.com/2011/06/22/understanding-resizing-and-scaling-in-flash- catalyst/
Chris

Using nullLayout for custom component

I am writing an AccordianPanel as a custom component that can be dropped into a JPanel and behave as expected. I am using a null layout in the outer container (JPanel) as the accordian dividers need to move as told and not be managed by a layout manager. When I resize a window or another container that the custom component sits in, it doesn't resize anything - I understand this is the behavior I would expect as that is how I coded it.
Now, I want to have the custom component resize its internal stuff when the container it resides in (i.e. JFrame or most likely another JPanel) gets moved, but I don't know how to do this. The outer most component in my custom components hierarchy is a JPanel whose layout is set to null and I stuff everything else inside there.
I believe I need to add a componentListener to my JPanel whose layout is set to null, but I am not sure. Could someone send me in the right direction.
thanks

the best approach might be to implement your own LayoutManager (which is simple enough) and use it rather than absolute positioning....
If you read postings in the forum you will find most people recommend using LayoutManagers and not a null layout so you don't have problems like this.Hello sarcommand , camickr, and anyone interested,
I've tried to bring this discussion up again just a few days ago, and was disappointed I got no feedback - must be a dull read :o(
Here is the [link to the thread|http://forums.sun.com/thread.jspa?messageID=10723670&#10723670], would you mind having an eye on it?
I'm sorry to hijack this thread (seems slightly less rude than bumping my own former thread up), but I've read several discussions on this subject too, and still I can't decide whether I should follow the CustomLayoutmanager track.
Although most of the writing there is specific to my current problem, it highlights 3 points I think are general enough:
- A custom layout (whatever the way it is implemented, I discuss 4 approaches in the thread) is generally used to display custom components, or at least, components that represent custom application-specific entities or input points. -> Is is worth the trouble to abstract the positioning logic when this "custom layout" has only one, at best two, use cases (a couple of specific screens in your specific app that represents your specific entities)?
- A custom (app-specific) layout manager is likely to require more knowledge about the things being layed out than the default min/max/pref sizes. In particular it may require to know data of the underlying model objects represented by the children components. How is that best designed? I tentatively think it's by way of custom Constraint classes which have to be abstract enough yet should be easily mapped from the app-specific data.
- The CustomLayoutManager integrates natively with regular graphical events (hiding, resizing,...), but how to integrate app-specific events (such as, when the underlying data change in such a way that should be reflected by a change in the layout, how/when to force the re-layout)?
Thank you for your help.

.swf imported in Flash Catalyst shows only the Flash Shockwave icon

I have scoured the FC forums and watched all of the Adobe TV episodes
on importing .swf files into Flash Catalyst but I am still faced with the following problem.
I have a basic animated .swf file that I created in Flash CS5. I am trying to import that .swf file into a Flash Catalyst project but when I do I only see the blue border around the asset when I click it in the layers panel. In the top left corner is a small round Flash Icon ( I believe it is the Flash Shockwave version - Blueish Gray). Nothing shows when I "Run" the project nor when I added the .swf file in the local folder from where Flash Catalyst runs the project.
I tried re-publishing the original Flash file in different version of Flash player, but to no avail. Not sure if I am doing something wrong, or if I have imported incorrectly or what.
Even though I cannot see the .swf file imported into Flash Catalyst, I still tried to add an interaction to play on Application Start, but nothing there either.
At a loss and looking for some direction.
Thanks in advance for your response.
Cheers!

Erik -
It's a pleasure to help someone! I just got through this as you can see. Only problem is I just hacked it with no precision, so for example I moved a lot of files to the server to make them accessable and then it played. But near as I can tell, I'll tell you the story.
There are two things going on. When you play it locally it's different from when you play it on the web. You are correct, you should see the first frame of the swf in your animation. To get it to play (assuming it is set to play)you then have to control+enter to preview (on windows). The assests are laid out locally in the file structure displayed in the url bar. no?
Part of it is that there may be several things going on here... All I can do is tell you all the numerous problems I had, made worse because I had 3 different work-stations...
I had problems when I had several swfs floating around in the library and I think similar names: Eventually I just did a clean export of the swf (the first one was from Flash... 3? 4? and Catalyst is cs5... ) and such to just do the work-flow in one motion. I had too many work-stations going on. So that part I finally did cleanly, and when that was settled, I could handle the file issues.
The swf: It does have to be in the same folder, and not in a sub-folder. Also, all the contents from DEPLOY TO WEB - just drag it into your site folder defined by dreamweaver or whatever and put it on the server at the same level, NO russian dolls (no file folders within folders). With Dreamweaver, when you upload a swf, you select the MAIN file and supposedly DW pulls files - it does, but not all of them, such as supporting swfs.
I would have thought that DW would do it correctly automatically : It seems to want to: but there are still kinks.
If you're like me, you recognize that catalyst is a powerful creative stage, but this stuff is just annoying and really easier just man-handled with precision once and forgotten about lol.
I heard also some grumbling on swfs that are just too huge or have aspects that don't import well, but it doesnt' sound like a problem in this case.
Do update me - I'm around this weekend, would love to see you succeed on this.
Cache,
Thanks for your replies. I have put the .swf file in the same "local" directory as the main.html for the FC Project I am working on and no luck locally. However, does the .swf file have to be in the local directory of the FC project prior to it being imported into FC for it to work locally?
Also, when I was watching a video tutorial about inserting .swf files into FC, the graphics/content of the .swf that was inserted could be seen in the design view of FC. My imported .swf only shows a small, round flash icon in the corner and nothing else. This doesn't seem right to me. Shouldn't one be able to see the graphics/content of the imported .swf so that it can be properly placed in the design? That is how it was in the video tutorial. If this is also due to the location of the imported .swf then Adobe has not made that clear in anything I have read or seen.

When I change a property name in a custom component, the flash compiler throws a ReferenceError.

I'm building a custom Datagrid component, and I had three parameter properties: _columns [Collection], _headerHeight [Inspectable], and _rowHeight [Inspectable]. This all compiled fine, but I needed to change things about the _columns variable, and it made sense to instead create _columnData to store data from a DataProvider. Now it throws a ReferenceError every time I try to Test Movie, saying that the property columnData can't be created, despite listing it in the parameter list in the Flash Professional IDE.
The only thing I can imagine is that Flash is somehow caching an earlier version of my class, but that the Flash IDE is correctly updating itself according to my metadata when I rebuild the component. I've cleared out all the stuff from ~/Library/Application Support/Adobe/Flash CS5/CodeModel, restarted Flash, even built the component from scratch (using the same class) in a new FLA - nothing has worked.
The code causing errors is copied below:
private var _columnData:Object;
private var _headerHeight:Number = 40;
private var _rowHeight:Number = 40;
[Collection(collectionClass="musicone.components.data.DataCollection", collectionItem="musicone.components.controls.datagrid.DatagridColumn", identifier="item")]
public function get columnData():Object {
     return _columnData;
public function set columnData(value:Object):void {
     _columnData = value;
     var _forceClass:DataCollection = value as DataCollection;
     //updateColumns();
     draw();
[Inspectable(type="Number", defaultValue=40)]
public function get headerHeight():Number {
     return _headerHeight;
public function set headerHeight(value:Number):void {
     _headerHeight = value;
     draw();
[Inspectable(type="Number", defaultValue=40)]
public function get rowHeight():Number {
     return _rowHeight;
public function set rowHeight(value:Number):void {
     _rowHeight = value;
     draw();

I would reccomend that you not use scenes for that purpose, not exactly sure why but scenes are unreliable. Try putting all of your content in one scene, one timeline and just add a few stop() 's at the end of each "scene", then in your code remove scene2 and scene3 three references, and you'll possibly need to change frame anchors/targets also if you have them.
The error indctates that you have called an object that does not exist at the time the code is run, check where you placed your code, should be frame one, scene1, and also check if you have objects entering the stage down the timeline, that do not enter in frame 1, possibly the movieClip? if so add another keyframe on your actions layer on the same frame as the object and enter the call function for it there.

Flash CS5 custom component

Hello,
I have a problem since I improved my version of Flash (CS3 to CS5). I created a component in which there are several parameters. My problem concerns parameters which are "Number" type. It appears to no longer be managed the same way since CS5. Indeed, if I pass a value greater than 1, the value retrieved in actionscript is 0. It seems that the values of "Number" type for CS5 should be as follows 0 <= x < 1.
Is this a bug? How to pass a value greater than 1 (eg: 800) ?
Thank you in advance.

I would if we could - but we need support for unicode characters. Our primary language is Nepali using the Devanagari script, which is not supported by Classic Text (the written language is all about complex ligatures - often up to five multibyte characters are rendered as one).

How to use Flex mx.charts component in flash project?

Can anyone enlighten me on how I can use the Flex mx.charts component in my Flash Project? I am using Flash Professional CS4
Are there any tutourials on the subject.
Thanks in advance.

http://www.designscripting.com/2011/03/filtering-flex-chart-data-by-consuming-xml-data/
http://www.roseindia.net/tutorial/flex/flex4/components/chartactionscript.html
Or otherwise you can use the below link to use the fusioncharts components
http://www.fusioncharts.com/

Unable to reRender programatically using A4J in custom component

Hi,
I am new to JSF and stuck with reRender functionality of Ajax4Jsf. I have to write an ajax enabled custom JSF component that contains several simple child components such as text box and selectOneMenu. for the convinience I assume one text box and one combo box. I have to update the content of text box when I change the value in selectOneMenu. but I am unable to do so, Everything is working fine as per JSF life cycle. Here is the code of my encodeBegin method.
public void encodeBegin(FacesContext context) throws IOException {
super.encodeBegin(context);
this.getChildren().clear();
Application application = FacesContext.getCurrentInstance().getApplication();
HtmlForm htmlForm = new HtmlForm();
htmlForm.setId("reportConfigureForm");
this.getChildren().add(htmlForm);
HtmlInputText htmlInputText = new HtmlInputText();
htmlInputText.setId("testInputText");
ValueBinding testInputTextBinding = application.createValueBinding("#{" + getReportBeanName() + ".selectedReport}");
htmlInputText.setValueBinding("value", testInputTextBinding);
htmlForm.getChildren().add(htmlInputText);
HtmlAjaxRegion htmlAjaxRegion = new HtmlAjaxRegion();
htmlAjaxRegion.setId("reportSelect");
htmlAjaxRegion.setSelfRendered(true);
htmlForm.getChildren().add(htmlAjaxRegion);
HtmlSelectOneMenu htmlSelectOneMenu = new HtmlSelectOneMenu();
htmlSelectOneMenu.setId("selectedReportType");
htmlSelectOneMenu.setStyleClass("dropdown");
htmlSelectOneMenu.setRequired(true);
ValueBinding valueBinding = application.createValueBinding("#{" + getReportBeanName() + ".selectedReport}");
htmlSelectOneMenu.setValueBinding("value", valueBinding);
UISelectItems uiSelectItems = new UISelectItems();
List<SelectItem> selectItems = new ArrayList<SelectItem>();
for (Map.Entry<String, String> report : getReportBean().getReports().entrySet()) {
selectItems.add(new SelectItem(report.getKey(), report.getValue()));
uiSelectItems.setValue(selectItems.toArray(new SelectItem[selectItems.size()]));
htmlSelectOneMenu.getChildren().add(uiSelectItems);
HtmlAjaxSupport htmlAjaxSupport = new HtmlAjaxSupport();
htmlAjaxSupport.setEvent("onchange");
htmlAjaxSupport.setReRender("reportConfigureForm:testInputText");
htmlSelectOneMenu.getFacets().put("a4jsupport", htmlAjaxSupport);
}What i think is that I am passing the invalid component id tp setReRender method thats why it is not getting rendered. Please let me know if I am doing wrong, or point me to any tutorial for the same. Also please point me to any better ways of doing the same. I am also not very happy about the way I populated the htmlSelectOneMenu. I thought that for every JSF tag we have corresponding java class but was unable to find one corresponding to <f:selectItems>, hence I used above way for populating the htmlOneMenu.
Thanks in Advance
Ahsan

I have solved similar problem.
The problem was, that created components has to be properly "registered" to component tree. It means, that for all components You have to set parent and childrens:
       this.getChildren().add(htmlForm);
       htmlForm.setParent(this);See example bellow:
@SuppressWarnings("unchecked")
public void encodeBegin(FacesContext context) throws IOException {
       this.getChildren().clear();
       Application application = FacesContext.getCurrentInstance().getApplication();
       HtmlForm htmlForm = new HtmlForm();
       htmlForm.setId("followupForm");
       this.getChildren().add(htmlForm);
       htmlForm.setParent(this);
       HtmlAjaxOutputPanel htmlAjaxPanel = new HtmlAjaxOutputPanel();
       htmlAjaxPanel.setId("followupPanel");
       htmlAjaxPanel.setParent(htmlForm);
       htmlForm.getChildren().add(htmlAjaxPanel);
       HtmlInputText inputPhoneNum = new HtmlInputText();
      inputPhoneNum.setId("phoneNum");
       ValueBinding testInputTextBinding = application.createValueBinding("#{calculationBean.phoneNum}");
       inputPhoneNum.setValueBinding("value", testInputTextBinding);
      inputPhoneNum.setParent(htmlAjaxPanel);
       htmlAjaxPanel.getChildren().add(inputPhoneNum);
       HtmlAjaxCommandButton htmlSendButton = new HtmlAjaxCommandButton();
       htmlSendButton.setId("sendButton");
       htmlSendButton.setValue("Odeslat");
       htmlSendButton.setReRender(htmlAjaxPanel.getId());
       htmlSendButton.setAction(application.createMethodBinding("#{calculationBean.setPhoneNumAction}", null));
       htmlSendButton.setParent(htmlForm);
       htmlForm.getChildren().add(htmlSendButton);
       //AjaxRendererUtils.addRegionsFromComponent(htmlSendButton, context);
       htmlForm.encodeBegin(context);
       htmlAjaxPanel.encodeBegin(context);
      inputPhoneNum.encodeBegin(context);
      inputPhoneNum.encodeEnd(context);
      htmlAjaxPanel.encodeEnd(context);
       htmlSendButton.encodeBegin(context);
       htmlSendButton.encodeEnd(context);
       htmlForm.encodeEnd(context);
       super.encodeBegin(context);
}

FAQ: How can I make my Flash Catalyst application scale/use a liquid layout?

Flash Catalyst CS5 currently only supports applications with fixed dimensions. Custom components you create in Catalyst have absolute sizing.
If you want to experiment with creating resizable applications (liquid layouts) and components in a preview of the next version of Flash Catalyst, codenamed "Panini", you can find more information here:
Introducing Adobe Flash Catalyst "Panini"
Download Adobe Flash Catalyst "Panini"
Adobe Flash Catalyst "Panini" help
Keep in mind that Flash Catalyst "Panini" preview is meant for exploration and testing, not real production. If you are doing real production work, here are some options that work with Flash Catalyst CS5 and Flash Builder:
Liquid Layouts
If you are building an application that requires relative constraints, you can take the FXP file from Flash Catalyst into Flash Builder, and apply constraints there so that your components resize according to your application dimensions.
For more info, see this Help topic:
Using constraint-based layouts in Flash Builder
SWF Scaling
If you want your swf to scale, without relative constraints, there's a simple way to make that work in Builder as well. Simply save out your FXP file from Flash Catalyst and import it into Flash Builder. Open up the "Main.mxml" file. Remove the width and height attributes on the Application tag, and add the attribute:
preinitialize="systemManager.stage.scaleMode='showAll'
The entire Application tag should look something like:
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                  xmlns:s="library://ns.adobe.com/flex/spark"
                  xmlns:d="http://ns.adobe.com/fxg/2008/dt"
                  xmlns:fc="http://ns.adobe.com/flashcatalyst/2009"
                  xmlns:ATE="http://ns.adobe.com/ate/2009"
                  xmlns:ai="http://ns.adobe.com/ai/2009"
                  xmlns:flm="http://ns.adobe.com/flame/2008"
                  xmlns:lib="assets.graphics.*"
                  xmlns:components="components.*"
                  backgroundColor="#FFFFFF"
                  preloaderChromeColor="#FFFFFF"
                  preinitialize="systemManager.stage.scaleMode='showAll'"
                  >
There are a couple other scale modes you may want to try, such as "exactFit", which are outlined at the below link:
Flash Stage Scale Modes
Finally, you will have to adjust the object embed code in your html page to set the size of your swf.
Original discussion here

you can`t. allow your application internet access without the network admin defining an exception for it specifically.
If you have admin rights use the router`s/proxy`y configuration software to allow an exception.

Flash Catalyst and CS Extension Builder?

Does anyone know if it is possible to use exported Flash Catalyst projects in CS Extension Builder? If so are there any examples anywhere?

I don't think so...
If you discover otherwise, I'd be interested in knowing. (Although FC has been discontinued...)

Using Flash Catalyst Custom Component in Flash Builder

Similar Messages

Maybe you are looking for