4 Replies Latest reply on Jan 15, 2010 3:18 PM by Breeeee

    First attempt - questions

    Breeeee

      This is my first attempt using Flash Catalyst (Beta 2), importing all layers and images from Photoshop CS3 http://www.lorynpowell.com. Flash Catalyst is a great product, and I can't wait to see more! I had to start from scratch a few times, as I was having pixel problems when I tried to rotate and align images or move placements, and I didn't flatten the layers on import which created a separate layer for drop shadows. I also imported 4 .flv files which makes this catalyst file quite hefty.

       

      Currently I'm running through all of my pages/states to try and eliminate unnecessary code, by making sure assets only appear in the page/state they belong in. Some text has been optimized, while others have not.

       

      Questions:

      1. I haven't been able to find out how to revert an optimized image back to text in order to make changes, or if it's even possible. I'm thinking it's "break apart the graphic", but that means something totally different in Flash.
      2. How can I bring in a widget from Twitter, which is javascript? I read that it is possible using an IFrame and Flex Builder. Can anyone point me to the specific document or thread?
      3. Is it possible to link to a particular page/state from outside of the .swf? This site also will contain a blog. I want to be able to link to individual pages from the blog built in WordPress, but I don't know if it's possible.
      4. To minimize the size of the file, I'm thinking of replacing the .flv files with the optimized .swf files, and then creating my own custom controls, for play, pause, stop, volume, etc. Does anyone know if this is possible to do? Is there a way to minimize the size of the .flv files?

       

       

      This is a very simple website, mostly text, a few animations, and transitions from page to page. It was a snap importing into Flash Catalyst and setting up pages and transitions once I figured out how everything worked.

       

      Thanks!

        • 1. Re: First attempt - questions
          acath Level 4

          Hi Breeee,

           

          Glad you're enjoying FC!

           

          1) You were right, it's "Break Apart Optimized Graphic". It actually is pretty analogous to breaking apart a symbol in Flash.

           

           

          2) This is a complicated topic. You'll definitely need to do some coding. There are basically three ways to access twitter in a Flex (Flash Catalyst) application:

           

          A) If you want to build your own UI for displaying the twitter information, you can call the Twitter API from Actionscript. There are a lot of tutorials on this. Here's one that looks promising: http://youxylo.com/projects/twitter/

           

          B) If you want to use an existing JS widget, and just overlay it on your FC app, AND you are developing an AIR (desktop) application, you can use the HTML component to load a page inside AIR's HTML engine. Here's a post on how to do that: http://blog.everythingflex.com/2008/02/25/air-html-control/

           

          C) If you want to use an existing JS widget, and just overlay it on your FC app, but you are developing a browser application, you can overlay an HTML iframe on top of your Flash movie. You do this in HTML code. I've never actually done it, but here's a thread about it: http://codingforums.com/showthread.php?t=95109

           

           

          3) If you select a component, you can choose Add Interaction, then change "Play Transition to State" to "Go to URL". Then you can paste in the URL of your blog entries.

           

           

          4A) You can control SWFs using an Action Sequence. Create a play button, then choose "Add Interaction", and change "Play Transition to State" to "Play Action Sequence". An action sequence is like a transition, but it doesn't go TO another state - it just makes some stuff happen. Once you've done that, select your SWF, go to the Timeline panel, and click "Add Action > SWF Control > Play" (or Stop, or Pause).

           

          4B) You can optimize FLVs using the options in the Adobe Media Encoder.

           

          -Adam

          1 person found this helpful
          • 2. Re: First attempt - questions
            Breeeee Level 1

            Hi Acath, thanks so much for responding. I've searched outside of the flex forums and found a few instructions on how to achieve this. One I just tried was this:  Display a Twitter Feed. This seemed very easy, but when I copied the code into Flex Builder I came up with 2 errors. This is what I did:

             

            In the Main.mxml where the page/state is that I want to display the feed, I put the following code (in blue):

             

            <fx:DesignLayer id="designlayer6" d:userLabel="Tweets">

                 <s:BitmapImage source="@Embed('/assets/images/lorynMockup6/red dress.png')" d:userLabel="red dress" x="810" y="421"/>

                 <s:RichText color="0xff0000" fontFamily="American Typewriter" fontSize="18" lineHeight="24" trackingRight="0.25" d:userLabel="Now Showing:" whiteSpaceCollapse="preserve" x="430" y="173">

                      <s:content><s:p><s:span>Now Showing:</s:span></s:p>

                           <mx:Application xmlns:mx="http://ns.adobe.com/mxml/2009" layout="absolute" creationComplete="{feedLoader.send()}">

                                <mx:Script>

                                     <![CDATA[

                                     import mx.controls.Alert;

                                     import mx.rpc.events.FaultEvent;

                                     import mx.rpc.events.ResultEvent;

                                     private function onRes(event:ResultEvent):void

                                     {

                                     _tweets = new XMLList(event.result.status);

                                     }

                                     private function onFault(event:FaultEvent):void

                                     {

                                     Alert.show("Unable to load feed!","Error");

                                     }

             

                                     [Bindable]private var _tweets:XMLList;

                                     ]]>

                                </mx:Script>

                                <mx:HTTPService id="feedLoader" url="http://twitter.com/status/user_timeline/lorynpowell" resultFormat="e4x" result="onRes(event)"     fault="onFault(event)" />

                                <mx:VBox width="400">

                                     <mx:Repeater id="repeat" dataProvider="{_tweets}" width="400">

                                          <mx:Text text="{repeat.currentItem.text}" width="100%" />

                                     </mx:Repeater>

                                </mx:VBox>

                           </mx:Application>

             

             

                      </s:content>

                 </s:RichText>

            </fx:DesignLayer>

             

            I ran into 2 errors on those lines in red. The errors were "could not resolve to a component implementation". I tried to search for those error codes but I'm assuming that I need to create components called "feedLoader" and "repeat" maybe??

             

            Another source I was going to try was this Developing Mashup Air Apps: Consuming Twitter API's. This method has me downloading a twitterscript library called "twitterApi.swc." and then importing into my flex project. This seems to be way more than what I want to accomplish at the moment. But I was trying to import and ran into issues there as well. I'm not sure what kind of file it is, and maybe this isn't supported currently?

             

            If you could possibly give me feedback on the above code I'd really appreciate it. I can also try the other options that you mentioned.

             

            Thanks again!

            • 3. Re: First attempt - questions
              acath Level 4

              Hi Breeee,

               

              I think we should back up a bit. I hope you won't be offended by my inference that you're not familiar with Flex coding. Unfortunately, we haven't figured out how to make integrating Twitter a simple, easy thing to do from the UI. Nor will you be able to cut-and-paste a code snippet into the app you develop with Flash Catalyst, without knowing a bit of Flex. So you're going to have to spend some time learning Flex. There are lots of good resources for learning Flex. Here are a few:

               

              Adobe's official Learn Flex website: http://www.adobe.com/devnet/flex/learn/

              O'Reilley's Flex book: http://www.amazon.com/Learning-Flex-Internet-Applications-Developer/dp/0596517327

               

              I'm sorry to have to drop you into the deep end, but once you go beyond what's available in Catalyst, well, you've gotta code (or find someone who can code).

               

              Good luck!

               

              -Adam

              • 4. Re: First attempt - questions
                Breeeee Level 1

                haha I'm learning    and I don't give up too easily. When I figure it out I'll post back

                 

                ~Bri