27 Replies Latest reply on Feb 25, 2017 1:28 AM by AMULI

    Recreate Google Swiffy in Adobe Animate

    acobbcarthagemills Level 1

      I have created this map (link below) as a flash file and use google swiffy in the past to convert to HTML. I know that google swiffy is gone and I would like to learn how to recreate this in Adobe Animate so that I can make edits in the future (like adding cities to some states). Are there any "how to's" or instructional videos about a project similar to this? The most important things are, when used on a desktop, the states need to change color slightly on mouse over, and when clicked they need to open a PDF. On mobile, each state just needs to open the PDF. I do have Adobe Animate but I don't know anything at all about it. Please help! Thanks :-)

      Geosynthetics that Meet DOT Specs

        • 1. Re: Tutorial for this in Adobe Animate? Really need to learn this!
          kglad Adobe Community Professional & MVP

          google easeljs and animate tutorials.

          1 person found this helpful
          • 2. Re: Tutorial for this in Adobe Animate? Really need to learn this!
            AMULI Level 4

            Create a new Animate CC project with type HTML 5 canvas.

             

            Each of the US states should be a Button symbol, its first frame being the normal appearance, and its second frame the appearance when hovered over. If this is already done in Flash, just copy and paste the symbols from the old project's library.

             

            This thread may show you you to code the hyperlink : https://forums.adobe.com/thread/1507667

             

            You'll use a Guide layer containing the whole US map to position each of the US states Button symbols.

            1 person found this helpful
            • 3. Re: Tutorial for this in Adobe Animate? Really need to learn this!
              acobbcarthagemills Level 1

              Well, I'm not that advanced. This was created in adobe illustrator and exported as FLA. I was really hoping to find a true step by step for someone who has never done anything with Adobe Animate, EX: choose file > new > html > etc...

              Anyway, you have given me some new ideas of ways to google how to do this. Will I need to export the shape of each state from illustrator into a certain kind of format? Then there would have to be a way to place each of the buttons (states) in exactly the right spot in animate. Guess that is what the guide layer (background layer?) would be for?

               

              If you have anymore suggestions or guidance that would be great. But regardless, thank you for your reply.

              • 4. Re: Tutorial for this in Adobe Animate? Really need to learn this!
                AMULI Level 4

                I have no experience with Illustrator , but I know that Illustrator and Animate are good companion tools.Illustrator can export SWF. And Animate can import AI files with a bunch of import settings.

                 

                Could you export two vector outlines (AI files) : one for the USA map and another for one of the US states. I could reimport them in an Animate CC project and set up the layers and build the first button symbol, so you could get into the saddle

                Enregistrer

                2 people found this helpful
                • 5. Re: Tutorial for this in Adobe Animate? Really need to learn this!
                  acobbcarthagemills Level 1

                  Dropbox - Map-Only.ai

                   

                  Dropbox - Texas.ai

                   

                  WOW! Thanks for offering to help get me started! Here are links to the ai map only, and the link to the state of Texas ai. When hovered over I want the Texas button to change color slightly (guess that would be frame 1 and frame 2 that you mentioned?). And on click it should open this URL http://carthagemills.com/dot-specs/_CM_TEXAS_DOT.pdf

                  • 6. Re: Tutorial for this in Adobe Animate? Really need to learn this!
                    ClayUUID Adobe Community Professional

                    AMULI wrote:

                     

                    Create a new Animate CC project with type HTML 5 canvas.

                    Light-colored text on a light-colored background is really hard to read.

                    • 7. Re: Tutorial for this in Adobe Animate? Really need to learn this!
                      acobbcarthagemills Level 1

                      Yes, I agree. My finished product does not have light text on a light background (link below). What are you referring to?

                       

                      Geosynthetics that Meet DOT Specs

                      • 8. Re: Tutorial for this in Adobe Animate? Really need to learn this!
                        AMULI Level 4

                         

                        Light-colored text on a light-colored background is really hard to read.

                        Ok, ClayUUID, though it's not so weakly contrasted as this light salmon, I will choose a darker green

                        • 9. Re: Tutorial for this in Adobe Animate? Really need to learn this!
                          acobbcarthagemills Level 1

                          I'm sorry, I'm confused. My document shouldn't have any light salmon color in it. I gave you a link to just the map and another link to just 1 state shape without the word Texas on it in black (I am supposed to add the text on it later, not when making the button right?) Anyway, all my text was black just like it shows in the finished product. I'm not sure where you got salmon and dark green?

                          • 10. Re: Tutorial for this in Adobe Animate? Really need to learn this!
                            ClayUUID Adobe Community Professional

                            acobbcarthagemills wrote:

                             

                            I'm not sure where you got salmon and dark green?

                            Seriously?

                             

                            seriously.jpg

                            • 11. Re: Tutorial for this in Adobe Animate? Really need to learn this!
                              AMULI Level 4

                              A quick recipe of the attached Animate CC file (https://app.box.com/s/uh5dck734yycbj4vatwwkgov1rppwzt4) :

                               

                              1) File > Import : select the AI file

                               

                              Two warnings :

                              - CMJN not handled by Animate : use RVB

                              - Blend modes not handled

                               

                              I can't judge if the graphics is visually deteriorated. May be you should try exporting SWF from Illustrator ?

                               

                              When importing the US map, I cheked an option saying something like Give the scene the dimensions of the Illustrator canvas. Maybe a 1920 x 1535 scene is not a good idea ? Choose the good dimensions before working too much, as you will loose part of your work if you change the dimensions afterwards !

                               

                              The US map on a layer. The Texas outline on another layer.

                               

                              2) A state's outline being selected on stage : Modify > Convert to symbol

                              Choose the type Button.

                               

                              • Double-clic the symbol in the Library

                              Insert > Empty keyframe

                               

                              As a novice, one of the first concepts you need to grab in Animate are frame, keyframe and empty frame (Insert > Timeline > Frame | Keyframe | Empty keyframe, keyboard shortcuts respectively F5, F6, F7).

                               

                              Buttons have a special timeline with four prelabelled images

                              - Up : the normal appearance

                              - Over : the appearance when hovered over

                              - Down : the appearance when clicked (you don't need it)

                              - The hot area (which triggers the rollover effect) when it's different frome the base outline (you don't need it)

                               

                              Select the second frame Over :

                              - Select the stroke and change its color

                               

                              Capture d’écran 2017-02-09 à 21.23.10.png

                               

                              - Select the fill and change its color

                               

                              Capture d’écran 2017-02-09 à 21.23.58.png

                               

                              That's it : without any more code, your rollover effect is working.

                               

                              3) You need code to load the corresponding PDF when the button is clicked. A layer is dedicated to code (and locked to avoid putting anything else on it).

                               

                              Capture d’écran 2017-02-09 à 22.04.44.png

                               

                              To attach code to the button (symbol name btn_texas), you need to give a name to the symbol instance. Select it on stage, then name it texas in the Property panel :

                               

                              US-map_4.png

                               

                              Then, in the Actions panel, frame 1 being selected in layer code : the event listener is attached to the object named texas.

                               

                              You can find code snippets to adapt via a button top right (with angle brackets as icon). Choose the HTML 5 canvas section, then the Actions section and the Go to web page snippet :

                              US-map_5.png

                               

                              Sure I forgot important keys, but that's a starter kit and you can explore, understand the logic… and go back with questions

                              2 people found this helpful
                              • 12. Re: Tutorial for this in Adobe Animate? Really need to learn this!
                                acobbcarthagemills Level 1

                                Sat down to do this and have 2 questions on your 1st step that says 'Import AI file', (1) do you mean the AI file that I sent to you, because you did not send me one back in your zip folder? (2) It did not view AI files as something that was able to be imported, so how would I import an AI file.

                                • 13. Re: Tutorial for this in Adobe Animate? Really need to learn this!
                                  AMULI Level 4

                                  When I ask File : Import : Import to the Library, then select your Map-only.ai file, I get this dialog box :

                                   

                                  Capture d’écran 2017-02-22 à 09.49.19.png

                                  Enregistrer

                                  1 person found this helpful
                                  • 14. Re: Tutorial for this in Adobe Animate? Really need to learn this!
                                    acobbcarthagemills Level 1

                                    ok, that worked. Thanks! Now I've gotten to where the map is on layer 1, the TX shape is on layer 2, and I've converted it to a button. Your next instruction says to double click the symbol in the library >Insert>Empty keyframe -- questions, I wasn't sure if you meant to double click the image of TX that shows up in the library or the thing that says 'symbol 1'? I tried both and when I went to insert, 'empty keyframe' was not an option. The options were insert>timeline> frame keyframe or blank keyframe - no option for empty keyframe.

                                    • 15. Re: Recreate Google Swiffy in Adobe Animate
                                      acobbcarthagemills Level 1

                                      Update, ok, so I know that I need to be able to change the color on the up/over/down/hit before I add the code snippet for the url. I can do this when I just draw a circle, but it's not letting me change the color/stroke/transparency for this symbol?

                                      • 16. Re: Recreate Google Swiffy in Adobe Animate
                                        acobbcarthagemills Level 1

                                        MOST RECENT UPDATE!!!   AMULI, I think I'm really starting to figure it out! I've done 2 states and they work when I preview in my browser, but when I publish to html and put online to test out from there, I get an empty web page. I think it's a similar issue to if I were trying to view an html page online, but the images referenced in it are not web referenced, rather saved on my computer. I feel like I'm so close! Is there something in the publishing or exporting that I'm doing wrong? Instead of saving this doc in a folder on my computer as I go should I save online?

                                        • 17. Re: Recreate Google Swiffy in Adobe Animate
                                          acobbcarthagemills Level 1

                                          see, looks good and works on my computer, just not when I upload it to my site. what step am i missing?

                                          • 18. Re: Recreate Google Swiffy in Adobe Animate
                                            acobbcarthagemills Level 1

                                            Never mind! I figured out if I put the WHOLE FOLDER online then open the html file from that directory, it's good! Here's a link to my progress. just 48 more states to go

                                            NTPEP-MAP-Animate

                                            • 19. Re: Recreate Google Swiffy in Adobe Animate
                                              Colin Holgate MVP & Adobe Community Professional

                                              Use the browser's developer tools to see the error console. That will hopefully have useful information to help find the problem.

                                               

                                              The way you are using a movieclip with alpha transparency for the over state is unusual. You could do a break apart to get the raw shape, then fill it with the right color. When you choose the red color you can also set its transparency to 75%, and end up with the same effect you got from using a movieclip.

                                               

                                              If you have other reasons it needs to be a movieclip, like if it's animating for example, instead of using Color Effect/Style/Alpha, use Advanced. Then you can set the color and the transparency.

                                              • 20. Re: Recreate Google Swiffy in Adobe Animate
                                                acobbcarthagemills Level 1

                                                ok, I changed the drop down to button instead of movie clip. But when I'm on the button, on UP or OVER I only see where I can change the transparency, I don't see where I can change the color on just that 1 instance. But if I double click the shape then it is selected as if it were a vector image in illustrator (right around the image) and I can change the color there, BUT the UP and OVER in the time line is gone at that point so I'm just changing the color for the whole thing. I guess I don't understand the break apart thing - I would like to be able to control not just the transparency but also the color separately on the UP and the OVER if that makes sense

                                                • 21. Re: Recreate Google Swiffy in Adobe Animate
                                                  Colin Holgate MVP & Adobe Community Professional

                                                  Look in the Properties, where it says Color Effect. You have Style set to Alpha, change that to Advanced instead. Then you can tint the symbol and change its transparency.

                                                   

                                                  If you're going to use a symbol instead of a shape, a movieclip or a graphic would make more sense than it being a button.

                                                  • 22. Re: Recreate Google Swiffy in Adobe Animate
                                                    AMULI Level 4

                                                    acobbcarthagemills  a écrit

                                                     

                                                    I would like to be able to control […] the color separately on the UP and the OVER if that makes sense

                                                    One important thing to grasp – as it's different from Illustrator, as far as I know – is that in Animate there are in fact two vector outlines for a given shape : one for the stroke, and another one for the fill. On the following picture, they have been separated :

                                                     

                                                    Capture d’écran 2017-02-23 à 23.49.54.png

                                                     

                                                    Hence to change the color on the Up state, you have two different tools : one for the stroke, and another one for the fill.

                                                     

                                                    Capture d’écran 2017-02-23 à 23.55.24.png

                                                    Good luck ! It's midnight in France : read you tomorrow :-)

                                                    Enregistrer

                                                    • 23. Re: Recreate Google Swiffy in Adobe Animate
                                                      acobbcarthagemills Level 1

                                                      I've been using a symbol because that was what the directions that I was following said to do. I am saving each state as an ai file from illustrator and importing them. Can you please tell me the difference between symbol and shape? This project will be on our website, so if it makes a difference in how big the overall file with be/how fast it will run I guess that would be important for me to understand.

                                                       

                                                      Question, if I change the name of the folder where this project is saved, will it screw everything up (are there multiple paths that will become invalid?)?

                                                      • 24. Re: Recreate Google Swiffy in Adobe Animate
                                                        acobbcarthagemills Level 1

                                                        Thanks! How do I make the entire html finished product centered on the web page? Is there a way to do it in animate or do I need to mess with the html code after publishing?

                                                         

                                                        Working at midnight in France huh? That's dedication LOL I was sleeping at midnight here

                                                        • 25. Re: Recreate Google Swiffy in Adobe Animate
                                                          just.emma Level 4

                                                          You can center the stage in Publish Settings.

                                                           

                                                          File > Publish Settings > Center Stage.

                                                           

                                                          Screen Shot 2017-02-24 at 7.11.11 AM.png

                                                          1 person found this helpful
                                                          • 26. Re: Recreate Google Swiffy in Adobe Animate
                                                            AMULI Level 4

                                                            acobbcarthagemills  a écrit

                                                             

                                                            Can you please tell me the difference between symbol and shape?

                                                            Your states' outlines are shapes. In Illustrator, they are Bézier curves, which are cubic (in the underlying equations, the higher power is 3 : see https://en.wikipedia.org/wiki/B%C3%A9zier_curve). After importing AI files into Animate, the curves paths have been converted – and approximated to – quadratic curves (their higher power is 2). Quadratic curves are consuming less resources than cubic ones, hence one of the reason of Flash success by the past : SWF files are very light.

                                                             

                                                            About the relationship between shapes and symbols, you should not reason in terms of difference, but rather of wrapping : as you needed a rollover effect, you wrapped the states' outlines (shape) into a Button symbol. If all you needed was vector graphics, you would have wrapped them into a Graphic symbol. And if you needed to handle your visual object by code (hence needing an instance name for that), you would have wrapped them into a Movie clip symbol.

                                                             

                                                            Whatever type of symbol you chose (Graphic, Button or Movie clip), having a symbol allows you to instantiate it : you could have hundreds of instances throughout your animation, there would be only one loading of the geometrical points defining the vector shape : the unique symbol of the library. It's a powerful factor of loading optimization (and yet another reason of Flash success because of SWF files lightness).

                                                            • 27. Re: Recreate Google Swiffy in Adobe Animate
                                                              AMULI Level 4

                                                              acobbcarthagemills  a écrit

                                                               

                                                              if I change the name of the folder where this project is saved, will it screw everything up (are there multiple paths that will become invalid?)?

                                                              It's very usual that your working local folder and the distant folder on the server have different names. The only thing that matters is that all the needed files are present in the server folder – and preferably only the needed files