Jump to content
Search Community

how to? interactive map

Blackypt test
Moderator Tag

Recommended Posts

Hello,

 

I wanted to create something like this, as you can see in the image.

I wanted the yellow circle moving to points 1, 2 and 3. But following the route (red line).

Also wanted to stop at each point, and when it stops, do an action (open a movieclip), and when you close the movieclip it would resume the journey.

 

I am not a coder, I looked for something similar with no luck, so I am a bit lost.

Can any one give me some directions to follow?

 

Thank you,

post-13411-0-23245100-1357733203_thumb.jpg

Link to comment
Share on other sites

If you are not a coder, it may prove difficult to replicate something like this. I would first start with the ability to get all the points of the map into an array. Including the elbow turns. So you have 5 points; Start, first corner, box 1, box 2, box 3. To move a movieclip along that path, you would use TweenLite, and tween the x and y positions. Start with learning the ability to tween a displayobject to one of those points.

 

TweenLite.to(displayObject, 1, { x:100, y:200, onComplete:someFunction } );

function someFunction():void{
// do something
}

 

after the circle moves to each point, the function will be called, where you can then decide on what you want to do, including starting another tween.

 

If you are not a coder, and have used Flash primarily on the timeline, this will be a much more difficult transition to pick up. But if you have dabbled in AS3 code a bit before, then you can more easily pick up the syntax and usage of TweenLite. But what you are looking to do requires knowledge of a bunch of Actionscript techniques, including MouseListeners, Function calls, and TweenLite.

  • Like 2
Link to comment
Share on other sites

Hi Blackypt,

 

Welcome to the GreenSock support forums.

 

Jimmi, is exactly right in his assessment and recommendations. Basic use of the GreenSock Animation Platform (GSAP) is quite easy to pick up, but when you want to start adding interactivity and more dynamic controls / effects there is a solid base of ActionScript fundamentals that you will need.

 

The GSAP code to needed to animate objects on your map can actually be quite concise due to the power of our TimelineLite and TimelineMax sequencing tools.

 

Here is an example a whipped together very quickly:

 

http://snorkl.tv/dev/simplePath/

 

the code looks like this:

 

import com.greensock.*;
import flash.events.MouseEvent;

//hide popup
popup.alpha = 0;

//create timeline
var tl:TimelineLite = new TimelineLite({delay:.6});

//add tweens to timeline
tl.to(mc, 1, {x:100})
.to(mc, .5, {y:150})
.to(popup, .2, {alpha:1})
.call(tl.pause)
.to(popup, .2, {alpha:0})
.to(mc, 1, {x:200})
.call(tl.restart, null, 1);

//button code allows clicking popup to resume playback of the timeline sequence
popup.addEventListener(MouseEvent.CLICK, continuePath);

function continuePath(e:MouseEvent):void{
tl.resume();
}

 

 

As Jimmi suggested though, I would strongly recommend that you start out small with simple TweenLite tweens before jumping into the TimelineLite code.

 

Study the TweenLite docs, experiment, and ask questions along the way, we're here to help.

Just keep in mind that we can't walk you through every step of your project. We really need to focus on issues that you are facing when trying to understand how the GSAP code works.

 

I'm providing this sample just to give you a sense of how most of what you need to do can be accomplished with a few simple commands. Once you get comfortable with the basics, I think you will be amazed by how much you can accomplish.

 

simpePath.zip

 

Happy Tweening

Link to comment
Share on other sites

Thank you for the answers.

 

I know it will be hard for me to get what I need, but I'll try.

I will try starting to work with what I've got so far, including these piece of code. I will post here what I achieved and probably many doubts :mrgreen:

 

Thank you very much!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...