Member Avatar for jreddick82

I have a picture that I would like the plug at the end of the G grow when you mouse over it. I have tried making 3 images and am unable to make it work. Can anyone assist on what I can do? I am using CS4 to do this. Here is the link, with a sort of description of what I am looking for.

  • 4 Contributors
  • 3 Replies
  • 123 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by infinique

Dani AI

Generated

Building on what , and started: the simplest, most reliable way to make that plug "grow" is to treat it as its own element with its transform origin set at the join where it meets the G. That avoids weird drifting when you scale. Two practical paths are best depending on target playback: a timeline-only Flash workflow inside CS4 (no complex scripting), or a modern SVG/CSS approach that works in current browsers and on mobiles.

Flash CS4 timeline workflow (no code)

  • Convert the plug to its own symbol and set its registration point at the plug root.
  • Put the plug on a dedicated layer and create a short motion tween that scales from 100% to the desired size over 6–10 frames; add easing so it feels organic.
  • Add a transparent hit-shape slightly larger than the plug so hover is forgiving.
  • Use the Button symbol Over state or labeled frames to switch the plug layer between idle and grown frames. This keeps things simple inside CS4 while keeping the anchor in the right place.

SVG + CSS fallback (recommended for web)

  • Export the G+plug as inline SVG or separate SVG elements so the plug is addressable.
  • Use a CSS transform with transform-origin set to the plug root and a short transition to scale on hover.
  • Add a tiny touch handler to toggle a class for mobile (touch has no native hover).

Example CSS and a tiny touch toggle:

.plug { transform-origin: 12px 50%; transition: transform 220ms cubic-bezier(0.2,0.8,0.2,1); }
.g:hover .plug, .g.is-active .plug { transform: scale(1.35); }
document.querySelector('.g').addEventListener('touchstart', function(e){
  this.classList.toggle('is-active'); e.preventDefault();
});

Troubleshooting notes: if the plug is a bitmap, scale only modestly to avoid pixelation or redraw at higher resolution; enable smoothing in Flash. Use transforms (not width/height changes) for GPU-accelerated smoothness. Animated GIFs work but are larger and lower quality than vector/CSS solutions.

Recommended Answers

All 3 Replies

Member Avatar for g2gayan

okiz.. crete a movieclip and use the OnRollOVer And OnRollOut events to control your movie clip.. or simple you can create a button and put your stuff under its pre created events :)

Member Avatar for Member #334542

Hi jreddick82 ,

Here with I have attached a file for your reference. Make your change whatever you want to your scenario. But it looks nice with an animation instead of just a display. Cool!

The script used here is AS2.0 is not a difficult one to change to AS3.0. Here I have just used a onRollOver & onRoolOut.

In AS3.0:hit_btn.addEventListener(MouseEvent.MouseOver, onOver);
hit_btn.addEventListener(MouseEvent.MouseOut, onOut);

And write the function for both, Just check the syntax of AS3.0

MouseOver.zip (34.54 KB)
Member Avatar for infinique

You need to know how to create animated gif files using Fireworks. It's way cheaper to hire professionals to do it as it costs anywhere from 25-50USD for one.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.