Copy link to clipboard
Copied
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 🙂
When I ask File : Import : Import to the Library, then select your Map-only.ai file, I get this dialog box :
Enregistrer
Copy link to clipboard
Copied
google easeljs and animate tutorials.
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
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
Copy link to clipboard
Copied
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
Copy link to clipboard
Copied
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
- Select the fill and change its color
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).
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 :
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 :
Sure I forgot important keys, but that's a starter kit and you can explore, understand the logic… and go back with questions
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
When I ask File : Import : Import to the Library, then select your Map-only.ai file, I get this dialog box :
Enregistrer
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
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?
Copy link to clipboard
Copied
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?
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
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
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
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?)?
Copy link to clipboard
Copied
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).
Copy link to clipboard
Copied
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
Copy link to clipboard
Copied
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 :
Hence to change the color on the Up state, you have two different tools : one for the stroke, and another one for the fill.
Good luck ! It's midnight in France : read you tomorrow 🙂
Enregistrer
Copy link to clipboard
Copied
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
Copy link to clipboard
Copied
You can center the stage in Publish Settings.
File > Publish Settings > Center Stage.
Copy link to clipboard
Copied
see, looks good and works on my computer, just not when I upload it to my site. what step am i missing?
Copy link to clipboard
Copied
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
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
Yes, I agree. My finished product does not have light text on a light background (link below). What are you referring to?