13 Replies Latest reply on Feb 12, 2010 12:59 AM by Shongrunden

    Simple Flip Book in Flash Builder

    mikeucf

      I built this simple Flip Book in Flash Builder starting with Flash Catalyst...I guess the big issue is that when I make these components...they work well at z=0, but when I change z things don't work...why? Definitely needs a fix...everything is below (source, demo, book blog, video):

       

      Source: http://lv3d.googlecode.com/files/FlipBook.zip

       

      Demo: http://www.professionalpapervision.com/demos/flipbook/


      Book Blog

       

      Video

       

        • 1. Re: Simple Flip Book in Flash Builder
          David_F57 Level 5

          Hi,

           

          when dealing with z axis you have to remember that it is unlike z-order, when you move things on the z axis you move them closer or further from the 'camera' it doesnt mean that they will be in front of something that has a higher z-order, the latest nightly builds of the sdk have a depth property for components so you can use this to determine what object shows infront of another.

           

          Also for a flip book using a double sided plane makes things a little easier(there are many examples on the net about sprites that have a front and back).

           

          If you use a 3d engine that becomes easier as both papervision and away3d have doublesided planes.

           

          http://gumbo.flashhub.net/flip/  - a small test of flipping with a 3d engine and as3dmod(a pixel modifier library) - source included(its pre flashbuilder so not sure how the source will behave in the current versions of flashbuilder).

           

           

          David

          1 person found this helpful
          • 2. Re: Simple Flip Book in Flash Builder
            mikeucf Level 1

            Thanks for the info...I've really been concentrating on the Spark Architecture...as opposed to 3rd party engines. So I'm not using sprites...but spark and groups.

             

            But good info anyway.

             

            Best,

            Mike

             

            Date: Thu, 28 Jan 2010 20:05:40 -0700

            From: forums@adobe.com

            To: livelym1@knights.ucf.edu

            Subject: Simple Flip Book in Flash Builder

             

            Hi,

             

            when dealing with z axis you have to remember that it is unlike z-order, when you move things on the z axis you move them closer or further from the 'camera' it doesnt mean that they will be in front of something that has a higher z-order, the latest nightly builds of the sdk have a depth property for components so you can use this to determine what object shows infront of another.

             

            Also for a flip book using a double sided plane makes things a little easier(there are many examples on the net about sprites that have a front and back).

             

            If you use a 3d engine that becomes easier as both papervision and away3d have doublesided planes.

             

            http://gumbo.flashhub.net/flip/  - a small test of flipping with a 3d engine and as3dmod(a pixel modifier library) - source included(its pre flashbuilder so not sure how the source will behave in the current versions of flashbuilder).

             

             

            David

            >

            • 3. Re: Simple Flip Book in Flash Builder
              mikeucf Level 1

              Just another comment on this...Bartek does wonderful work (As3dMod)...I put his stuff in my book...but spark is a different animal! Adobe's new Flash Catalyst autogenerates code...and in Flash Builder everything connects to data just with drag and drop binding...I'm really giving it a go...

              Best Regards,

              Mike

              • 4. Re: Simple Flip Book in Flash Builder
                Shongrunden Adobe Employee

                Can you expand a little more on "but when I change z things don't work".  How are you using z and how are things failing?  The source code you provided doesn't seem to flip the pages when I click on them is this the bad behavior you are seeing?

                • 5. Re: Simple Flip Book in Flash Builder
                  mikeucf Level 1

                  Are you trying to run the code in Flash Builder...I doubt it would run in anything else.

                   

                  The z problem is a bug that seemed to appear in beta 2 of Flash Builder...it's not just my component...it is most everything. If you take any component, buttons, video player, etc... and move them in z complonent.z= 100, or Move3D(zby=100)...they don't work correctly anymore...thanks for your response.

                   

                  Best,

                  Mike

                   

                  Date: Fri, 29 Jan 2010 12:25:53 -0700

                  From: forums@adobe.com

                  To: livelym1@knights.ucf.edu

                  Subject: Simple Flip Book in Flash Builder

                   

                  Can you expand a little more on "but when I change z things don't work".  How are you using z and how are things failing?  The source code you provided doesn't seem to flip the pages when I click on them is this the bad behavior you are seeing?

                  >

                  • 6. Re: Simple Flip Book in Flash Builder
                    mikeucf Level 1

                    Also, remember there were two applications in the source code. One was Flash Catalyst it doesn't do anything...just provides the base code...the zipped file had everything in it that works...this application works so if you load it correctly into the right place it will work.

                     

                    Best,

                    Mike

                     

                    Date: Fri, 29 Jan 2010 12:25:53 -0700

                    From: forums@adobe.com

                    To: livelym1@knights.ucf.edu

                    Subject: Simple Flip Book in Flash Builder

                     

                    Can you expand a little more on "but when I change z things don't work".  How are you using z and how are things failing?  The source code you provided doesn't seem to flip the pages when I click on them is this the bad behavior you are seeing?

                    >

                    • 7. Re: Simple Flip Book in Flash Builder
                      Patrick_M12

                      Hello David

                       

                      Unfortunately I can not find the source code of your nice demo (http://gumbo.flashhub.net/flip/).Is it possible that I can get it?

                       

                      Thanks

                      Patrick

                      • 8. Re: Simple Flip Book in Flash Builder
                        mikeucf Level 1

                        Flip Book at http://lv3d.googlecode.com/files/FlipBook.zip

                         

                        3D Room at http://lv3d.googlecode.com/files/My3DRoomResources.zip

                         

                        I'm doing the data-driven flip book now...

                        Best,

                        Mike

                         

                        Date: Mon, 1 Feb 2010 06:21:33 -0700

                        From: forums@adobe.com

                        To: livelym1@knights.ucf.edu

                        Subject: Simple Flip Book in Flash Builder

                         

                        Hello David

                         

                        Unfortunately I can not find the source code of your nice demo.Is it possible that I can get it?

                         

                        Thanks

                        Patrick

                        >

                        • 9. Re: Simple Flip Book in Flash Builder
                          David_F57 Level 5

                          Hi Patrick,

                           

                          Sorry i have been cleaning up my old host site and must have deleted the source, when I have times i'll go through my archives and find the source and will attach it here.

                           

                          David.

                          • 10. Re: Simple Flip Book in Flash Builder
                            Chet Haase Level 3

                            Mike,

                             

                            Steven Shongrunden played around with your original FlipBook example and noticed that it doesn't work the same in the current builds as it did in Beta2. The problem is that we changed the behavior of the 3D effects recently, to fix this bug:

                            http://bugs.adobe.com/jira/browse/sdk-24993

                             

                            Basically, 3D effects used to side-effect the 3D properties of objects and persist their changes on the objects after transitions were over. This is different from the way that the rest of the effects work, where we install the proper end-state values in the objects when transitions end.

                            This means that if you do a Rotate3D with angleYTo="180", that we'll do that rotation during the effect ... and then wipe out that change when the transition ends.

                            There are two workarounds for this situation. The first, which is the way to go in general and definitely for Catalyst users, is to have 2-sided objects. So instead of simply seeing the back of the front cover, the user would see the front of a completely different object (the inside cover page, if you like). Then the transition should rotate both objects (the cover to 180 and the inside object to 0), then make the old object disappear and the new object appear at the right times (like at 90 degrees). So when the values are restored to the front cover upon transition end they will not be visible because the object is not visible.

                            The workaround for coders is to actually tell the states the values that the object should have. So if you actually want to rotate the object around y, then set that information in the states so that we won't blow it away when the transition ends. In fact, you could even set it in the states and not in the effect and we'll run the transition automatically. This is really the best approach for state transitions in general: tell the states what values the objects should have, and tell the transitions what effects to run, then the effects will automatically figure out the values to animate from/to.

                            The trick with this workaround is that the 3D effects affect the post-layout properties by default, and setting those values is not as obvious as setting pre-layout properties on the object.

                            Here's an example of how to do this for the cover component:

                                 <components:frontCoverCustomComponent x="0" y="0" id="frontcovercustomcomponent1"   click="frontCoverCustomComponent_clickHandler()">

                                    <components:postLayoutTransformOffsets.State2>

                                        <s:TransformOffsets rotationY="180"/>

                                    </components:postLayoutTransformOffsets.State2>

                                </components:frontCoverCustomComponent>

                            I added this code to your custom component (and left the transition code as-is) and it now works as expect. It's still a bit weird to see the back of a two-dimensional object, so using two objects for anything that you'll see flipped is still a good thing to do in any case (as someone else suggested on this thread).

                             

                            Chet.

                            • 11. Re: Simple Flip Book in Flash Builder
                              mikeucf Level 1

                              Thanks so much I really appreciate the comment...I'm digesting and testing it!!!

                               

                              From a PV3D and Away3D perspective...one of the difficulties I've run into is that in Flash Builder there are three ways to do 3D...MXML (from Flash Catalyst), Matrix Manipulation using update display, and dot syntax methods (hey which one do I use?). It's really difficult to get the same visual effects in Flash Builder that you get in PV3D and Away3D, but in doing so you don't have to run your processor so hard and can do more. And you can't beat how easy it is to work with Flash Catalyst...you can develop 3D 10 times faster...

                               

                              That means I'm taking my lumps while things are being repaired and developed. But that's the business...thanks again for your comments.

                               

                              Just one more comment...I've built the data-driven case of the book for 3 pages using FB data wizard:

                               

                              Part 1: http://www.youtube.com/watch?v=WzKba9qyrp0

                               

                              Part 2: http://www.youtube.com/watch?v=xz9htZXYZyU

                               

                              Part 3: http://www.youtube.com/watch?v=_Nyeg4_zuXo

                               

                              Part 4: http://www.youtube.com/watch?v=uG_uUIHSyqU

                               

                              ...in the multi-page case I will actually turn the pages into a particle system and treat the 3D a little differently...I'll take a real good look at your suggestions below then.

                               

                               

                              Best Regards,

                              Mike

                               

                              Date: Fri, 5 Feb 2010 14:18:03 -0700

                              From: forums@adobe.com

                              To: livelym1@knights.ucf.edu

                              Subject: Simple Flip Book in Flash Builder

                               

                              Mike,

                               

                              Steven Shongrunden played around with your original FlipBook example and noticed that it doesn't work the same in the current builds as it did in Beta2. The problem is that we changed the behavior of the 3D effects recently, to fix this bug:

                              http://bugs.adobe.com/jira/browse/sdk-24993

                               

                              Basically, 3D effects used to side-effect the 3D properties of objects and persist their changes on the objects after transitions were over. This is different from the way that the rest of the effects work, where we install the proper end-state values in the objects when transitions end.

                              This means that if you do a Rotate3D with angleYTo="180", that we'll do that rotation during the effect ... and then wipe out that change when the transition ends.

                              There are two workarounds for this situation. The first, which is the way to go in general and definitely for Catalyst users, is to have 2-sided objects. So instead of simply seeing the back of the front cover, the user would see the front of a completely different object (the inside cover page, if you like). Then the transition should rotate both objects (the cover to 180 and the inside object to 0), then make the old object disappear and the new object appear at the right times (like at 90 degrees). So when the values are restored to the front cover upon transition end they will not be visible because the object is not visible.

                              The workaround for coders is to actually tell the states the values that the object should have. So if you actually want to rotate the object around y, then set that information in the states so that we won't blow it away when the transition ends. In fact, you could even set it in the states and not in the effect and we'll run the transition automatically. This is really the best approach for state transitions in general: tell the states what values the objects should have, and tell the transitions what effects to run, then the effects will automatically figure out the values to animate from/to.

                              The trick with this workaround is that the 3D effects affect the post-layout properties by default, and setting those values is not as obvious as setting pre-layout properties on the object.

                              Here's an example of how to do this for the cover component:

                                   <components:frontCoverCustomComponent x="0" y="0" id="frontcovercustomcomponent1"   click="frontCoverCustomComponent_clickHandler()">

                                      <components:postLayoutTransformOffsets.State2>

                                          <s:TransformOffsets rotationY="180"/>

                                      </components:postLayoutTransformOffsets.State2>

                                  </components:frontCoverCustomComponent>

                              I added this code to your custom component (and left the transition code as-is) and it now works as expect. It's still a bit weird to see the back of a two-dimensional object, so using two objects for anything that you'll see flipped is still a good thing to do in any case (as someone else suggested on this thread).

                               

                              Chet.

                              >

                              • 12. Re: Simple Flip Book in Flash Builder
                                mikeucf Level 1

                                Hi,

                                 

                                 

                                 

                                After thinking about your solution and doing some testing I have two comments...

                                 

                                 

                                 

                                (1) I'm concerned that your change may not be congruent with Flash Catalyst and its logical flow, and

                                 

                                 

                                 

                                (2) The solution did not solve the problem. I fear I have not explained myself well. So here is a video on the problem...

                                 

                                 

                                 

                                http://www.youtube.com/watch?v=wg-pUX6lpuM

                                 

                                 

                                 

                                And if anyone wants to know how to install a new SDK in Flash Builder. Here is a video on that too

                                 

                                 

                                 

                                http://www.youtube.com/watch?v=OhHxPK_p2jQ

                                 

                                 

                                 

                                Best Regards,

                                 

                                Mike

                                 

                                From: livelym1@knights.ucf.edu

                                To: clearspace-449765515-590163-2-2571178@mail.forums.adobe.com

                                Subject: RE: Simple Flip Book in Flash Builder

                                Date: Sat, 6 Feb 2010 15:51:36 +0000

                                 

                                 

                                 

                                 

                                 

                                 

                                 

                                 

                                Thanks so much I really appreciate the comment...I'm digesting and testing it!!!

                                 

                                From a PV3D and Away3D perspective...one of the difficulties I've run into is that in Flash Builder there are three ways to do 3D...MXML (from Flash Catalyst), Matrix Manipulation using update display, and dot syntax methods (hey which one do I use?). It's really difficult to get the same visual effects in Flash Builder that you get in PV3D and Away3D, but in doing so you don't have to run your processor so hard and can do more. And you can't beat how easy it is to work with Flash Catalyst...you can develop 3D 10 times faster...

                                 

                                That means I'm taking my lumps while things are being repaired and developed. But that's the business...thanks again for your comments.

                                 

                                Just one more comment...I've built the data-driven case of the book for 3 pages using FB data wizard:

                                 

                                Part 1: http://www.youtube.com/watch?v=WzKba9qyrp0

                                 

                                Part 2: http://www.youtube.com/watch?v=xz9htZXYZyU

                                 

                                Part 3: http://www.youtube.com/watch?v=_Nyeg4_zuXo

                                 

                                Part 4: http://www.youtube.com/watch?v=uG_uUIHSyqU

                                 

                                ...in the multi-page case I will actually turn the pages into a particle system and treat the 3D a little differently...I'll take a real good look at your suggestions below then.

                                 

                                 

                                Best Regards,

                                Mike

                                 

                                Date: Fri, 5 Feb 2010 14:18:03 -0700

                                From: forums@adobe.com

                                To: livelym1@knights.ucf.edu

                                Subject: Simple Flip Book in Flash Builder

                                 

                                Mike,

                                 

                                Steven Shongrunden played around with your original FlipBook example and noticed that it doesn't work the same in the current builds as it did in Beta2. The problem is that we changed the behavior of the 3D effects recently, to fix this bug:

                                http://bugs.adobe.com/jira/browse/sdk-24993

                                 

                                Basically, 3D effects used to side-effect the 3D properties of objects and persist their changes on the objects after transitions were over. This is different from the way that the rest of the effects work, where we install the proper end-state values in the objects when transitions end.

                                This means that if you do a Rotate3D with angleYTo="180", that we'll do that rotation during the effect ... and then wipe out that change when the transition ends.

                                There are two workarounds for this situation. The first, which is the way to go in general and definitely for Catalyst users, is to have 2-sided objects. So instead of simply seeing the back of the front cover, the user would see the front of a completely different object (the inside cover page, if you like). Then the transition should rotate both objects (the cover to 180 and the inside object to 0), then make the old object disappear and the new object appear at the right times (like at 90 degrees). So when the values are restored to the front cover upon transition end they will not be visible because the object is not visible.

                                The workaround for coders is to actually tell the states the values that the object should have. So if you actually want to rotate the object around y, then set that information in the states so that we won't blow it away when the transition ends. In fact, you could even set it in the states and not in the effect and we'll run the transition automatically. This is really the best approach for state transitions in general: tell the states what values the objects should have, and tell the transitions what effects to run, then the effects will automatically figure out the values to animate from/to.

                                The trick with this workaround is that the 3D effects affect the post-layout properties by default, and setting those values is not as obvious as setting pre-layout properties on the object.

                                Here's an example of how to do this for the cover component:

                                     <components:frontCoverCustomComponent x="0" y="0" id="frontcovercustomcomponent1"   click="frontCoverCustomComponent_clickHandler()">

                                        <components:postLayoutTransformOffsets.State2>

                                            <s:TransformOffsets rotationY="180"/>

                                        </components:postLayoutTransformOffsets.State2>

                                    </components:frontCoverCustomComponent>

                                I added this code to your custom component (and left the transition code as-is) and it now works as expect. It's still a bit weird to see the back of a two-dimensional object, so using two objects for anything that you'll see flipped is still a good thing to do in any case (as someone else suggested on this thread).

                                 

                                Chet.

                                >

                                • 13. Re: Simple Flip Book in Flash Builder
                                  Shongrunden Adobe Employee

                                  Hi Mike,

                                   

                                  Regarding (2):

                                   

                                  Thanks for the detailed video, I can now reproduce the behavior you are experiencing.

                                   

                                  I have trimmed this down to a smaller test case and filed a bug:

                                  http://bugs.adobe.com/jira/browse/SDK-25480