Adobe Animate with car window tint simulator

[TTinari89]

New to using Adobe Animate. Started created a flash website to implement into another website. Basically I am trying to create a Car Window Tint Simulator similar to the one here... Window Tint Selector | Shades of Gray Window Tinting. Right now I have all my buttons made linking it to the pages that adjust the tint but my problem is keeping the button engaged so that the selected tint stays on the vehicle mockup. For instance when I click the 35% option on the FRONT I want it to stay there until I click the button again and be able to add the tint variations on the back part of the car mockup while the front tint option stay engaged. Please help! Thank you

Message was edited by: Mod (Discussion successfully moved from The Lounge to Adobe Animate CC - General)

[robdillon · Accepted solution]

The example that you link to is using Actionscript. Are you using Actionscript or are you using an HTML5 canvas for your project? In any case it sounds like you are moving from frame to frame to show the different levels of tint. It sounds like you are attempting to do all of the changes on the main timeline. If you create a movieClip to show show the front window tints and a separate movieClip to show the rear window tints, then you should be able to get the result that you want.

[TTinari89]

Thank you for responding, I really appreciate it. I'm unsure what you mean when you say create a movieClip to show the front window tints and a separate movieClip to show the rear window tints. Right now I have (14) symbols created into movieClips with Instance Names button1, button2, button3, etc. all the way to button14. The first (7) buttons link to pages that adds the tints for the front section of the car and the second (7) buttons link to pages that add the tints to the rear section of the car. My problem is getting the front section tint to stay on the car after I click the button to add the rear tint. I want it to function like this car tint simulator... Window Tint Selector | Shades of Gray Window Tinting. I'm not sure what I am doing wrong. Maybe a coding issue in the Actions section? Thank you for your help.

[robdillon]

When you say the buttons link to pages that add the tints, those pages are frames on the main timeline of your movie, right? What you need to do is to take the tint frames for the front windows and place those into a movieClip and do the same for the tints for the rear windows. Then you can control the each of these movieClips with your existing buttons.

I'm guessing that your current code for each button tells the playback head to jump to a new frame on the main timeline. Something like "gotoAndStop(3)" . Using the tint movieClips you will play each clip using the buttons. If, for instance, you name one of the movieClip instances "frontTint" then you could have a button's code be "frontTint.gotoAndStop(3)" . The tint movieClip would work similarly. Using movieClips for each set of tints will let you change one independently from the other.

[TTinari89]

How do I place the tint frames for the front or back windows into a movieClip? The first 7 page frames are for the front tint and the second 7 frames are for the back tint. Would I highlight the first 7 frames and go to Modify / Convert to Symbol...? Sorry to be asking so many questions. Like I said I am brand new to this and told a client I could create this simulator for his website. Thank you so much for your help Rob.

[robdillon]

Again, I don't know how you have your elements laid out on the timeline. If you have the outline of the vehicle in one layer and then the tint elements in a separate layer and whatever else there is, text for instance, in yet another layer, then you can easily get to the tint elements. If everything is combined into the same layer then you'll have to separate things first. Here's a short tutorial on splitting the contents of one layer into many: Distributing Graphics to Layers | Creating Graphics in Adobe Flash CS4 | InformIT

Once you have the tints elements in their own layer, you should have a series of keyframes.

1. Select all of those keyframes in that layer.

2. Right-click on the selection and choose Cut frames from the menu.

3. Go to the Insert menu and select New Symbol. Set this symbol to be a movieClip.

4. The editor window will open. Go to the first frame in this new timeline and right-click. Select Paste frames from the menu.

5. Add a new layer to this timeline.

6. Add this Actionscript to the keyframe in the first frame: stop();

You now have a movieClip in your movie's Library with the frames of the various states of the tint. You can go back to the main timeline and place this movieClip in an appropriate layer. Give this an instance name in the Properties window so that you can control it with Actionscript. Here's the Adobe help file on working with movieClips: Adobe ActionScript 3.0 * Basics of movie clips

[TTinari89]

Thank you so much. Solved it!