How to make a interactive colouring page in Edge Animate?

Hi!
For a University project, I have the task of creating a kids' colouring book. It'll contain some other pages than just colouring, but my lecturer suggested Edge Animate to me. It's for an iPad e-book so it can't contain any flash as flash doesn't work on mobile devices.
I've seen this on these forums...
It's basically like this something that i'd like to create... http://www.meschrene.puremadnessproductions.net/Samples/Color-Page/Flower.html (which user
♥Schrene posted).
Are there any step-by-step guides or tutorials on how to do this please? I'll draw the outline, with colouring tools needed.
I downloaded Edge Animate for FREE via my Adobe ID and have the student CS5 creative suite.
Any help would be very greately appreciated thank you!

Here is a Simple sample of the same concept:
http://www.meschrene.puremadnessproductions.net/Samples/Color-Page/Simple-Sample.html
http://www.meschrene.puremadnessproductions.net/Samples/Color-Page/Simple-Sample.zip
I put some explanations in the code...
You are basically just changing the background color of each shape...
Remember the shapes that you color are limited to the shapes you can create in Edge.....
Although basically there are only circles and rectangles you can see that I was able to manipulate shapes to make a star.

Similar Messages

How to Make a Printable Results Page in Adobe Captivate 8

Hi Captivate Developers!
We made a really cool Captivate tip that I think you will enjoy. This tip allows your learners print-friendly results in Adobe Captivate 8. We also include the code needed to make it work and is actually pretty easy. It also includes videos for each step. Hope you like it!
http://elearningbrothers.com/how-to-make-a-printable-results-page-in-adobe-captivate-8/

If you have a dynamic web site (database driven), use PHP or ASP data queries.
If your site is static (no databases), look at the links below:
Zoom Search Engine software
http://www.wrensoft.com/zoom/index.html
Free Find
http://www.freefind.com/
Pico Search
http://www.picosearch.com/
Google Site Search -
http://www.google.com/sitesearch/
Web Assist DW Tools for Google (free)
http://www.webassist.com/free-downloads/dreamweaver-extensions/dreamweaver-tools-for-googl e/
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

How to make an interactive block ALV

Hi,
I am new to the field of ABAP and have recently started working on ALV's. My problem is that i do not know how to make an interactive block ALV. I have implemented this functionality with the simple ALV but I am not getting the same for block ALV. Anyone who has worked on the same or has any idea please help me.
Regards.
Alok Bhardwaj

Hi jester526,
You'll need Acrobat to create links in a PDF file. Please see https://acrobatusers.com/tutorials/creating-and-editing-links for instructions.
Best,
Sara

How to make maps interactive?

hi, I have add to template in WAD map web item, but I dont know how to make maps interactive (filtering, drilldown in maps). I found some documentation which says:
The following lines must be adjusted correctly to your individual system environment in the HTML code of the Web template.
Example:
<param name=IMAGEMAP_PATTERN value=FILTER_VAL>
<param name=INFLUENCED_DP_1 value=Revenue Cockpit>
But I dont where i have to adjusted
thanx for reply

According tothe BI Functional Enhancement Schedule, this functionality will not be available until the following support pack stacks are released:
<UL>
<LI>Web Applications: Map toolbar (client-side interactivity &#56256;&#56518;zoom in, zoom out) standard + advanced toolbar (Stack 14)</LI>
<LI>Web Applications: Save template parameters and context menu settings as reusable web item. Option to take this as default for all templates (Stack 15)</LI>
<LI>Web Applications: context menu for map item (data cell relevant context menu entries only (Stack 12)</LI>
<LI>Web Applications: context menu for map item (additionally characteristics cell relevant context menu entries (Stack 14)</LI>
</UL>
<a href="https://service.sap.com/~sapidb/011000358700004483762006E">URL to BI Functional Enhancement Guide</a>

When Editing A Web Page In Edge Animate, How Can I Embed Edge Elements Into Pre-Existing DIV's?

I created a basic layout with some boxes in Dreamweaver. I set the Overflow property on them to "Hidden". I then opened the page in Edge Animate. However I noticed that when I import stuff, such as an image, then try to drag it into one of the existing DIV's, it won't work. It stays on top of all the other DIV's. However if I create a box or some other sort of DIV directly in Edge Animate, I can drag the Image element into that, so it's enclosed within that DIV.
I guess the workaround appears to be to embed the image into the DIV in Dreamweaver first, then open the page in Edge. However it would be nice to not have to keep jumping back and forth like that. Is there a way to do this in Edge Animate?
Also, I noticed when I select one of the DIVs I made in Dreamweaver, many of the Properties such as Corners, Shadow, and Filters are missing. Can these only be used on DIV's created directly in Edge Animate?

Hi, neohtom-
What you're seeing is the difference between what we define as a static div (one that is defined outside of Animate) and a managed div (one that is defined inside of Animate). Due to the fact that we expect other products to change a static div, we limit the amount of changes you can make to a static div. Because we "manage" a div that is created inside of Animate, we allow a lot more changes to be made to a div. Hope that answers your question! I'd suggest creating divs within Animate if you want to eventually change them to have corners, etc.
Cheers,
-Elaine

How do I maintain responsive scaling on an edge animate animation when I insert it into dreamweaver?

How do I maintain responsive scaling on an edge animate animation when I insert it into dreamweaver? Please and thank you!

example.com is a generic http:// address to illustrate the difference between what you gave, file:/// and an actual URL address. There are no tutorials on that site. Sorry for the confusion.
#1 Have you procured your domain name and web hosting yet? You'll need to do that to publish your pages online.
#2 When you sign-up for web hosting, the company will send you FTP log-in credentials to your site's web server. You will enter this info into your DW Site Definition. Site > New Site > See screenshots below:
Under Servers: Root Directory is whatever your hosting company tells you to use. This varies by web host. Some commonly used ones are public_html, www or htdocs.
After your site definition is set-up, hit the TEST button to confirm it's working. If it's not connecting, go to More Options.
Go to the Files Panel (F8). Use the UP Arrow to PUT files to remote server.
Use the DOWN Arrow to GET files from server to your local site folder.
Post back when you have finished uploading your work to the remote server.
Nancy O

How to make my dynamic form pages flow correctly?

I have created a dynamic form which has multiple questions with expandable text fields that will take multiple pages once completed. I do not know how to make the form flow correctly past the first page. I can attach the form if I knew how to do that.

Thank you Paul. Your editing assistance was greatly appreciated. I think I now understand that there should be only one page subform that is flowed, regardless of how many text box objects I have in my questionnaire. This did the trick.

Can someone suggest how to make an interactive poster?

Hello everyone,
Could someone suggest how to make interactive images using photoshop. A professor of mine created a poster that had interactive graphics that made movements when rolled over as well as graphics. If someone could suggest a tutorial it would be appreciated. Any suggestions would be great! Thanks!
Sincerely,
Jimi Ryscovyan
[email protected]

Images are not interactive on their own. There has to be more then an image file created with Photoshop. I'm sure the poster image you referring to was being displayed on some electronic device of some kind which was use by some image display application like a browser, that there was some programming involved for example interactive dynamic html, mouse overs , on click perhaps some javascript or even flash. And of course an input device like a mouse for a user to use. More then Photoshop is involved.

How to make it interactive?

I have a modulepool program. Now I want to make it interactive. Means If I click one field it will open new table or any particular transaction. So how can I do this? Plz suggest. Its urgent.
Regards
Message was edited by:
sap india

Hi,
You need a create a Push Button.
Assign OK code to it.
Handle USER COMMAND/OK CODE.
CASE L_OKCODE.
WHEN 'NEW'.
CALL TRANSACTION SE16.
ENDCASE.
Best regards,
Prashant

CS6 Fluid Grids - how to make images resize when page is resized? [was: Hello]

I am new to fluid grid layouts in Dreamweaver cs6, I want to insert a GIF file on my index page but I do not know how to make it so when the page shrinks the GIF or image shrinks as well. The only code that I have found is
img, {
    max-width: 100%;
But this code already exists in the css file when you create a new fluid grid based layout
img, object, embed, video {
    max-width: 100%;
can anyone help a newbie please..

this is my source code
<!doctype html>




<html class="">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Kyle Childress Foundation</title>
<link href="boilerplate.css" rel="stylesheet" type="text/css">
<link href="/layout.css" rel="stylesheet" type="text/css">


<script src="respond.min.js"></script>
</head>
<body>
<div class="gridContainer clearfix">
<div id="animation"><img src="images/images/kyleanimation2014gif2.gif" alt="kylechildressfoundationanimation"></div>
</div>
</body>
</html>
this is my css
@charset "UTF-8";
@import url("/kyle.css");
/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/
img, object, embed, video {
    max-width: 100%;
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
    width:100%;
    Dreamweaver Fluid Grid Properties
    dw-num-cols-mobile:        5;
    dw-num-cols-tablet:        8;
    dw-num-cols-desktop:    10;
    dw-gutter-percentage:    25;
    Inspiration from "Responsive Web Design" by Ethan Marcotte
    http://www.alistapart.com/articles/responsive-web-design
    and Golden Grid System by Joni Korpi
    http://goldengridsystem.com/
/* Mobile Layout: 480px and below. */
.gridContainer {
    margin-left: auto;
    margin-right: auto;
    width: 87.36%;
    padding-left: 1.82%;
    padding-right: 1.82%;
#LayoutDiv1 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#animation {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#image {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
@media only screen and (min-width: 481px) {
.gridContainer {
    width: 90.675%;
    padding-left: 1.1625%;
    padding-right: 1.1625%;
#LayoutDiv1 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#animation {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#image {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
/* Desktop Layout: 769px to a max of 1232px. Inherits styles from: Mobile Layout and Tablet Layout. */
@media only screen and (min-width: 769px) {
.gridContainer {
    width: 88.2%;
    max-width: 1232px;
    padding-left: 0.9%;
    padding-right: 0.9%;
    margin: auto;
#LayoutDiv1 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#animation {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#image {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
the animation GIF is 700 x 908
I changed the code from max-width to just width 100% but it still did not work ,, please help

Can someone help me in learning how to make business cards using pages

can someone please help me in learning how to make business cards using pages

You could jump start the process with an Avery MS Word 8-up business card template as a free download. Either version of Pages will digest it nicely. Once you load it into Pages, do a File > Save As Template.. , add it to Chooser, and give it your name choice. Both versions of Pages will remove the printer registration marks in all four template corners. The free LibreOffice Writer retains them.

How to make fully interactive storyboard with videos, maps, audio????

Hi there,
I am looking for a tutorial or a walk through to make an interactive Storyboard with interactive maps, videos, audio files, play/pause button.
And should be able to convert in multiple languages...
I know its kindof difficult but not impossible.
Thanks in advance.
Janu

use google to search: flash <your as version> storyboard tutorial.

I need to translate a flash program with many pages to edge animate CC. Is there an easy way top build new pages, so that you can jump from one page to another withion the same file?

I have only seen in all the examples in books and on the net that edge animate works on one page only. Maybe I hve not fully understood the concept, but in flash it was easy. Perhaps there is also an easy way in edge animate?

You can either make a symbol for each page in the same composition or you can use edge commons composition loader to load several compositions into the same composition which serves as a container.

Include an interactive Youtube player in Edge Animate - Not working properly!

Hi folks!
I am working on a new project which is based on a interactive web video.
In the Edge Animate proyect I have implemented a Youtube fullscreen player which has interactivity. On the one side, in the Edge project I have included a JS which contains the definition of the Youtube player API and all its functions in order to enable the interactivity. On the other side, in the HTML which creates Edge Animate I have included the div for the player and some buttons to play and stop the Youtube video.
When I launch the website using Edge Animate everything works fine, but when I open the HTML file without Edge Animate, the Youtube player is not being defined (the player div is empty). I think the problem may be related to the external JS file in the Edge project.
I don't recognise why this external JS with the Youtube functions only load when it is launched from the Edge Animation app.
My aim is to load this project as a OAM file at the end in Wordpress with the Youtube player and its interactivity included.
Need help for this issue! Does some know how to fix it?
Conclusion:
Fullscreen animation with Youtube Player as background with some buttons in the HTML project file to play and stop the youtube video. Youtube API functions inside an external JS file and included in the Edge Animate project. Only works when the animation is launched with Edge Animate. If the HTML file is open directly, Youtube player is empty.
PD: I have attached some images in order to offer a clearer vision of this problem.

Actually yes...!
Failed to load resource: net::ERR_FILE_NOT_FOUND file://www.youtube.com/player_api
But why only when opening the HTML directly...?
There is another error...maybe this is the problem source:
Uncaught SecurityError: Blocked a frame with origin "https://www.youtube.com" from accessing a frame with origin "http://localhost:54321". The frame requesting access has a protocol of "https", the frame being accessed has a protocol of "http". Protocols must match.

How to create scroll controlled svg animations in Edge animate cc

Since I am a beginner in Edge animate, I am very confused about svg animations in Edge animate. I want to create an effect like this http://tympanus.net/Development/SVGDrawingAnimation/index.html. In this page the animation is set to autoplay, I will controll my animation using scroller bar in adobe muse cc. Please tell me how to animate svg images like this.
Thanks in advance

Hi bhardwajaralhul517,
Found something that could help you get started
Using parallax scrolling in Animate with a single line of code | EdgeDocks.com
How To Create A Parallax Scrolling Website | Web Design Principles
Thanks,
Preran

How to make a interactive colouring page in Edge Animate?

Similar Messages

Maybe you are looking for